Skip to content

Instantly share code, notes, and snippets.

@Leask

Leask/index.html

Created October 21, 2012 12:35
Show Gist options
  • Save Leask/3926861 to your computer and use it in GitHub Desktop.
Save Leask/3926861 to your computer and use it in GitHub Desktop.
Download ZIP
Time controller
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="time.css" type="text/css"/>
<title>Time controller</title>
</head>
<body onselectstart="return false">
<div class="blackmask"></div>
<section>
<div id="time-panel">
<div class="side-float"></div>
<div class="main">
<div class="time-input">
<textarea>Sometime</textarea>
<div class="enter"></div>
</div>
<div id="cal">
<table class="week" >
<tr>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
</table>
<div class="day">
<table>
<tr>
<td>30</td>
<td>31</td>
<td class="1th">1</td>
<td class="2-7th">2</td>
<td class="2-7th">3</td>
<td class="2-7th">4</td>
<td class="2-7th">5</td>
</tr>
<tr>
<td class="2-7th">6</td>
<td class="2-7th today">Today</td>
<td>8</td>
<td>9</td>
<td class="selected">10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td class="first">1</td>
<td class="2-7th">2</td>
<td class="2-7th">3</td>
</tr>
<tr>
<td class="2-7th">4</td>
<td class="2-7th">5</td>
<td class="2-7th">6</td>
<td class="2-7th">7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
</div>
</div>
<div class="side-switch"></div>
</div>
<div class="side">
<dl class="number">
<dd>1<small></small><small></small><small></small><small></small></dd>
<dd>2<small></small><small></small><small></small><small></small></dd>
<dt>3<small></small><small></small><small></small><small></small></dt>
<dd>4<small></small><small></small><small></small><small></small></dd>
<dd>5<small></small><small></small><small></small><small></small></dd>
<dt>6<small></small><small></small><small></small><small></small></dt>
<dd>7<small></small><small></small><small></small><small></small></dd>
<dd>8<small></small><small></small><small></small><small></small></dd>
<dt>9<small></small><small></small><small></small><small></small></dt>
<dd>10<small></small><small></small><small></small><small></small></dd>
<dd>11<small></small><small></small><small></small><small></small></dd>
<dt>12<small></small><small></small><small></small><small></small></dt>
<dd>1<small></small><small></small><small></small><small></small></dd>
<dd>2<small></small><small></small><small></small><small></small></dd>
<dt>3<small></small><small></small><small></small><small></small></dt>
<dd>4<small></small><small></small><small></small><small></small></dd>
<dd>5<small></small><small></small><small></small><small></small></dd>
<dt>6<small></small><small></small><small></small><small></small></dt>
<dd>7<small></small><small></small><small></small><small></small></dd>
<dd>8<small></small><small></small><small></small><small></small></dd>
<dt>9<small></small><small></small><small></small><small></small></dt>
<dd>10<small></small><small></small><small></small><small></small></dd>
<dd>11<small></small><small></small><small></small><small></small></dd>
<dt>12<small></small><small></small><small></small><small></small></dt>
</dl>
</div>
</div>
</section>
</body>
</html>
Raw
script.js
var show_time = true;
$('.side-switch').click(function() {
if (show_time) {
$('.side-float').hide();
$('.side').hide();
$('.side-switch').css({
'border-right' : '4px solid transparent',
'border-left' : '4px solid rgba(0,0,0,0.35)'
});
} else {
$('.side-float').show();
$('.side').show();
$('.side-switch').css({
'border-right' : '10px solid transparent;',
'border-left' : '10px solid transparent;'
});
}
show_time = !show_time;
});
Raw
style.css
body{
/background-image: url(https://dl.dropbox.com/u/5658482/cross.png);
background-repeat: no-repeat;
background-position:top center;
background-color:#ddd;
}
section{
width: 1000px;
margin: 0 auto;
position: relative;;
}
/.blackmask{
position: absolute;
background-color: rgba(0, 0, 0, .35);
box-shadow: 0 0 800px rgba(0,0,0,.5) inset;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#time-panel{
display: inline-block;
position: relative;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
padding: 10px 10px 6px;
border-radius: 6px;
/background-color: hsl(0, 0%, 97%);
background-color: white;
top: 170px;
left: 170px;
border: 2px solid #386FA5;
}
#time-panel::before{
content: "";
position: absolute;
width: 0;
height: 0;
/border-bottom: 10px solid white;
border-bottom: 10px solid #386FA5;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: 100%;
left: 28px;
}
.main{
display: inline-block;
position: relative;
}
.time-input{
position: relative;
height: 34px;
margin-bottom: 8px;
}
.time-input >.enter{
position: absolute;
width: 15px;
height: 30px;
right: 7px;
bottom: 0;
opacity: .75;
background: url(https://dl.dropbox.com/u/5658482/enter_blue.png) no-repeat;
background-position: 0 12px;
}
.time-input >.enter:hover{
opacity: 1;
}
.time-input textarea{
position: absolute;
border-style: dashed;
border-color: hsl(211, 60%, 69%);
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #386FA5;
font:lighter 20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
resize: none;
}
.time-input textarea:hover{
background-color: #f5f5f5;
}
.time-input textarea:focus{
background-color: white;
}
#cal{
margin-top: 8px;
height: 170px;
position: relative;
border-radius: 3px;
background-color: #fcfcfc;
}
.week, .day table{
border-collapse: collapse;
}
.day td,.week td{
width: 50px;
}
.week{
border-radius: 3px 3px 0 0;
background-color: #386FA5;
}
.week tr{
text-align: center;
font: lighter 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #cfe1f4;
}
.week td{
border: 1px solid transparent;
}
.day{
position: absolute;
overflow-y: auto;
display: inline-block;
box-shadow: 0px 0px 4px rgba(0,0,0,0.35) inset;
border-radius: 0 0 3px 3px;
top: 20px;
bottom: 0;
}
.day table{
font: lighter 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: hsl(211, 29%, 57%);
}
.day td{
text-align: center;
border: 1px solid rgba(0,0,0,0.08);
height: 50px;
}
.day td:hover{
background-color:#F2F2F2;
color: #386ea2;
}
.day .today{
background-color: #f3f9d7;
}
.day .today:hover{
background-color: #eaf3ba;
font-weight: 300;
}
.day .selected{
background-color: #386FA5;
color: white;
font-weight: bold;
box-shadow: 0 0 10px rgba(0,0,0,0.1) inset;
}
.day .selected:hover{
background-color: #386FA5;
color: white;
font-weight: bold;
}
/.1th{
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
}
/.2-7th{
border-top: 2px solid #ccc;
}
.side-float{
width: 140px;
float: right;
}
.side{
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 140px;
border-radius: 0 3px 3px 0;
overflow-y: auto;
background: -moz-linear-gradient(360deg, rgba(0, 0, 0, 0.07) 0%, rgba(0, 0, 0, 0) 5%) #386FA5;
background: -webkit-gradient(linear, left bottom, right bottom, from(rgba(0, 0, 0, 0.07)), color-stop(0.05, rgba(0, 0, 0, 0))) #386FA5;
}
.side-switch{
position: absolute;
right: -10px;
bottom: 50%;
margin-bottom: -15px;
width: 8px;
background-color: #cfcfcf;
height: 30px;
border-radius: 3px 0 0 3px;
box-shadow: 0 0px 1px rgba(0,0,0,.2) inset;
}
.side-switch::before{
content: "";
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 4px solid rgba(0,0,0,0.4);
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
position: absolute;
top: 11px;
right: 2px;
}
.side-switch:hover{
background-color: #ddd;
box-shadow: 1px 0px 5px rgba(0,0,0,0.3) inset;
}
.side-switch:active{
background-color: #aaa;
}
.number dt, .number dd{
height: 13px;
}
.number dt:active, .number dd:active{
background-color: #1e4e7e;
}
.number dt::before, .number dd::before{
content: "";
position: absolute;
border-top: 1px solid white;
margin-top: 6px;
left: 0;
}
.number dt:hover::before, .number dd:hover::before{
border-top: 2px solid white;
}
.number dt::before{
width: 12px;
}
.number dd::before{
width: 4px;
}
.number *{
margin: 0;
width: 100%;
color: #CFE1F4;
font: lighter 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: left;
text-indent: 16px;
line-height: 12px;
}
.number dd, .number small{
color: transparent;
}
.number small{
position: relative;
}
.number small::before{
content: "";
position: relative;
left: -15px;
width: 20px;
display: inline-block;
white-space: pre;
}
.number small:nth-child(1)::before{
content: ":00";
}
.number small:nth-child(2)::before{
content: ":15";
}
.number small:nth-child(3)::before{
content: ":30";
}
.number small:nth-child(4)::before{
content: ":45";
}
.number dt:nth-last-of-type(n+6) small::after,.number dd:nth-last-of-type(n+9) small::after{
position: absolute;
height: 100%;
right: -24px;
bottom: -2px;
line-height: 12px;
content: "AM";
white-space: pre;
}
.number dt:nth-of-type(n+4) small::after,.number dd:nth-of-type(n+9) small::after{
position: absolute;
height: 100%;
right: -24px;
bottom: -2px;
line-height: 12px;
content: "PM";
white-space: pre;
}
.number dt:hover, .number dd:hover{
font-weight: bold;
}
.number dt:hover, .number dd:hover, .number small:hover{
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment