-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (84 loc) · 9.42 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="SecurityJS.128/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap" rel="stylesheet">
<style>
h1.header.h1{color:#222;font-size:2.8rem;text-indent:none;position:absolute;font-weight:400;width:600px;left:50%;margin-left:-300px;top:100px;margin-bottom:10px}p{white-space:inherit;text-align:auto;display:inline-block;margin:2px;padding:0}.subtext[for="h1.header"]{position:absolute;text-align:center;color:#111;left:50%;width:500px;top:200px;margin-left:-250px;white-space:auto;margin-top:10px}.nav{position:absolute;left:0;right:0;top:0;width:100%;height:80px!important;padding:5px 0;background:#fff;text-align:left}.nav-text{font-family:Mulish,sans-serif;text-transform:lowercase;font-weight:200!important;font-size:2em;position:relative;left:10%;margin-top:15%!important;padding:0;white-space:inherit;text-align:auto;user-select:none!important;cursor:pointer}.nav-content{padding:12px}:root{--color-dark:#161616;--color-ocean:#416dea;--color-grass:#3dd28d;--color-snow:#fff;--color-salmon:#f32c52;--color-sun:#feee7d;--color-alge:#7999a9;--color-flower:#353866;--color-smoke:#e4e4e4;--borderRadius:36px;--font-face:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{display:flex;box-sizing:border-box;min-height:100vh;background:#f5f5f5;font-family:var(--font-face);font-size:16px;font-weight:700;line-height:1;justify-content:center;align-items:center}@media (min-width:992px){body{border-width:30px}}@media only screen and (max-width:800px){h1{position:absolute}}body.linked .button,body.linked h1{opacity:.3;transition:opacity .3s linear}body.linked p{color:var(--color-smoke);transition:color .3s linear}h1{text-align:center;transition:opacity .3s linear;color:var(--color-dark);font-family:var(--font-face);font-size:32px;font-weight:700}h1 span{font-weight:400}p{max-width:460px;margin:0 auto;transition:color .3s linear;text-align:center;color:var(--color-dark);font-weight:400;line-height:1.5}a,a:visited{text-decoration:none;color:var(--color-ocean);font-weight:500}a:hover,a:visited:hover{border-bottom:1px solid currentColor;color:var(--color-ocean)}.container{position:absolute;left:50%;display:flex;flex-direction:column;width:100%;padding:20px;margin-left:-50%}.button-container{display:flex;margin:60px auto;flex-wrap:wrap;justify-content:center}.button{display:flex;overflow:hidden;margin:10px;padding:12px 12px;cursor:pointer;user-select:none;transition:all 150ms linear;text-align:center;white-space:nowrap;text-decoration:none!important;text-transform:none;text-transform:capitalize;color:#fff;border:0 none;border-radius:var(--borderRadius);font-size:13px;font-weight:500;line-height:1.3;-webkit-appearance:none;-moz-appearance:none;appearance:none;justify-content:center;align-items:center;flex:0 0 160px;box-shadow:2px 5px 10px var(--color-smoke)}.button:hover{transition:all 150ms linear;opacity:.85}.button:active{transition:all 150ms linear;opacity:.75}.button:focus{outline:1px dotted #959595;outline-offset:-4px}.button.-regular{color:#202129;background-color:#f4f4f4}.button.-regular:hover{color:#202129;background-color:#e1e2e2;opacity:1}.button.-regular:active{background-color:#d5d6d6;opacity:1}.button.-dark{color:var(--color-snow);background:var(--color-dark)}.button.-dark:focus{outline:1px dotted #fff;outline-offset:-4px}.button.-green{color:var(--color-snow);background:var(--color-grass)}.button.-blue{color:var(--color-snow);background:var(--color-ocean)}.button.-salmon{color:var(--color-snow);background:var(--color-salmon)}.button.-sun{color:#f15c5c;background:var(--color-sun)}.button.-alge{color:#e7ff20;background:var(--color-alge)}.button.-flower{color:#fe8cdf;background:var(--color-flower)}span.dots{position:relative;background-color:#d3d3d3;border-radius:5px;font-size:0;margin-left:30px;padding:3.5px;transform:scale(.8)!important;cursor:default}span.dots:before{position:absolute;left:-15px;top:0;content:"";background-color:#d3d3d3;border-radius:5px;font-size:0;padding:3.5px}span.dots:after{position:absolute;left:15px;top:0;content:"";background-color:#d3d3d3;border-radius:5px;font-size:0;padding:3.5px}.header-h2.blind{position:absolute;left:0;right:0;height:60%;top:99%;background-color:#fff}.header-h2.blind h1{font-family:Mulish,sans-serif;font-weight:400;font-size:2.5em}.header-h2.blind p{position:absolute;display:inline-block;width:500px;left:50%;margin-left:-250px}.header-h3.blind{position:absolute;left:0;right:0;height:60%;top:160%;background-color:#222}.header-h3.blind h1{font-family:Mulish,sans-serif;font-weight:400;font-size:2.5em;color:#fff}.header-h3.blind p:not(.noauto){position:absolute;display:inline-block;width:500px;left:50%;margin-left:-250px}*{scrollbar-width:thin!important;scrollbar-color:var(--color-ocean) #ffffffff!important}.num{color:var(--color-ocean);font-family:"Courier New",Courier,monospace;font-weight:300;font-style:normal}::selection{background-color:#e9e9e9;color:#333;opacity:.9}hr{outline:0!important;border:none!important;background-color:#999;line-height:2px;height:2px;position:relative;left:50%;width:50%;margin-left:-25%;margin-top:25px;margin-bottom:25px}.nav-text a.using-keyboard:focus{outline:1px solid var(--color-ocean)!important;border:none!important}.nav-text a.using-mouse:focus{outline:0!important;border:none!important}
</style>
<title>Security.js - Where security comes first</title>
</head>
<body>
<base href="/">
<div class="nav">
<div class="nav-content">
<span class="nav-text"><a href="https://parking-master.github.io/SecurityJS.128">Security.js</a><span onclick="changeSite(event)" class="dots" style="transform: scale(0.8);"></span></span> <div style="position: relative; left: 80%; margin-top: -40px; width: 200px;"><div class="button -regular center" onclick="translatePage()">Translate</div></div>
</div>
</div>
<h1 class="header h1">
<center>Where security comes first.</center>
</h1>
<p class="subtext" for="h1.header">
The JavaScript library that protects JavaScript itself.
</p>
<div class="container">
<div class="button-container">
<div class="button -regular center" onclick="location.href = './documentation.html';">Get started</div>
<div class="button -dark center" onclick="location.href = 'https://github.com/Parking-Master/SecurityJS.128';">View on GitHub</div>
</div>
</div>
<div class="header-h2 blind">
<h1 style="text-align: center;">How it works</h1>
<p style="text-align: center;">Security.js uses a dynamic-database ("Cookies / Storage") to store information like SSL approvement, site verification, etc. How does it do this?<br><br>Imagine math... Ok so you add up +<span class="num">1</span> (<span class="num">100</span>) times. It's easy, but it takes a while.<br><br>With Security.js, the library counts up every little piece of site-information. It's not something you see in action, but it happens behind the scenes.</p>
</div>
<div class="header-h3 blind">
<h1 style="text-align: center;">License</h1>
<p style="text-align: center; color: #fff;">Licensed under the MIT license (<a href="https://mit-license.org">https://mit-license.org</a>)</p><br>
<p style="text-align: center; color: #fff;">Copyright (c) 2021 Parking-Master / SecurityJS.128</p>
<br>
<hr>
<br>
<p class="noauto" style="position: absolute !important; display: inline-block !important; width: 700px !important; left: 50% !important; margin-left: -250px !important; color: #fff;">By using our site and online features, etc. You agree to our <a href="https://parkingmaster.w3spaces.com/terms-of-use.html">Terms & Privacy</a> and <a href="https://www.cloudflare.com/learning/privacy/what-are-cookies/">Cookies</a></p><br>
</div>
<script>
function changeSite(event) {
event.preventDefault();
document.querySelector("span.dots").remove();
document.querySelector(".nav-text a").innerText += ".128";
}
function translatePage() {
new google.translate.TranslateElement({
pageLanguage: "es",
includedLanguages: "zh-CN,cs,da,nl,en,et,fr"
}, "google_translate_element");
}
function $$(i) {
return document.querySelectorAll(i);
}
function id(i) {
return document.getElementById(i);
}
function cs(i, t) {
return document.getElementsByClassName(`${i}`)[t];
}
document.addEventListener("mousedown", () => {
for (var i = 0; i < $$('.nav-item').length; i++) {
$$('.nav-item')[i].classList.add("using-mouse");
$$('.nav-item')[i].classList.remove("using-keyboard");
}
});
document.addEventListener("keydown", () => {
for (var i = 0; i < $$('.nav-item').length; i++) {
$$('.nav-item')[i].classList.add("using-keyboard");
$$('.nav-item')[i].classList.remove("using-mouse");
}
});
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>