Skip to content

Commit 5e06413

Browse files
blueimpblueimp
committed
Demo: Update design, layout and demo script.
1 parent da13ebd commit 5e06413

File tree

3 files changed

+67
-98
lines changed

3 files changed

+67
-98
lines changed

‎css/demo.css‎

Lines changed: 48 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
*/
1111

1212
body {
13-
max-width: 750px;
13+
max-width: 990px;
1414
margin: 0 auto;
1515
padding: 1em;
1616
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
1717
Arial, sans-serif;
18+
-webkit-text-size-adjust: 100%;
1819
line-height: 1.4;
1920
background: #212121;
2021
color: #dedede;
@@ -29,65 +30,58 @@ a:visited {
2930
a:hover {
3031
color: #98c379;
3132
}
32-
figure,
33-
tr {
34-
background: #363636;
35-
}
36-
tr:nth-child(odd) {
37-
background: #414141;
38-
}
39-
td,
40-
th {
41-
padding: 10px;
42-
text-align: left;
43-
}
44-
table {
45-
width: 100%;
46-
word-wrap: break-word;
47-
table-layout: fixed;
48-
border-collapse: collapse;
49-
}
50-
figure {
51-
margin: 0;
52-
padding: 10px;
53-
border-radius: 5px;
54-
display: inline-block;
55-
}
56-
figure,
57-
table {
58-
margin-bottom: 20px;
59-
}
60-
img,
61-
canvas {
62-
border: 0;
63-
vertical-align: middle;
64-
}
65-
h1,
66-
h2,
67-
h3,
68-
h4,
69-
h5,
70-
h6 {
71-
margin-top: 1.5em;
72-
margin-bottom: 0.5em;
73-
}
7433
h1 {
7534
margin-top: 0.5em;
35+
margin-bottom: 0.5em;
36+
}
37+
label {
38+
display: inline-block;
39+
margin-bottom: 0.25em;
7640
}
7741
button,
7842
input,
79-
select,
8043
textarea {
44+
-webkit-appearance: none;
8145
box-sizing: border-box;
46+
margin: 0;
47+
padding: 0.5em 0.75em;
8248
font-family: inherit;
8349
font-size: 100%;
84-
line-height: 1.15;
85-
margin: 0;
86-
padding: 5px;
50+
line-height: 1.4;
51+
background: #414141;
52+
color: #dedede;
53+
border: 1px solid #363636;
54+
border-radius: 5px;
55+
box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
56+
}
57+
input,
58+
textarea {
59+
display: block;
60+
width: 100%;
61+
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.07);
8762
}
88-
input[type='file'] {
89-
padding: inherit;
90-
max-width: 100%;
63+
textarea {
64+
display: block;
65+
overflow: auto;
66+
}
67+
button {
68+
background: #3c76a7;
69+
background: linear-gradient(180deg, #3c76a7, #225c8d);
70+
border-color: #225c8d;
71+
color: #fff;
72+
}
73+
button[type='submit'] {
74+
background: #6fa349;
75+
background: linear-gradient(180deg, #6fa349, #568a30);
76+
border-color: #568a30;
77+
}
78+
button[type='reset'] {
79+
background: #d79435;
80+
background: linear-gradient(180deg, #d79435, #be7b1c);
81+
border-color: #be7b1c;
82+
}
83+
button:active {
84+
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
9185
}
9286

9387
@media (prefers-color-scheme: light) {
@@ -104,22 +98,15 @@ input[type='file'] {
10498
a:hover {
10599
color: #6fa349;
106100
}
107-
figure,
108-
tr {
101+
input,
102+
textarea {
109103
background: #fff;
104+
border-color: #d1d1d1;
110105
color: #212121;
111106
}
112-
tr:nth-child(odd) {
113-
background: #f6f6f6;
114-
}
115-
}
116-
117-
#input,
118-
#result {
119-
width: 100%;
120107
}
121108

122-
@media (min-width: 481px) {
109+
@media (min-width: 540px) {
123110
#navigation {
124111
list-style: none;
125112
padding: 0;

‎index.html‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,17 +53,26 @@ <h1>JavaScript MD5 Demo</h1>
5353
<li><a href="test/">Test</a></li>
5454
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
5555
</ul>
56+
<script src="js/md5.js"></script>
5657
<form>
57-
<h2>Input</h2>
58-
<textarea rows="6" id="input"></textarea>
59-
<br />
60-
<button type="submit" id="calculate">Calculate</button>
61-
<button type="reset" id="reset">Reset</button>
62-
<h2>Result</h2>
63-
<input id="result" />
64-
<br />
58+
<p>
59+
<label for="input">Input</label>
60+
<textarea rows="6" id="input"></textarea>
61+
</p>
62+
<p>
63+
<button
64+
type="submit"
65+
id="calculate"
66+
onclick="result.value=md5(input.value);return false"
67+
>
68+
Calculate
69+
</button>
70+
<button type="reset" id="reset">Reset</button>
71+
</p>
72+
<p>
73+
<label for="result">Result</label>
74+
<input id="result" readonly />
75+
</p>
6576
</form>
66-
<script src="js/md5.js"></script>
67-
<script src="js/demo/demo.js"></script>
6877
</body>
6978
</html>

‎js/demo/demo.js‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

0 commit comments

Comments
 (0)