-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (120 loc) · 6.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTMS</title>
<!-- Boiler plate------ -->
<link rel="icon" href="/media/logo.png" type="image/png">
<meta name="description" content="HTMS front page. Divide your html in samples.">
<!-- ------- -->
<link rel="stylesheet" href="https://fsh.plus/media/style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="https://htms.fsh.plus/media/logo.png"/>
<meta name="theme-color" content="#ffcc23">
<!-- ------------------ -->
<style>
.banner {
background: linear-gradient( rgba(16, 16, 0, 0.08), rgba(16, 16, 0, 0.2) ), url(/media/banner.jpg), #ffcc23;
background-position: left center;
background-size: 100%;
box-sizing: border-box;
width: 100vw;
min-height: auto;
height: 20vh;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.banner div {
display: flex;
align-items: center;
}
main {
display: flex;
flex-direction: column;
align-items: center;
}
pre {
position: relative;
width: 60vw;
padding: 10px;
background-color: var(--bg-2);
border-radius: 0.5rem;
overflow: auto;
}
.copy {
position: absolute;
right: 12px;
border: none;
width: fit-content;
display: flex;
align-items: center;
}
.copy svg {
margin-right: 2px;
}
</style>
</head>
<body>
<div class="banner">
<div>
<img src="/media/logo.svg" alt="HTMS logo" width="50" height="50">
<h1>HTMS</h1>
</div>
<p>Hyper Text Markup Sample(s)</p>
<p>Divide your HTML in reusable samples!</p>
</div>
<main>
<h2>Add it to your website</h2>
<div>
<label for="version">Version:</label>
<select id="version">
<option value="v0">v0 [Alpha]</option>
<option value="v1">v1 [Alpha]</option>
<option value="v2">v2</option>
<option value="v3" selected>v3 [Stable]</option>
<option value="v4">v4 [Dev]</option>
</select>
<br>
<label for="type">Type:</label>
<select id="type">
<option value=".js">Source</option>
<option value=".min.js" selected>Minified</option>
<option value=".es5.js">ES5</option>
</select>
</div>
<pre><button aria-label="Copy" class="copy" onclick="navigator.clipboard.writeText(document.getElementById('copy').innerHTML.replaceAll('&\lt;','<').replaceAll('&\gt;','>'))"><svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 256 256"><!--Fsh icons--><rect x="91" y="93" width="116" height="116" rx="14" stroke-width="12" fill="none"/><rect x="42" y="41" width="128" height="128" rx="20"/></svg></button><code id="code"></code></pre>
<p style="display:none" id="copy"></p>
<a onclick="this.href='/example/'+document.getElementById('version').value+'.html'"><button>See example</button></a>
<script>
function style(co) {
return co
.replaceAll(/.+?=".+?"/g, function(match){return `[span style="color:#ccf"]${match.split("=")[0]}=[/span][span style="color:#9d9"]${match.split("=")[1]}[/span]`})
.replaceAll(/>|<\/|<|script|htms>|style>/g, function(match){return `<span style="color:#99d">${match}</span>`})
.replaceAll(/.+?{|}/g, function(match){return `<span style="color:#cff">${match}</span>`})
.replaceAll("[","<").replaceAll("]",">")
}
function gen() {
let cod = `<script src="https://htms.fsh.plus/js/${document.getElementById('version').value}${document.getElementById('type').value}" type="module" crossorigin="anonymous"><\/script>
<style>htms{display:none}</style>
<htms>
HTMS settings here
</htms>`.replaceAll("<","<")
document.getElementById('code').innerHTML = style(cod)
document.getElementById('copy').innerHTML = cod
}
document.getElementById('version').onchange = gen;
document.getElementById('type').onchange = gen;
gen()
</script>
<h2>Resources</h2>
<div>
<a href="https://htms-docs.fsh.plus/" target="_blank"><button aria-label="Documentation"><svg width="18" height="18" style="margin:-3px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><!--Fsh icons--><path fill-rule="evenodd" clip-rule="evenodd" d="M44 32H125V110.674C125 112.521 127.29 113.381 128.506 111.99L149.489 87.989C151.082 86.166 153.918 86.166 155.511 87.989L176.494 111.99C177.71 113.381 180 112.521 180 110.674V32H209V171.2H90.7851L90.8388 171.329H63.4116C54.8788 171.329 47.9616 178.246 47.9616 186.779C47.9616 194.403 53.4852 200.738 60.7494 202H216V43H223C227.418 43 231 46.5817 231 51V202V216.4C231 220.818 227.418 224.4 223 224.4H58V224.268C40.6331 223.488 26.5848 208.699 25.1252 190H25V186.779V51C25 40.5066 33.5066 32 44 32ZM66 179C61.5817 179 58 182.582 58 187C58 191.418 61.5817 195 66 195H208V179H66Z"/></svg> Documentation</button></a>
<a href="/module"><button aria-label="Modules"><svg width="18" height="18" style="margin:-3px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><!--Fsh icons--><path fill-rule="evenodd" clip-rule="evenodd" d="M180 55C180 58.5555 178.961 61.9377 177.088 65H210C218.284 65 225 71.7157 225 80V112.912C221.938 111.039 218.556 110 215 110C201.193 110 190 125.67 190 145C190 164.33 201.193 180 215 180C218.556 180 221.938 178.961 225 177.088V210C225 218.284 218.284 225 210 225H177.088C178.961 221.938 180 218.556 180 215C180 201.193 164.33 190 145 190C125.67 190 110 201.193 110 215C110 218.556 111.039 221.938 112.912 225H80C71.7157 225 65 218.284 65 210V177.088C61.9377 178.961 58.5555 180 55 180C41.1929 180 30 164.33 30 145C30 125.67 41.1929 110 55 110C58.5555 110 61.9377 111.039 65 112.912V80C65 71.7157 71.7157 65 80 65H112.912C111.039 61.9377 110 58.5555 110 55C110 41.1929 125.67 30 145 30C164.33 30 180 41.1929 180 55Z"/></svg> Modules</button></a>
</div>
</main>
</body>
</html>