<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Calculator style -->
<style type="text/css" media="all">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--bg: #9ecdcd;
/*--lightshadow: #fff;
--sp: #95c0d9;
--darkshadow: #a3b1c6;*/
}
body {
width: 100vw;
height: 100vh;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
background-color: #00ccff;
}
.cal {
padding: 10px;
border-radius: 10%;
background-color: var(--bg);
transform: scale(0.9);
/* box-shadow: 5px 5px 4px var(--darkshadow),-5px -5px 4px var(--lightshadow),inset 3px 3px 4px var(--darkshadow),inset -3px -3px 4px var(--lightshadow);*/
}
.btn {
clear: both;
width: 60px;
height: 70px;
margin: 10px;
display: flex;
user-select: none;
overflow: hidden;
align-items: center;
justify-content: center;
font-size: 25px;
font-weight: 850;
transition: 0.2s;
border-radius: 10px;
text-transform: uppercase;
background: linear-gradient(145deg, #bcdedb, #7bcac6);
box-shadow: 3px 3px 4px #238f94, -3px -3px 4px #9ed5d4;
}
.btn:active {
border-radius: 10px;
background: rgb(137,199,197);
box-shadow: inset 5px 5px 4px #238f94, inset -5px -5px 4px #9ed5d4;
}
.btneff {
color: #8c9aed;
padding: 10px;
transition: 0.1s;
}
.btn:active .btneff {
transform: scale(0.95) translateY(5px);
}
.ans {
clear: both;
width: 100%;
height: 70px;
padding: 5px;
font-size: 25px;
font-weight: 750;
display: flex;
text-align: right;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: rgb(192,131,201);
border: 3px #82e691 solid;
}
/*some bugs*/
#brac {
pointer-events: none;
}
</style>
<!--- Theme style -->
<style type="text/css" media="all">
#box {
top: 0;
top: 100vh;
opacity: 1;
width: 100vw;
padding: 10px;
display: flex;
position: fixed;
transition: 0.5s;
flex-direction: column;
justify-content: center;
background-color: #35b631ff;
perspective: 1000px;
}
#box h2 {
color: #56dbb9;
text-align: center;
margin-bottom: 10px;
border: 5px solid rgba(146,142,75,1);
background-color: rgba(116,150,229,1);
}
#theme svg {
width: 50px;
height: 50px;
}
#theme_btn1 {
display: inline;
}
#theme_btn2 {
display: none;
}
.dropdowntheme {
width: 95vw;
max-height: 0;
display: flex;
border-radius: 50vw;
background-color: #7a7a9a;
transform-style: preserve-3d;
position: relative;
flex-direction: row;
align-items: center;
overflow: hidden;
justify-content: center;
transition: 2s;
}
.dropdownthemebtncont{
padding:10px 0;
margin:5px 0;
display:flex;
align-items:center;
justify-content:center;
background-color:teal;
}
.dropdownthemebtn{
display: inline-block;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 25px solid #000;
/* background-color: #8294ea;*/
transform: rotate(0deg);
transition: 1s;
}
.dropdowntheme div {
width: 70px;
height: 70px;
margin: 10px;
border-radius: 20px;
border: 3px solid #81d0e4;
background-color: #a4ead3;
}
.dropdowntheme div:nth-child(1) {
background-color: #000;
}
.dropdowntheme div:nth-child(2) {
background-color: #91e070;
}
.dropdowntheme div:nth-child(3) {
background-color: #df8282;
}
#comingsoona {
top: 50%;
left: 50%;
opacity: 1;
z-index: 2000;
display: none;
text-align:center;
font-weight: 750;
font-size: 20px;
position: absolute;
background-color:#f33;
transform: translate(-50%,-50%);
}
.comingsoon{
filter: contrast(0%);
}
.inner {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 30px;
background-color: #000;
background-image: linear-gradient(to bottom, rgba(185,219,86,0.6), rgba(185,219,86,1));
box-shadow: -5px -5px 5px rgba(185,219,86,1), inset 5px 5px 5px rgba(185,219,86,0.1), 5px 5px 10px rgba(185,219,86,0.1), inset -5px -5px 5px rgba(185,219,86,1);
}
#range {
width: 230px;
height: 10px;
appearance: none;
border-radius: 5px;
overflow: hidden;
background-color: rgba(185,219,86,1);
box-shadow: 3px 3px 5px rgba(0,0,0,0.1), -3px -3px 5px rgba(185,219,86,1), inset 3px 3px 5px rgba(0,0,0,0.1);
}
#range::-webkit-slider-thumb {
width: 10px;
height: 10px;
appearance: none;
border-radius: 50%;
background-color: #fff;
border: 2px solid #4141f5;
box-shadow: -257px 0px 0px 250px rgba(34,164,23,1);
}
</style>
<!-- Calculator script -->
<script type="text/javascript" charset="utf-8">
var i = 0;
function king(arg) {
let ans = document.getElementById('ans');
if (ans.value == "0") {
ans.value = "";
}
ans.value += arg;
let cans = document.getElementById('cans');
cans.value = eval(ans.value);
if (ans.value == "") {
ans.value = "0"
}
}
function brac() {
if (i == 0) {
ans.value += '(';
i = 1;
} else if (i == 1) {
ans.value += ')';
i = 0;
}
}
function result() {
ans.value = eval(ans.value);
if (ans.value == "undefined") {
ans.value = "0";
}
}
function back() {
ans.value = ans.value.substring(0, ans.value.length-1);
cans.value = eval(ans.value);
}
function clean() {
if (ans.value != "") {
ans.value = "0";
cans.value = "0";
}
}
</script>
<!-- Theme script -->
<script type="text/javascript" charset="utf-8">
function slider() {
let value = document.getElementById("range").value;
let change = document.querySelector("body");
change.style.filter = "hue-rotate("+value+"deg)";
}
function theme_slider1() {
let themeslider = document.querySelector("#box");
let theme_btn1 = document.querySelector("#theme_btn1");
let theme_btn2 = document.querySelector("#theme_btn2");
if (theme_btn1.style.display === "none") {
theme_btn1.style.display = "inline";
theme_btn2.style.display = "none";
themeslider.style.opacity = "0";
themeslider.style.top = "100vh";
} else {
theme_btn1.style.display = "none";
theme_btn2.style.display = "inline";
themeslider.style.opacity = "1";
themeslider.style.top = "0";
}
}
function theme_slider2() {
let ddt = document.querySelector(".dropdowntheme");
let ddtbtn = document.querySelector(".dropdownthemebtn");
if (ddtbtn.style.transform == "rotate(0deg)") {
ddtbtn.style.transform = "rotate(90deg)";
ddt.style.right = "0";
ddt.style.maxHeight = "500px";
ddt.style.maxHeight = "500px";
setTimeout(function() {
ddt.style.transform = "rotateY(360deg)"
}, 0);
} else {
ddtbtn.style.transform = "rotate(0deg)";
ddt.style.right = "100px";
ddt.style.maxHeight = "0";
setTimeout(function() {
ddt.style.transform = "rotateY(-360deg)"
}, 0);
}
}
let ddtopt1 = document.querySelector(".dropdowntheme_opt1");
let ddtopt2 = document.querySelector(".dropdowntheme_opt2");
let ddtopt3 = document.querySelector(".dropdowntheme_opt3");
function themecol1() {
document.querySelector("body").style.filter = "invert(100%)";
}
function comingsoon() {
let csa = document.querySelector("#comingsoona");
if (csa.style.display == "none") {
csa.style.display = "block";
} setInterval(function() {
csa.style.display = "none";
}, 1500);
}
</script>
<title>Calculator</title>
</head>
<body>
<div class="cal">
<input disabled="disabled" type="text" name="ans" id="ans" class="ans" value="0" />
<table>
<tr>
<td>
<div onclick="result()" class="btn">
<div class="btneff">
=
</div>
</div>
</td>
<td colspan="3">
<input disabled="disabled" type="text" id="cans" class="ans">
</input>
</td>
</tr>
<tr>
<td>
<div class="btn">
<div onclick="clean()" class="btneff">
Ac
</div>
</div>
</td>
<td>
<div class="btn">
<div onclick="back()" class="btneff">
Del
</div>
</div>
</td>
<td>
<div onclick="king('/100')" class="btn">
<div class="btneff">
%
</div>
</div>
</td>
<td>
<div onclick="king('/')" class="btn">
<div value="/" class="btneff">
÷
</div>
</div>
</td>
</tr>
<tr>
<td>
<div onclick="king('9')" class="btn">
<div value="9" class="btneff">
9
</div>
</div>
</td>
<td>
<div onclick="king('8')" class="btn">
<div value="8" class="btneff">
8
</div>
</div>
</td>
<td>
<div onclick="king('7')" class="btn">
<div value="7" class="btneff">
7
</div>
</div>
</td>
<td>
<div onclick="king('*')" class="btn">
<div class="btneff">
×
</div>
</div>
</td>
</tr>
<tr>
<td>
<div onclick="king('4')" class="btn">
<div value="4" class="btneff">
4
</div>
</div>
</td>
<td>
<div onclick="king('5')" class="btn">
<div value="5" class="btneff">
5
</div>
</div>
</td>
<td>
<div onclick="king('6')" class="btn">
<div value="6" class="btneff">
6
</div>
</div>
</td>
<td>
<div onclick="king('+')" class="btn">
<div value="+" class="btneff">
+
</div>
</div>
</td>
</tr>
<tr>
<td>
<div onclick="king('1')" class="btn">
<div class="btneff">
1
</div>
</div>
</td>
<td>
<div onclick="king('2')" class="btn">
<div class="btneff">
2
</div>
</div>
</td>
<td>
<div onclick="king('3')" class="btn">
<div class="btneff">
3
</div>
</div>
</td>
<td>
<div onclick="king('-')" class="btn">
<div class="btneff">
-
</div>
</div>
</td>
</tr>
<tr>
<td>
<div onclick="king('0')" class="btn">
<div class="btneff">
0
</div>
</div>
</td>
<td>
<div onclick="king('.')" class="btn">
<div class="btneff">
.
</div>
</div>
</td>
<td>
<div id="brac" onclick="brac()" class="btn">
<div class="btneff">
()
</div>
</div>
</td>
<td>
<div id="theme" onclick="theme_slider1()" class="btn">
<div class="btneff">
<svg id="theme_btn1" width="40px" height="400px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3H344c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm0-96c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM288 96c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32z" /></svg>
<svg id="theme_btn2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" /></svg>
</div>
</div>
</td>
</tr>
</table>
</div>
<header id="box">
<h2>Slide for Theme</h2>
<div class="inner">
<input type="range" id="range" value="0" min="0" max="360" oninput="slider()" />
</div>
<div class="dropdownthemebtncont" onclick="theme_slider2()">
<span class="dropdownthemebtn"></span>
</div>
<div class="dropdowntheme">
<div onclick="themecol1()" class="dropdowntheme_opt1"></div>
<div onclick="comingsoon()" class="dropdowntheme_opt2 comingsoon"></div>
<div onclick="comingsoon()" class="dropdowntheme_opt3 comingsoon"></div>
</div>
</header>
<div id="comingsoona"><span>Coming soon</span></div>
</body>
</html>
0 Comments