Smartwatch OS

Developer
Ianchouinard
Size
7,265 Kb
Views
8,096
  1. Smartwatch OS Previews
  2. Smartwatch OS HTML Codes
  3. Smartwatch OS CSS Codes
  4. Smartwatch OS JS Codes

How do I make an smartwatch os?

A mock light smartwatch OS complete with some dashboard app mock ups. Designed with a mix of transparent overlays and material design principles. Making something in the size format is pretty fun and has it's design challenges. I really have no clue how a keyboard fits into this though because I don't have a smartwatch (yet!). . What is a smartwatch os? How do you make a smartwatch os? This script and codes were developed by Ianchouinard on 03 December 2022, Saturday.

Smartwatch OS Previews
IQ Test

Smartwatch OS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smartwatch OS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <section id="watch-and-learn"> <section class="screen"> <section id="mainOs"> <!--lock screen--> <section class="lockScreen view noScroll"> <div class="notifications"> <ul> <li class="mssgNot"></li> <li class="emailNot"></li> <li class="planNot"></li> </ul> </div> <h1 class="time"> <span class="hr"></span> <span>:</span> <span class="min"></span> </h1> <div class="line"></div> <h2> <span class="ofWeek"></span> </h2> <h2 class="day"> <span class="month"></span> <span class="date"></span> </h2> <div class="unlockMe"> <div class="unlockToggle"> <ul> <li class="unlock"></li> </ul> </div> </div> </section> <!--dashboard--> <section class="dashboard view noScroll"> <div class="dashNav"> <h3> <span class="hr"></span> <span>:</span> <span class="min"></span> </h3> <h3> <span class="month"></span> <span class="date"></span> </h3> </div> <div class="dashItems"> <ul> <li class="toggleToDo"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/todo.svg"> <p>To Do</p> </li> <li class="toggleEmail"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/mail.png"> <p>Email</p> </li> <li class="toggleMssg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/msg.png"> <p>Messenger</p> </li> <li class="exit"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/clock.png"> <p>Exit</p> </li> </ul> </div> </section> </section> <!--to do app--> <section class="toDo view scroll"> <div class="toDoNav"> <h1>Go To Dashboard</h1> </div> <ul class="toDoList"> <li> <p>Time</p> <p>Task</p> </li> <li value="0"> <div class="num">00</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="1"> <div class="num">01</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="2"> <div class="num">02</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="3"> <div class="num">03</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="4"> <div class="num">04</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="5"> <div class="num">05</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="6"> <div class="num">06</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="7"> <div class="num">07</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="8"> <div class="num">08</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="9"> <div class="num">09</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="10"> <div class="num">10</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="11"> <div class="num">11</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="12"> <div class="num">12</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="13"> <div class="num">13</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="14"> <div class="num">14</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="15"> <div class="num">15</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="16"> <div class="num">16</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="17"> <div class="num">17</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="18"> <div class="num">18</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="19"> <div class="num">19</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="20"> <div class="num">20</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="21"> <div class="num">21</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="22"> <div class="num">22</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> <li value="23"> <div class="num">23</div> <input type="text" placeholder="New Task" /> <span class="observed"></span> </li> </ul> </section> <!--messenger app--> <section class="messenger view noScroll"> <div class="toDoNav"> <h1>Go To Dashboard</h1> </div> <input id="postIt" type="text" placeholder="enter messeage" /> <div class="send"><h2>Send</h2></div> <div class="responses"> <h1 class="me">Me</h1> <p class="mssg"></p> </div> </section> <!--Email app--> <section class="email view scroll"> <div class="toDoNav"> <h1>Go To Dashboard</h1> </div> <h2>New Emails</h2> <ul> <li class="subject"> <span>The President</span> <span>Dinner Tomorrow?</span> <span>10:46</span> <span>August. 21</span> </li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus eu magna ut auctor. Praesent congue at mi nec placerat. Proin at sapien velit. Nam ac efficitur orci, vitae molestie odio. Integer ullamcorper sapien vitae turpis fermentum ultricies. In hac habitasse platea dictumst. Aenean arcu erat, malesuada a congue a, congue et erat. Vivamus iaculis aliquet lectus. Praesent facilisis ante a arcu hendrerit condimentum. Nunc sit amet imperdiet odio.</li> <li class="subject"> <span>Euphrates</span> <span>Order has shipped</span> <span>8:32</span> <span>August. 21</span> </li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus eu magna ut auctor. Praesent congue at mi nec placerat. Proin at sapien velit. Nam ac efficitur orci, vitae molestie odio. Integer ullamcorper sapien vitae turpis fermentum ultricies. In hac habitasse platea dictumst. Aenean arcu erat, malesuada a congue a, congue et erat. Vivamus iaculis aliquet lectus. Praesent facilisis ante a arcu hendrerit condimentum. Nunc sit amet imperdiet odio.</li> <li class="subject"> <span>Your Boss</span> <span>Work Stuff</span> <span>6:25</span> <span>August. 21</span> </li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus eu magna ut auctor. Praesent congue at mi nec placerat. Proin at sapien velit. Nam ac efficitur orci, vitae molestie odio. Integer ullamcorper sapien vitae turpis fermentum ultricies. In hac habitasse platea dictumst. Aenean arcu erat, malesuada a congue a, congue et erat. Vivamus iaculis aliquet lectus. Praesent facilisis ante a arcu hendrerit condimentum. Nunc sit amet imperdiet odio.</li> <li class="subject"> <span>Skecthy Email</span> <span>Wire Transfer</span> <span>16:45</span> <span>August. 20</span> </li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus eu magna ut auctor. Praesent congue at mi nec placerat. Proin at sapien velit. Nam ac efficitur orci, vitae molestie odio. Integer ullamcorper sapien vitae turpis fermentum ultricies. In hac habitasse platea dictumst. Aenean arcu erat, malesuada a congue a, congue et erat. Vivamus iaculis aliquet lectus. Praesent facilisis ante a arcu hendrerit condimentum. Nunc sit amet imperdiet odio.</li> </ul> </section> </section>
</section>
<section class="wristband">
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Smartwatch OS - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,300italic);
.centered, .wristband, #watch-and-learn, #watch-and-learn .screen { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
}
.view { width: 100%; height: auto; overflow: hidden;
}
.noScroll { width: 100%; height: 390px; overflow: hidden; position: relative; transition: margin 500ms;
}
.scroll { width: 100%; height: 390px; overflow-x: hidden; overflow-y: auto; position: relative; transition: margin 500ms;
}
.line { width: 40px; height: 5px; border-bottom: 1px solid #e8e8e8; margin-left: 2em;
}
.wristband { width: 175px; height: 100vh; z-index: 3; background-color: #1c1c1c;
}
#watch-and-learn { width: 362px; height: 440px; border-radius: 10px; background-color: #141414; z-index: 4;
}
#watch-and-learn .screen { width: 312px; height: 390px; cursor: pointer; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/ratz.png"); font-family: 'Open Sans', sans-serif; overflow: hidden;
}
.notifications { padding: .5em 0; background-color: #1c1c1c;
}
.notifications ul { text-align: center;
}
.notifications ul li { margin: 0 1em; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; display: inline-block; vertical-align: bottom;
}
.notifications .mssgNot { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/msg.png");
}
.notifications .emailNot { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/noteEmail.png"); background-position: 0 3px;
}
.notifications .planNot { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/todo.svg");
}
.lockScreen { background-color: rgba(194, 45, 45, 0.75);
}
.lockScreen h1 { color: #e8e8e8; font-weight: 300; font-size: 5.75em; padding: .6em 0 0 .25em;
}
.lockScreen h2 { color: #e8e8e8; font-weight: 300; font-size: .8em; padding: .75em 0 0 2.5em;
}
.lockScreen .time span { margin-left: -15px;
}
.lockScreen .time span:first-child { margin-left: 0;
}
.lockScreen .day { font-weight: 400; font-size: 1em; padding: .25em 0 0 1.95em;
}
.lockScreen .unlockMe { width: 100%; height: 50px; position: absolute; bottom: 0; background-color: rgba(28, 28, 28, 0.85);
}
.lockScreen .unlockToggle { position: absolute; top: 17px;
}
.lockScreen .unlockToggle .unlock { margin-top: -7px;
}
.lockScreen .unlockToggle .unlock:before { content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/lock.png");
}
.lockScreen .unlockToggle .unlocked { margin-top: -7px;
}
.lockScreen .unlockToggle .unlocked:before { content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/unlocked.png");
}
.lockScreen .unlockToggle ul { text-align: center; width: 312px;
}
.lockScreen .unlockToggle ul li { list-style: none; display: inline-block; color: #e8e8e8;
}
.dashboard { background-color: rgba(33, 170, 102, 0.8);
}
.dashboard .dashNav { width: 100%; background-color: #1c1c1c; padding: .5em 0;
}
.dashboard h3 { color: #e8e8e8; padding: 0 .5em; display: inline;
}
.dashboard h3:nth-child(2) { float: right;
}
.dashboard .dashItems { padding: 1em;
}
.dashboard .dashItems ul li { width: 50%; height: 150px; float: left; color: white; text-align: center; position: relative;
}
.dashboard .dashItems ul li img { margin-left: 40px; margin-bottom: 10px; width: 60px; display: block; position: absolute; bottom: 40px;
}
.dashboard .dashItems ul li p { position: absolute; bottom: 20px; text-align: center; width: 100%;
}
.pushUp { margin-top: -390px;
}
.toDoNav { width: 100%; background-color: #1c1c1c; padding: .5em 0;
}
.toDoNav h1 { color: #e8e8e8; padding-left: .5em;
}
.toDo { background-color: #21aa66; display: none;
}
.toDo ul { width: 270px; margin: 0 auto;
}
.toDo ul li { color: #e8e8e8; padding: 1em 0 1em 0; border-bottom: 1px solid #e8e8e8;
}
.toDo ul li:last-child { border-bottom: none; padding-bottom: 1em;
}
.toDo ul li p { display: inline;
}
.toDo ul li p:nth-child(2) { float: right;
}
.toDo ul li .num { padding: .2em; color: rgba(194, 45, 45, 0.75); background-color: rgba(232, 232, 232, 0.6); width: 20px; display: inline-block;
}
.toDo ul li input { background-color: rgba(33, 170, 102, 0); border: none; color: #e8e8e8; width: 200px; display: inline-block; font-size: 1em;
}
.toDo ul li ::-webkit-input-placeholder { color: #e8e8e8;
}
.toDo ul li ::-moz-placeholder { /* Firefox 19+ */ color: #e8e8e8;
}
.toDo ul li :-ms-input-placeholder { color: #e8e8e8;
}
.messenger { background-color: #c22d2d;
}
.messenger input { width: 75%; height: 40px; position: absolute; bottom: 0; padding-left: 5%;
}
.messenger .send { width: 20%; height: 46px; position: absolute; right: 0; bottom: 0; background-color: #21aa66;
}
.messenger .send h2 { color: #e8e8e8; margin-top: 15px; text-align: center;
}
.messenger .responses { width: 100%; height: 344px; overflow-y: auto; overflow-x: hidden;
}
.messenger .me { padding: 1em 1em .5em 1em; font-size: 1.15em; display: none;
}
.messenger p { display: none; padding: .5em 1em .5em .5em; margin-left: 1em; color: #1c1c1c; font-weight: 300; font-size: 1em; line-height: 180%; background-color: #e8e8e8; max-width: 230px; border-radius: 7px;
}
.email { background-color: #c22d2d;
}
.email h2 { background-color: #e8e8e8; color: #1c1c1c; padding: .5em 0 .5em 1em;
}
.email span { display: inline-block; margin: .2em 0; border-right: 1px solid #e8e8e8; padding: 0 .5em 0 0;
}
.email ul { padding: .5em 1em;
}
.email li { color: #e8e8e8; font-size: .9em; font-weight: 300; line-height: 140%; padding-top: .5em; display: none;
}
.email .subject { font-weight: 700; border-bottom: 1px solid #e8e8e8; padding-bottom: .5em; display: block;
}

Smartwatch OS - Script Codes JS Codes

$(document).ready(function(){ //time & date function likeARollex () { //get time/date var time = new Date(); var hr = time.getHours(); var min = time.getMinutes(); var ofWeek = time.getDay(); var month = time.getMonth(); var today = time.getDate(); //add zero if the time is 1 digit if (hr < 10){ $('.hr').html("0" + hr); } else{ $('.hr').html(hr); } if (min < 10){ $('.min').html("0" + min); } else{ $('.min').html(min); } //day of week as string var weeks = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; for(w=0; w <= 6; w++){ var thisOfWeek = weeks[w]; if (ofWeek == w){ $('.ofWeek').html(thisOfWeek); } } //month as string var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; for(i=0; i <= 11; i++){ var thisMonth = months[i]; if(month == i){ $('.month').html(thisMonth + "."); } } $('.date').html(today); } setInterval(likeARollex, 1000); //messsenger app $('.send').on('click', function(){ var post = $('#postIt').val(); $('.me').show(); $('.mssg').fadeIn() .append(post + "<br>"); $('#postIt').val("") }); //email app $('.subject').on('click', function(){ $(this).next('li') .slideToggle(); }); //toggle views $('.unlockMe').on('click', function(){ $('.unlock').addClass('unlocked'); $('.lockScreen').addClass('pushUp'); }); $('.toggleToDo').on('click', function(){ $('#mainOs').hide(); $('.toDo').fadeIn(); }); $('.toggleMssg').on('click', function(){ $('#mainOs').hide(); $('.messenger').fadeIn(); }); $('.toggleEmail').on('click', function(){ $('#mainOs').hide(); $('.email').fadeIn(); }) $('.toDoNav').on('click', function(){ $('.toDo').hide(); $('.messenger').hide(); $('.email').hide(); $('#mainOs').fadeIn(); }); $('.exit').on('click', function(){ $('.lockScreen').removeClass('pushUp'); $('.unlock').removeClass('unlocked'); });
});
Smartwatch OS - Script Codes
Smartwatch OS - Script Codes
Home Page Home
Developer Ianchouinard
Username ianchouinard
Uploaded December 03, 2022
Rating 3
Size 7,265 Kb
Views 8,096
Do you need developer help for Smartwatch OS?

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!

Ianchouinard (ianchouinard) Script Codes
Name
Site Mapper
Paint with Canvas and p5. Works on touchscreen.
Css3 3D atom figure
Working JS Boggle
IOS clock app icon
Folding nav tabs
Background Transition On Scroll
Background expand on hover transition
Background transition progress bar
Simple Counter
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!