Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

208 lines (186 sloc) 6.473 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clock</title>
<link rel="stylesheet" href="sp://import/css/adam.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="clock">
<div class="clock-top">
<button type="button" class="switch-face"></button>
</div>
<div class="clock-frame">
<div class="clock-inside">
<canvas class="clock-face" id="clock-face" width="670" height="200"></canvas>
</div>
</div>
</div>
<div class="content">
<div class="col sleep">
<h1>Fall asleep to music</h1>
<div class="form">
<fieldset class="time-format">
<div class="form-item">
<label>Time format</label>
<button type="button" class="cbutton toggle">Time</button>
<button type="button" class="cbutton toggle active">Duration</button>
</div>
</fieldset>
<fieldset class="time-values">
<div class="form-item">
<label for="sleep-hours">Hours</label>
<span class="styled-select">
<span class="styled-select-value">0</span>
<span class="cbutton styled-select-button">▾</span>
<select id="sleep-hours">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</span>
</div>
<div class="form-item">
<label for="sleep-minutes">Minutes</label>
<span class="styled-select">
<span class="styled-select-value">0</span>
<span class="cbutton styled-select-button">▾</span>
<select id="sleep-minutes">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30" selected>30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
</span>
</div>
</fieldset>
</div>
<button type="button" class="cbutton start start-sleep" disabled>Start the music</button>
<div class="droparea">
<div class="instructions">
<h1>Drop any music here</h1>
<p>Drag and drop a <b>playlist</b>, <b>album</b> or <b>track</b> here to listen to it while falling asleep.</p>
</div>
<div class="music hidden">
<div class="image"></div>
<span class="title"></span>
<span class="numtracks"></span>
</div>
</div>
</div>
<div class="col wake-up">
<h1>Wake up to music</h1>
<div class="form">
<fieldset class="time-format">
<div class="form-item">
<label>Time format</label>
<button type="button" class="cbutton toggle active">Time</button>
<button type="button" class="cbutton toggle">Duration</button>
</div>
</fieldset>
<fieldset class="time-values">
<div class="form-item">
<label for="wake-hours">Hours</label>
<span class="styled-select">
<span class="styled-select-value">0</span>
<span class="cbutton styled-select-button">▾</span>
<select id="wake-hours">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected>7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</span>
</div>
<div class="form-item">
<label for="wake-minutes">Minutes</label>
<span class="styled-select">
<span class="styled-select-value">0</span>
<span class="cbutton styled-select-button">▾</span>
<select id="wake-minutes">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
</span>
</div>
</fieldset>
</div>
<button type="button" class="cbutton start start-wake" disabled>Start the alarm</button>
<div class="droparea">
<div class="instructions">
<h1>Drop any music here</h1>
<p>Drag and drop a <b>playlist</b>, <b>album</b> or <b>track</b> here to wake up by it.</p>
</div>
<div class="music hidden">
<div class="image"></div>
<span class="title"></span>
<span class="numtracks"></span>
</div>
</div>
</div>
</div>
<p class="notice"><b>Note!</b> The app must be open for the wake up clock to work.</p>
<script src="js/ocanvas-2.0.0.min.js"></script>
<script>var sp = getSpotifyApi(1), app = sp.require("js/app");</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.