Difference between revisions of "Team:UM Macau/Notebook"

Line 86: Line 86:
 
}
 
}
  
−
/*Team Container Styling*/
+
/*Full Page Tabs*/
−
.pagecontainer{
+
/* Style tab links */
−
padding: 10%;
+
.tablink {
 +
  background-color: #555;
 +
  color: white;
 +
  float: left;
 +
  border: none;
 +
  outline: none;
 +
  cursor: pointer;
 +
  padding: 14px 16px;
 +
  font-size: 1.5rem;
 +
  width: 33.3%;
 
}
 
}
  
 +
.tablink:hover {
 +
  background-color: #777;
 +
}
  
 +
.tablink:focus{
 +
  outline: none;
 +
}
  
−
.sectionpadding{
+
/* Style the tab content (and add height:100% for full page content) */
−
padding-left: 5%;
+
.tabcontent {
−
padding-right: 5%;
+
  color: black;
−
padding-bottom: 12%;
+
  display: none;
 +
  padding: 100px 20px;
 +
  height: 100%;
 +
}
 +
 
 +
/*Background color for tabcontent*/
 +
#Calendar {background-color: #f4f4f4;}
 +
#Protocols {background-color: #f4f4f4;}
 +
#Lablogs {background-color: #f4f4f4;}
 +
 
 +
/*Fade in animation*/
 +
.fadein {
 +
    animation: fadeEffect 0.8s;
 +
}
 +
 
 +
@keyframes fadeEffect {
 +
  from {opacity: 0;}
 +
  to {opacity: 1;}
 +
}
 +
 
 +
/*Calendar sidenav*/
 +
/* Style the tab */
 +
.vertab {
 +
  float: left;
 +
  border: 1px solid #ccc;
 +
  background-color: #f1f1f1;
 +
  width: 15%;
 +
  height: auto;
 +
  margin-top: 3%;
 +
}
 +
 
 +
/* Style the buttons inside the tab */
 +
.vertab button {
 +
  display: block;
 +
  background-color: inherit;
 +
  color: black;
 +
  padding: 22px 25px;
 +
  padding-right: 40px;
 +
  width: 100%;
 +
  border: none;
 +
  outline: none;
 +
  text-align: left;
 +
  cursor: pointer;
 +
  transition: 0.3s;
 +
  font-size: 1.1rem;
 +
}
 +
 
 +
/* Change background color of buttons on hover */
 +
.vertab button:hover {
 +
  background-color: #ddd;
 +
}
 +
 
 +
/* Create an active/current "tab button" class */
 +
.vertab button.active {
 +
  background-color: #747474;
 +
  color: white;
 +
}
 +
 
 +
/* Style the tab content */
 +
.vertabcontent {
 +
  float: left;
 +
  padding: 0px 0px;
 +
  border: 0px solid #ccc;
 +
  width: 70%;
 +
  margin-left:10%;
 +
  border-left: none;
 +
  height: auto;
 +
}
 +
 
 +
/*Calendar styling*/
 +
*{
 +
  margin:0;
 +
  box-sizing: border-box;
 +
}
 +
 
 +
.wrapper{
 +
  display: flex;
 +
  width: 100%;
 +
  height: 100%;
 +
  background-color: none;
 +
  margin-top: 3%;
 +
}
 +
 
 +
.calendar{
 +
  width: 85%;
 +
  margin: auto;
 +
  background-color: #fff;
 +
  color: black;
 +
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.2);
 +
  border-radius: 20px;
 +
}
 +
 
 +
.month{
 +
  display: flex;
 +
  justify-content: center;
 +
  align-items: center;
 +
  text-align: center;
 +
  width: 100%;
 +
  background-color: #2ecc71;
 +
  color: #fff;
 +
  padding: 75px 30px;
 +
  border-top-left-radius: 20px;
 +
  border-top-right-radius: 20px;
 +
}
 +
 
 +
.weekends{
 +
  display: flex;
 +
  background-color: #27ae60;
 +
  color: #fff;
 +
  padding: 7px 0;
 +
}
 +
 
 +
.days{
 +
  display: flex;
 +
  flex-wrap: wrap;
 +
  font-weight: 300;
 +
  padding: 10px 0;
 +
}
 +
 
 +
.days div{
 +
  margin-bottom: 10px;
 +
  transition: all 0.4s;
 +
}
 +
 
 +
.weekends div,
 +
.days div{
 +
  width: 14.28%;
 +
  text-align: center;
 +
}
 +
 
 +
/*.days div:hover{
 +
  background-color: #27ae60;
 +
  color: #fff;
 +
  cursor: pointer;
 +
}
 +
*/
 +
 
 +
.prev_date{
 +
  color: #999;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  outline: none;
 +
  border: none;
 +
  background: none;
 +
  transition: all 0.4s;
 +
  cursor: default;
 +
}
 +
 
 +
.prev_date:hover{
 +
  background: none;
 +
  color: #999;
 +
}
 +
 
 +
.prev_date:focus{
 +
  background: none;
 +
  color: #999;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
#month{
 +
  font-size: 30px;
 +
  font-weight: 500;
 +
}
 +
 
 +
/*Modals button styling*/
 +
.modal-open{
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  outline: none;
 +
  border: none;
 +
  background: none;
 +
  transition: all 0.3s;
 +
}
 +
 
 +
.April .modal-open:hover{
 +
  background: #ff925a;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.April .modal-open:focus{
 +
  background: #ff925a;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.May .modal-open:hover{
 +
  background: #d53b48;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.May .modal-open:focus{
 +
  background: #d53b48;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.June .modal-open:hover{
 +
  background: #26d8d2;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.June .modal-open:focus{
 +
  background: #26d8d2;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.July .modal-open:hover{
 +
  background: #2999a0;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.July .modal-open:focus{
 +
  background: #2999a0;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.August .modal-open:hover{
 +
  background: #a5c755;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.August .modal-open:focus{
 +
  background: #a5c755;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.September .modal-open:hover{
 +
  background: #27ae60;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.September .modal-open:focus{
 +
  background: #27ae60;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.October .modal-open:hover{
 +
  background: #764c27;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
.October .modal-open:focus{
 +
  background: #764c27;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 8px 0;
 +
  color: white;
 +
  outline: none;
 +
  border: none;
 +
}
 +
 
 +
 
 +
/*Modal Styling*/
 +
.modal{
 +
  position: fixed;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  background: rgba(0,0,0,0.5);
 +
  z-index: 2;
 +
  display: none;
 +
  animation: fadeEffect 0.3s;
 +
}
 +
 
 +
.modal-content{
 +
  background: #fff;
 +
  margin-top: 100px;
 +
  width: 50%;
 +
  height: 70%;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  padding: 8px 24px;
 +
  border-radius: 4px;
 +
  z-index: 4;
 +
  overflow-y: auto;
 +
}
 +
 
 +
.modal-header{
 +
  font-weight: 500;
 +
  padding: 10px 0;
 +
  font-size: 26px;
 +
  color: black;
 +
}
 +
 
 +
.closeicon{
 +
  color: #aaa;
 +
  float: right;
 +
  font-size: 28px;
 +
  font-weight: bold;
 +
  background: none;
 +
  border-radius: none;
 +
  transition: all 0.4s;
 +
}
 +
 
 +
.closeicon:hover, .close:focus{
 +
  color: black;
 +
  text-decoration: none;
 +
  cursor: pointer;
 +
}
 +
 
 +
.modal-body{
 +
  color: #7b7b7b;
 +
  padding: 15px 0;
 +
}
 +
 
 +
.modal-footer{
 +
  padding: 15px 0;
 +
}
 +
 
 +
.modal-footer .modal-close{
 +
  padding: 8px 16px;
 +
  font-size: 14px;
 +
  border: none;
 +
  outline: none;
 +
  border-radius: 4px;
 +
  color: #1a73e8;
 +
  cursor: pointer;
 +
  float: left;
 +
  transition: all 0.4s;
 +
}
 +
 
 +
.modal-footer .modal-close:hover{
 +
  background-color: #1a73e8;
 +
  color: #fff;
 
}
 
}
  
Line 209: Line 614:
 
<!--End of Team Cover-->
 
<!--End of Team Cover-->
  
 +
<div id="pagestart">
 +
<!--Full Page Tabs-->
 +
<button class="tablink" onclick="openPage('Calendar', this, '#00949d')" id="defaultOpen">Calendar</button>
 +
<button class="tablink" onclick="openPage('Protocols', this, '#00949d')" >Protocols</button>
 +
<button class="tablink" onclick="openPage('Lablogs', this, '#00949d')">Lablogs</button>
 +
<!--End of Full Page Tabs-->
  
  
 +
<!--Calendar Content-->
 +
<div id="Calendar" class="tabcontent">
  
−
<!--Team Container-->
+
  <div class="vertab">
 +
  <button class="vertablinks" onclick="openMonth(event, 'April')" id="defaultOpen2">April</button>
 +
  <button class="vertablinks" onclick="openMonth(event, 'May')">May</button>
 +
  <button class="vertablinks" onclick="openMonth(event, 'June')">June</button>
 +
  <button class="vertablinks" onclick="openMonth(event, 'July')">July</button>
 +
  <button class="vertablinks" onclick="openMonth(event, 'August')">August</button>
 +
  <button class="vertablinks" onclick="openMonth(event, 'September')">September</button>
 +
  <button class="vertablinks" onclick="openMonth(event, 'October')">October</button>
 +
</div>
  
−
<div id="pagestart" class="pagecontainer">
+
<!--April Calendar-->
 +
<div id="April" class="vertabcontent">
 +
  <div class="wrapper">
 +
  <div class="calendar">
 +
    <div class="month" style="background-color:#ef731b">
 +
      <div>
 +
        <h1>April</h1>
 +
      </div>
 +
    </div>
  
 +
    <div class="weekends" style="background-color:#c3601a">
 +
      <div>Sun</div>
 +
      <div>Mon</div>
 +
      <div>Tue</div>
 +
      <div>Wed</div>
 +
      <div>Thu</div>
 +
      <div>Fri</div>
 +
      <div>Sat</div>
 +
    </div>
  
−
<!--Title-->
+
    <div class="days">
−
<h1>Students</h1>
+
      <div><button disabled class="prev_date">31</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal1">1</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal2">2</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal3">3</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal1">4</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal2">5</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal3">6</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal1">7</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal2">8</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal3">9</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal1">10</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal2">11</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal3">12</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal1">13</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal2">14</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal3">15</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal1">16</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal2">17</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal3">18</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal1">19</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal2">20</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal3">21</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal1">22</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal2">23</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal3">24</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal1">25</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal2">26</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal3">27</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal1">28</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal2">29</button></div>
 +
      <div class="April"><button class="modal-open" data-modal="modal3">30</button></div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
</div>
 +
<!--End of April Calendar-->
  
 +
<!--April Modals-->
 +
  <div class="modal" id="modal2">
 +
    <div class="modal-content">
 +
      <div class="modal-header">Modal 2
 +
        <span class="modal-close closeicon">&times;</span></div>
 +
      <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
 +
      <div class="modal-footer"><button class="link modal-close">Close</button></div>
 +
    </div>
 +
  </div>
  
−
<!--Students Section & Lightbox Images-->
+
  <div class="modal" id="modal1">
−
   <section class="sectionpadding">
+
    <div class="modal-content">
−
   </section>
+
      <div class="modal-header">Modal 1
 +
        <span class="modal-close closeicon">&times;</span></div>
 +
      <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
 +
      <div class="modal-footer"><button class="link modal-close">Close</button></div>
 +
    </div>
 +
   </div>
 +
 
 +
  <div class="modal" id="modal3">
 +
    <div class="modal-content">
 +
      <div class="modal-header">Modal 3
 +
        <span class="modal-close closeicon">&times;</span></div>
 +
      <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 +
        <img src="home/T--UM_Macau--home1.jpg" style="width: 100%"></div>
 +
      <div class="modal-footer"><button class="link modal-close">Close</button></div>
 +
    </div>
 +
  </div>
 +
 
 +
<!--End of April Modals-->
 +
 
 +
<!--May Calendar-->
 +
<div id="May" class="vertabcontent">
 +
  <div class="wrapper">
 +
  <div class="calendar">
 +
    <div class="month" style="background-color: #d53b48">
 +
      <div>
 +
        <h1>May</h1>
 +
      </div>
 +
    </div>
 +
 
 +
    <div class="weekends" style="background-color: #b22a35">
 +
      <div>Sun</div>
 +
      <div>Mon</div>
 +
      <div>Tue</div>
 +
      <div>Wed</div>
 +
      <div>Thu</div>
 +
      <div>Fri</div>
 +
      <div>Sat</div>
 +
    </div>
 +
 
 +
    <div class="days">
 +
      <div><button disabled class="prev_date">28</button></div>
 +
      <div><button disabled class="prev_date">29</button></div>
 +
      <div><button disabled class="prev_date">30</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal1">1</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal2">2</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">3</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal1">4</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal2">5</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">6</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal1">7</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal2">8</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">9</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal1">10</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal2">11</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">12</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal1">13</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal2">14</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">15</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal1">16</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal2">17</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">18</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal1">19</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal2">20</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">21</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal1">22</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal2">23</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">24</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal1">25</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal2">26</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">27</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal1">28</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal2">29</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">30</button></div>
 +
      <div class="May"><button class="modal-open" data-modal="modal3">31</button></div>
 +
    </div>
 +
  </div>
 +
   </div>
 
</div>
 
</div>
 +
<!--End of May Calendar-->
 +
 +
<div id="June" class="vertabcontent">
 +
  <div class="wrapper">
 +
  <div class="calendar">
 +
    <div class="month" style="background-color:#26d8d2">
 +
      <div>
 +
        <h1>June</h1>
 +
      </div>
 +
    </div>
 +
 +
    <div class="weekends" style="background-color:#20b2ad">
 +
      <div>Sun</div>
 +
      <div>Mon</div>
 +
      <div>Tue</div>
 +
      <div>Wed</div>
 +
      <div>Thu</div>
 +
      <div>Fri</div>
 +
      <div>Sat</div>
 +
    </div>
 +
 +
    <div class="days">
 +
      <div><button disabled class="prev_date">26</button></div>
 +
      <div><button disabled class="prev_date">27</button></div>
 +
      <div><button disabled class="prev_date">28</button></div>
 +
      <div><button disabled class="prev_date">29</button></div>
 +
      <div><button disabled class="prev_date">30</button></div>
 +
      <div><button disabled class="prev_date">31</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal1">1</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal2">2</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal3">3</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal1">4</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal2">5</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal3">6</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal1">7</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal2">8</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal3">9</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal1">10</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal2">11</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal3">12</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal1">13</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal2">14</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal3">15</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal1">16</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal2">17</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal3">18</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal1">19</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal2">20</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal3">21</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal1">22</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal2">23</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal3">24</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal1">25</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal2">26</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal3">27</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal1">28</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal2">29</button></div>
 +
      <div class="June"><button class="modal-open" data-modal="modal3">30</button></div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
</div>
 +
 +
<div id="July" class="vertabcontent">
 +
  <div class="wrapper">
 +
  <div class="calendar">
 +
    <div class="month" style="background-color:#2999a0">
 +
      <div>
 +
        <h1>July</h1>
 +
      </div>
 +
    </div>
 +
 +
    <div class="weekends" style="background-color:#24787d">
 +
      <div>Sun</div>
 +
      <div>Mon</div>
 +
      <div>Tue</div>
 +
      <div>Wed</div>
 +
      <div>Thu</div>
 +
      <div>Fri</div>
 +
      <div>Sat</div>
 +
    </div>
 +
 +
    <div class="days">
 +
      <div><button disabled class="prev_date">30</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal1">1</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal2">2</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">3</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal1">4</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal2">5</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">6</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal1">7</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal2">8</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">9</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal1">10</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal2">11</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">12</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal1">13</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal2">14</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">15</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal1">16</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal2">17</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">18</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal1">19</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal2">20</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">21</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal1">22</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal2">23</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">24</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal1">25</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal2">26</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">27</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal1">28</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal2">29</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">30</button></div>
 +
      <div class="July"><button class="modal-open" data-modal="modal3">31</button></div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
</div>
 +
 +
<div id="August" class="vertabcontent">
 +
  <div class="wrapper">
 +
  <div class="calendar">
 +
    <div class="month" style="background-color:#a5c755">
 +
      <div>
 +
        <h1>August</h1>
 +
      </div>
 +
    </div>
 +
 +
    <div class="weekends" style="background-color:#89a842">
 +
      <div>Sun</div>
 +
      <div>Mon</div>
 +
      <div>Tue</div>
 +
      <div>Wed</div>
 +
      <div>Thu</div>
 +
      <div>Fri</div>
 +
      <div>Sat</div>
 +
    </div>
 +
 +
    <div class="days">
 +
      <div><button disabled class="prev_date">28</button></div>
 +
      <div><button disabled class="prev_date">29</button></div>
 +
      <div><button disabled class="prev_date">30</button></div>
 +
      <div><button disabled class="prev_date">31</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal1">1</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal2">2</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">3</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal1">4</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal2">5</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">6</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal1">7</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal2">8</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">9</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal1">10</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal2">11</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">12</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal1">13</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal2">14</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">15</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal1">16</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal2">17</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">18</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal1">19</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal2">20</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">21</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal1">22</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal2">23</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">24</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal1">25</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal2">26</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">27</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal1">28</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal2">29</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">30</button></div>
 +
      <div class="August"><button class="modal-open" data-modal="modal3">31</button></div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
</div>
 +
 +
<div id="September" class="vertabcontent">
 +
  <div class="wrapper">
 +
  <div class="calendar">
 +
    <div class="month">
 +
      <div>
 +
        <h1>September</h1>
 +
      </div>
 +
    </div>
 +
 +
    <div class="weekends">
 +
      <div>Sun</div>
 +
      <div>Mon</div>
 +
      <div>Tue</div>
 +
      <div>Wed</div>
 +
      <div>Thu</div>
 +
      <div>Fri</div>
 +
      <div>Sat</div>
 +
    </div>
 +
 +
    <div class="days">
 +
      <div class="September"><button class="modal-open" data-modal="modal1">1</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal2">2</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal3">3</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal1">4</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal2">5</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal3">6</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal1">7</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal2">8</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal3">9</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal1">10</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal2">11</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal3">12</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal1">13</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal2">14</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal3">15</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal1">16</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal2">17</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal3">18</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal1">19</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal2">20</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal3">21</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal1">22</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal2">23</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal3">24</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal1">25</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal2">26</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal3">27</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal1">28</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal2">29</button></div>
 +
      <div class="September"><button class="modal-open" data-modal="modal3">30</button></div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
</div>
 +
 +
<div id="October" class="vertabcontent">
 +
  <div class="wrapper">
 +
  <div class="calendar">
 +
    <div class="month" style="background-color:#764c27">
 +
      <div>
 +
        <h1>October</h1>
 +
      </div>
 +
    </div>
 +
 +
    <div class="weekends" style="background-color:#5b3718">
 +
      <div>Sun</div>
 +
      <div>Mon</div>
 +
      <div>Tue</div>
 +
      <div>Wed</div>
 +
      <div>Thu</div>
 +
      <div>Fri</div>
 +
      <div>Sat</div>
 +
    </div>
 +
 +
    <div class="days">
 +
      <div><button disabled class="prev_date">29</button></div>
 +
      <div><button disabled class="prev_date">30</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal1">1</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal2">2</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">3</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal1">4</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal2">5</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">6</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal1">7</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal2">8</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">9</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal1">10</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal2">11</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">12</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal1">13</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal2">14</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">15</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal1">16</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal2">17</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">18</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal1">19</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal2">20</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">21</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal1">22</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal2">23</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">24</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal1">25</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal2">26</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">27</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal1">28</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal2">29</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">30</button></div>
 +
      <div class="October"><button class="modal-open" data-modal="modal3">31</button></div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
</div>
 +
 +
<!--
 +
  <div class="fadein" class="main">
 +
  <h3>Calendar</h3>
 +
  <p>From April 2019 to October 2019</p>
 +
  </div>
 +
-->
 +
 +
</div>
 +
<!--End of Calendar Content-->
 +
 +
 +
 +
 +
<!--Protocol Content-->
 +
<div id="Protocols" class="tabcontent">
 +
  <h3>Protocols</h3>
 +
  <p>Protocols used in the Project SANCE</p>
 +
</div>
 +
<!--End of Protocol Content-->
 +
 +
 +
<!--Lablogs Content-->
 +
<div id="Lablogs" class="tabcontent">
 +
  <h3>Lab Logs</h3>
 +
  <p>A full lablogs with all details and used protocols</p>
 +
</div>
 +
<!--End of Lablogs Content-->
 +
</div>
 +
 +
<!--JS for open tab with different content-->
 +
<script>
 +
function openPage(pageName,elmnt,color) {
 +
  var i, tabcontent, tablinks;
 +
  tabcontent = document.getElementsByClassName("tabcontent");
 +
  for (i = 0; i < tabcontent.length; i++) {
 +
    tabcontent[i].style.display = "none";
 +
  }
 +
  tablinks = document.getElementsByClassName("tablink");
 +
  for (i = 0; i < tablinks.length; i++) {
 +
    tablinks[i].style.backgroundColor = "";
 +
  }
 +
  document.getElementById(pageName).style.display = "block";
 +
  elmnt.style.backgroundColor = color;
 +
}
 +
 +
  // Get the element with id="defaultOpen" and click on it
 +
  document.getElementById("defaultOpen").click();
 +
</script>
 +
<!--End of JS for open tab with different content-->
 +
 +
<!--JS: different tabs for different calendar-->
 +
<script>
 +
function openMonth(evt, monthName) {
 +
  var i, vertabcontent, vertablinks;
 +
  vertabcontent = document.getElementsByClassName("vertabcontent");
 +
  for (i = 0; i < vertabcontent.length; i++) {
 +
    vertabcontent[i].style.display = "none";
 +
  }
 +
  vertablinks = document.getElementsByClassName("vertablinks");
 +
  for (i = 0; i < vertablinks.length; i++) {
 +
    vertablinks[i].className = vertablinks[i].className.replace(" active", "");
 +
  }
 +
  document.getElementById(monthName).style.display = "block";
 +
  evt.currentTarget.className += " active";
 +
}
 +
 +
// Get the element with id="defaultOpen" and click on it
 +
document.getElementById("defaultOpen2").click();
 +
</script>
 +
<!--End of JS for open tab with different calendar-->
 +
 +
 +
<!--JS for opening modals-->
 +
<script>
 +
///getting modal opening buttons
 +
var modalBtns = document.querySelectorAll(".modal-open");
 +
 
 +
modalBtns.forEach(function(btn){
 +
  btn.onclick = function(){
 +
    var modal = btn.getAttribute("data-modal");
 +
 +
    document.getElementById(modal).style.display ="block"};
 +
});
 +
 +
///for close buttons
 +
var closeBtns = document.querySelectorAll(".modal-close");
 +
 +
closeBtns.forEach(function(btn){
 +
  btn.onclick = function(){
 +
    var modal = (btn.closest(".modal").style.display = "none");
 +
  };
 +
});
 +
 +
window.onclick = function(e){
 +
    if(e.target.className === "modal"){
 +
      e.target.style.display = "none";
 +
  }
 +
}
 +
 +
</script>
 +
<!--End of JS for opening modals-->
  
 
<!--Footer-->
 
<!--Footer-->

Revision as of 11:18, 16 October 2019


Notebook

April

Sun
Mon
Tue
Wed
Thu
Fri
Sat

May

Sun
Mon
Tue
Wed
Thu
Fri
Sat

June

Sun
Mon
Tue
Wed
Thu
Fri
Sat

July

Sun
Mon
Tue
Wed
Thu
Fri
Sat

August

Sun
Mon
Tue
Wed
Thu
Fri
Sat

September

Sun
Mon
Tue
Wed
Thu
Fri
Sat

October

Sun
Mon
Tue
Wed
Thu
Fri
Sat

Protocols

Protocols used in the Project SANCE

Lab Logs

A full lablogs with all details and used protocols

CONTACT US

umac.igem@gmail.com

FOLLOW US

iGEM 2019 UM_Macau