Skip to content

Instantly share code, notes, and snippets.

@wietlol

wietlol/diff-example.html Secret

Created June 30, 2022 12:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wietlol/aa2157ef909ac0b5a2f364377b331e2d to your computer and use it in GitHub Desktop.
Save wietlol/aa2157ef909ac0b5a2f364377b331e2d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
diff-example.html
<html class="theme-light" lang="en">
<head>
<title>title</title>
<meta charset="UTF-8">
<style>
:root {
--basic-white: #ffffff;
--basic-white-shadow: #ffffff10;
--basic-black: #1d2027;
--basic-black-shadow: #1d202710;
--theme-light-pale--added-background: #B8F4B8;
--theme-light-pale--edited-background: #B9C9ED;
--theme-light-pale--removed-background: #FFC0C0;
--theme-light-pale--ignored-background: #DCDCDC;
--theme-dark-pale--added-background: #568B56;
--theme-dark-pale--edited-background: #4C5874;
--theme-dark-pale--removed-background: #AD6B6B;
--theme-dark-pale--ignored-background: #696969;
--theme-dark-idea--added-background: #447152;
--theme-dark-idea--edited-background: #43698D;
--theme-dark-idea--removed-background: #8F5247;
--theme-dark-idea--ignored-background: #656E76;
--coolors-white: #fafffd;
--coolors-white-tint-1: #edf2f0;
--coolors-white-tint-2: #e1e6e4;
--coolors-white-tint-3: #d4d9d7;
--coolors-white-tint-4: #c7ccca;
--coolors-white-tint-5: #babfbd;
--coolors-white-tint-6: #aeb3b1;
--coolors-white-tint-7: #a1a6a4;
--coolors-black: #342e37;
--coolors-black-tint-1: #413a45; /* + 5% lightness */
--coolors-black-tint-2: #4e4553; /* +10% lightness */
--coolors-black-tint-3: #5b5161; /* +15% lightness */
--coolors-black-tint-4: #695c6f; /* +20% lightness */
--coolors-black-tint-5: #76687c; /* +25% lightness */
--coolors-black-tint-6: #83748a; /* +30% lightness */
--coolors-black-tint-10: #b4abb9; /* +50% lightness */
}
:root, html.theme-light {
--color-layer-main-back: var(--coolors-white);
--color-layer-main-back-shadow: var(--basic-black-shadow);
--color-layer-main-border: var(--coolors-black);
--color-layer-main-front: var(--coolors-black);
--color-special-added-background: var(--theme-light-pale--added-background);
--color-special-edited-background: var(--theme-light-pale--edited-background);
--color-special-removed-background: var(--theme-light-pale--removed-background);
--color-special-ignored-background: var(--theme-light-pale--ignored-background);
}
html.theme-dark {
/*noinspection CssUnknownProperty*/
color-scheme: dark;
--color-layer-main-back: var(--coolors-black);
--color-layer-main-back-shadow: var(--basic-white-shadow);
--color-layer-main-border: var(--coolors-white);
--color-layer-main-front: var(--coolors-white);
--color-special-added-background: var(--theme-dark-idea--added-background);
--color-special-edited-background: var(--theme-dark-idea--edited-background);
--color-special-removed-background: var(--theme-dark-idea--removed-background);
--color-special-ignored-background: var(--theme-dark-idea--ignored-background);
}
body {
margin: 0;
padding: 1vw;
color: var(--color-layer-main-front);
background: var(--color-layer-main-back);
}
.diff {
width: 100%;
box-shadow: 0 4px 8px 0 var(--color-layer-main-back-shadow);
overflow-y: auto;
}
.block {
font-family: monospace;
counter-reset: lineNumber;
overflow: auto;
}
.block::before {
counter-reset: lineNumber;
}
.block .line {
white-space: pre-wrap;
padding-right: 100px;
width: 100%;
}
.block .line:not(.empty) {
counter-increment: lineNumber;
}
.block .line::before {
content: " ";
display: inline-block;
width: 54px;
/*padding-left: auto;*/
margin-left: auto;
margin-right: 14px;
border-right: 1px solid var(--color-layer-main-front);
text-align: right;
}
.block .line:not(.empty)::before {
content: counter(lineNumber) "";
}
.block > table {
min-width: 100%;
}
.added {
background: var(--color-special-added-background);
/*background: #8AD18A;*/
/*background: #2D882D;*/
}
.edited {
background: var(--color-special-edited-background);
/*background: #7C8DB3;*/
/*background: #2E4172;*/
}
.removed {
background: var(--color-special-removed-background);
/*background: #FFA8A8;*/
/*background: #AA3939;*/
}
.ignored {
background: var(--color-special-ignored-background);
}
.legend-box {
border: 1px solid #ccc;
float: left;
width: 12px;
height: 12px;
margin: 2px;
}
.diff {
display: grid;
grid-template-columns: 1fr 1fr;
}
.hidden {
visibility: hidden;
height: 0;
}
/* Style buttons */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 10px;
font-size: 24px;
cursor: pointer;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
.theme-dark .only-light {
display: none;
}
.theme-light .only-dark {
display: none;
}
table {
color: inherit;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
}
.diff {
flex-grow: 1;
}
.float-right {
float: right;
}
.footer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
}
.footer > * {
margin: 30px;
}
.document-title {
text-align: center;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<script>
function setTheme(useDarkMode) {
const html = document.body.parentElement;
if (useDarkMode) {
html.classList.remove("theme-light");
html.classList.add("theme-dark");
localStorage.setItem("darkMode", "true");
} else {
html.classList.remove("theme-dark");
html.classList.add("theme-light");
localStorage.setItem("darkMode", "false");
}
}
function toggleLines(clazz) {
const list = document.getElementsByClassName("line " + clazz);
for (const item of list) {
item.classList.toggle("hidden");
}
}
window.onload = function () {
const useDarkMode = localStorage.getItem("darkMode") === "true";
setTheme(useDarkMode);
const left = document.getElementsByClassName("block left")[0];
const right = document.getElementsByClassName("block right")[0];
let scrolling = false;
let rx = right.scrollLeft;
let ry = right.scrollTop;
let lx = left.scrollLeft;
let ly = left.scrollTop;
left.onscroll = function (e) {
if (!scrolling) {
scrolling = true;
if (lx !== left.scrollLeft) {
lx = left.scrollLeft;
right.scrollLeft = lx;
}
if (ly !== left.scrollTop) {
ly = left.scrollTop;
right.scrollTop = ly;
}
scrolling = false;
}
};
right.onscroll = function () {
if (!scrolling) {
scrolling = true;
if (rx !== right.scrollLeft) {
rx = right.scrollLeft;
left.scrollLeft = rx;
}
if (ry !== right.scrollTop) {
ry = right.scrollTop;
left.scrollTop = ry;
}
scrolling = false;
}
};
}
</script>
</head>
<body>
<div class="container">
<div class="diff">
<h2 class="document-title">Received Document</h2>
<h2 class="document-title">Expected Document</h2>
<div class="block left">
<table><tbody><tr><td>
<div class="line added empty"></div>
<div class="line default">none</div>
<div class="line default">default</div>
<div class="line removed">removed</div>
<div class="line ignored">ignored</div>
<div class="line edited">edited</div>
<div class="line added empty"></div>
<div class="line default">none</div>
<div class="line default">default</div>
<div class="line removed">removed</div>
<div class="line ignored">ignored</div>
<div class="line edited">edited</div>
</td></tr></tbody></table>
</div>
<div class="block right">
<table><tbody><tr><td>
<div class="line added">added</div>
<div class="line default">none</div>
<div class="line default">default</div>
<div class="line removed empty"></div>
<div class="line ignored">ignored</div>
<div class="line edited">edited2</div>
<div class="line added">added</div>
<div class="line default">none</div>
<div class="line default">default</div>
<div class="line removed empty"></div>
<div class="line ignored">ignored</div>
<div class="line edited">edited2</div>
</td></tr></tbody></table>
</div>
</div>
<div class="footer">
<div>
<table>
<tr>
<th></th>
<th></th>
<th>👁️</th>
</tr>
<tr>
<td><span class="legend-box default"></span></td>
<td>default</td>
<td><input type="checkbox" checked="checked" onchange="toggleLines('default')"></td>
</tr>
<tr>
<td><span class="legend-box added"></span></td>
<td>added</td>
<td><input type="checkbox" checked="checked" onchange="toggleLines('added')"></td>
</tr>
<tr>
<td><span class="legend-box edited"></span></td>
<td>edited</td>
<td><input type="checkbox" checked="checked" onchange="toggleLines('edited')"></td>
</tr>
<tr>
<td><span class="legend-box removed"></span></td>
<td>removed</td>
<td><input type="checkbox" checked="checked" onchange="toggleLines('removed')"></td>
</tr>
<tr>
<td><span class="legend-box ignored"></span></td>
<td>ignored</td>
<td><input type="checkbox" checked="checked" onchange="toggleLines('ignored')"></td>
</tr>
</table>
</div>
<div>
<button class="btn only-dark" onclick="setTheme(false)"><i class="fa-solid fa-sun"></i></button>
<button class="btn only-light" onclick="setTheme(true)"><i class="fa-solid fa-moon"></i></button>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment