A Pen by tompud
How do I make an a pen by tompud?
What is a a pen by tompud? How do you make a a pen by tompud? This script and codes were developed by Tompud on 19 November 2022, Saturday.
A Pen by tompud - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by tompud</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="input1" action=""> <input type="radio" id="t" name="bet"> T-Side<br> <input type="radio" id="ct" name="bet"> CT-Side<br>
</div>
<div id="button">FLIP</div>
<div id="money">Money: <span></span></div>
<div class="input"><input id="bet"></input></div>
<div class="cointainer"> <div class="coinbacking"></div> <div class="coin"> <div class="heads"></div> <div class="tails"></div> </div>
</div>
<!-- made by -->
<div class="madeBy">made by: tompud</div> <script src="js/index.js"></script>
</body>
</html>
A Pen by tompud - Script Codes CSS Codes
body, html { background: #010A13; width: 100%;
}
.input { left: 0; right: 0; position: absolute; top: 60px; margin: 0 auto; text-align: center;
}
#money { color: #fff; left: 0; right: 0; text-align: center; position: absolute; top: 90px;
}
.coinflip { /* change me 'up-and-down-t' or 'up-and-down-ct'*/ /*animation: up-and-down-ct1 5s ease-in;*/ animation-fill-mode: forwards; transform-style: preserve-3d;
}
.coin { cursor: default; top: 50px; transform-style: preserve-3d; margin: -38px auto; position: relative; width: 300px; height: 300px; line-height: 50px; transform: scale(0.3, 0.3); box-shadow: 0px 0px 0px #888888; border-radius: 50%; transform-style: preserve-3d;
}
.coinbacking { cursor: default; top: 148px; transform-style: preserve-3d; margin: 0 auto; position: absolute; left: 0; right: 0; width: 100px; height: 100px; line-height: 50px; box-shadow: inset 0px 0px 75px #0a0a0a, inset 0px 0px 6px #000; background: #252525; border-radius: 50%; border: 2px #353535 solid;
}
.coin > div { border-radius: 50%; backface-visibility: hidden; width: 100%; height: 100%; backface-visibility: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.heads { transform: rotateY(180deg); background: url(http://csgowild.com/assets/images/terrorist.png); background-size: 100% 100%;
}
.tails { background: #7EA2CC; background: url(http://csgowild.com/assets/images/counter-terrorist.png); background-size: 100% 100%;
}
@keyframes up-and-down-ct1 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(1440deg) scale(0.6, 0.6); } 90% { transform: rotateY(2880deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #b4a36d; } 100% { transform: rotateY(2880deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #1a6388; }
}
@keyframes up-and-down-ct2 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(1750deg) scale(0.6, 0.6); } 90% { transform: rotateY(1080deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #b4a36d; } 100% { transform: rotateY(1080deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #1a6388; }
}
@keyframes up-and-down-ct3 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(1560deg) scale(0.6, 0.6); } 90% { transform: rotateY(1080deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #b4a36d; } 100% { transform: rotateY(1080deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #1a6388; }
}
@keyframes up-and-down-ct4 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(720deg) scale(0.6, 0.6); } 90% { transform: rotateY(1080deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #b4a36d; } 100% { transform: rotateY(1080deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #1a6388; }
}
@keyframes up-and-down-ct4 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(720deg) scale(0.6, 0.6); } 90% { transform: rotateY(1080deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #b4a36d; } 100% { transform: rotateY(1080deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #1a6388; }
}
@keyframes up-and-down-ct5 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(2160deg) scale(0.6, 0.6); } 90% { transform: rotateY(1080deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #b4a36d; } 100% { transform: rotateY(1080deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #1a6388; }
}
@keyframes up-and-down-t1 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(1750deg) scale(0.6, 0.6); } 90% { transform: rotateY(900deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #1a6388; } 100% { transform: rotateY(900deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #b4a36d; }
}
@keyframes up-and-down-t2 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(1600deg) scale(0.6, 0.6); } 90% { transform: rotateY(900deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #1a6388; } 100% { transform: rotateY(900deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #b4a36d; }
}
@keyframes up-and-down-t3 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(1600deg) scale(0.6, 0.6); } 90% { transform: rotateY(630deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #1a6388; } 100% { transform: rotateY(540deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #b4a36d; }
}
@keyframes up-and-down-t4 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(1500deg) scale(0.6, 0.6); } 90% { transform: rotateY(540deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #1a6388; } 100% { transform: rotateY(540deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #b4a36d; }
}
@keyframes up-and-down-t5 { 0% { transform: rotateY(0deg) scale(0.3, 0.3); } 50% { transform: rotateY(1900deg) scale(0.6, 0.6); } 90% { transform: rotateY(540deg) scale(0.3, 0.3); box-shadow: 0px 0px 0px #1a6388; } 92% { box-shadow: 0px 0px 0px #1a6388; } 100% { transform: rotateY(540deg) scale(0.3, 0.3); box-shadow: 0px 0px 50px #b4a36d; }
}
/*//////////////////////////////////////////////////////*/
.madeBy { position: absolute; bottom: 0; right: 0; left: 0; margin: 0 auto; margin-bottom: 69px; text-align: center; color: #fff; font-family: Helvetica; font-size: 9px; letter-spacing: 2px;
}
#button { border-radius: 5px; color: #fff; position: absolute; top: 350px; left: 0; right: 0; margin: 0 auto; cursor: pointer; width: 150px; height: 50px; line-height: 50px; background: #1a1d21; text-align: center;
}
.b { border-radius: 5px; color: #fff; position: absolute; top: 350px; left: 0; right: 0; margin: 0 auto; cursor: pointer; width: 150px; height: 50px; line-height: 50px; background: #1a1d21; text-align: center;
}
.container { position: relative;
}
.input1 { color: #fff; text-align: center;
}
A Pen by tompud - Script Codes JS Codes
var money = 500;
var fps = 1000 / 30;
function bet(bet) { var select = 'ct'; if (document.querySelector('#t').checked) { select = 't'; } if (bet <= money) { money -= bet; var rand = Math.random(); var ct = ['up-and-down-ct1','up-and-down-ct2','up-and-down-ct3','up-and-down-ct4','up-and-down-ct5']; var t = ['up-and-down-t1','up-and-down-t2','up-and-down-t3','up-and-down-t4','up-and-down-t5']; if (rand <= 0.5) { console.log('Winner!'); console.log(rand); animate(t[Math.floor(Math.random() * 5)]); } else { animate(ct[Math.floor(Math.random() * 5)]); } setTimeout(function() { if (rand <= 0.5) { if (select == 't') { money += bet * 2; } } else { if (select == 'ct') { money += bet * 2; } } }, 5000); }
}
document.querySelector('#button').onclick = function() { var b = +document.querySelector('#bet').value; bet(b);
}
function animate(ani) { var coin = document.querySelector('.coin'); coin.style.animation = ''; coin.style.animation = ani + ' 5s ease-in'; coin.style.animationFillMode = 'forwards';
}
function update() { document.querySelector('#money > span').innerHTML = money;
}
setInterval(function() { update();
}, fps);
function init() { document.querySelector('#money > span').innerHTML = money;
}
init();
Developer | Tompud |
Username | tompud |
Uploaded | November 19, 2022 |
Rating | 3 |
Size | 3,083 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Frozn | 2,555 Kb |
Funky Text | 1,898 Kb |
Madeby Template | 1,552 Kb |
Jitter Pic | 1,932 Kb |
Skel UI Kit | 2,642 Kb |
CSGO Killfeed | 2,427 Kb |
CSGO Accept Button | 2,159 Kb |
Noise and Dividers | 2,381 Kb |
Codepen of the Day | 2,262 Kb |
Skel Navbar | 3,851 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Twitch TV | Natester13 | 4,488 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Tooltip in table | Roine | 3,713 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Addthis_button | Esambino | 1,691 Kb |
Lecture 1 | Law | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!