Random Wrist Watch
How do I make an random wrist watch?
If you ever needed to dial a number from your watch....Designed in browser only and is work in progress. I hope to add animations to this.. What is a random wrist watch? How do you make a random wrist watch? This script and codes were developed by Chris Ota on 15 September 2022, Thursday.
Random Wrist Watch Previews
Random Wrist Watch - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Wrist Watch</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
*, *:before, *:after { box-sizing: border-box;
}
html { height: 100%; width: 100%; font-size: 62.5%;
}
body { font-family: 'Ropa Sans', 'Cantarell', 'News Cycle', sans-serif; -webkit-font-smoothing: antialiased; font-size: 1.0em; user-select: none; background: radial-gradient(ellipse at top left, #98745c 0%, #eaedd9 50%, #80ae9e 100%);
}
.extra { width: 12em; height: 48em; background: #202c3b; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0.5em; box-shadow: 0.5em 0.5em 4em 0 rgba(0, 0, 0, 0.5);
}
.extra:after { content: ''; position: absolute; right: -7.0em; width: 2em; height: 2.4em; background: #ddd; bottom: 0; top: 0; margin: auto; border-radius: 0.3em;
}
.extra:before { content: ''; position: absolute; width: 24em; height: 24em; border-radius: 100%; box-shadow: 0.5em 0.5em 4em 0 rgba(0, 0, 0, 0.5); margin: auto; top: 0; bottom: 0; left: -6em; right: 0;
}
.watch { position: absolute; background: #eee; height: 24.4em; width: 24.4em; border-radius: 100%; margin: auto; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; border: 0.2em solid #999;
}
.top,
.bottom { height: 12em; width: 24em; overflow: hidden; position: relative;
}
.top > div,
.bottom > div { height: 12em; width: inherit; position: absolute; text-align: center; color: #777; border-top: 0.1em solid rgba(0, 0, 0, 0.1); border-bottom: 0.1em solid rgba(0, 0, 0, 0.1); background: #eee;
}
.top > div span,
.bottom > div span { border-radius: 100%; border: 0.1em solid rgba(255, 255, 255, 0); height: 2.4em; width: 2.4em; padding: 0.44em 0 0 0; color: #777; font-size: 2rem; position: absolute;
}
.top > div { transform-origin: bottom center;
}
.bottom > div { bottom: 0; transform-origin: top center;
}
.top > div:hover,
.bottom > div:hover { cursor: pointer;
}
.top > div:hover span,
.bottom > div:hover span { background: rgba(0, 0, 0, 0.2);
}
.top > div:active span,
.bottom > div:active span { background: rgba(0, 0, 0, 0.4);
}
.top { border-bottom: 0.1em solid rgba(0, 0, 0, 0.1);
}
#oe { border: none;
}
#oe span { bottom: 0.3em; left: 0.4em;
}
/*.mid1{ transform: rotate(18deg); background: rgba(255,255,255,0.1) !important; position: relative; z-index: 99;
}
.mid2{ transform: rotate(54deg); background: rgba(255,255,255,0.1) !important; position: relative; z-index: 99;
}
.mid3{ transform: rotate(90deg); background: rgba(255,255,255,0.1) !important; position: relative; z-index: 99;
}
.mid4{ transform: rotate(126deg); background: rgba(255,255,255,0.1) !important; position: relative; z-index: 99;
}
.mid5{ transform: rotate(162deg); background: rgba(255,255,255,0.1) !important; position: relative; z-index: 99;
}*/
#to { transform: rotate(36deg);
}
#to span { transform: rotate(-36deg); bottom: 0.2em; left: 0.4em;
}
#te { transform: rotate(72deg);
}
#te span { transform: rotate(-72deg); bottom: 0.2em; left: 0.35em;
}
#fr { transform: rotate(108deg);
}
#fr span { transform: rotate(-108deg); bottom: 0.2em; left: 0.4em;
}
#fe { transform: rotate(144deg);
}
#fe span { transform: rotate(-144deg); bottom: 0.2em; left: 0.4em;
}
#sx { border: none;
}
#sx span { top: 0.2em; left: 0.35em;
}
#sn { transform: rotate(-36deg);
}
#sn span { transform: rotate(36deg); top: 0.2em; left: 0.35em;
}
#et { transform: rotate(-72deg);
}
#et span { transform: rotate(72deg); top: 0.2em; left: 0.4em;
}
#ne { transform: rotate(-108deg);
}
#ne span { transform: rotate(108deg); top: 0.25em; left: 0.4em;
}
#zo { transform: rotate(-144deg);
}
#zo span { transform: rotate(144deg); top: 0.25em; left: 0.4em;
}
.center { position: absolute; z-index: 3; height: 13.33333em; width: 13.33333em; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 100%; overflow: hidden; border: 0.1em solid rgba(0, 0, 0, 0.1); background: #eee; /*box-shadow: 0 0 0 1px #fff, 0 0 4em rgba(0,0,0,0.5);*/
}
.input { height: 4.6rem; width: 100%; text-align: center; background: #fff; position: absolute; display: block; z-index: 10; top: 0; bottom: 0; left: 0; right: 0; margin: auto; color: #777; font-size: 1.5em; line-height: 1.6em; padding: 0.6em 0 0 0.5em;
}
.input .fa { position: relative; float: right; font-size: 2.2rem; line-height: 2.8rem; color: #777; right: 0.4em; animation: hide-back 8s infinite;
}
.input .fa:hover { cursor: pointer; color: #000;
}
.input #id { position: absolute; top: 0; left: 0; text-align: center; height: inherit; padding: inherit; background: #333; color: #fff; width: 100%; font-size: 1.2em; animation: id 8s infinite;
}
@keyframes hide-back { 0%, 55% { opacity: 1; } 57%, 100% { opacity: 0; }
}
@keyframes id { 0%, 55% { opacity: 0; } 57% { opacity: 1; }
}
.center span { text-align: center; display: block; width: 50%; font-size: 2.0rem;
}
#pd,
#sr { position: absolute; top: 0; margin: auto; color: #777; height: 6.66667em; width: 6.66667em;
}
#pd:hover,
#sr:hover { background: rgba(0, 0, 0, 0.05); cursor: pointer;
}
#pd { float: left; left: 0; border-radius: 6.66667em 0 0 0; padding: 2.0em 2.5em 0 2.0em;
}
#pd span { font-size: 1.8em; top: -0.15em; left: 0.8em; position: relative;
}
#sr { float: right; right: 0; border-radius: 0 6.66667em 0 0; padding: 2.0em 0 2.5em 2.0em; border-left: 0.1em solid rgba(0, 0, 0, 0.1);
}
#sr span { font-size: 3.8em; top: -0.5em; left: -0.2em; position: relative;
}
#cl { text-align: center; clear: both; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; color: #fff; height: 6.66667em; width: 13.33333em; border-radius: 0 0 6.66667em 6.66667em; padding: 3.4em 0 0; animation: end-call 8s infinite;
}
#cl .fa { font-size: 2.5em; animation: end-rotate 8s infinite; position: relative;
}
#cl:hover { background: #17986f; cursor: pointer;
}
@keyframes end-call { 0%, 45%, 51%, 56% { background: #26CE99; } 46% { background: #17986f; } 57%, 89%, 95%, 100% { background: #cf3638; } 90% { background: #b21834; }
}
@keyframes end-rotate { 55% { transform: rotate(0deg); top: 0em; } 59%, 96% { transform: rotate(136deg); top: -0.1em; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- /Best viewed in Chrome, WIP -->
<div class='extra'></div>
<div class='watch'> <div class='top'> <!-- /.mid1 --> <!-- /.mid2 --> <!-- /.mid3 --> <!-- /.mid4 --> <!-- /.mid5 --> <div id='oe'> <span>8</span> </div> <div id='to'> <span>9</span> </div> <div id='te'> <span>0</span> </div> <div id='fr'> <span>1</span> </div> <div id='fe'> <span>2</span> </div> </div> <div class='bottom'> <div id='sx'> <span>7</span> </div> <div id='sn'> <span>6</span> </div> <div id='et'> <span>5</span> </div> <div id='ne'> <span>4</span> </div> <div id='zo'> <span>3</span> </div> </div> <div class='center'> <div class='input'> 1 <div id='id'>Voicemail</div> <i class='fa fa-angle-left'></i> </div> <div id='pd'> <span>#</span> </div> <div id='sr'> <span>*</span> </div> <div id='cl'> <i class='fa fa-phone'></i> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Random Wrist Watch - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
*, *:before, *:after { box-sizing: border-box;
}
html { height: 100%; width: 100%; font-size: 62.5%;
}
body { font-family: 'Ropa Sans', 'Cantarell', 'News Cycle', sans-serif; -webkit-font-smoothing: antialiased; font-size: 1.0em; user-select: none; background: radial-gradient(ellipse at top left, #98745c 0%, #eaedd9 50%, #80ae9e 100%);
}
.extra { width: 12em; height: 48em; background: #202c3b; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0.5em; box-shadow: 0.5em 0.5em 4em 0 rgba(0, 0, 0, 0.5);
}
.extra:after { content: ''; position: absolute; right: -7.0em; width: 2em; height: 2.4em; background: #ddd; bottom: 0; top: 0; margin: auto; border-radius: 0.3em;
}
.extra:before { content: ''; position: absolute; width: 24em; height: 24em; border-radius: 100%; box-shadow: 0.5em 0.5em 4em 0 rgba(0, 0, 0, 0.5); margin: auto; top: 0; bottom: 0; left: -6em; right: 0;
}
.watch { position: absolute; background: #eee; height: 24.4em; width: 24.4em; border-radius: 100%; margin: auto; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; border: 0.2em solid #999;
}
.top,
.bottom { height: 12em; width: 24em; overflow: hidden; position: relative;
}
.top > div,
.bottom > div { height: 12em; width: inherit; position: absolute; text-align: center; color: #777; border-top: 0.1em solid rgba(0, 0, 0, 0.1); border-bottom: 0.1em solid rgba(0, 0, 0, 0.1); background: #eee;
}
.top > div span,
.bottom > div span { border-radius: 100%; border: 0.1em solid rgba(255, 255, 255, 0); height: 2.4em; width: 2.4em; padding: 0.44em 0 0 0; color: #777; font-size: 2rem; position: absolute;
}
.top > div { transform-origin: bottom center;
}
.bottom > div { bottom: 0; transform-origin: top center;
}
.top > div:hover,
.bottom > div:hover { cursor: pointer;
}
.top > div:hover span,
.bottom > div:hover span { background: rgba(0, 0, 0, 0.2);
}
.top > div:active span,
.bottom > div:active span { background: rgba(0, 0, 0, 0.4);
}
.top { border-bottom: 0.1em solid rgba(0, 0, 0, 0.1);
}
#oe { border: none;
}
#oe span { bottom: 0.3em; left: 0.4em;
}
/*.mid1{ transform: rotate(18deg); background: rgba(255,255,255,0.1) !important; position: relative; z-index: 99;
}
.mid2{ transform: rotate(54deg); background: rgba(255,255,255,0.1) !important; position: relative; z-index: 99;
}
.mid3{ transform: rotate(90deg); background: rgba(255,255,255,0.1) !important; position: relative; z-index: 99;
}
.mid4{ transform: rotate(126deg); background: rgba(255,255,255,0.1) !important; position: relative; z-index: 99;
}
.mid5{ transform: rotate(162deg); background: rgba(255,255,255,0.1) !important; position: relative; z-index: 99;
}*/
#to { transform: rotate(36deg);
}
#to span { transform: rotate(-36deg); bottom: 0.2em; left: 0.4em;
}
#te { transform: rotate(72deg);
}
#te span { transform: rotate(-72deg); bottom: 0.2em; left: 0.35em;
}
#fr { transform: rotate(108deg);
}
#fr span { transform: rotate(-108deg); bottom: 0.2em; left: 0.4em;
}
#fe { transform: rotate(144deg);
}
#fe span { transform: rotate(-144deg); bottom: 0.2em; left: 0.4em;
}
#sx { border: none;
}
#sx span { top: 0.2em; left: 0.35em;
}
#sn { transform: rotate(-36deg);
}
#sn span { transform: rotate(36deg); top: 0.2em; left: 0.35em;
}
#et { transform: rotate(-72deg);
}
#et span { transform: rotate(72deg); top: 0.2em; left: 0.4em;
}
#ne { transform: rotate(-108deg);
}
#ne span { transform: rotate(108deg); top: 0.25em; left: 0.4em;
}
#zo { transform: rotate(-144deg);
}
#zo span { transform: rotate(144deg); top: 0.25em; left: 0.4em;
}
.center { position: absolute; z-index: 3; height: 13.33333em; width: 13.33333em; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 100%; overflow: hidden; border: 0.1em solid rgba(0, 0, 0, 0.1); background: #eee; /*box-shadow: 0 0 0 1px #fff, 0 0 4em rgba(0,0,0,0.5);*/
}
.input { height: 4.6rem; width: 100%; text-align: center; background: #fff; position: absolute; display: block; z-index: 10; top: 0; bottom: 0; left: 0; right: 0; margin: auto; color: #777; font-size: 1.5em; line-height: 1.6em; padding: 0.6em 0 0 0.5em;
}
.input .fa { position: relative; float: right; font-size: 2.2rem; line-height: 2.8rem; color: #777; right: 0.4em; animation: hide-back 8s infinite;
}
.input .fa:hover { cursor: pointer; color: #000;
}
.input #id { position: absolute; top: 0; left: 0; text-align: center; height: inherit; padding: inherit; background: #333; color: #fff; width: 100%; font-size: 1.2em; animation: id 8s infinite;
}
@keyframes hide-back { 0%, 55% { opacity: 1; } 57%, 100% { opacity: 0; }
}
@keyframes id { 0%, 55% { opacity: 0; } 57% { opacity: 1; }
}
.center span { text-align: center; display: block; width: 50%; font-size: 2.0rem;
}
#pd,
#sr { position: absolute; top: 0; margin: auto; color: #777; height: 6.66667em; width: 6.66667em;
}
#pd:hover,
#sr:hover { background: rgba(0, 0, 0, 0.05); cursor: pointer;
}
#pd { float: left; left: 0; border-radius: 6.66667em 0 0 0; padding: 2.0em 2.5em 0 2.0em;
}
#pd span { font-size: 1.8em; top: -0.15em; left: 0.8em; position: relative;
}
#sr { float: right; right: 0; border-radius: 0 6.66667em 0 0; padding: 2.0em 0 2.5em 2.0em; border-left: 0.1em solid rgba(0, 0, 0, 0.1);
}
#sr span { font-size: 3.8em; top: -0.5em; left: -0.2em; position: relative;
}
#cl { text-align: center; clear: both; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; color: #fff; height: 6.66667em; width: 13.33333em; border-radius: 0 0 6.66667em 6.66667em; padding: 3.4em 0 0; animation: end-call 8s infinite;
}
#cl .fa { font-size: 2.5em; animation: end-rotate 8s infinite; position: relative;
}
#cl:hover { background: #17986f; cursor: pointer;
}
@keyframes end-call { 0%, 45%, 51%, 56% { background: #26CE99; } 46% { background: #17986f; } 57%, 89%, 95%, 100% { background: #cf3638; } 90% { background: #b21834; }
}
@keyframes end-rotate { 55% { transform: rotate(0deg); top: 0em; } 59%, 96% { transform: rotate(136deg); top: -0.1em; }
}
Random Wrist Watch - Script Codes JS Codes
// Best viewed in Chrome. Hover states work, but numbers can't actually be inputted or deleted.
| Developer | Chris Ota |
| Username | chrisota |
| Uploaded | September 15, 2022 |
| Rating | 4 |
| Size | 7,665 Kb |
| Views | 20,240 |
Do you need developer help for Random Wrist Watch?
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!
Chris Ota (chrisota) Script Codes
| Name | Size |
| Slide-Up Folder Tabs | 2,396 Kb |
| Button Hover Animation | 3,006 Kb |
| Origami Penguin | 4,204 Kb |
| Simple Toggle Switch | 2,829 Kb |
| Pure HTML and CSS Braun Clock | 6,537 Kb |
| Vertical Progress Navigation | 4,767 Kb |
| Single HTML Element Icons | 8,967 Kb |
| Two Element Typeface | 4,942 Kb |
| Sticky Nav Bar | 5,134 Kb |
| Lego Man | 5,277 Kb |
Create amazing sales emails 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!
Similar Scripts & Codes
| Name | Username | Size |
| Fireworks Show | Arianalynn | 3,048 Kb |
| Fun form with currentColor | Bnthor | 2,713 Kb |
| A Pen by Xand0r | Xand0r | 1,928 Kb |
| Header | Er40 | 1,542 Kb |
| Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
| Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
| Search field | Jamesbarnett | 2,100 Kb |
| Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
| Sign Up Form | Sicontis | 5,272 Kb |
| Simple, flat contact form | Zeaklous | 2,719 Kb |
Do you want hide your ip address?
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!