-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
52 lines (47 loc) · 3.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<title>Portsmouth MMC</title>
<div class="grid-container">
<header>
<h1>The Mission Model Canvas</h1>
<div>
<label for="mmd">Mission/Problem Description</label>
<p id="mmd" contenteditable>edit</p>
</div>
<div>
<label for="by">Designed by</label>
<p id="by" contenteditable>edit</p>
</div>
<img id="help" src="i/help.svg" alt="help">
</header>
<div class="grid-item" id="kp"><h2 id="hkp">Key Partners <img aria-labelledby="hkp" src="i/kp.svg"></h2><section id="ekp" class="e" contenteditable="true"></section></div>
<div class="grid-item" id="ka"><h2 id="hka">Key Activities <img aria-labelledby="hka" src="i/ka.svg"></h2><section id="eka" class="e" contenteditable="true"></section></div>
<div class="grid-item" id="vp"><h2 id="hvp">Value Propositions <img aria-labelledby="hvp" src="i/vp.svg"></h2><section id="evp" class="e" contenteditable="true"></section></div>
<div class="grid-item" id="bs"><h2 id="hbs">Buy-in Support <img aria-labelledby="hbs" src="i/bs.svg"></h2><section id="ebs" class="e" contenteditable="true"></section></div>
<div class="grid-item" id="be"><h2 id="hbe">Beneficiaries <img aria-labelledby="hbe" src="i/be.svg"></h2><section id="ebe" class="e" contenteditable="true"></section></div>
<div class="grid-item" id="kr"><h2 id="hkr">Key Resources <img aria-labelledby="hkr" src="i/kr.svg"></h2><section id="ekr" class="e" contenteditable="true"></section></div>
<div class="grid-item" id="de"><h2 id="hde">Deployment <img aria-labelledby="hde" src="i/de.svg"></h2><section id="ede" class="e" contenteditable="true"></section></div>
<div class="grid-item" id="mb"><h2 id="hmb">Mission Budget/Cost <img aria-labelledby="hmb" src="i/mb.svg"></h2><section id="emb" class="e" contenteditable="true"></section></div>
<div class="grid-item" id="if"><h2 id="hif">Mission Achievement/Impact Factors <img aria-labelledby="hif" src="i/if.svg"></h2><section id="eif" class="e" contenteditable="true"></section></div>
<footer>
<p>This work is licensed under the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)</a>
<p><span>Designed by:</span> Strategyzer AG & Steve Blank. Built for the web at Uni. of Portsmouth.
</footer>
</div>
<dialog id="usage">
<h1>Using the Mission Model Canvas.</h1>
<p>The MMC comprises nine sections ("Key Partners", "Key Activities", etc).
<h2>Editing</h2>
<p><strong>Click</strong> a section to begin editing it: a highlight will appear and you'll see a flashing caret where you can enter text.
<p><strong>Click outside</strong> a section or press <span class="key">Escape</span> to stop editing.
<h2>Defocusing</h2>
<p><strong><span class="key">Shift</span>-click</strong> a section to defocus it (it will blend more into the background).
<p><strong>Type</strong> in any defocused area to automatically refocus it.
<h2>Reset</h2>
<p><span class="key">Ctrl</span>+<span class="key">Escape</span> opens a dialog that will allow you to remove all your text from the page.</p>
<button id="usage-close">OK</button>
</dialog>