diff options
| -rw-r--r-- | f/styles/style.css | 105 | ||||
| -rw-r--r-- | f/templates/index.html | 101 |
2 files changed, 149 insertions, 57 deletions
diff --git a/f/styles/style.css b/f/styles/style.css index 8a1c541..3209cef 100644 --- a/f/styles/style.css +++ b/f/styles/style.css @@ -1,46 +1,112 @@ body{
- background-color:black;
+ background-color:#2c3e50;
color:white;
- font-family: Helvetica Neue,Helvetica,sans-serif;
+ font-family: 'Lato', sans-serif;
+ font-weight: 300;
+ font-size: 20px;
}
+
+#title {
+ font-weight: bold;
+ font-size: 40px;
+}
+
+#subtitle {
+ font-style: italic;
+}
+
+.form-name {
+ font-weight: 700;
+}
+
+.form-input {
+ float: right;
+ margin-left: 40px;
+}
+
+.addButton {
+ margin-top: 20px;
+ background-color:#599bb3;
+ -moz-border-radius:8px;
+ -webkit-border-radius:8px;
+ border-radius:8px;
+ display:inline-block;
+ cursor:pointer;
+ color:#ffffff;
+ padding:8px 18px;
+ text-decoration:none;
+}
+
+.addButton:hover {
+ background-color:#408c99;
+}
+.addButton:active {
+ position:relative;
+ top:1px;
+}
+
#container_main{
- font-size:24px;
width:400px;
margin-top:40px;
margin-left:auto;
margin-right:auto;
+ text-align: center;
}
-td:first-child{
- text-align:right;
+
+td {
+ text-align: left;
}
+
#que{
margin-top:50px;
- background-color:#202020;
+ background-color: #34495e;
+ font-weight: 300;
}
+
#que table,#que th,#que td{
border:1px solid white;
}
+
#que td,th{
+ min-width: 100px;
padding-left:10px;
padding-right:10px;
}
+
#que tr:nth-child(2){
- background-color:darkgreen;
+ background-color: #16a085;
}
-#que td:nth-child(3){
- text-align: center;
+
+.removeButton {
+ margin-top: 20px;
+ background-color:#c03a2b;
+ -moz-border-radius:8px;
+ -webkit-border-radius:8px;
+ border-radius:8px;
+ display:inline-block;
+ cursor:pointer;
+ color:#ffffff;
+ padding:8px 18px;
+ text-decoration:none;
}
-#addform{
-
+.removeButton:hover {
+ background-color:#408c99;
}
-#addbutton{
- width:60px;
- margin-left:auto;
- margin-right:auto;
+.removeButton:active {
+ position:relative;
+ top:1px;
+}
+
+
+.centered-table {
+ margin-left: auto;
+ margin-right: auto;
}
+
#adminscreen{
border:3px solid #202020;
- font-size:72px;
+ font-size:60px;
+ padding: 10px;
width:400px;
margin-left:auto;
margin-top:50px;
@@ -48,12 +114,15 @@ td:first-child{ padding-left:20px;
padding-right:20px;
}
+
#adminscreen td {
padding-left:10px;
}
+
.outdated{
-background-color:darkred;
+background-color: #c0392b;
}
+
.updated{
-background-color:darkgreen;
+background-color: #16a085;
}
diff --git a/f/templates/index.html b/f/templates/index.html index 8710d65..81e2b7c 100644 --- a/f/templates/index.html +++ b/f/templates/index.html @@ -1,41 +1,64 @@ <!doctype HTML> <html > -<head> -<link rel="stylesheet" type="text/css" href="/f/styles/style.css"> -<script src="/f/scripts/angular/angular.min.js"></script> -<script src="/socket.io/socket.io.js"></script> -<script src="/f/scripts/client.js"></script> -<meta charset="utf8"> -<title>Jonokone</title> -</head> -<body ng-app="ioc" > -<div ng-controller="ioctrl" id="container_main"> -<H1>Jonokone @ jonokone.dy.fi </h1> -<table id="addform"> - <tr><td>Rivi: </td><td> <select ng-model="row"> - <option value="1" selected="selected">1</option> - <option value="2">2</option> - <option value="3">3</option> - <option value="4">4</option> - <option value="5">5</option> - <option value="6">6</option> - <option value="7">7</option> - <option value="8">8</option> - <option value="9">9</option> - <option value="10">10</option> - </select></td></tr> - <tr><td> Nimi</td> <td><input type="text" ng-model="name"></input></td></tr> - <tr><td></td><td> <button id="addbutton" ng-click="submit();">Lisää</button></td></tr> -</table> -<table id="que"> -<tr><th>Rivi</th><th>Nimi</th><th>Poista</th></tr> -<tr ng-repeat="person in que"> - <td >Rivi {{person.row}}</td> - <td >{{person.name}}</td> - <td ng-if="person.uid == uid" ng-click="querm(person.qid);"><img src="/f/images/delete.jpg"></td> - <td ng-if="person.uid != uid"></td> -</tr> -</table> -</div> -</body> -</html> + <head> + <link href='https://fonts.googleapis.com/css?family=Lato:300italic,700,300' rel='stylesheet' type='text/css'> + <link rel="stylesheet" type="text/css" href="/f/styles/style.css"> + <script src="/f/scripts/angular/angular.min.js"></script> + <script src="/socket.io/socket.io.js"></script> + <script src="/f/scripts/client.js"></script> + <meta charset="utf8"> + <title>Jonokone</title> + </head> + <body ng-app="ioc" > + <div ng-controller="ioctrl" id="container_main"> + <div id="title">Jonokone</div> + <div id="subtitle">@ jonokone.dy.fi</div> + <br> + <table id="addform" class="centered-table"> + <tr> + <td class="form-name">Rivi: </td> + <td class="form-input"> + <select ng-model="row"> + <option value="1" selected="selected">1</option> + <option value="2">2</option> + <option value="3">3</option> + <option value="4">4</option> + <option value="5">5</option> + <option value="6">6</option> + <option value="7">7</option> + <option value="8">8</option> + <option value="9">9</option> + <option value="10">10</option> + </select> + </td> + </tr> + <tr> + <td class="form-name">Nimi: </td> + <td class="form-input"> + <input type="text" ng-model="name"></input> + </td> + </tr> + </table> + + <a href="#" class="addButton" ng-click="submit();">Lisää</a> + + <div ng-repeat="person in que"> + <div ng-if="person.uid == uid" ng-click="querm(person.qid);"> + <a href="#" class="removeButton">Poista {{person.name}}</a> + </div> + </div> + + <table id="que" class="centered-table" ng-if="que.length > 0"> + <tr> + <th>Rivi</th> + <th>Nimi</th> + </tr> + <tr ng-repeat="person in que"> + <td >Rivi {{person.row}}</td> + <td >{{person.name}}</td> + </tr> + </table> + + </div> + </body> +</html>
\ No newline at end of file |