tomit4/notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

📝 Added sandbox (code sketchbook)

Browse source
This commit is contained in:
z3rOR0ne 2023-04-22 00:41:54 -07:00
parent b475595f7f
commit b5daf18b1a
142 changed files with 100702 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

133
sandbox/codepens/circuit_tests/css/styles.css Normal file
View file

@ -0,0 +1,133 @@
/* Taken from https://www.demo2s.com/html-css/css-flowing-circuit-animation.html */
html, body {
height:100%;
padding:0;
margin:0;
}
* {
box-sizing:border-box;
}
.circuit-outer {
position:relative;
width:80vw;
height:80vh;
margin:5% 10% 0;
padding:3px;
background:#eee;
/* border:1px solid #ddd; */
border:1px solid red;
overflow:hidden;
}
.circuit-inner {
position:absolute;
top:3px;
bottom:3px;
left:3px;
right:3px;
background:#fff;
/* border:1px solid #ddd; */
border:1px solid blue;
}
.current {
background:orange;
position:absolute;
animation-iteration-count:1;
animation-timing-function:linear;
animation-fill-mode:forwards;
}
.current.bottom-left {
bottom:0;
right:80%;
width:20%;
height:3px;
animation-name:zap1;
animation-duration:.2s;
}
.current.left {
bottom:0;
left:0;
width:3px;
height:0;
animation-name:zap2;
animation-delay:.2s;
animation-duration:.5s;
}
.current.top {
top:0;
width:0;
height:3px;
animation-name:zap3;
animation-delay:.7s;
animation-duration:1s;
}
.current.right {
top:0;
right:0;
width:3px;
height:0;
animation-name:zap2;
animation-delay:1.7s;
animation-duration:.5s;
}
.current.bottom-right {
bottom:0;
right:0;
width:0%;
height:3px;
animation-name:zap4;
animation-delay:2.2s;
animation-duration:.8s;
}
@keyframes zap1 {
0% {
width:0;
}
100% {
width:20%;
}
}
@keyframes zap2 {
0% {
height:0;
}
100% {
height:100%;
}
}
@keyframes zap3 {
0% {
width:0;
}
100% {
width:100%;
}
}
@keyframes zap4 {
0% {
width:0;
}
100% {
width:80%;
}
}

25
sandbox/codepens/circuit_tests/css/styles2.css Normal file
View file

@ -0,0 +1,25 @@
/* Taken from https://www.demo2s.com/html-css/css-flowing-circuit-animation.html */
.bar {
position: absolute;
margin: 0em 0em 0em 0em;
background: orange;
bottom:0;
left:50%;
width:5px;
height:60%;
animation-name:zap2;
animation-delay:.2s;
animation-duration:2s;
}
@keyframes zap2 {
0% {
height:0;
}
100% {
height:60%;
}
}

21
sandbox/codepens/circuit_tests/index.html Normal file
View file

@ -0,0 +1,21 @@
<!-- Taken from https://www.demo2s.com/html-css/css-flowing-circuit-animation.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/styles.css">
<title>basic circuit animation</title>
</head>
<body>
<div class="circuit-outer">
<div class="current bottom-left"></div>
<div class="current left"></div>
<div class="current top"></div>
<div class="current right"></div>
<div class="current bottom-right"></div>
<div class="circuit-inner"></div>
</div>
</body>
</html>

14
sandbox/codepens/circuit_tests/index2.html Normal file
View file

@ -0,0 +1,14 @@
<!-- Taken from https://www.demo2s.com/html-css/css-flowing-circuit-animation.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/styles2.css">
<title>basic circuit animation</title>
</head>
<body>
<div class="bar"></div>
</body>
</html>

110
sandbox/codepens/loading_animation/css/loading_animation.css Normal file
View file

@ -0,0 +1,110 @@
body {
/* background: coral; */
background: white;
}
.blank {
background: red;
width: 100px;
height: 100px;
/* margin: 0em 0em 0e20em; */
}
.loading-box {
/* margin: 25em auto auto; */
height: 300px;
width: 100px;
/* height: 75px; */
/* width: 75px; */
border: 10px solid blue;
/* transform: skewY(100deg); */
/* transform: rotate(180deg); */
/* animation: roll 2s infinite ease-out; */
}
.loading-box2 {
position: absolute;
margin: 0em 5em 5em 20em;
height: 1px;
width: 10px;
/* border: 10px solid blue; */
/* border: 10px solid blue; */
/* transform: skewY(45deg); */
}
.loading-inner-box {
background: orange;
height: 300px;
animation: fill 3s ease-in;
}
.loading-inner-box2 {
background: orange;
height: 200px;
/* height: auto; */
animation: fill2 3s ease-in;
animation-delay: 3s;
}
/* @keyframes roll { */
/* 0% { */
/* transform: rotate(180deg); */
/* } */
/* 40% { */
/* transform: rotate(180deg); */
/* } */
/* 60% { */
/* transform: rotate(360deg); */
/* } */
/* 100% { */
/* transform: rotate(360deg); */
/* } */
/* } */
@keyframes fill {
from {
transform: translateY(100%);
height: -300px;
}
to {
transform: translateY(0%);
height: 300px;
/* height: 0px; */
}
}
@keyframes fill2 {
from {
transform: translateY(100%);
height: -1px;
}
to {
transform: translateY(0%);
height: 200px;
/* height: 0px; */
}
}
/* @keyframes fill { */
/* 0% { */
/* height: 0px; */
/* } */
/* 40% { */
/* height: 200px; */
/* } */
/* 60% { */
/* height: 200px; */
/* } */
/* 100% { */
/* height: 200px; */
/* } */
/* } */
/* this one doesn't wait for the loading animation */
/* @keyframes roll { */
/* from { */
/* transform: rotate(0deg); */
/* } */
/* to { */
/* transform: rotate(359deg); */
/* } */
/* } */

23
sandbox/codepens/loading_animation/loading_animation.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Loading Animation</title>
<link rel="stylesheet" href="css/loading_animation.css">
</head>
<body>
<!-- <div class="blankspace"></div> -->
<div class="container">
<div class="loading-box">
<div class="loading-inner-box">
</div>
</div>
<div class="loading-box2">
<div class="blank"></div>
<div class="loading-inner-box2">
</div>
</div>
</div>
</body>
</html>

26
sandbox/codepens/slider/index.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test Slider</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//unpkg.com/a11y-slider@latest/dist/a11y-slider.css" />
</head>
<body>
<ul class="slider">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="//unpkg.com/a11y-slider@latest/dist/a11y-slider.js"></script>
<script>
const slider = new A11YSlider(document.querySelector('.slider'), {
adaptiveHeight: true,
dots: false
});
</script>
</body>
</html>

8
sandbox/codepens/slider/style.css Normal file
View file

@ -0,0 +1,8 @@
.slider {
display: flex;
}
.slider > * {
width: 100%;
flex: 0 0 auto;
}