InterfaceProj.html

<head>
  <title>interface</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
</head>

<body class="interface" >
  
</body>

<template name="main">
{{> header}}
    <div class="container">    
    <div class="container-fluid pull-left" float="left" style="width:55%" flex>
    {{> leftcol}}  
    </div>
    <div class="container-fluid pull-right" float="right" style="width:35%" flex>
      {{> rightcol}} 
    </div>
    </div>
{{> footer}}
    <!--
    {{> googleDrive}}-->
</template>

<template name = "header">
	<div class="container">  
	<div class="vc pull-left container-fluid"  flex >
    <img src='logo.jpg' class="img-rounded" style="width:100px" />
    <div class=" vc pull-right" style="background-color:black;filter:alpha(opacity=60);opacity:.6;">
      <h1 style="color:white;filter:alpha(opacity=100);opacity:1;">PORTAL</h1>
    </div>
		<!--<img src='logoname.png' class="img-rounded" flex>-->
	</div>
	<div class="pull-right container-fluid"  flex>
			<h3 class="text-center" style="color : white">{{timedis}}</h3>
			<h5 class="text-center" style="color : white">Good {{day}}, {{username}}</h5>
	</div>
	</div>
</template>

<template name="leftcol">
<div class="container-fluid pull-left"  > 
  <div class="container-fluid" >
    <ul class="nav nav-tabs nav-justified flex" style="padding: 1px " id="myTab" role="tablist" >
      {{#each module}}   
      {{#if permission this.Permission this.hasTimetableItems}} 
      <li role="presentation" ><a href="#{{this.CourseCode}}" role="tab" data-toggle="tab" aria-controls="{{this.CourseCode}}">{{this.CourseCode}}</a>
      </li>
      {{/if}}
      {{/each}}
    </ul>
    <div id="myTabContent" class="tab-content" style="padding:5px ; border-radius: 25px;
    border: 2px solid #ffffff">
      {{#each module}}
        {{#if permission this.Permission this.hasTimetableItems}} 
        <div role="tabpanel" class="tab-pane fade in" id="{{this.CourseCode}}" style="max-height : 40%">
         <p> {{this.CourseCode}} || {{this.CourseName}}</p>
         <ul>
         {{#each announcement this.ID}}
         <li>
           {{{this.description}}}
         </li>
         {{/each}}
         </ul>
        </div>
        {{/if}}
      {{/each}}
    </div>
  </div>


  <div class="container-fluid" >
    <ul class="nav nav-tabs nav-justified flex" style="padding: 1px " id="myTab" role="tablist" >
      {{#each module}}    
      {{#if permission this.Permission this.hasTimetableItems}} 
      <li role="presentation" ><a href="#2{{this.CourseCode}}" role="tab" data-toggle="tab" aria-controls="{{this.CourseCode}}">{{this.CourseCode}}</a>
      </li>
      {{/if}}
      {{/each}}
    </ul>
      <div id="myTabContent" class="tab-content" style="padding:5px; border-radius: 25px;
    border: 2px solid #ffffff;">
      {{#each module}}
      {{#if permission this.Permission this.hasTimetableItems}} 
        <div role="tabpanel" class="tab-pane fade in" id="2{{this.CourseCode}}">
          <p> Files of workbin to be displayed</p>
        </div>
        {{/if}}
      {{/each}}
    </div>
  </div>
</div>
</template>

<template name = "rightcol">
  <div class="panel panel-default"  >
  <div class="panel-heading" >
    <h4 class="panel-title">{{date}} | {{weather2}} </h4>
    <img src= "{{icontag}}" align="middle">
  </div>
</div>
<div class="panel panel-default">
  <div>
  {{> calendar}}
  </div>
  <div class="padding">
  {{> todo}}
  </div>
</div>
</template>

<template name="googleDrive">
<iframe src="https://drive.google.com/embeddedfolderview?id=0B8cgx-HjKnS0SUVmWnFmNU5vY3c#list" width="800" height="600" frameborder="0"></iframe>
</template>



<!--LOGIN --> 

<template name="login">
<div class="text-center container-fluid modal" id="login">
  {{> loginButtons}}
  <button type="button" class="btn btn-default">IVLE Login </button>
  </div>
</template>

<!--Footer --> 
<template name="footer">
  <footer class="footers">
    <div class="container-fluid text-center">
      <a href="https://drive.google.com"><img src='deive.png' class="img-rounded" style="width:50px" align="left" /></a>
      <a href="https://www.dropbox.com/"><img src='dropbox.png' class="img-rounded" style="width:50px" align="left" /></a>
      <a href="http://nuswhispers.com/home/"><img src='nuswispers.png' class="img-rounded" style="width:50px" align="center" /></a>
      <a href="https://nusmods.com/"><img src='nusmods.png' class="img-rounded" style="width:50px" align="center"/></a>
      <a href="https://outlook.com/u.nus.edu"><img src='nusmail.png' class="img-rounded" style="width:50px" align="right"/></a>
      <a href="https://web.whatsapp.com/"><img src='whatsapp.png' class="img-rounded" style="width:50px" align="right" /></a>
      <a href="https://web.telegram.com/"><img src='telegram.png' class="img-rounded" style="width:50px" align="right" /></a>
      <button><img src='logout.png' class="img-rounded logout" style="width:50px" align="right" /></button>
      
    </div>
  </footer>
</template>


<!--Calendar --> 

<template name= "calendar1">
<div class="modal"  >
{{> calendar}}
</div>
</template>


<!--TODO-->

<template name="todo">
  <div class="container">
    <header>
      <h4>Todo List ({{incompleteCount}})</h4>

      <label class="hide-completed">
        <input type="checkbox" checked="{{hideCompleted}}" />
        Hide Completed Tasks
      </label>

      {{#if currentUser}}
        <form class="new-task form-group">
           <lable for="Task">Task</lable>
          <input type="text" name="text" placeholder="Type to add new tasks" />
          <br>
          <lable for="priority"> Priority :</lable>

          <select class="form-control" name="priority" id="priority">
          <br>
        <option value="1">Low</option>
        <option value="2">Medium</option>
        <option value="3">High</option>
      </select>
          <!-- <input type="text"  name="priority" placeholder="select priority" list="datalist1" autocomplete="off" />
          <datalist id="datalist1">
    <option value="1">Low</option>
    <option value="2">Medium</option>
    <option value="3">High</option>
    </datalist>-->
    <button type="submit"> Submit</button>
        </form>
      {{/if}}
    </header>

    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</template>


<template name="task">
  <li class="{{#if checked}}checked{{/if}} {{#if private}}private{{/if}}">
    <button class="delete">&times;</button>

    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />

    {{#if isOwner}}
      <button class="toggle-private">
        {{#if private}}
          Private    
        {{else}}
          Public
        {{/if}}
      </button>
    {{/if}}

    <span class="text"><strong>{{username}}</strong> - {{text}}</span>
  </li>
</template>