Drive Clock

Developer
Tulula Smith
Size
3,504 Kb
Views
12,144
  1. Drive Clock Previews
  2. Drive Clock HTML Codes
  3. Drive Clock CSS Codes
  4. Drive Clock JS Codes

How do I make an drive clock?

Desktop drive clock. What is a drive clock? How do you make a drive clock? This script and codes were developed by Tulula Smith on 10 November 2022, Thursday.

Drive Clock Previews
IQ Test

Drive Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drive Clock</title> <link href="https://fonts.googleapis.com/css?family=Lato:300|Scheherazade|Work+Sans:300" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Drive Clock</h2>
<div class="container"> <div class="perspective"> <div class="rotation"> <div id="work" class="spin"></div> </div> </div> <div class="frontPanel"> <span id="btn" class="btn"></span> <div id="glass" class="glass"> <div id="clock"> <h3 id="date">Friday 9<span id="abr">NA</span></h3> <h3 id="time">00:00<span id="sec">60</span></h3> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Drive Clock - Script Codes CSS Codes

* {margin:0; padding:0; text-decoration:none;}
html{ height:100%; background:linear-gradient(to top, rgba(160,160,160,1), rgba(230,230,230,1) 40%); color:#444; font-family:Helvetica, Arial, sans-serif; font-size:16px;
}
/*===== End Preset =====*/
h2 { margin:1.5% 0 1.5% 0; font-size:1.9rem; text-align:center;
}
h2::before, h2::after { position:relative; content:""; border-style:double; border-color:transparent;
}
h2::before { border-left-color:rgba(240,100,0,1); border-width:8px; left:-3px;
}
h2::after { border-right-color:rgba(240,100,0,1); border-width:8px; right:-3px;
}
/*===== Drive Body ======*/
.container { position:absolute; left:calc(50% - 172px); /* +10px for no scroll bar*/ font-family:'Lato', sans-serif;
}
.perspective { width:314px; -webkit-perspective: 314px; -moz-perspective: 314px; perspective: 314px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
.rotation { padding:10px; width:314px; background:#222; -webkit-transform:rotateX(45deg); -moz-transform:rotateY(45deg); transform:rotateX(45deg);
}
.spin { position:relative; width:300px; height:300px; border:7px solid rgba(70,30,50,0); border-radius:50%; box-shadow:inset 1px -1px 1px rgba(150,80,255,1); animation:spin 2s linear infinite; transition:3500ms; opacity:0;
}
.spin::after { position:absolute; content:""; width:10px; border-right:solid transparent 2px; border-left:solid transparent 2px; border-top:solid rgba(180,60,255,1) 5px; left:calc(50% - 5px); top:-6px;
}
.frontPanel { position:absolute; bottom:-67px; left:calc(50% - 252px); width:536px; height:45px; background:#222; box-shadow:inset rgba(255,255,255,.1) 0 0px 8px, rgba(0,0,0,.7) 0 6px 10px -3px;
}
.btn { position:absolute; top:13px; left:15px; width:15px; height:15px; background:rgba(185,20,15,.8); border:1px rgba(255,255,255,.08) solid; border-radius:3px; opacity:.7; cursor:pointer;
}
.active { background:rgba(20,135,15,.8); border:1px rgba(0,0,0,.4) solid; box-shadow:green 0 0 4px; outline:none;
}
/*===== Clock ======*/
.glass { position:absolute; bottom:55px; left:33px; width:470px; height:0; background:linear-gradient(to bottom right, rgba(50,5,70,.2), rgba(50,5,70,.1)); border:solid rgba(155,50,215,.3); border-width:3px 3px 0 3px; border-radius:20px 20px 0 0; box-sizing:border-box; overflow:hidden; display:none;
}
.clock { position:absolute; left:calc(50% - 99px); bottom:calc(50% - 48px); width:198px; height:0; color:#ddd; text-align:center; overflow:hidden;
}
#abr { position:relative; top:-11px; padding-left:1px; font-size:.7rem;
}
#date {font-size:1.7rem;}
#time { padding-left:15px; font-size:3.5rem;
}
#sec {font-size:.7rem;}
.anm-glass { display:block; visibility:hidden; animation:screen 1.2s 3s ease forwards;
}
.anm-clock { animation:clock 1.2s ease forwards;
}
/*===== Animations =====*/
@keyframes spin { to{transform:rotate(360deg);}
}
@keyframes screen { to{visibility:visible; height:250px;}
}
@keyframes clock { to{height:95px;}
}

Drive Clock - Script Codes JS Codes

var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var dD = new Date();
var hH;
var mM;
var span = "<span id='sec'></span>"
document.getElementById("date").innerHTML = day[dD.getDay()] + " " + dD.getDate() + "<span id='abr'></span>";
setInterval(function() { hM(); seconds(); dateAbbr(); /*if (h>=0 && h<6 || h>20){ document.getElementById("style").innerHTML = "body {background:rgba(118, 128, 128, 1)}"; } else { document.getElementById("style").innerHTML = "body {background:rgba(218, 228, 228, 1)}"; } */
}, 1000);
function hM(){ var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); if (m < 10) { mM = ":0"+m; } else { mM = ":"+m; } if (h < 10) { hH = "0"+h; } else { hH = h; } document.getElementById("time").innerHTML = hH+mM+span;
}
function seconds() { var sec = document.getElementById("sec"); var date = new Date(); var s = date.getSeconds(); if (s == 0) { sec.innerHTML = "00"; } else if (s < 10) { sec.innerHTML = "0" + s; } else { sec.innerHTML = s; }
}
function dateAbbr(){ var abr = document.getElementById("abr"); var date = dD.getDate(); if (date == 1 || date == 21 || date == 31) { abr.innerHTML = "ST"; } else if (date == 2 || date == 22) { abr.innerHTML = "ND"; } else if (date == 3 || date == 23) { abr.innerHTML = "RD"; } else { abr.innerHTML = "TH"; }
}
//////////////////
///// Switch /////
//////////////////
var button = document.getElementById("btn");
var glass = document.getElementById("glass");
var clock = document.getElementById("clock");
var work = document.getElementById("work");
button.addEventListener("click", function() { button.setAttribute("class", "btn active") glass.setAttribute("class", "glass anm-glass"); clock.setAttribute("class", "clock anm-clock"); work.style = "opacity: 1";
})
Drive Clock - Script Codes
Drive Clock - Script Codes
Home Page Home
Developer Tulula Smith
Username Tulula
Uploaded November 10, 2022
Rating 3
Size 3,504 Kb
Views 12,144
Do you need developer help for Drive Clock?

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!

Tulula Smith (Tulula) Script Codes
Name
A-Frame Play
2d Array functions
Color Generator
Currency Conversion
JS Video Control Play
Wireframe
Hole
Curtains
ToTop auto scroll
A Pen by Tulula Smith
Create amazing captions with AI!

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!