Skip to content

Commit 200958c

Browse files
jtguggedaljtguggedal
committed
Update styles and add vibration
1 parent eba53ae commit 200958c

12 files changed

+122
-339
lines changed

‎css/controllers.css

+12-9
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
}
122122

123123
#btn-return {
124-
124+
125125
}
126126

127127
.wait-till-game {
@@ -139,17 +139,20 @@
139139
position: relative;
140140
width: 300px;
141141
height: 30px;
142-
padding-top: 5px;
143-
margin: 15px auto;
144-
background-color: rgba(0, 13, 29, 0.8);
142+
padding: 7px;
143+
margin: 20px auto;
144+
background-color: rgba(0, 0, 0, 0.7);
145145
border: 1px solid rgba(255, 255, 255, 0.2);
146146
border-radius: 5px;
147147
text-align: center;
148148
cursor: pointer;
149149
box-shadow: 0px 0px 20px 0px rgba(0,0,0, 0.4);
150150
color: rgba(255, 255, 255, 0.9);
151-
font-size: 20px;
152-
font-weight: bold;
151+
font-size: 23px;
152+
font-weight: 700;
153+
}
154+
.button:last-child, .msg-button:last-child {
155+
margin-bottom: 5px;
153156
}
154157
.msg-button {
155158
width: 200px;
@@ -164,7 +167,7 @@
164167
position: fixed;
165168
bottom: 10px;
166169
left: 50%;
167-
margin-left: -20px;
170+
margin-left: -20px;
168171
color: white;
169172
font-size: 25px;
170173
padding-top: px;
@@ -212,9 +215,9 @@
212215
text-transform:uppercase;
213216
margin: 0;
214217
color: white;
215-
218+
216219
}
217-
::-webkit-input-placeholder {
220+
::-webkit-input-placeholder {
218221
color: rgba(255, 255, 255, 0.5);
219222
}
220223

‎css/stylesheet.css

+13-90
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/* Link til fargekoder i hex: http://www.w3schools.com/colors/colors_picker.asp */
2-
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,500,700,300,100);
2+
@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,500,700|Lato:400,500,700,300,100);
33

44
body {
5-
font-family: "Roboto";
5+
font-family: "Lato";
66
margin: 0;
77
margin-bottom: -20px;
88
padding: 0px;
@@ -14,18 +14,13 @@ body {
1414
overflow: hidden;
1515
background: -moz-radial-gradient(center, ellipse cover, rgba(12,78,145,1) 0%, rgba(0,0,0,0.97) 100%);
1616
background: -webkit-radial-gradient(center, ellipse cover, rgba(12,78,145,1) 0%,rgba(0,0,0,0.97) 100%);
17-
background: radial-gradient(ellipse at center, rgba(12,78,145,1) 0%,rgba(0,0,0,0.97) 100%);
17+
background: radial-gradient(ellipse at center, rgba(12, 89, 167, 1) 0%,rgba(9, 15, 28, 0.97) 100%);
1818
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c4e91', endColorstr='#f7000000',GradientType=1 );
1919
}
20-
21-
.active {
22-
background-color:#00b3b3;
23-
}
24-
2520
#footer {
2621
height: 40px;
2722
width: 100%;
28-
background-color: #EBEBEB;
23+
background-color: rgba(0, 0, 0, 0.5);
2924
position: fixed;
3025
bottom: 0;
3126
margin: 0;
@@ -35,41 +30,21 @@ body {
3530
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.4);
3631
}
3732

38-
#ntnu {
39-
height: 15px;
40-
width: auto;
41-
margin-bottom: 8px;
42-
}
43-
44-
#nordiclogo {
45-
height: 43px;
46-
width: auto;
47-
margin-bottom: 3px;
33+
.footer-logo {
34+
height: 18px;
35+
margin: 12px 30px 0 30px;
4836
}
4937

50-
.imglink {
51-
max-height: 20px;
52-
margin: 6px;
53-
}
54-
55-
.column {
38+
#main {
5639
width: 100%;
5740
height: 100%;
5841
margin-top: 0;
5942
margin-left: auto;
6043
margin-right: auto;
6144
}
6245

63-
.notification {
64-
display: inline-block;
65-
margin: 15px;
66-
width: 35px;
67-
height: 35px;
68-
background-color: blue;
69-
color: white;
70-
font-size: 34px;
71-
text-align: center;
72-
font-weight: 700;
46+
#main-message {
47+
7348
}
7449

7550
h1 {
@@ -78,6 +53,7 @@ h1 {
7853
text-align: center;
7954
margin-left: auto;
8055
margin-right: auto;
56+
text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.9);
8157
}
8258

8359
h2 {
@@ -95,48 +71,6 @@ h3 {
9571
margin-right: auto;
9672
}
9773

98-
.demo {
99-
background: #f3eee6;
100-
width: 200px;
101-
height: 200px;
102-
display: inline-block;
103-
border-radius: 100px;
104-
margin: 0;
105-
}
106-
107-
.ball {
108-
width: 70px;
109-
height: 70px;
110-
background: red;
111-
position: absolute;
112-
top: 65px;
113-
left: 65px;
114-
border-radius: 70px;
115-
}
116-
117-
.ball.outline {
118-
background: #eee;
119-
}
120-
121-
.ball.ease {
122-
-moz-transition: all 0.2s ease;
123-
-o-transition: all 0.2s ease;
124-
-webkit-transition: all 0.2s ease;
125-
transition: all 0.2s ease;
126-
}
127-
128-
#pos-x, #pos-y {
129-
margin-left: 20px;
130-
}
131-
132-
.slider-container {
133-
display: inline-block;
134-
float: left;
135-
margin: 0 auto;
136-
width: 100px;
137-
text-align: center;
138-
}
139-
14074
input[type=range] {
14175
display: inline-block;
14276
width: 50px;
@@ -145,12 +79,6 @@ input[type=range] {
14579
-webkit-appearance: slider-vertical; /* WebKit */
14680
}
14781

148-
.side-by-side {
149-
display: inline-block;
150-
float: left;
151-
width: 50px;
152-
}
153-
15482
#connectionStatus {
15583
padding: 2px 5px;
15684
background-color: red;
@@ -181,21 +109,20 @@ input[type=range] {
181109
z-index: 10;
182110
}
183111

184-
/**** Message if portrait orientation *****/
112+
/**** Message if portrait orientation *****/
185113

186114
#orientation-message {
187115
display: none;
188116
}
189117

190-
191118
@media screen and (orientation:portrait)
192119
{
193120
#orientation-message {
194121
display: block;
195122
position: fixed;
196123
width: 100%;
197124
height: 100%;
198-
font-size: 25px;
125+
font-size: 25px;
199126
background: -moz-radial-gradient(center, ellipse cover, rgba(12,78,145,1) 0%, rgba(0,0,0,0.97) 100%);
200127
background: -webkit-radial-gradient(center, ellipse cover, rgba(12,78,145,1) 0%,rgba(0,0,0,0.97) 100%);
201128
background: radial-gradient(ellipse at center, rgba(12,78,145,1) 0%,rgba(0,0,0,0.97) 100%);
@@ -215,7 +142,3 @@ input[type=range] {
215142
margin-top: 100px;
216143
}
217144
}
218-
219-
220-
221-

‎img/nordic.png

26.6 KB
Loading

‎img/ntnu.png

22.7 KB
Loading

‎img/physicalweb.png

50.1 KB
Loading

‎index.html

+21-35
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<head>
55

66
<meta charset="utf-8">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
99
<script type="text/javascript" src="js/jquery.mobile-events.js"></script>
10-
<script src="js/gatt.js"></script>
10+
<script src="js/gatt.js"></script>
1111
<script src="js/setBit.js"></script>
1212
<link rel="stylesheet" type="text/css" href="css/slotmachine.css"></link>
1313
<link rel="stylesheet" type="text/css" href="css/stylesheet.css?"></link>
@@ -25,60 +25,46 @@
2525
</div>
2626
</div>
2727
</div>
28-
<div id="connectionStatus">Status</div>
28+
<div id="connectionStatus">Connection status</div>
2929

3030
<div id="fullscreen" onclick="">Klikk for fullskjerm</div>
3131

32-
<div class="column">
33-
32+
<div id="main">
33+
3434
<h1 id="welcome">Physical Web Toy</h1>
35-
36-
<h2 onclick="game_init();" id='connect' class="button">Start</h2>
37-
<h2 onclick="disconnect();" id='disconnect'class="button">About</h2>
35+
<div id="main-message">
36+
<h2 onclick="game_init();" id='connect' class="button">Start</h2>
37+
<h2 onclick="disconnect();" id='disconnect'class="button">About</h2>
38+
</div>
3839

3940

4041
</div>
4142
<div id="footer">
42-
<a href="https://google.github.io/physical-web/"><img src="pics/PhysicalWebLogoSmall.png" class="imglink"></img></a>
43-
<a href="https://www.ntnu.edu/"><img src="pics/NTNULogoSmall.png" id="ntnu" class="imglink"></img></a>
44-
<a href="http://www.nordicsemi.no"><img src="pics/NordicSemiLogoSmall.png" id="nordiclogo" class="imglink"></img></a>
43+
<a href="https://google.github.io/physical-web/"><img src="img/physicalweb.png" class="footer-logo"></img></a>
44+
<a href="http://www.nordicsemi.no"><img src="img/nordic.png" id="nordiclogo" class="footer-logo"></img></a>
45+
<a href="https://www.ntnu.edu/"><img src="img/ntnu.png" id="ntnu" class="footer-logo"></img></a>
4546
</div>
46-
47-
<script>
48-
$(document).ready(function(){
49-
$('.pull-down-menu').click(function() { // Function to slide down the menu selector
50-
$('.panel').slideToggle('slow');
51-
});
52-
53-
$('.menu').hover( // Makes the menus change color while hovering over them
54-
function(){
55-
$(this).addClass('active');
56-
},
57-
function(){
58-
$(this).removeClass('active');
59-
});
60-
});
61-
6247

48+
<script>
6349

6450
//*** Initialize game **/
6551

66-
function game_init() {
52+
function game_init() {
6753
toggleFullscreen();
6854
connect();
6955
$('#fullscreen').show();
7056
$('#footer').hide();
7157
var time = new Date();
7258
var e = time.getTime();
7359
setTimeout(function() {
74-
$('.column').load('include/controllers.html?t=' + e);
75-
}, 1000);
60+
$('#main').load('include/controllers.html?t=' + e);
61+
}, 1000);
7662
}
7763

7864

7965
</script>
8066

81-
67+
8268

8369
<script>
8470
// Funksjon for å vise siden i fullskjerm
@@ -115,12 +101,12 @@ <h2 onclick="disconnect();" id='disconnect'class="button">About</h2>
115101
toggleFullscreen();
116102
});
117103

118-
104+
119105

120106
</script>
121107

122108

123-
109+
124110

125111
</body>
126-
</html>
112+
</html>

0 commit comments

Comments
 (0)