Template:Team:Uppsala/notebook

From 2013.igem.org

(Difference between revisions)
 
(28 intermediate revisions not shown)
Line 1: Line 1:
-
 
<html>
<html>
 +
<style>
 +
#main_frame
 +
{
 +
width: 950px;
 +
margin: 20px auto;
 +
border: 1px solid ligth gray;
 +
border-radius: 15px;
 +
box-shadow: 0px 0px 30px rgba(110,110,110, .8);
 +
background: white;
-
 
+
}
-
<style type="text/css">
+
-
#main_frame {
+
-
min-height: 1800px;
+
-
width: 950px;
+
-
margin: 20px auto;
+
-
border: 1px solid ligth gray;
+
-
border-radius:         15px;
+
-
box-shadow:         0px 0px 30px rgba(110,110,110, .8);
+
-
background:         white;
+
-
 
+
-
}
+
-
 
+
.cal_calendar
.cal_calendar
{
{
-
float: left;
+
float: left;
-
        background-color: white;
+
background-color: white;
-
        width: 100%;
+
width: 100%;
-
        margin: auto;
+
margin: auto;
-
        height: 20%;
+
height: 20%;      
-
       
+
}
}
 +
.cal_d_weeks th
.cal_d_weeks th
{
{
-
border-radius: 5px;
+
border-radius: 5px;
}
}
 +
.cal_calendar th
.cal_calendar th
-
{
+
{
-
border: 1px solid #22409a;
+
border: 1px solid #22409a;
-
        background-color: #b6e6fd;
+
background-color: #b6e6fd;
-
        width: 36px;
+
width: 36px;
}
}
 +
.cal_calendar td
.cal_calendar td
-
{
+
{  
-
/*border: 1px solid gray;*/
+
box-shadow: 0px 5px 10px rgba(120,120,120, .7);
-
box-shadow: 0px 5px 10px rgba(120,120,120, .7);
+
background-color: white;
-
        background-color: white;
+
text-align: center;
-
        text-align: center;
+
width: 36px;
-
        width: 36px;
+
height: 36px;
-
        height: 36px;
+
}
}
 +
.cal_today input[type=submit]
.cal_today input[type=submit]
-
{
+
{  
-
color: #0089d1;
+
color: #0089d1;
-
        font-weight: bold;
+
font-weight: bold;
}
}
 +
.cal_days_bef_aft
.cal_days_bef_aft
{
{
-
visibility: hidden;
+
  visibility:   hidden;
-
        color: #5a779e;
+
  color:   #5a779e;
}
}
 +
.week input[type=submit]
.week input[type=submit]
{
{
-
color: #22409a;
+
color: #22409a;
-
font-weight: bold;
+
font-weight: bold;
}
}
 +
.head th
.head th
{
{
-
border: white;
+
border: white;
-
background-color: white;
+
background-color: white;
}
}
input[type=submit]:hover
input[type=submit]:hover
{
{
-
/*box-shadow: inset 10px -10px 10px rgba(34,64,154, 0.5);*/
+
color: #b6e6fd;
-
color: #b6e6fd;
+
font-weight: bold;
-
font-weight: bold;
+
background-color: #22409a;
-
background-color: #22409a;
+
}
}
 +
input[type=submit]  
input[type=submit]  
{
{
-
+
border: white;
-
border: white;
+
background-color: white;
-
background-color: white;
+
width: 100%;
-
width: 100%;
+
height: 100%;
-
height: 100%;
+
opacity: 1;
-
opacity: 1;
+
}
}
 +
#file_holder
#file_holder
{
{
-
margin-top: 35%;
+
}
}
#calendar
#calendar
{
{
-
+
  margin-bottom: 400px;
}
}
.eventBox
.eventBox
{
{
-
 
+
text-align: center;
-
text-align: center;
+
border: 2px solid ligth gray;
-
border: 2px solid ligth gray;
+
box-shadow: 0px 2px 10px rgba(120,120,120, .7);
-
box-shadow: 0px 2px 10px rgba(120,120,120, .7);
+
padding: 20px;
-
padding: 10px;
+
-
margin-top: 10px;
+
}
}
#left{
#left{
-
width: 36px;
+
width: 36px;
}
}
#right{
#right{
-
width: 36px;
+
width: 36px;
 +
}
 +
#dairy-text{
 +
text-align: left;
 +
}
 +
h2{
 +
color:#0089d1;
 +
}
 +
.result-pic{
 +
width: 400px;
}
}
-
</style>
+
#sir_explains
 +
{
 +
padding: 15px;
 +
border-radius:  15px;
 +
width:60%;
 +
margin-left:20%;
 +
}
-
<script type="text/javascript">
+
.close
-
var month = new Date().getMonth();   // current month that the calendar will show
+
{
-
var year = new Date().getFullYear(); //  current year that the calendar will show
+
background-color: white;
-
var cal_table = ''; //  calendar string
+
border-radius: 40px;
-
var eventString;
+
width: 25px;  
-
var days_with_dirys = new Array('t201381');  
+
height: 25px;  
-
var inputs = 1;
+
border: 3px solid #0089d1;
-
var days_in_month = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
+
box-shadow: -5px 5px 10px rgba(110,110,110, 0.5);
-
/*
+
position: relative;
-
getWeek() will calculate current week nr
+
top: -60px;
-
*/
+
left:550px;  
-
Date.prototype.getWeek = function()
+
margin-bottom: -40px;
-
{
+
}
-
        var onejan = new Date(this.getFullYear(),0,1);
+
-
        return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
+
-
}
+
.close:hover
-
/*
+
{
-
writes/rewrites the calculator string
+
background-color: red;
-
*/
+
-
function calendar_normal()
+
-
{
+
-
var m = month+1;
+
-
var date = new Date(); // todays date
+
-
        var today = date.getDate();   //  todays month number
+
-
cal_table = '';
+
-
+
-
if(year<=200)
+
-
{
+
-
                year += 1900;
+
-
}
+
-
+
-
        months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
+
-
var weekDay = new Array('Mon', 'Tue', 'We', 'Thu', 'Fri', 'Sat', 'Sun');
+
-
days_in_month = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
+
-
+
-
if(year%4 == 0 && year!=1900)
+
-
{
+
-
                days_in_month[1]=29;
+
-
}
+
-
+
-
        total = days_in_month[month];
+
-
        var date_today = months[month]+' '+year;
+
-
       
+
-
        cal_table = cal_table + '<table class="cal_calendar" ><tbody id="cal_body"><tr class="head"><th class="arrow"><input id="left" type="image" onclick="left_arrow()" src="image/buttons/arrowleft.png"></th><th colspan="6" >'+date_today+'</th><th class="arrow"><input id="right" type="image" onclick="right_arrow()" src="image/buttons/arrowright.png"></th></tr>';
+
-
        cal_table = cal_table + '<tr class="cal_d_weeks"><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th><th>Week</th></tr><tr>';
+
-
        week = 0;
+
-
+
-
var first_week_day = new Date(year, month, 0).getDay();
+
-
+
-
        for(week_day = 0; week_day < first_week_day; week_day++)
+
-
        {
+
-
                cal_table = cal_table +'<td class="cal_days_bef_aft"></td>';
+
-
                week++;
+
-
        }
+
-
+
-
        for(i=1;i<=total;i++)
+
-
        {
+
-
+
-
                if(week==0)
+
-
                {
+
-
                    cal_table = cal_table + '<tr>';
+
-
                }
+
-
+
-
                if(today==i && month == date.getMonth() && year == date.getFullYear())
+
-
                {
+
-
                    cal_table = cal_table +'<td id="'+'t'+year+m+i+'" class="cal_today"><input type="submit" onclick="showNotes(year, month, value)" value="'+i+'"></td>';
+
-
                }
+
-
+
-
                else
+
-
                {
+
-
                    cal_table = cal_table +'<td id="'+'t'+year+m+i+'" class="not_today"><input type="submit" onclick="showNotes(year, month, value)" value="'+i+'"></td>';
+
-
                }
+
-
+
-
                week++;
+
-
markerNotes(year, m, i);
+
-
                if(week==7)
+
-
                {
+
-
var weeknr = new Date(year, month, i-1).getWeek();
+
-
cal_table = cal_table + '<td class="week"><input type="submit" onclick="showNotesOfweek(year, value)" value="'+weeknr+'"></td>';
+
-
                    cal_table = cal_table + '</tr>';   
+
-
week=0;
+
-
                }
+
-
+
-
        }
+
-
+
-
        for(i=1;week!=0;i++)
+
-
        {
+
-
                cal_table = cal_table + '<td class="cal_days_bef_aft"></td>';
+
-
                week++;
+
-
+
-
                if(week==7)
+
-
                {
+
-
if(weeknr == 53)
+
-
{
+
-
var weeknr = 1;
+
-
}
+
-
else
+
-
{
+
-
var weeknr = weeknr+1;
+
-
}
+
-
cal_table = cal_table + '<td class="week"><input type="submit" onclick="showNotesOfweek(year, value)" value="'+weeknr+'"></td>';
+
-
                        cal_table = cal_table + '</tr>';
+
-
                        week=0;
+
-
                }
+
-
        }
+
-
        cal_table = cal_table + '</tbody></table>';
+
-
}
+
-
+
-
/*
+
-
function left_arrow handles event when left-arrow pushed
+
-
by rewriting the the calendar string
+
-
*/
+
-
+
-
function left_arrow()
+
-
{
+
-
month = month-1;
+
-
if(month == -1)
+
-
{
+
-
year = year - 1;
+
-
month = 11;
+
-
}
+
-
calendar_normal();
+
-
document.getElementById('calendar').innerHTML = cal_table;
+
-
}
+
-
+
-
/*
+
-
function right_arrow handles event when right-arrow pushed
+
-
by rewriting the the calendar string
+
-
*/
+
-
+
-
function right_arrow()
+
-
{
+
-
month = month+1;
+
-
if(month == 12)
+
-
{
+
-
year = year +1;
+
-
month = 0;
+
-
}
+
-
calendar_normal();
+
-
document.getElementById('calendar').innerHTML = cal_table;
+
-
}
+
-
 
+
-
/*#######################################################################
+
-
Function below handles the notes of the iGEM Uppsala laboratory exploration
+
-
+
-
function showNotes(year, month, day)
+
-
that gives le text-string to read up in box under the calendar
+
-
#######################################################################*/
+
-
+
-
function showNotes(y, m, day)
+
-
{
+
-
var m = month+1;
+
-
+
-
eventString =  '<div class="eventBox" id="'+'d'+y+m+day+'" onclick="diry('+y+', '+m+', '+day+');"><h1>'+y+'-'+m+'-'+day+'</h1></div>';
+
-
document.getElementById('file_holder').innerHTML = eventString;
+
-
}
+
-
+
-
function showNotesOfweek(y, wnr)
+
-
{
+
-
var d = new Date(y, 0, 0);
+
-
var w = d.getTime() + 604800000 * (wnr-1);
+
-
var m = new Date(w).getMonth()+1;
+
-
var y = new Date(w).getFullYear();
+
-
var day = new Date(w).getDate();
+
-
 
+
-
var e = new Date(w).getDay();
+
-
day = day - e+1;
+
-
+
-
eventString = '<div class="eventBox" id="'+'d'+y+m+day+'" onclick="diry('+y+', '+m+', '+day+');"><h1>'+y+'-'+m+'-'+day+'</h1></div>';
+
-
+
-
for(i=1;i<7;i++)
+
-
{
+
-
if(days_in_month[m-1] == day )
+
-
{
+
-
day = 0;
+
-
m++;
+
-
if(m>12)
+
-
{
+
-
y++;
+
-
var d = new Date(y, 0, 0);
+
-
var w = d.getTime() + 604800000 * (wnr-1);
+
-
var m = 1;
+
-
}
+
-
+
-
}
+
-
day++;
+
-
eventString = eventString + '<div class="eventBox" id="'+'d'+y+m+day+'" onclick="diry('+y+', '+m+', '+day+');"><h1>'+y+'-'+m+'-'+day+'</h1></div>';
+
-
}
+
-
document.getElementById('file_holder').innerHTML = eventString;
+
-
eventString = '';
+
-
}
+
-
 
+
-
function markerNotes(y, m, d)
+
-
{
+
-
var id='t'+y+m+d;
+
-
 
+
-
for(c = 0; c<=inputs; c++)
+
-
{
+
-
if(days_with_dirys[c] == id)
+
-
{
+
-
+
-
+
-
cal_table = cal_table + '<style type="text/css">#'+id+'{border: 2px solid #FFA500;}</style>';
+
-
+
-
}
+
-
}
+
}
}
-
+
</style>
-
</script>
+
-
 
+
</html>
</html>

Latest revision as of 12:09, 4 October 2013

Retrieved from "http://2013.igem.org/Template:Team:Uppsala/notebook"