-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (170 loc) · 6.64 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
<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="morphy.css" rel="stylesheet">
<title>Morphy.css showcase</title>
</head>
<body style="background-color: var(--mc-bg-color); font-family: sans-serif;">
<h1>Morphy.css showcase</h1>
<p>
This page is meant to be a showcase of what <a href="https://github.com/DangerOnTheRanger/morphy-css">Morphy.css</a> is capable of,
both in terms of the built-in widgets it provides, and UIs that you can build with it.
</p>
<h2>Built-in components</h2>
<h3>Progress bars</h3>
<p>
Right now, Morphy.css doesn't support indeterminate progress bars.
</p>
<p>
<progress value="45" max="100"></progress>
</p>
<h3>Preformatted text</h3>
<p>
(The syntax highlighting is provided by <a href="https://pygments.org/">Pygments</a>, not Morphy.css.)
</p>
<p>
<pre style="line-height: 125%"><span></span><span style="color: #008000; font-weight: bold">def</span> <span style="color: #0000FF">calc_frequency</span>(l):
freqs <span style="color: #666666">=</span> {}
<span style="color: #008000; font-weight: bold">for</span> num <span style="color: #AA22FF; font-weight: bold">in</span> l:
freqs[num] <span style="color: #666666">=</span> freqs<span style="color: #666666">.</span>get(num, <span style="color: #666666">0</span>) <span style="color: #666666">+</span> <span style="color: #666666">1</span>
<span style="color: #008000; font-weight: bold">return</span> freqs
</pre>
</p>
<form action="#">
<h3>Dropdowns</h3>
<p>
<select>
<option>Madoka Kaname</option>
<option>Homura Akemi</option>
<option>Mami Tomoe</option>
<option>Kyoko Sakura</option>
<option>Sayaka Miki</option>
</select>
</p>
<h3>Sliders</h3>
<p>
<input type="range" min="1" max="100" value="50">
</p>
<h3>Text entry</h3>
<p>
<input type="text" placeholder="Enter some text">
</p>
<p>
<textarea>Textarea</textarea>
</p>
<h3>Buttons</h3>
<p>
<input type="checkbox" id="checkbox">
<label for="checkbox">Checkbox</label>
</p>
<p>
<input type="radio" id="radio1" name="radio">
<label for="radio1">Radio #1</label>
<input type="radio" id="radio2" name="radio">
<label for="radio2">Radio #2</label>
<input type="radio" id="radio3" name="radio">
<label for="radio3">Radio #3</label>
</p>
<input type="submit" value="Submit">
</form>
<h3>Tables</h3>
<p>
<table style="width: 50%;">
<tr>
<th>Joestar</th>
<th>Stand</th>
</tr>
<tr>
<td>Joseph</td>
<td>Hermit Purple</td>
</tr>
<tr>
<td>Jotaro</td>
<td>Star Platinum</td>
</tr>
<tr>
<td>Josuke</td>
<td>Crazy Diamond</td>
</tr>
<tr>
<td>Giorno</td>
<td>Gold Experience</td>
</tr>
<tr>
<td>Jolyne</td>
<td>Stone Free</td>
</tr>
</table>
</p>
<h2>Bigger examples</h2>
<p>These are some examples of using the Morphy.css mixin classes in conjuction with its styled HTML widgets.</p>
<h3>Clock</h3>
<p>This clock is made with two nested div elements, the outer using the <code>mc-raised-large</code> class, and the inner
using the <code>mc-lowered</code> class. This gives the illusion of a raised surface with a slight indent inside it.</p>
<p>
<div class="mc-bg-color mc-raised-large" style="width: 200px; height: 200px; border-radius: 50%; display: flex; justify-content: center; align-items: center;">
<div class="mc-bg-color mc-lowered" style="width: 175px; height: 175px; border-radius: 50%; display: flex; justify-content: center; align-items: center;">
<span style="font-weight: bold; font-size: 2em;">9:04PM</span>
</div>
</div>
</p>
<h3>Music player</h3>
<p>The same trick as with the clock is used for the album art, and the buttons use Unicode characters.</p>
</p>
<p>
<div class="mc-bg-color mc-raised-large" style="width: 400px; height: 500px; padding-top: 25px; border-radius: 25px;">
<div class="mc-lowered" style="width: 175px; height: 175px; width: 50%; margin: 0 auto; padding: 30px; padding-bottom: 60px; border-radius: 15px;">
<img src="blink.jpg" style="max-width: 100%; height: auto;">
</div>
<div style="text-align: center; margin: 10px;">
<span style="font-weight: bold; font-size: 1.5em;">blink-182</span>
<br />
<span style="font-size: 1.5em;">Greatest Hits</span>
<br />
<span style="font-size: 1.5em;">All The Small Things</span>
</div>
<div style="margin: 0 auto; width: 55%;">
<button>❚◀</button>
<button>▮▮</button>
<button>▶</button>
<button>▶❚</button>
</div>
<br />
<div style="margin: 0 auto; width: 85%;">
<span>0:49</span>
<input type="range" min="1" max="100" value="29">
<span>2:51</span>
</div>
</div>
</p>
<h3>Chat window</h3>
<p>
<div class="mc-bg-color mc-raised-large" style="width:400px; height: 500px; border-radius: 25px; padding-top: 50px;">
<div class="mc-bg-color mc-lowered" style="width: 350px; height: 400px; border-radius: 25px; margin: 0 auto;">
<div class="mc-bg-color mc-raised-small" style="width: 200px; height: 50px; float: right; margin-top: 25px; margin-right: 25px; line-height: 50px; text-align: center; border-radius: var(--mc-border-rounded);">
<span>Can you hear me now?</span>
</div>
<div class="mc-bg-color mc-raised-small" style="width: 200px; height: 50px; float: left; margin-top: 25px; margin-left: 25px; line-height: 50px; text-align: center; border-radius: var(--mc-border-rounded);">
<span>Yes.</span>
</div>
<div class="mc-bg-color mc-raised-small" style="width: 200px; height: 50px; float: right; margin-top: 25px; margin-right: 25px; line-height: 50px; text-align: center; border-radius: var(--mc-border-rounded);">
<span>Good.</span>
</div>
<div class="mc-bg-color mc-raised-small" style="width: 200px; height: 50px; float: right; margin-top: 25px; margin-right: 25px; line-height: 50px; text-align: center; border-radius: var(--mc-border-rounded);">
<span>What is a man?</span>
</div>
<div class="mc-bg-color mc-raised-small" style="width: 200px; height: 50px; float: left; margin-top: 25px; margin-left: 25px; line-height: 25px; text-align: center; border-radius: var(--mc-border-rounded);">
<span>A miserable little pile of secrets.</span>
</div>
</div>
<div style="padding: 25px;">
<input type="text" placeholder="Enter a message">
<button type="button">Send</button>
<button type="button">😁</button>
</div>
</div>
</p>
</body>
</html>