-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (104 loc) · 5.24 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>HTML5 localStorage API Demo</title>
<link href="dist/css/style.css" rel="stylesheet" type="text/css">
<script src="dist/js/script.js" type="text/javascript" charset="utf-8"></script>
</head>
<body data-editable>
<span class="github_fork">
<a href="https://github.com/whizkydee/html5-localstorage">Fork me on GitHub</a>
</span>
<section class="main_page">
<h1 data-editable>Hello there. This is a <span class="code">localStorage</span> demo.</h1>
<p data-editable>Play around with the HTML5 localStorage API</p>
<section class="edit">
<h3>Edit:</h3>
<button
type="button"
data-editable
data-modal-desc="This controls the base <span>font-family</span> and <span>font-size</span>"
data-modal-label="Font Family,Font Size">
Font
</button>
<button
type="button"
data-editable
data-modal-desc="This controls the text <span>color</span> and the <span>body</span> background"
data-modal-label="Text Color,Body Background">
Colors
</button>
<button
type="button"
data-editable
data-modal-desc="This modifies the text of the heading and paragraph"
data-modal-label="Heading,Paragraph">
Text
</button>
<button
type="button"
data-editable
data-modal-desc="This controls the <span>background</span> and <span>:hover</span> of the buttons"
data-modal-label="Button Background,Button Hover Background">
Buttons
</button>
<button
type="button"
data-editable
data-modal-desc="This controls the color scheme of elements on the page"
data-modal-label="Choose a theme...">
Theme
</button>
</section>
<button id="clear">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
<path d="M341,128V99c0-19.1-14.5-35-34.5-35H205.4C185.5,64,171,79.9,171,99v29H80v32h9.2c0,0,5.4,0.6,8.2,3.4c2.8,2.8,3.9,9,3.9,9
l19,241.7c1.5,29.4,1.5,33.9,36,33.9h199.4c34.5,0,34.5-4.4,36-33.8l19-241.6c0,0,1.1-6.3,3.9-9.1c2.8-2.8,8.2-3.4,8.2-3.4h9.2v-32
h-91V128z M192,99c0-9.6,7.8-15,17.7-15h91.7c9.9,0,18.6,5.5,18.6,15v29H192V99z M183.5,384l-10.3-192h20.3L204,384H183.5z
M267.1,384h-22V192h22V384z M328.7,384h-20.4l10.5-192h20.3L328.7,384z"/>
</svg>
Clear all
</button>
<footer>
<section>
Designed with <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64">
<path d="M47.199 4c-6.727 0-12.516 5.472-15.198 11.188-2.684-5.715-8.474-11.188-15.201-11.188-9.274 0-16.8 7.527-16.8 16.802 0 18.865 19.031 23.812 32.001 42.464 12.26-18.536 31.999-24.2 31.999-42.464 0-9.274-7.527-16.802-16.801-16.802z"></path>
</svg> by <a href="https://github.com/whizkydee">Olaolu.</a>
</section>
<section>
<a href="" target="blank">← Read the Article.</a>
</section>
</footer>
</section>
<div class="edit__modal">
<h3></h3>
<span class="edit_text"></span>
<button id="close_modal">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M 10.050,23.95c 0.39,0.39, 1.024,0.39, 1.414,0L 17,18.414l 5.536,5.536c 0.39,0.39, 1.024,0.39, 1.414,0 c 0.39-0.39, 0.39-1.024,0-1.414L 18.414,17l 5.536-5.536c 0.39-0.39, 0.39-1.024,0-1.414c-0.39-0.39-1.024-0.39-1.414,0 L 17,15.586L 11.464,10.050c-0.39-0.39-1.024-0.39-1.414,0c-0.39,0.39-0.39,1.024,0,1.414L 15.586,17l-5.536,5.536 C 9.66,22.926, 9.66,23.56, 10.050,23.95z"></path></g></svg>
</button>
<section class="modal_actions">
<label for="input1"></label>
<input data-controller type="text" id="input1" />
<label for="input2"></label>
<input data-controller type="text" id="input2" />
<section id="theme_selector">
<button class="theme_btn">Teal</button>
<button class="theme_btn">Blue</button>
<button class="theme_btn">Tomato</button>
<button class="theme_btn">BlueViolet</button>
<label data-checkbox-controller for="checkbox">Make button style outset? <input type="checkbox" id="checkbox"></label>
</section>
<section id="user_actions">
<button type="button" id="save">Save</button>
<button type="button" id="reset">Reset</button>
</section>
</section>
</div>
<script type="text/javascript" charset="utf-8">
/* Disable scroll */
var keys = {37: 1, 39: 1}; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function preventDefaultForScrollKeys(e) { if (keys[e.keyCode]) { preventDefault(e); return false; } } function disableScroll() { if (window.addEventListener) window.addEventListener('DOMMouseScroll', preventDefault, false); window.onwheel = preventDefault; window.onmousewheel = document.onmousewheel = preventDefault; window.ontouchmove = preventDefault; document.onkeydown = preventDefaultForScrollKeys; } disableScroll();
</script>
</body>
</html>