-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
177 lines (157 loc) · 5.78 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Pokemon GameBoy CSS-Framework Demo</title>
<meta name="description"
content="A CSS-framework based on the gameboy colour version of the original Pokémon games.">
<link rel="apple-touch-icon"
sizes="180x180"
href="src/apple-touch-icon.png">
<link rel="icon"
type="image/png"
sizes="32x32"
href="src/favicon-32x32.png">
<link rel="icon"
type="image/png"
sizes="16x16"
href="src/favicon-16x16.png">
<link rel="manifest"
href="src/site.webmanifest">
</head>
<body>
<div class="wrapper">
<header>
<h1>Pokemon GameBoy CSS-Framework</h1>
<span>This is a demo of a joke CSS-framework.</span>
</header>
<main>
<section class="framed contains-code">
<h2>Frames</h2>
<p>Frames can be used to clearly indicate sections or menu's.</p>
<div class="viewable-code">
<div class="framed primary">
<span>Frames can be styled with the primary...</span>
</div>
<div class="framed secondary">
<span>... secondary and danger accents.</span>
</div>
<div class="framed danger">
<span>Letters will be outlined when an accent is applied.</span>
</div>
<div class="framed primary exclude-border">
<span>Use the 'exclude-border' class to not draw the accent under the border.</span>
</div>
<div class="framed no-hd">
<span>You can get the frame in it's original (unscaled) size by adding the no-hd class.</span>
</div>
</div>
</section>
<section class="framed contains-code">
<h2>Buttons</h2>
<p>Buttons are recognizable by their text being uppercase. Hover over buttons to see a selection indicator</p>
<div class="viewable-code">
<button>This is an example button</button>
</div>
<p>You can organize buttons like you would see them in Pokémon, either in a list (start-menu) or in a group of 4.</p>
<div class="options viewable-code">
<div>
<h3>Start menu style</h3>
<ul class="framed buttons">
<li><button>Pokédex</button></li>
<li><button>Pokémon</button></li>
<li><button>Item</button></li>
<li><button>Player</button></li>
<li><button>Save</button></li>
<li><button>Option</button></li>
<li><button>Exit</button></li>
</ul>
</div>
<div>
<h3>Battle style</h3>
<ul class="framed buttons compact">
<li><button>Fight</button></li>
<li><button class="pokemon">PKMN</button></li>
<li><button>Item</button></li>
<li><button>Run</button></li>
</ul>
</div>
</div>
</section>
<section class="framed contains-code">
<h2>Progress / Health Bar</h2>
<p>Like in the game, this progress/health bar changes colour when it's low (by default).</p>
<div class="viewable-code">
<div class="progress-bar-container">
<label for="progressBarG">Good health:</label>
<div class="progress-bar p100"
id="progressBarG"></div>
</div>
<div class="progress-bar-container">
<label for="progressBarP">Poor health:</label>
<div class="progress-bar p50"
id="progressBarP"></div>
</div>
<div class="progress-bar-container">
<label for="progressBarL">Low health:</label>
<div class="progress-bar p20"
id="progressBarL"></div>
</div>
<div class="progress-bar-container">
<label for="progressBarF">Forced green color:</label>
<div class="progress-bar p20 primary"
id="progressBarF"></div>
</div>
<div class="progress-bar-container">
<label for="progressBarR">Using <Progress>*:</label>
<progress id="progressBarR"
class="p20"
value="20"
max="100">20%</progress>
</div>
</div>
<em>* On Google Chrome the <Progress> element does not support changing color based on the [value] attribute. Apply a .p1 - .p100 class to the progressbar for maximum compatibility.</em>
</section>
</main>
<div id="githubHint">
<div class="framed neutral github">
<div class="stats">
<h2>Helix Fossil</h2>
<div class="progress-bar-container">
<label for="progressBar">HP:</label>
<div class="progress-bar p45"
id="progressBar"></div>
</div>
</div>
<div class="opponent">
<img src="src/images/helix-hd.png"
alt="">
</div>
<div class="framed">
<p class="message"><span>Helix Fossil:</span> Please come to GitHub and help me make this project better!</p>
<p>
<a href="https://github.com/luttje/css-pokemon-gameboy/"
target="_new"
class="button">Go to GitHub Repo</a>
</p>
<p>
<a onclick="closeGitHubNotice()"
class="button">Close this message</a>
</p>
</div>
</div>
</div>
</div>
<script type="module"
src="/src/demo.ts"></script>
<script>
function closeGitHubNotice() {
document.getElementById('githubHint').classList.add('closed');
}
</script>
</body>
</html>