1. changed to a global css instead of using the same shit over and over.
2. deleted soem unused stuff 3. stole some windows' api virtual keys site keys
This commit is contained in:
zyqunix
parent
e5449fda26
commit
3cf2363147
18 changed files with 1276 additions and 612 deletions
34
404.css
34
404.css
|
|
@ -1,26 +1,4 @@
|
|||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono';
|
||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
background-color: #2a2a2a;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
color: white;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
|
||||
@import url(/global.css);
|
||||
|
||||
.main {
|
||||
text-align: center;
|
||||
|
|
@ -32,16 +10,6 @@ body {
|
|||
max-width: 30vw;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #c099ff;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #c099ff;
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
|
|||
6
404.html
6
404.html
|
|
@ -9,9 +9,9 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1>Eror: 404 Not Found</h1>
|
||||
<h1>Looks like you found an unfinished site or were redirected to the wrong page!</h1>
|
||||
<h2>Go back to the <a href="https://fentseller.lol">main page</a> or <a href="https://github.com/zyqunix/tools/issues/new">open an issue on my GitHub</a></h3>
|
||||
<h1>❌ Eror: 404 Not Found ❌</h1>
|
||||
<h2>Looks like you found an unfinished site or were redirected to the wrong page!</h2>
|
||||
<h2>Go back to the <a href="https://fentseller.lol">main page</a> or <a href="https://github.com/zyqunix/tools/issues/new">open an issue on my GitHub</a></h2>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,32 +1,4 @@
|
|||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono';
|
||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #505050;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
@import url(/global.css);
|
||||
|
||||
.top {
|
||||
top: 0;
|
||||
|
|
@ -42,11 +14,6 @@ marquee {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
background-color: #b49cdf;
|
||||
}
|
||||
|
||||
button:not(#toggle) {
|
||||
color: white;
|
||||
background-color: #b49cdf;
|
||||
|
|
@ -91,16 +58,6 @@ button:hover:not(#toggle) {
|
|||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: white;
|
||||
transition: color 0.1s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #cdb1ff;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.main {
|
||||
max-width: 50%;
|
||||
|
|
|
|||
26
calc/calc.js
26
calc/calc.js
|
|
@ -1,26 +0,0 @@
|
|||
const num7 = document.getElementById('7');
|
||||
const num8 = document.getElementById('8');
|
||||
const num9 = document.getElementById('9');
|
||||
const divide = document.getElementById('divide');
|
||||
const sqroot = document.getElementById('sqroot');
|
||||
const num4 = document.getElementById('4');
|
||||
const num5 = document.getElementById('5');
|
||||
const num6 = document.getElementById('6');
|
||||
const mutiply = document.getElementById('mutiply');
|
||||
const percent = document.getElementById('percent');
|
||||
const num1 = document.getElementById('1');
|
||||
const num2 = document.getElementById('2');
|
||||
const num3 = document.getElementById('3');
|
||||
const subtract = document.getElementById('subtract');
|
||||
const fraction = document.getElementById('fraction');
|
||||
const num0 = document.getElementById('0');
|
||||
const decimal = document.getElementById('decimal');
|
||||
const negative = document.getElementById('negative');
|
||||
const add = document.getElementById('add');
|
||||
const sum = document.getElementById('sum');
|
||||
|
||||
const result = document.querySelector('span#resultnum');
|
||||
|
||||
num7.addEventListener('click', () => {
|
||||
result.innerHTML = num7.innerHTML;
|
||||
})
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Calculator</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<h1>zyq's calculator</h1>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="result">
|
||||
<span id="resultnum"></span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="button" id="7">7</button>
|
||||
<button class="button" id="8">8</button>
|
||||
<button class="button" id="9">9</button>
|
||||
<button class="button" id="divide">÷</button>
|
||||
<button class="button" id="sqroot">√</button>
|
||||
<button class="button" id="4">4</button>
|
||||
<button class="button" id="5">5</button>
|
||||
<button class="button" id="6">6</button>
|
||||
<button class="button" id="mutiply">×</button>
|
||||
<button class="button" id="percent">%</button>
|
||||
<button class="button" id="1">1</button>
|
||||
<button class="button" id="2">2</button>
|
||||
<button class="button" id="3">3</button>
|
||||
<button class="button" id="subtract">-</button>
|
||||
<button class="button" id="fraction">1/x</button>
|
||||
<button class="button" id="0">0</button>
|
||||
<button class="button" id="decimal">.</button>
|
||||
<button class="button" id="negative">+/-</button>
|
||||
<button class="button" id="add">+</button>
|
||||
<button class="button" id="sum">=</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="calc.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-family: monospace;
|
||||
font-size: small;
|
||||
background-color: #2a2a2a;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
color: #f0f0f0;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.main {
|
||||
padding: 50px;
|
||||
text-align: right;
|
||||
background-color: #909090;
|
||||
max-width: 350px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #707070;
|
||||
}
|
||||
|
||||
.result {
|
||||
width: 98.5%;
|
||||
height: 40px;
|
||||
font-size: x-large;
|
||||
background-color: #505050;
|
||||
border: 2px solid #757575;
|
||||
border-radius: 10px;
|
||||
justify-content: center;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
color: #ccc;
|
||||
background-color: #464646;
|
||||
border: 2px solid #505050;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.1s linear;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
#resultnum {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button#sum {
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
color: #ddd;
|
||||
background-color: #b38eed;
|
||||
border: 2px solid #a986e1;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.1s linear;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #565656;
|
||||
border: 2px solid #606060;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button#sum:hover {
|
||||
background-color: #c099ff;
|
||||
border: 2px solid #b38eed;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.result:hover {
|
||||
background-color: #606060;
|
||||
border: 2px solid #757575;
|
||||
}
|
||||
|
|
@ -1,24 +1,4 @@
|
|||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono';
|
||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #2a2a2a;
|
||||
user-select: none;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
@import url(/global.css);
|
||||
|
||||
button, p {
|
||||
font-weight: 600;
|
||||
|
|
|
|||
1010
code/index.html
Normal file
1010
code/index.html
Normal file
File diff suppressed because it is too large
Load diff
208
code/style.css
Normal file
208
code/style.css
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
@import url(/global.css);
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
background-color: #2a2a2a;
|
||||
color: #f0f0f0;
|
||||
overflow-x: hidden;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
|
||||
h3 {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #404040;
|
||||
border-radius: 3px;
|
||||
padding: 0.1em 0.2em;
|
||||
font-size: 85%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-top: 0;
|
||||
border-collapse: collapse;
|
||||
table-layout: auto;
|
||||
font-size: 0.875rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
thead {
|
||||
margin-left: 100px !important;
|
||||
}
|
||||
|
||||
div[class="has-inner-focus"] {
|
||||
text-align: left;
|
||||
width: 600px !important;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 2px;
|
||||
border-left: 2px solid #505050;
|
||||
}
|
||||
|
||||
tr {
|
||||
border: 2px solid #505050;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr > td {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
border-left: 2px solid #505050;
|
||||
|
||||
}
|
||||
|
||||
td:first-of-type {
|
||||
padding-left: 3px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
td:nth-of-type(2) {
|
||||
padding-right: 20px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
td:nth-of-type(3) {
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
div.main {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #333333;
|
||||
padding: 0.5em;
|
||||
border-radius: 5px;
|
||||
z-index: 10;
|
||||
text-align: start !important;
|
||||
font-weight: bold;
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
summary > a {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
details[open] > summary {
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: 5px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
details:not([open]) > summary {
|
||||
width: 600px !important;
|
||||
}
|
||||
|
||||
details > summary::marker {
|
||||
content: '';
|
||||
}
|
||||
|
||||
summary:hover {
|
||||
background-color: #444444;
|
||||
}
|
||||
|
||||
details > summary::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.5em;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L12 14.5858L18.2929 8.29289C18.6834 7.90237 19.3166 7.90237 19.7071 8.29289C20.0976 8.68342 20.0976 9.31658 19.7071 9.70711L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289Z"/></svg>');
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
details[open] > summary::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
|
||||
/* not dis again blehhhhhhh */
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
body {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
div[class="has-inner-focus"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
summary {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
body {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
position: relative;
|
||||
top: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
div[class="has-inner-focus"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
summary {
|
||||
font-size: 1rem;
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
body {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
div[class="has-inner-focus"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
summary {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,4 @@
|
|||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono';
|
||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
background-color: #2a2a2a;
|
||||
color: #f0f0f0;
|
||||
overflow-x: hidden;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
user-select: none;
|
||||
}
|
||||
@import url(/global.css);
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
|
|
@ -76,6 +53,11 @@ p:not(.hint) {
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #cdadff;
|
||||
border: 3px solid rgb(201, 161, 250);
|
||||
}
|
||||
|
||||
button:active {
|
||||
scale: 0.98;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cool</title>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" style="position: fixed; inset: 0px; z-index: 0; width: 1104px; height: 772px;" width="2208" height="1544"></canvas>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
207
cool/script.js
207
cool/script.js
|
|
@ -1,207 +0,0 @@
|
|||
var background_color = "#fafafa";
|
||||
var canvas = document.getElementById("canvas");
|
||||
var renderer = new THREE.WebGLRenderer( { canvas: canvas } );
|
||||
var scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0xffffff);
|
||||
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
|
||||
var win_width = 0, win_height = 0;
|
||||
function update_size() {
|
||||
if (window.innerWidth != win_width || window.innerHeight != win_height) {
|
||||
win_width = window.innerWidth;
|
||||
win_height = window.innerHeight;
|
||||
renderer.setPixelRatio(window.devicePixelRatio || 1);
|
||||
renderer.setSize(win_width, win_height);
|
||||
camera.aspect = win_width / win_height;
|
||||
camera.updateProjectionMatrix();
|
||||
}
|
||||
}
|
||||
update_size();
|
||||
|
||||
var clock = new THREE.Clock();
|
||||
var delta_time = 1/60.0;
|
||||
var elapsed_time = 0;
|
||||
|
||||
var geometry = new THREE.Geometry();
|
||||
var radius = 10;
|
||||
var depth_step = 10;
|
||||
var num_rings = 100;
|
||||
var num_segments = 24;
|
||||
|
||||
var outer_h = Math.max($("#outer").height(), 10000) - 1200;
|
||||
var content_h = Math.max($("#content").height(), 10000);
|
||||
var content_h2 = $("#content").height() + 9200;
|
||||
|
||||
var base_colors = [];
|
||||
var colors = [];
|
||||
var num_colors = num_rings * num_segments * 2;
|
||||
for (var c = 0; c < num_colors; c++) {
|
||||
base_colors[c] = new THREE.Color(Math.random(), Math.random(), Math.random());
|
||||
colors[c] = base_colors[c].clone();
|
||||
}
|
||||
|
||||
function lerp(res, color1, color2, t) {
|
||||
res.r = (1-t)*color1.r + t*color2.r;
|
||||
res.g = (1-t)*color1.g + t*color2.g;
|
||||
res.b = (1-t)*color1.b + t*color2.b;
|
||||
}
|
||||
|
||||
function update_colors(delta, progress) {
|
||||
var bias = 1;
|
||||
var bg = new THREE.Color(background_color);
|
||||
var h1 = content_h - 6000;
|
||||
var h2 = content_h + 400;
|
||||
if (progress < h1) {
|
||||
bias = 0;
|
||||
} else if (progress < h2) {
|
||||
bias = (progress - h1) / (h2 - h1);
|
||||
}
|
||||
//if (s > content_h) {
|
||||
// if (s > content_h + 1000) {
|
||||
// color = new THREE.Color(1, 1, 1);
|
||||
// } else {
|
||||
// var q = (s - content_h) / 1000;
|
||||
// //color = new THREE.Color(r + (1-r) * q, g + (1-g) * q, b + (1-b) * q);
|
||||
// color = new THREE.Color();
|
||||
// color.setHSL(0, 0.5, q * 0.6 + 0.4);
|
||||
// }
|
||||
//} else {
|
||||
// var q = (content_h-s) / content_h;
|
||||
// color = new THREE.Color();
|
||||
// color.setHSL(q, 0.5, 0.4);
|
||||
//}
|
||||
for (var c = 0; c < num_colors; c++) {
|
||||
var hsl = base_colors[c].getHSL();
|
||||
var h = hsl.h;
|
||||
h = (h + delta * (1+c/100)) % 1;
|
||||
base_colors[c].setHSL(h, hsl.s, hsl.l);
|
||||
lerp(colors[c], bg, base_colors[c], bias);
|
||||
}
|
||||
}
|
||||
update_colors(0, 0);
|
||||
|
||||
var verts = [];
|
||||
var speeds = [];
|
||||
var phases = [];
|
||||
function init_verts() {
|
||||
var x = 0, y = 0, z = 0;
|
||||
var dz = -depth_step / num_segments;
|
||||
for (var r = 0; r < num_rings; r++) {
|
||||
for (var s = 0; s < num_segments; s++) {
|
||||
var angle = Math.PI * 2 * (s / num_segments);
|
||||
var x = Math.cos(angle) * radius;
|
||||
var y = Math.sin(angle) * radius;
|
||||
verts.push(new THREE.Vector3(x, y, z));
|
||||
speeds.push(Math.random());
|
||||
phases.push(Math.random());
|
||||
z += dz;
|
||||
}
|
||||
}
|
||||
}
|
||||
init_verts();
|
||||
function update_verts(t) {
|
||||
var d = num_rings * 0.4;
|
||||
var v = 0;
|
||||
for (var r = 0; r < num_rings; r++) {
|
||||
for (var s = 0; s < num_segments; s++) {
|
||||
if (r > d) {
|
||||
var p = 0.5 + 0.5 * Math.sin(t*speeds[v] + phases[v])
|
||||
var q = (r-d)/d * 1.1;
|
||||
var rad = (1-p * q) * radius;
|
||||
var angle = Math.PI * 2 * (s / num_segments);
|
||||
var x = Math.cos(angle) * rad;
|
||||
var y = Math.sin(angle) * rad;
|
||||
var vert = verts[v];
|
||||
vert.x = x;
|
||||
vert.y = y;
|
||||
}
|
||||
v++;
|
||||
}
|
||||
}
|
||||
}
|
||||
update_verts(0);
|
||||
|
||||
function mkgeometry(geometry) {
|
||||
var fi = 0;
|
||||
var f = 0;
|
||||
var vi = 0;
|
||||
var v = 0;
|
||||
var x = 0, y = 0, z = 0;
|
||||
var dz = -depth_step / num_segments;
|
||||
var c = 0;
|
||||
for (var r = 0; r < num_rings; r++) {
|
||||
for (var s = 0; s < num_segments; s++) {
|
||||
var vert1 = verts[vi];
|
||||
var vert2 = vi - 1 >= 0 ? verts[vi - 1] : verts[0];
|
||||
var vert3 = vi - num_segments >= 0 ? verts[vi - num_segments] : verts[0];
|
||||
var vert4 = vi - num_segments - 1 >= 0 ? verts[vi - num_segments - 1] : verts[0];
|
||||
vi++;
|
||||
|
||||
geometry.vertices[v++] = vert1;
|
||||
geometry.vertices[v++] = vert2;
|
||||
geometry.vertices[v++] = vert4;
|
||||
geometry.faces[f++] = new THREE.Face3(fi, fi+1, fi+2, null, colors[c++]);
|
||||
fi += 3;
|
||||
geometry.vertices[v++] = vert1;
|
||||
geometry.vertices[v++] = vert4;
|
||||
geometry.vertices[v++] = vert3;
|
||||
geometry.faces[f++] = new THREE.Face3(fi, fi+1, fi+2, null, colors[c++]);
|
||||
fi += 3;
|
||||
old_x = x;
|
||||
old_y = y;
|
||||
old_z = z;
|
||||
z += dz;
|
||||
}
|
||||
}
|
||||
geometry.verticesNeedUpdate = true;
|
||||
geometry.colorsNeedUpdate = true;
|
||||
geometry.elementsNeedUpdate = true;
|
||||
}
|
||||
mkgeometry(geometry);
|
||||
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors, color: background_color });
|
||||
material.depthFunc = THREE.AlwaysDepth;
|
||||
var mesh = new THREE.Mesh(geometry, material);
|
||||
scene.add(mesh);
|
||||
|
||||
var s = 0;
|
||||
var total_s = 0;
|
||||
var first_time = true;
|
||||
var animate = function () {
|
||||
//console.log("updating background");
|
||||
update_size();
|
||||
delta_time = clock.getDelta();
|
||||
elapsed_time = clock.elapsedTime;
|
||||
|
||||
var win = $(window);
|
||||
var prev_s = s;
|
||||
s = $(window).scrollTop();
|
||||
var ds = Math.abs(s - prev_s);
|
||||
camera.position.z = -s/outer_h*(num_rings * depth_step);
|
||||
//var color;
|
||||
//color = new THREE.Color("#efefef");
|
||||
//if (s > content_h) {
|
||||
// if (s > content_h + 1000) {
|
||||
// color = new THREE.Color(1, 1, 1);
|
||||
// } else {
|
||||
// var q = (s - content_h) / 1000;
|
||||
// //color = new THREE.Color(r + (1-r) * q, g + (1-g) * q, b + (1-b) * q);
|
||||
// color = new THREE.Color();
|
||||
// color.setHSL(0, 0.5, q * 0.6 + 0.4);
|
||||
// }
|
||||
//} else {
|
||||
// var q = (content_h-s) / content_h;
|
||||
// color = new THREE.Color();
|
||||
// color.setHSL(q, 0.5, 0.4);
|
||||
//}
|
||||
//material.color = color;
|
||||
if (ds > 0 || first_time) {
|
||||
total_s += ds * 0.01;
|
||||
update_colors(ds * 0.00001, s);
|
||||
update_verts(total_s);
|
||||
mkgeometry(mesh.geometry);
|
||||
first_time = false;
|
||||
}
|
||||
renderer.render(scene, camera);
|
||||
requestAnimationFrame( animate );
|
||||
};
|
||||
animate();
|
||||
//setInterval(animate, 500); // backup as sometimes requestAnimationFrame doesn't trigger in Firefox
|
||||
40
global.css
Normal file
40
global.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono';
|
||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
background-color: #2a2a2a;
|
||||
color: #f0f0f0;
|
||||
overflow-x: hidden;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a:hover, svg:hover {
|
||||
color: #c099ff;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #c099ff;
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
|
@ -1,45 +1,14 @@
|
|||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono';
|
||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
@import url(/global.css);
|
||||
|
||||
h6 {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #505050;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
margin: 20px 40px 20px 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
flex-direction: column;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
background-color: #b49cdf;
|
||||
}
|
||||
|
||||
* {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.guestbook-entry {
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: 2px solid #707070;
|
||||
background-color: #606060;
|
||||
border: 2px solid #3f3f3f;
|
||||
background-color: #2f2f2f;
|
||||
max-width: 50vw;
|
||||
text-align: left;
|
||||
border-radius: 8px;
|
||||
|
|
@ -49,15 +18,6 @@ body {
|
|||
margin: 5px 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #b49cdf;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.guestbook-entry a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>zyq's Tools</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="description" content="Useful Tests Without Any Trackers, Fully Open-Source on GitHub!">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
|
||||
|
|
|
|||
|
|
@ -1,29 +1,4 @@
|
|||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono';
|
||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #2a2a2a;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: medium;
|
||||
}
|
||||
@import url(/global.css);
|
||||
|
||||
button, p {
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -63,6 +63,6 @@
|
|||
"name": "Hyprland Dots",
|
||||
"subheader": "My Hyprland Dotfiles",
|
||||
"description": "My Arch Hyprland dotfiles with my rofi, wallust and hypr (18.8mb).",
|
||||
"url": "/assets/zyqunix hyprland dots.zip"
|
||||
"url": "https://github.com/zyqunix/dots/releases"
|
||||
}
|
||||
]
|
||||
|
|
@ -1,31 +1,4 @@
|
|||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono';
|
||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
background-color: #2a2a2a;
|
||||
color: #f0f0f0;
|
||||
overflow-x: hidden;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
@import url(/global.css);
|
||||
|
||||
img[class="img_header"] {
|
||||
height: 3rem;
|
||||
|
|
@ -61,11 +34,6 @@ div.header {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #c099ff;
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 90%;
|
||||
max-width: 85%;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue