Folder organization
This commit is contained in:
Kenneth Jao
parent
c2b71d6674
commit
3e7d6fec7c
148
hourglass/client/login/login.css
Normal file
148
hourglass/client/login/login.css
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
#loginHeader {
|
||||||
|
font-weight: 600;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
box-shadow: 2px 2px 5px 3px #666;
|
||||||
|
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo {
|
||||||
|
padding: 0.5%;
|
||||||
|
padding-left: 1%;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
-webkit-filter: drop-shadow(2px 2px 5px #333);
|
||||||
|
filter: drop-shadow(2px 2px 5px #333);
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginTitle {
|
||||||
|
font-size: 255%;
|
||||||
|
padding: 1.4%;
|
||||||
|
padding-left: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginMain {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 11%;
|
||||||
|
|
||||||
|
background-color: #E5E5E5;
|
||||||
|
background-image: url("banner100.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
#circle {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
|
||||||
|
-moz-border-radius: 50%;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
background-color: rgba(0,0,0,0.2);
|
||||||
|
|
||||||
|
-webkit-filter: drop-shadow(2px 2px 5px #333);
|
||||||
|
filter: drop-shadow(2px 2px 5px #333);
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginContent {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
text-align: center;
|
||||||
|
color: #FFF;
|
||||||
|
|
||||||
|
-webkit-filter: drop-shadow(2px 2px 5px #444);
|
||||||
|
filter: drop-shadow(2px 2px 5px #444);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2.text {
|
||||||
|
font-size: 400%;
|
||||||
|
padding-bottom: 2%;
|
||||||
|
border-bottom: 1px solid #FEFEFE;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.text {
|
||||||
|
font-size: 150%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginButton {
|
||||||
|
font-size: 200%;
|
||||||
|
padding: 2%;
|
||||||
|
|
||||||
|
-webkit-border-radius: 6;
|
||||||
|
-moz-border-radius: 6;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background-color: #005CE6;
|
||||||
|
|
||||||
|
-webkit-transition: background-color 0.4s ease;
|
||||||
|
-moz-transition: background-color 0.4s ease;
|
||||||
|
-ms-transition: background-color 0.4s ease;
|
||||||
|
transition: background-color 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginButton:hover {
|
||||||
|
background-color: #0066FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginButton:active {
|
||||||
|
background-color: #FF4D4D;
|
||||||
|
|
||||||
|
-webkit-transition: background-color 0.1s ease;
|
||||||
|
-moz-transition: background-color 0.1s ease;
|
||||||
|
-ms-transition: background-color 0.1s ease;
|
||||||
|
transition: background-color 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginFooter {
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 2px 2px 5px 3px #666;
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#github {
|
||||||
|
font-size: 150%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 1%;
|
||||||
|
|
||||||
|
-webkit-filter: drop-shadow(2px 2px 5px #444);
|
||||||
|
filter: drop-shadow(2px 2px 5px #444);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #0099CC;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
-webkit-transition: color 0.4s ease;
|
||||||
|
-moz-transition: color 0.4s ease;
|
||||||
|
-ms-transition: color 0.4s ease;
|
||||||
|
transition: color 0.4s ease
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #00BFFF;
|
||||||
|
}
|
||||||
|
|
||||||
23
hourglass/client/login/login.html
Normal file
23
hourglass/client/login/login.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template name="login">
|
||||||
|
<header id="loginHeader">
|
||||||
|
<img id="logo" src="logo.png" width="{{logo}}" height="{{logo}}">
|
||||||
|
<h1 id="loginTitle">Hourglass</h1>
|
||||||
|
<div id="loadBar">
|
||||||
|
<div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div id="loginMain">
|
||||||
|
<div id="circle" style="width:{{dim}};height:{{dim}};margin:{{margin}}">
|
||||||
|
<div id="loginContent" style="width:{{contDim}};height:{{contDim}};margin:{{contMargin}}">
|
||||||
|
<h2 class="text">Hourglass</h2>
|
||||||
|
<p class="text">All your work in one place. Finish before your time runs out.</p>
|
||||||
|
<h3 class="text" id="loginButton" style="{{hea}}">Sign in</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer id="loginFooter">
|
||||||
|
<p id="github">View the <a href="https://github.com/ksjdragon/hourglass">Code!</a></p>
|
||||||
|
</footer>
|
||||||
|
{{> loginButtons}}
|
||||||
|
</template>
|
||||||
370
hourglass/client/main/main.css
Normal file
370
hourglass/client/main/main.css
Normal file
@ -0,0 +1,370 @@
|
|||||||
|
/* CSS Code Styling
|
||||||
|
Tag { Always spaces between values
|
||||||
|
Font:
|
||||||
|
Height
|
||||||
|
Width
|
||||||
|
Margin: [top, right, bottom, left];
|
||||||
|
Padding: [top, right, bottom, left];
|
||||||
|
|
||||||
|
Border
|
||||||
|
<Newline if 3 or more above>
|
||||||
|
Drop-shadow
|
||||||
|
<Newline if 3 or more above>
|
||||||
|
Display
|
||||||
|
Position
|
||||||
|
Float
|
||||||
|
Overflow
|
||||||
|
z-index
|
||||||
|
<Newline between if 3 or more above>
|
||||||
|
Color related items
|
||||||
|
<Newline between>
|
||||||
|
Animation related items
|
||||||
|
}*/
|
||||||
|
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Raleway:200,400,600);
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: 'Raleway';
|
||||||
|
font-weight: 200;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/*background-image: url("Hourglass.png");
|
||||||
|
background-size: 1920px 1080px;*/
|
||||||
|
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
font-weight: 600;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
box-shadow: 2px 2px 5px 3px #666;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,h2,h3,h4,h5 {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
-webkit-filter: drop-shadow(2px 2px 5px #666);
|
||||||
|
filter: drop-shadow(2px 2px 5px #666);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
padding: 0.4%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 130%;
|
||||||
|
font-weight: 200;
|
||||||
|
padding: 5%;
|
||||||
|
-webkit-filter: drop-shadow(2px 2px 5px #333);
|
||||||
|
filter: drop-shadow(2px 2px 5px #333);
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
-webkit-transition: color 0.5s ease;
|
||||||
|
-moz-transition: color 0.5s ease;
|
||||||
|
-ms-transition: color 0.5s ease;
|
||||||
|
transition: color 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#aboveBar {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-bars, .fa-cog {
|
||||||
|
font-size: 200%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.6%;
|
||||||
|
padding-right: 0.8%;
|
||||||
|
|
||||||
|
float: left;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
-webkit-transition: color 0.5s ease, background-color 0.5s ease;
|
||||||
|
-moz-transition: color 0.5s ease, background-color 0.5s ease;
|
||||||
|
-ms-transition: color 0.5s ease, background-color 0.5s ease;
|
||||||
|
transition: color 0.5s ease, background-color 0.5s ease;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.fa-cog {
|
||||||
|
padding-left: 0.8%;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-bars:hover, .fa-cog:hover {
|
||||||
|
background-color: #CCC;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loadBar, #progress {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
display: table;
|
||||||
|
background-color: #33ADFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuContainer, #optionsContainer {
|
||||||
|
min-height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: 15%;
|
||||||
|
padding: 1% 0 1% 0;
|
||||||
|
box-shadow: 2px 2px 5px 3px #666;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
z-index:0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
-webkit-transition: margin 0.5s ease, background-color 0.5s ease;
|
||||||
|
-moz-transition: margin 0.5s ease, background-color 0.5s ease;
|
||||||
|
-ms-transition: margin 0.5s ease, background-color 0.5s ease;
|
||||||
|
transition: margin 0.5s ease, background-color 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#optionsContainer {
|
||||||
|
width: 12%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode, .function {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
background-color: #849CAE;
|
||||||
|
|
||||||
|
-webkit-transition: background-color 0.5s ease;
|
||||||
|
-moz-transition: background-color 0.5s ease;
|
||||||
|
-ms-transition: background-color 0.5s ease;
|
||||||
|
transition: background-color 0.5s ease;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode:hover, .function:hover {
|
||||||
|
background-color: #A2B5C3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode:active, .function:active {
|
||||||
|
background-color: #EFF3F5;
|
||||||
|
|
||||||
|
-webkit-transition: background-color 0.2s ease;
|
||||||
|
-moz-transition: background-color 0.2s ease;
|
||||||
|
-ms-transition: background-color 0.2s ease;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-university, .fa-calendar {
|
||||||
|
font-size: 175%;
|
||||||
|
width: 12%;
|
||||||
|
padding: 10%;
|
||||||
|
-webkit-filter: drop-shadow(2px 2px 5px #666);
|
||||||
|
filter: drop-shadow(2px 2px 5px #666);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-plus, .fa-minus, .fa-tasks, .fa-graduation-cap {
|
||||||
|
font-size: 130%;
|
||||||
|
padding: 5%;
|
||||||
|
-webkit-filter: drop-shadow(2px 2px 5px #666);
|
||||||
|
filter: drop-shadow(2px 2px 5px #666);
|
||||||
|
}
|
||||||
|
|
||||||
|
#functions {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 7%;
|
||||||
|
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #D9D9D9;
|
||||||
|
border-left: none;
|
||||||
|
|
||||||
|
box-shadow: 0px 4px 8px 1px #222;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#functionHolder {
|
||||||
|
max-height: 48%;
|
||||||
|
width: 90%;
|
||||||
|
margin-bottom: 30%;
|
||||||
|
padding: 8%;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
overflow-y: auto;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
-webkit-transition: opacity 0.4s ease;
|
||||||
|
-moz-transition: opacity 0.4s ease;
|
||||||
|
-ms-transition: opacity 0.4s ease;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#create {
|
||||||
|
font-size: 140%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 3%;
|
||||||
|
margin-bottom: -9%;
|
||||||
|
|
||||||
|
-webkit-filter: drop-shadow(2px 2px 5px #666);
|
||||||
|
filter: drop-shadow(2px 2px 5px #666);
|
||||||
|
}
|
||||||
|
|
||||||
|
.creSubmit {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 50%;
|
||||||
|
padding: 3% 0 3% 0;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #849CAE;
|
||||||
|
|
||||||
|
-webkit-transition: background-color 0.5s ease;
|
||||||
|
-moz-transition: background-color 0.5s ease;
|
||||||
|
-ms-transition: background-color 0.5s ease;
|
||||||
|
transition: background-color 0.5s ease;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.creSubmit:hover {
|
||||||
|
background-color: #A2B5C3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.creSubmit:active {
|
||||||
|
background-color: #EFF3F5;
|
||||||
|
|
||||||
|
-webkit-transition: background-color 0.2s ease;
|
||||||
|
-moz-transition: background-color 0.2s ease;
|
||||||
|
-ms-transition: background-color 0.2s ease;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select {
|
||||||
|
font-family: 'Raleway';
|
||||||
|
width: 90%;
|
||||||
|
margin-bottom: 4%;
|
||||||
|
padding: 3.5%;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
font-family: 'Raleway';
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.creOptions {
|
||||||
|
width: 80%;
|
||||||
|
margin-top: -3.4%;
|
||||||
|
|
||||||
|
box-shadow: 2px 2px 5px 3px #666;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 5;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
-webkit-transition: opacity 0.4s ease;
|
||||||
|
-moz-transition: opacity 0.4s ease;
|
||||||
|
-ms-transition: opacity 0.4s ease;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.creOptions p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.creOptions p:hover {
|
||||||
|
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1)
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0,0,0,0.5);
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 51;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
-webkit-transition: opacity 0.4s ease;
|
||||||
|
-moz-transition: opacity 0.4s ease;
|
||||||
|
-ms-transition: opacity 0.4s ease;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlayCont {
|
||||||
|
font-size: 150%;
|
||||||
|
box-shadow: 2px 2px 5px 3px #666;
|
||||||
|
|
||||||
|
-moz-border-radius: 30px;
|
||||||
|
-webkit-border-radius: 30px;
|
||||||
|
border-radius: 30px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-check-circle-o, .fa-times-circle-o {
|
||||||
|
font-size: 300%;
|
||||||
|
padding: 5% 13% 5% 13%;
|
||||||
|
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
-webkit-transition: color 0.4s ease;
|
||||||
|
-moz-transition: color 0.4s ease;
|
||||||
|
-ms-transition: color 0.4s ease;
|
||||||
|
transition: color 0.4s ease;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-check-circle-o:hover {
|
||||||
|
color: #85E085;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-check-circle-o:active {
|
||||||
|
color: #33CC33;
|
||||||
|
|
||||||
|
-webkit-transition: background-color 0.2s ease;
|
||||||
|
-moz-transition: background-color 0.2s ease;
|
||||||
|
-ms-transition: background-color 0.2s ease;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-times-circle-o:hover {
|
||||||
|
color: #FF6666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-times-circle-o:active {
|
||||||
|
color: #ff1A1A;
|
||||||
|
|
||||||
|
-webkit-transition: background-color 0.2s ease;
|
||||||
|
-moz-transition: background-color 0.2s ease;
|
||||||
|
-ms-transition: background-color 0.2s ease;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
99
hourglass/client/main/main.html
Normal file
99
hourglass/client/main/main.html
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
<head>
|
||||||
|
<title>Hourglass</title>
|
||||||
|
<link rel="icon" href="favicon.ico?v=2">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<template name="main">
|
||||||
|
<header style="background-color:{{divColor 'header'}}">
|
||||||
|
<div id="aboveBar">
|
||||||
|
<i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
|
||||||
|
<h1>Hourglass</h1>
|
||||||
|
<i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
|
||||||
|
</div>
|
||||||
|
<div id="loadBar">
|
||||||
|
<div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div id="menuContainer" style="margin-left:{{menuStatus}};background-color:{{divColor 'sidebar'}}">
|
||||||
|
<div class="mode classes">
|
||||||
|
<i class="fa fa-university" aria-hidden="true"></i>
|
||||||
|
<h4 style="color:{{modeStatus 'classes'}}">Classes</h4>
|
||||||
|
</div>
|
||||||
|
<div class="mode calendar">
|
||||||
|
<i class="fa fa-calendar" aria-hidden="true"></i>
|
||||||
|
<h4 style="color:{{modeStatus 'calendar'}}">Calendar</h4>
|
||||||
|
</div>
|
||||||
|
<div id="functions">
|
||||||
|
<div class="function addClass">
|
||||||
|
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||||
|
<h4 style="color:{{functionStatus 'addClass'}}">Join Class</h4>
|
||||||
|
</div>
|
||||||
|
<div class="function createClass">
|
||||||
|
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
|
||||||
|
<h4 style="color:{{functionStatus 'creClass'}}">Create Class</h4>
|
||||||
|
</div>
|
||||||
|
<div class="function manageClass">
|
||||||
|
<i class="fa fa-tasks" aria-hidden="true"></i>
|
||||||
|
<h4 style="color:{{functionStatus 'manClass'}}">Manage Classes</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="functionHolder">
|
||||||
|
{{#if currFunction "addClass"}}
|
||||||
|
<p>Add a Class</p>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if currFunction "manClass"}}
|
||||||
|
<p>Manage Classes</p>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if currFunction "creClass"}}
|
||||||
|
<h2>Create a Class</h2>
|
||||||
|
<form id="create">
|
||||||
|
<p class="input">School:</p><br>
|
||||||
|
{{> inputAutocomplete settings=schoolcomplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }}
|
||||||
|
<p class="input">Hour:</p><br>
|
||||||
|
<input class="creInput" type="text" name="hour"><br>
|
||||||
|
<p class="input">Teacher</p>:<br>
|
||||||
|
<input class="creInput" type="text" name="teacher"><br>
|
||||||
|
<p class="input">Class Name:</p><br>
|
||||||
|
<input class="creInput" type="text" name="classname"><br>
|
||||||
|
<p class="input">Privacy:</p><br>
|
||||||
|
<div class="select">
|
||||||
|
<input class="creInput creInputSel" type = "text" name="privacy" readonly><br>
|
||||||
|
<div class="creOptions" style="background-color:{{divColor 'header'}}">
|
||||||
|
<p>Public</p>
|
||||||
|
<p>Private</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="input">Category:</p><br>
|
||||||
|
<div class="select">
|
||||||
|
<input class="creInput creInputSel" type="text" name="category" readonly><br>
|
||||||
|
<div class="creOptions" style="background-color:{{divColor 'header'}}">
|
||||||
|
<p>Class</p>
|
||||||
|
<p>Club</p>
|
||||||
|
<p>Other</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="creSubmit">Submit Request</div>
|
||||||
|
</form>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="optionsContainer" style="margin-right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
|
||||||
|
</div>
|
||||||
|
<div class="overlay">
|
||||||
|
<div class="overlayCont" style="{{overlayDim}};">
|
||||||
|
<p>Are you sure?</p>
|
||||||
|
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
|
||||||
|
<i class="fa fa-times-circle-o" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template name="schoollist">
|
||||||
|
{{name}}
|
||||||
|
</template>
|
||||||
221
hourglass/client/main/main.js
Normal file
221
hourglass/client/main/main.js
Normal file
@ -0,0 +1,221 @@
|
|||||||
|
import { Template } from 'meteor/templating';
|
||||||
|
import { ReactiveVar } from 'meteor/reactive-var';
|
||||||
|
|
||||||
|
import './main.html';
|
||||||
|
|
||||||
|
var openValues = {
|
||||||
|
"menu": "-25%",
|
||||||
|
"options": "-20%"
|
||||||
|
};
|
||||||
|
|
||||||
|
var themeColors = {
|
||||||
|
"light": {
|
||||||
|
"header":"#EBEBEB",
|
||||||
|
"sidebar":"#65839A",
|
||||||
|
"statusIcons":"#33ADFF",
|
||||||
|
"highlightText":"#FF1A1A"
|
||||||
|
},
|
||||||
|
"dark": {
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
"school": [],
|
||||||
|
"privacy": ["Public", "Hidden"],
|
||||||
|
"category": ["Class", "Club", "Other"]
|
||||||
|
}
|
||||||
|
|
||||||
|
var searchSchools = [];
|
||||||
|
|
||||||
|
Session.set("menuOpen", false);
|
||||||
|
Session.set("optionsOpen", false);
|
||||||
|
Session.set("mode",null); // Change to user preferences
|
||||||
|
Session.set("function", null);
|
||||||
|
Session.set("confirm",null);
|
||||||
|
Session.set("formCre",null);
|
||||||
|
|
||||||
|
Cookie.set("theme","light",{'years':15});
|
||||||
|
|
||||||
|
Template.main.helpers({
|
||||||
|
divColor(div) {
|
||||||
|
return themeColors[Cookie.get("theme")][div];
|
||||||
|
},
|
||||||
|
iconColor(icon) {
|
||||||
|
let status = Session.get(icon+"Open");
|
||||||
|
if(status) {
|
||||||
|
return themeColors[Cookie.get("theme")].statusIcons;
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
menuStatus() {
|
||||||
|
let status = Session.get("menuOpen");
|
||||||
|
if(status) {
|
||||||
|
return "0%";
|
||||||
|
} else {
|
||||||
|
return openValues["menu"];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modeStatus(status) {
|
||||||
|
if(status === Session.get("mode")) {
|
||||||
|
return themeColors[Cookie.get("theme")].highlightText;
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
functionStatus(status) {
|
||||||
|
if(status === Session.get("function")) {
|
||||||
|
return themeColors[Cookie.get("theme")].highlightText;
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
currFunction(name) {
|
||||||
|
if(name === Session.get("function")) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
optionsStatus() {
|
||||||
|
let status = Session.get("optionsOpen");
|
||||||
|
if(status) {
|
||||||
|
return "0%";
|
||||||
|
} else {
|
||||||
|
return openValues["options"];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
overlayDim(part) {
|
||||||
|
var dim = [window.innerWidth * .2,window.innerHeight * .2];
|
||||||
|
var width = "width:"+dim[0].toString() + "px;";
|
||||||
|
var height = "height:"+dim[1].toString() + "px;";
|
||||||
|
var margin = "margin:"+(-dim[0]/2).toString() + "px 0 0 " + -(dim[1]/2).toString() + "px;";
|
||||||
|
var bg = "background-color:"+themeColors[Cookie.get("theme")]["header"]+";";
|
||||||
|
return width+height+margin+bg;
|
||||||
|
},
|
||||||
|
creHighlight(input) {
|
||||||
|
if(input == Session.get("creInput")) {
|
||||||
|
return "#CCEEFF";
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
schoolcomplete() {
|
||||||
|
return {
|
||||||
|
position: "bottom",
|
||||||
|
limit: 6,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
token: '',
|
||||||
|
collection: schools,
|
||||||
|
field: 'name',
|
||||||
|
matchAll: true,
|
||||||
|
template: Template.schoollist
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Template.main.events({
|
||||||
|
'click .fa-bars' () {
|
||||||
|
Session.set("menuOpen",!Session.get("menuOpen"));
|
||||||
|
},
|
||||||
|
'click .fa-cog' () {
|
||||||
|
Session.set("optionsOpen",!Session.get("optionsOpen"));
|
||||||
|
},
|
||||||
|
'click .classes' () {
|
||||||
|
Session.set("mode","classes");
|
||||||
|
},
|
||||||
|
'click .calendar' () {
|
||||||
|
Session.set("mode","calendar");
|
||||||
|
},
|
||||||
|
'click .addClass' () {
|
||||||
|
var functionHolder = document.getElementById("functionHolder")
|
||||||
|
closeDivFade(functionHolder);
|
||||||
|
setTimeout(function() {
|
||||||
|
Session.set("function","addClass");
|
||||||
|
openDivFade(functionHolder);
|
||||||
|
},300);
|
||||||
|
},
|
||||||
|
'click .manageClass' () {
|
||||||
|
var functionHolder = document.getElementById("functionHolder")
|
||||||
|
closeDivFade(functionHolder);
|
||||||
|
setTimeout(function() {
|
||||||
|
Session.set("function","manClass");
|
||||||
|
openDivFade(functionHolder);
|
||||||
|
},300);
|
||||||
|
},
|
||||||
|
'click .createClass' () {
|
||||||
|
var functionHolder = document.getElementById("functionHolder")
|
||||||
|
closeDivFade(functionHolder);
|
||||||
|
setTimeout(function() {
|
||||||
|
Session.set("function","creClass");
|
||||||
|
openDivFade(functionHolder);
|
||||||
|
},300);
|
||||||
|
},
|
||||||
|
'click .creSubmit' () {
|
||||||
|
openDivFade(document.getElementsByClassName("overlay")[0]);
|
||||||
|
setTimeout(function() {
|
||||||
|
document.getElementsByClassName("overlay")[0].style.opacity = "1";
|
||||||
|
}, 200);
|
||||||
|
Session.set("confirm","createClass");
|
||||||
|
},
|
||||||
|
'click .fa-check-circle-o' () {
|
||||||
|
sendData();
|
||||||
|
closeDivFade(document.getElementsByClassName("overlay")[0]);
|
||||||
|
closeDivFade(document.getElementById("functionHolder"));
|
||||||
|
document.getElementById("create").reset();
|
||||||
|
setTimeout(function() {
|
||||||
|
Session.set("confirm",null);
|
||||||
|
Session.set("function",null);
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
'click .fa-times-circle-o' () {
|
||||||
|
closeDivFade(document.getElementsByClassName("overlay")[0]);
|
||||||
|
closeDivFade(document.getElementById("functionHolder"));
|
||||||
|
document.getElementById("create").reset();
|
||||||
|
setTimeout(function() {
|
||||||
|
Session.set("confirm",null);
|
||||||
|
Session.set("function",null);
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
'click .creInput' (event) {
|
||||||
|
openDivFade(event.target.parentNode.childNodes[4]);
|
||||||
|
},
|
||||||
|
'click .creOptions p' (event) {
|
||||||
|
var p = event.target;
|
||||||
|
p.parentNode.parentNode.childNodes[1].value = p.childNodes[0].nodeValue;
|
||||||
|
closeDivFade(p.parentNode);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Template.schoollist.helpers({
|
||||||
|
name() {
|
||||||
|
return this.name;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function openDivFade(div) {
|
||||||
|
div.style.display = "block";
|
||||||
|
div.style.opacity = "0";
|
||||||
|
setTimeout(function() {
|
||||||
|
div.style.opacity = "1";
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDivFade(div) {
|
||||||
|
div.style.opacity = "0";
|
||||||
|
setTimeout(function() {
|
||||||
|
div.style.display = "none";
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendData() {
|
||||||
|
// Take form data
|
||||||
|
}
|
||||||
|
|
||||||
|
function select(div) {
|
||||||
|
div.parentNode.parentNode.childNodes[0].value = div.childNodes[0].nodeValue;
|
||||||
|
}
|
||||||
0
hourglass/client/profile/profile.css
Normal file
0
hourglass/client/profile/profile.css
Normal file
3
hourglass/client/profile/profile.html
Normal file
3
hourglass/client/profile/profile.html
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<template name="profile">
|
||||||
|
|
||||||
|
</template>
|
||||||
0
hourglass/client/profile/profile.js
Normal file
0
hourglass/client/profile/profile.js
Normal file
Loading…
x
Reference in New Issue
Block a user