ajax/games
1
0
Fork 0
mirror of https://github.com/hexahigh/games.git synced 2025-12-11 20:15:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

e

Browse Source
This commit is contained in:
Boof 2023-03-08 11:35:38 +01:00 committed by GitHub
parent cf217f22cb
commit e4efd83ca7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 212 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
tools/Base64/new/index.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Button hover effect</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<a class="button" href="#" style="--color:#1e9bff;">
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
<a class="button" href="#" style="--color: #ff1867;">
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
<a class="button" href="#" style="--color: #6eff3e;">
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</div>
<!-- partial -->
</body>
</html>

33
tools/Base64/new/old.index.html Normal file
View File

@ -0,0 +1,33 @@
<head>
<link rel="stylesheet" href="style.css" Type="text/css" media="all">
<title>Base64 encoder and decoder</title>
</head>
<body>
<h1>Encode/decode data to base64</h1>
<form>
<label>Input data</label><br>
<textarea value="" rows="6" cols="80" id="input" required></textarea><br>
<button class="button" style="--color:#1e9bff;"></button>type="button" onclick="doencode();">Encode</button>
<button type="button" onclick="dodecode();">Decode</button><br>
<label>Output</label><br>
<textarea id="output" rows="6" cols="80" readonly></textarea><br>
<button type="button" id="copy" onclick="docopy();">Copy</button>
</form>
<script>
function docopy() {
document.getElementById("output").select();
document.execCommand('copy');
}
function doencode() {
var output = btoa(document.getElementById("input").value)
document.getElementById("output").value = output;
}
function dodecode() {
var output = atob(document.getElementById("input").value)
document.getElementById("output").value = output;
}
</script>
</body>

142
tools/Base64/new/style.css Normal file
View File

@ -0,0 +1,142 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 120px;
background: #27282c;
}
.button {
position: relative;
padding: 16px 30px;
font-size: 1.5rem;
color: var(--color);
border: 2px solid rgba(0, 0, 0, 0.5);
border-radius: 4px;
text-shadow: 0 0 15px var(--color);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1rem;
transition: 0.5s;
z-index: 1;
}
.button:hover {
color: #fff;
border: 2px solid rgba(0, 0, 0, 0);
box-shadow: 0 0 0px var(--color);
}
.button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color);
z-index: -1;
transform: scale(0);
transition: 0.5s;
}
.button:hover::before {
transform: scale(1);
transition-delay: 0.5s;
box-shadow: 0 0 10px var(--color),
0 0 30px var(--color),
0 0 60px var(--color);
}
.button span {
position: absolute;
background: var(--color);
pointer-events: none;
border-radius: 2px;
box-shadow: 0 0 10px var(--color),
0 0 20px var(--color),
0 0 30px var(--color),
0 0 50px var(--color),
0 0 100px var(--color);
transition: 0.5s ease-in-out;
transition-delay: 0.25s;
}
.button:hover span {
opacity: 0;
transition-delay: 0s;
}
.button span:nth-child(1),
.button span:nth-child(3) {
width: 40px;
height: 4px;
}
.button:hover span:nth-child(1),
.button:hover span:nth-child(3) {
transform: translateX(0);
}
.button span:nth-child(2),
.button span:nth-child(4) {
width: 4px;
height: 40px;
}
.button:hover span:nth-child(1),
.button:hover span:nth-child(3) {
transform: translateY(0);
}
.button span:nth-child(1) {
top: calc(50% - 2px);
left: -50px;
transform-origin: left;
}
.button:hover span:nth-child(1) {
left: 50%;
}
.button span:nth-child(3) {
top: calc(50% - 2px);
right: -50px;
transform-origin: right;
}
.button:hover span:nth-child(3) {
right: 50%;
}
.button span:nth-child(2) {
left: calc(50% - 2px);
top: -50px;
transform-origin: top;
}
.button:hover span:nth-child(2) {
top: 50%;
}
.button span:nth-child(4) {
left: calc(50% - 2px);
bottom: -50px;
transform-origin: bottom;
}
.button:hover span:nth-child(4 ) {
bottom: 50%;
}