-
Notifications
You must be signed in to change notification settings - Fork 0
/
sample.html
237 lines (202 loc) · 11 KB
/
sample.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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html style="height: 100%">
<head>
<title>JuNe CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="theme-color" content="#FEA700">
<meta name="color-scheme" content="dark light">
<link rel="stylesheet" href="june-cssfa.css">
<script>
function shake(o) {
o.addEventListener('animationend', () => o.classList.toggle('shake'));
o.classList.toggle('shake');
}
function colorScheme(c) {
const d = window.matchMedia('(prefers-color-scheme: dark)').matches, l = localStorage.getItem('colorScheme');
if(!c || (c && ((d && l === 'light') || (!d && l === 'dark'))))
document.documentElement.classList.toggle((d) ? 'light' : 'dark');
const e = document.documentElement.classList.contains((d) ? 'light' : 'dark');
const v = (e) ? ((d) ? 'light' : 'dark') : null;
localStorage.setItem('colorScheme', v);
document.getElementById('colorScheme').checked = ((e && v === 'dark') || (!e && d));
}
window.addEventListener('load', () => colorScheme(true));
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', m => colorScheme(true));
</script>
</head>
<body>
<div class="main">
<header style="z-index: 2; height: 64px; background: #C80" class="tc">
<div style="float: left; padding-top: 20px">
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" style="background:red"><span></span><span></span><span></span>
<ul id="menu">
<a href="#"><li>Menu 1</li></a>
<a href="#"><li>Menu 2</li></a>
</ul>
</div>
</nav>
</div>
<a href="https://github.com/EduardoRuizM/june-css" target="_blank"><img src="logo.png" style="height: 60px"></a>
<div style="float: right"><input id="colorScheme" type="checkbox" class="switch" onclick="colorScheme()" style="--checked: '\1F311'; --unchecked: '\2600\FE0F'"></div>
<div style="height: 22px" class="theme">
<nav class="mobn menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropcnt">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
</div>
</header>
<div style="height: 86px"> </div><!-- Same height as header to avoid up hidden content text -->
<section class="cards lh">
<h1>JuNe CSS style classes</h1>
Normal text • <a href="#">Default Link style</a><br><br>
<h2>Dark style</h2>
<div class="ov bgd">
Dark text (class="bgd")<br>
<a href="#" class="dlnk">Link (class="dlnk")</a><br>
<a href="#">Link style</a>
</div><br>
<h2>Theme style</h2>
<div class="ov theme">
Theme text (class="theme")<br>
<a href="#" class="tlnk">Link (class="tlnk")</a><br>
</div><br>
<h2>ToolTip, Required and Small</h2>
<span data-tooltip="❓ Help">ToolTipText (data-tooltip="❓ Help")</span> •
<span class="req">Required (class="required")</span> •
<span class="sm">Small (class="sm")</span><br><br>
<h2>Inputs</h2>
(class="txt")<br>
<select><option>Option 1</option><option>Option 2</option></select>
<select disabled><option>Option 1</option><option>Option 2</option></select>
<input type="text" class="txt" value="Text">
<input type="text" class="txt" disabled value="Disabled">
<input type="text" class="txt" readonly value="Readonly">
<input type="email" class="txt" value="Email invalid"><br><br>
<textarea class="txt" placeholder="Textarea"></textarea>
<textarea class="txt" disabled placeholder="Disabled"></textarea>
<textarea class="txt" readonly placeholder="Readonly"></textarea><br>
<h2>Groups</h2>
<div class="txtgrp">
<div>$</div>
<input type="text" value="Hi">
<button class="button green">B1</button>
<button class="button">B2</button>
</div>
<br>
<div class="txtgrp">
<button class="button">Check</button>
<input type="text" value="4.99">
<div>$</div>
</div>
<br>
<div class="txtgrp">
<div>$</div>
<input type="text" value="Hi" disabled>
<button class="button green" disabled>B1</button>
<button class="button" disabled>B2</button>
</div><br>
<h2>Input checkbox Switch</h2>
<input type="checkbox" class="switch"> <input type="checkbox" class="switch" checked> (type=checkbox class="switch")
<input type="checkbox" class="switch" disabled> <input type="checkbox" class="switch" checked disabled> Disabled
<input type="checkbox" checked> (with accent-color) <input type="radio" name="rad" checked><input type="radio" name="rad"><br>
<input type="checkbox" class="switch" checked style="--checked: '\2714\FE0F'; --unchecked: '\274C'"> <input type="checkbox" class="switch" style="--checked: '\2714\FE0F'; --unchecked: '\274C'"> Use styles for unicode style="--checked: '\2714\FE0F'; --unchecked: '\274C'"<br>
<input type="checkbox" class="switch" checked style="--top: -.2em; --checked: '\1F441\FE0F'; --unchecked: ' '"> Use styles for unicode style="--top: -.2em;--checked: '\1F441\FE0F'; --unchecked: ' '"
<br>Use <b>--top</b> to adjust/customize top position (depending on the character)<br><br>
<h2>Buttons</h2>
<table>
<tr><td><button class="button">Button</button></td><td>(class="button")</td><td><button class="button" disabled>Button</button></td><td>(disabled class="button")</td></tr>
<tr><td><button class="button blue">Button</button></td><td>(class="button blue")</td><td><button class="button blue" disabled>Button</button></td><td>(disabled class="button blue")</td></tr>
<tr><td><button class="button red">Button</button></td><td>(class="button red")</td><td><button class="button red" disabled>Button</button></td><td>(disabled class="button red")</td></tr>
<tr><td><button class="button green">Button</button></td><td>(class="button green")</td><td><button class="button green" disabled>Button</button></td><td>(disabled class="button green")</td></tr>
<tr><td><button class="button gray">Button</button></td><td>(class="button gray")</td><td><button class="button gray" disabled>Button</button></td><td>(disabled class="button gray")</td></tr>
<tr><td><button class="button black">Button</button></td><td>(class="button black")</td><td><button class="button black" disabled>Button</button></td><td>(disabled class="button black")</td></tr>
</table><br>
<h2>Text align: tl (left), tc (center), tj (justify), tr (right)</h2>
<h2>Vertical align: vt (top), vm (middle), vb (bottom)</h2>
<div style="width: 250px" class="ib ov gray tl"><b>Left</b> (class="ib ov tl")</div>
<div style="width: 250px" class="ib ov gray tc"><b>Center</b> (class="ib ov tc")</div>
<div style="width: 250px" class="ib ov gray tj"><b>Justify</b> (class="ib ov tj")</div>
<div style="width: 250px" class="ib ov gray tr"><b>Right</b> (class="ib ov tr")</div><br><br>
<h2>Loaders</h2>
<i style="--size: 40px" class="loader1"></i><i style="--size: 40px" class="loader1"></i>
<i class="loader2"></i><i class="loader2"></i><br><br>
<h2>Responsive columns (change window size to watch changes)</h2>
</section>
<section class="cards">
<div class="card50 tc" style="background: #CCD">50%</div><div class="card25 tc" style="background: #CEE">25%</div><div class="card25 tc" style="background: #C88">25%</div>
</section>
<br>
<section class="cards">
<div class="card40 tc" style="background: #8CF">40%</div><div class="card60 tc" style="background: #CEA">60%</div>
</section>
<br>
<section class="cards">
<div class="card33 tc" style="background: #CCD">33%</div><div class="card33 tc" style="background: #CEE">33%</div><div class="card33 tc" style="background: #ECE">33%</div>
</section>
<br>
<section class="cards">
<div class="card25 tc" style="background: #CCC">25%</div><div class="card25 tc" style="background: #BDA">25%</div><div class="card25 tc" style="background: #F88">25%</div><div class="card25 tc" style="background: #BDA">25%</div>
</section>
<section class="cards">
<h2>Responsive Table (change window size to watch changes)</h2>
<table width="100%" class="rtbl">
<thead>
<tr>
<th><a href="#">Column1</a></th>
<th>Column2</th>
<th>Column3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-cn="Column1"><a href="#">Value 1.1</a></td>
<td data-cn="Column2">Value 1.2</td>
<td data-cn="Column3">Value 1.3</td>
</tr>
<tr>
<td data-cn="Column1"><a href="#">Value 2.1</a></td>
<td data-cn="Column2">Value 2.2</td>
<td data-cn="Column3">Value 2.3</td>
</tr>
<tr>
<td data-cn="Column1"><a href="#">Value 3.1</a></td>
<td data-cn="Column2">Value 3.2</td>
<td data-cn="Column3">Value 3.3</td>
</tr>
</tbody>
</table><br>
<div class="box"><h3>class="box"</h3></div><br>
<div class="box boxlnk vt ib"><h3>class="box boxlnk"</h3></div>
<div class="box vt ib cp nosel" onclick="shake(this)"><h3>Click to shake</h3>(JS function requires)</div>
<h2>Badge</h2>
(class="badge" data-badge="88")<br>
With optional colors (class="badge" data-badge="2" style="--badgefg: var(--jcclr); --badgebg: var(--jcbgray)")<br><br>
<span class="badge" data-badge="88">Badge default</span>
<span class="badge" data-badge="5" style="--badgebg: var(--jcbred)">Badge change background</span>
<span class="badge" data-badge="2" style="--badgefg: var(--jcclr); --badgebg: var(--jcbgray)">Badge colors</span><br><br>
<h2><a href="https://fontawesome.com" target="_blank">Font Awesome</a></h2>
<i class="fa-solid fa-computer fa-2x"></i><i class="fa-solid fa-computer fa-2x"></i>
<i class="fas fa-spinner fa-spin fa-2x"></i><i class="fas fa-spinner fa-spin fa-2x"></i><br><br>
<i class="fa-solid fa-heart fa-beat fa-2x"></i><i class="fa-solid fa-heart fa-beat fa-2x"></i>
<i class="fa-solid fa-camera-rotate fa-flip fa-2x"></i><i class="fa-solid fa-camera-rotate fa-flip fa-2x"></i>
</section>
<div style="height: 110px"></div><!-- Same height as footer to avoid bottom hidden content text -->
<footer style="position: absolute; bottom: 0; width: 100%">
<div style="height: 40px; padding-top: 14px" class="bgd tc">Try <a href="https://paulajs.com" target="_blank">PaulaJS</a></div>
<div style="height: 18px; color: #FFF; background: #171717" class="bgd sm tc">Powered by <a href="https://github.com/EduardoRuizM/june-css" target="_blank">JuNe CSS</a></div>
</footer>
</div>
</body>
</html>