Skip to content

Commit 7c25660

Browse files
valrvalr
committed
rework all (HTML, CSS, JS)
1 parent eaa21ae commit 7c25660

10 files changed

+209
-196
lines changed

‎css/current-time.css

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ body {
99
color: #444;
1010
font-family: "Roboto Mono", monospace;
1111
font-size: 13px;
12-
white-space: pre;
13-
1412
max-width: 100%;
15-
margin: 5px;
16-
padding: 0px;
13+
margin-right: 13px;
14+
white-space: pre;
1715
}

‎css/diff-text.css

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,17 @@
66
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
77

88
body {
9+
color: #444;
10+
font-family: "Roboto Mono", monospace;
11+
font-size: 13px;
912
max-width: 100%;
10-
margin: 0px;
11-
padding: 0px;
13+
margin-right: 13px;
1214
}
1315

1416
table {
1517
width: 100%;
1618
margin: 0px;
17-
padding: 7px 7px 5px 7px;
19+
padding: 0px;
1820
}
1921

2022
.tdvariable {
@@ -24,8 +26,8 @@ table {
2426
}
2527

2628
.tdfixed {
27-
min-width: 7px;
28-
max-width: 7px;
29+
min-width: 13px;
30+
max-width: 13px;
2931
margin: 0px;
3032
padding: 0px;
3133
}
@@ -34,22 +36,19 @@ textarea {
3436
color: #444;
3537
font-family: "Roboto Mono", monospace;
3638
font-size: 13px;
37-
3839
width: 100%;
3940
height: 25vh;
41+
padding: 2px;
4042
resize: none;
4143
overflow: auto;
42-
margin: 0px;
43-
padding: 0px;
4444
}
4545

4646
div {
4747
color: #444;
4848
font-family: "Roboto Mono", monospace;
4949
font-size: 13px;
50-
50+
margin-top: 5px;
5151
white-space: pre;
52-
margin: 0px 5px 10px 10px;
5352
}
5453

5554
ins.char {

‎css/format-xml.css

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,30 @@
66
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
77

88
body {
9+
color: #444;
10+
font-family: "Roboto Mono", monospace;
11+
font-size: 13px;
912
max-width: 100%;
10-
margin: 0px;
11-
padding: 0px;
12-
}
13-
14-
table {
15-
width: 100%;
16-
margin: 0px;
17-
padding: 7px 7px 5px 7px;
13+
margin-right: 13px;
1814
}
1915

2016
textarea {
2117
color: #444;
2218
font-family: "Roboto Mono", monospace;
2319
font-size: 13px;
24-
2520
width: 100%;
2621
height: 25vh;
22+
padding: 2px;
2723
resize: none;
2824
overflow: auto;
29-
margin: 0px;
30-
padding: 0px;
3125
}
3226

3327
div {
3428
color: black;
3529
font-family: "Roboto Mono", monospace;
3630
font-size: 13px;
37-
31+
margin-top: 5px;
3832
white-space: pre;
39-
margin: 0px 5px 10px 10px;
4033
}
4134

4235
span.tag {

‎css/index.css

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,30 @@
88
body {
99
color: #444;
1010
font-family: "Open Sans", sans-serif;
11-
font-size: 18px;
12-
line-height: 1.6;
11+
font-size: 16px;
12+
line-height: 1.5;
1313
max-width: 650px;
14-
margin: 40px auto;
15-
padding: 0 10px;
14+
margin: 64px auto;
1615
}
1716

18-
.image-sphere .sphere,
19-
.image-sphere .sphere img {
20-
border-radius: 100px;
21-
-moz-border-radius: 100px;
22-
-webkit-border-radius: 100px;
17+
.img-sphere .sphere,
18+
.img-sphere .sphere img {
19+
border-radius: 50%;
20+
-moz-border-radius: 50%;
21+
-webkit-border-radius: 50%;
2322
display: block;
2423
margin-left: auto;
2524
margin-right: auto;
2625
}
2726

28-
.image-sphere .sphere {
27+
.img-sphere .sphere {
2928
border: 1px solid #b9b9b9;
3029
width: 128px;
31-
margin-top: 64px;
32-
margin-bottom: 64px;
3330
}
3431

35-
h1,
36-
h2,
37-
h3 {
32+
h1 {
3833
line-height: 1.2;
34+
margin-top: 64px;
3935
}
4036

4137
h1 {
@@ -47,11 +43,11 @@ h1:before,
4743
h1:after {
4844
background-color: #b9b9b9;
4945
content: "";
50-
display: inline-block;
5146
height: 1px;
47+
width: 50%;
48+
display: inline-block;
5249
position: relative;
5350
vertical-align: middle;
54-
width: 50%;
5551
}
5652

5753
h1:before {
@@ -64,8 +60,13 @@ h1:after {
6460
margin-right: -50%;
6561
}
6662

67-
.divtools {
68-
line-height: 2.2;
63+
tr {
64+
line-height: 32px;
65+
}
66+
67+
td {
68+
padding-left: 4px;
69+
padding-right: 8px;
6970
}
7071

7172
a:active,

‎current-time.html

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,21 @@
66
<!DOCTYPE html>
77
<html lang="en">
88
<head>
9-
<title>Current Time</title>
9+
<meta charset="utf-8" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
1011
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
1112
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
12-
<meta name="viewport" content="width=device-width, initial-scale=1" />
13-
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
14-
<link rel="stylesheet" type="text/css" href="css/current-time.css" />
15-
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
16-
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js"></script>
13+
<link rel="icon" href="/favicon.ico" />
14+
<link rel="stylesheet" href="css/current-time.css" />
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js" integrity="sha512-rjmacQUGnwQ4OAAt3MoAmWDQIuswESNZwYcKC8nmdCIxAVkRC/Lk2ta2CWGgCZyS+FfBWPgaO01LvgwU/BX50Q==" crossorigin="anonymous"></script>
17+
<title>Current time</title>
1718
</head>
1819
<body>
1920
<script>
20-
urlParams = new URLSearchParams(window.location.search);
21-
if (urlParams.has("time") === true) {
22-
time = moment(urlParams.get("time"), moment.ISO_8601);
21+
URLParams = new URLSearchParams(window.location.search);
22+
if (URLParams.has("time") === true) {
23+
time = moment(URLParams.get("time"), moment.ISO_8601);
2324
} else {
2425
time = moment();
2526
}
@@ -30,9 +31,9 @@
3031
timeBrussels = moment.tz(time, "Europe/Brussels").format();
3132

3233
document.body.innerHTML =
33-
"UTC : " + timeUTC + "<br>" +
34-
"Europe/London : " + timeLondon + "<br>" +
35-
"Europe/Paris : " + timeParis + "<br>" +
34+
"UTC : " + timeUTC + "<br />" +
35+
"Europe/London : " + timeLondon + "<br />" +
36+
"Europe/Paris : " + timeParis + "<br />" +
3637
"Europe/Brussels : " + timeBrussels;
3738
</script>
3839
</body>

‎diff-text.html

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,88 +6,91 @@
66
<!DOCTYPE html>
77
<html lang="en">
88
<head>
9-
<title>Diff Text</title>
9+
<meta charset="utf-8" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
1011
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
1112
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
12-
<meta name="viewport" content="width=device-width, initial-scale=1" />
13-
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
14-
<link rel="stylesheet" type="text/css" href="css/diff-text.css" />
13+
<link rel="icon" href="/favicon.ico" />
14+
<link rel="stylesheet" href="css/diff-text.css" />
1515
<script src="js/diff_match_patch_uncompressed.js"></script>
16+
<title>Diff text</title>
1617
</head>
1718
<body>
1819
<table>
1920
<tr>
2021
<td class="tdvariable"><textarea id="text1" wrap="off" autofocus></textarea></td>
21-
<td class="tdfixed" ondblclick="swap_text_content()"></td>
22+
<td class="tdfixed" ondblclick="swapText()"></td>
2223
<td class="tdvariable"><textarea id="text2" wrap="off"></textarea></td>
2324
</tr>
2425
</table>
25-
<div id="text3" ondblclick="switch_diff_mode()"></div>
26+
<div id="text3" ondblclick="switchMode()"></div>
2627

2728
<script>
28-
var mode = "line";
29+
var diffProcess = new diff_match_patch();
30+
diffProcess.Diff_Timeout = 0; // no timeout
31+
2932
var text1 = document.getElementById("text1");
3033
var text2 = document.getElementById("text2");
3134
var text3 = document.getElementById("text3");
3235

33-
var diff_process = new diff_match_patch();
34-
diff_process.Diff_Timeout = 0; // no timeout
35-
36-
switch_diff_mode();
36+
var mode = "line";
37+
switchMode();
3738

38-
function diff_char() {
39-
var diff_result = diff_process.diff_main(text1.value, text2.value);
40-
diff_process.diff_cleanupSemantic(diff_result);
41-
text3.innerHTML = diff_html(diff_result, "&para;<br>", "&para;<br>", "<br>");
39+
function diffChar() {
40+
var diffResult = diffProcess.diff_main(text1.value, text2.value);
41+
diffProcess.diff_cleanupSemantic(diffResult);
42+
text3.innerHTML = diffHTML(diffResult, "&para;<br />", "&para;<br />", "<br />");
4243
}
4344

44-
function diff_line() {
45+
function diffLine() {
4546
// line mode requires complete lines
46-
diff_text1 = text1.value + (text1.value.endsWith("\n") ? "" : "\n");
47-
diff_text2 = text2.value + (text2.value.endsWith("\n") ? "" : "\n");
48-
49-
var diff_ln2chr = diff_process.diff_linesToChars_(diff_text1, diff_text2);
50-
var diff_result = diff_process.diff_main(diff_ln2chr.chars1, diff_ln2chr.chars2, false);
51-
diff_process.diff_charsToLines_(diff_result, diff_ln2chr.lineArray);
52-
// diff_process.diff_cleanupSemantic(diff_result); // this seems to break the line diff result
47+
diffText1 = text1.value + (text1.value.endsWith("\n") ? "" : "\n");
48+
diffText2 = text2.value + (text2.value.endsWith("\n") ? "" : "\n");
5349

54-
text3.innerHTML = diff_html(diff_result, "<br>", "<br>", "<br>");
50+
var diffLn2Chr = diffProcess.diff_linesToChars_(diffText1, diffText2);
51+
var diffResult = diffProcess.diff_main(diffLn2Chr.chars1, diffLn2Chr.chars2, false);
52+
diffProcess.diff_charsToLines_(diffResult, diffLn2Chr.lineArray);
53+
// diffProcess.diff_cleanupSemantic(diffResult); // this seems to break the line diff result
54+
text3.innerHTML = diffHTML(diffResult, "<br />", "<br />", "<br />");
5555
}
5656

57-
function diff_html(diffs, ins_eol, del_eol, equ_eol) {
57+
function diffHTML(diffText, insEOL, delEOL, equEOL) {
5858
var html = [];
59-
for (var x = 0; x < diffs.length; x++) {
60-
var oper = diffs[x][0]; // operation: insert, delete, equal
61-
var data = diffs[x][1]; // text of change
59+
60+
for (var x = 0; x < diffText.length; x++) {
61+
var oper = diffText[x][0]; // operation: insert, delete or equal
62+
var data = diffText[x][1]; // text of operation
6263
var text = data.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
64+
6365
switch (oper) {
6466
case DIFF_INSERT:
65-
html[x] = '<ins class="' + mode + '">' + text.replace(/\n/g, ins_eol) + "</ins>";
67+
html[x] = "<ins class='" + mode + "'>" + text.replace(/\n/g, insEOL) + "</ins>";
6668
break;
6769
case DIFF_DELETE:
68-
html[x] = '<del class="' + mode + '">' + text.replace(/\n/g, del_eol) + "</del>";
70+
html[x] = "<del class='" + mode + "'>" + text.replace(/\n/g, delEOL) + "</del>";
6971
break;
7072
case DIFF_EQUAL:
71-
html[x] = "<span>" + text.replace(/\n/g, equ_eol) + "</span>";
73+
html[x] = "<span>" + text.replace(/\n/g, equEOL) + "</span>";
7274
break;
7375
}
7476
}
77+
7578
return html.join("");
7679
}
7780

78-
function swap_text_content() {
81+
function swapText() {
7982
var tmp = text1.value;
8083
text1.value = text2.value;
8184
text2.value = tmp;
82-
text2.onchange();
85+
text2.onchange(); // trigger the refresh
8386
}
8487

85-
function switch_diff_mode() {
88+
function switchMode() {
8689
mode = mode === "line" ? "char" : "line";
8790
text1.onkeyup = text2.onkeyup =
8891
text1.onpaste = text2.onpaste =
89-
text1.onchange = text2.onchange = mode === "line" ? diff_line : diff_char;
90-
text2.onchange();
92+
text1.onchange = text2.onchange = mode === "line" ? diffLine : diffChar;
93+
text2.onchange(); // trigger the refresh
9194
}
9295
</script>
9396
</body>

0 commit comments

Comments
 (0)