Skip to content

Commit 7d2bac3

Browse files
progaurabprogaurab
committed
ex2 updated
1 parent 0a72c4f commit 7d2bac3

File tree

4 files changed

+129
-166
lines changed

4 files changed

+129
-166
lines changed

‎ex2/www/css/index.css‎

Lines changed: 83 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,84 @@
1-
/*
2-
* Licensed to the Apache Software Foundation (ASF) under one
3-
* or more contributor license agreements. See the NOTICE file
4-
* distributed with this work for additional information
5-
* regarding copyright ownership. The ASF licenses this file
6-
* to you under the Apache License, Version 2.0 (the
7-
* "License"); you may not use this file except in compliance
8-
* with the License. You may obtain a copy of the License at
9-
*
10-
* http://www.apache.org/licenses/LICENSE-2.0
11-
*
12-
* Unless required by applicable law or agreed to in writing,
13-
* software distributed under the License is distributed on an
14-
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15-
* KIND, either express or implied. See the License for the
16-
* specific language governing permissions and limitations
17-
* under the License.
18-
*/
19-
* {
20-
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
21-
}
22-
231
body {
24-
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
25-
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
26-
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
27-
background-color:#E4E4E4;
28-
background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
29-
font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
30-
font-size:12px;
31-
height:100vh;
32-
margin:0px;
33-
padding:0px;
34-
/* Padding to avoid the "unsafe" areas behind notches in the screen */
35-
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
36-
text-transform:uppercase;
37-
width:100%;
38-
}
39-
40-
/* Portrait layout (default) */
41-
.app {
42-
background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
43-
position:absolute; /* position in the center of the screen */
44-
left:50%;
45-
top:50%;
46-
height:50px; /* text area height */
47-
width:225px; /* text area width */
48-
text-align:center;
49-
padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
50-
margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
51-
/* offset horizontal: half of text area width */
52-
}
53-
54-
/* Landscape layout (with min-width) */
55-
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
56-
.app {
57-
background-position:left center;
58-
padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
59-
margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
60-
/* offset horizontal: half of image width and text area width */
61-
}
62-
}
63-
64-
h1 {
65-
font-size:24px;
66-
font-weight:normal;
67-
margin:0px;
68-
overflow:visible;
69-
padding:0px;
70-
text-align:center;
71-
}
72-
73-
.event {
74-
border-radius:4px;
75-
color:#FFFFFF;
76-
font-size:12px;
77-
margin:0px 30px;
78-
padding:2px 0px;
79-
}
80-
81-
.event.listening {
82-
background-color:#333333;
83-
display:block;
84-
}
85-
86-
.event.received {
87-
background-color:#4B946A;
88-
display:none;
89-
}
90-
91-
#deviceready.ready .event.listening { display: none; }
92-
#deviceready.ready .event.received { display: block; }
93-
94-
@keyframes fade {
95-
from { opacity: 1.0; }
96-
50% { opacity: 0.4; }
97-
to { opacity: 1.0; }
98-
}
99-
100-
.blink {
101-
animation:fade 3000ms infinite;
102-
-webkit-animation:fade 3000ms infinite;
103-
}
104-
105-
106-
@media screen and (prefers-color-scheme: dark) {
107-
body {
108-
background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
109-
}
110-
}
2+
min-width: 100vw;
3+
min-height: 100vh;
4+
overflow: hidden;
5+
background-color: #2948ff;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
}
10+
11+
/* clock */
12+
13+
.clock {
14+
width: 300px;
15+
height: 300px;
16+
background-color: #73ff00;
17+
border-radius: 50%;
18+
border: 8px solid #000;
19+
box-shadow: 2px 2px 8px 2px rgba(22, 45, 75, 0.92);
20+
background-image: url('../img/clock.png');
21+
background-size: cover;
22+
position: relative;
23+
}
24+
25+
/* clock style ends */
26+
27+
/* round center */
28+
29+
.clock::before {
30+
content: '';
31+
width: 15px;
32+
height: 15px;
33+
border-radius: 50%;
34+
background-color: #000;
35+
position: absolute;
36+
top: 50%;
37+
left: 50%;
38+
transform: translate(-50%, -50%);
39+
z-index: 999;
40+
}
41+
42+
/* round center style ends */
43+
44+
/* common style for every hand */
45+
46+
.hand {
47+
position: absolute;
48+
bottom: 50%;
49+
left: 50%;
50+
transform: translateX(-50%) rotate(90deg);
51+
transform-origin: bottom;
52+
border-top-left-radius: 7px;
53+
border-top-right-radius: 7px;
54+
}
55+
56+
/* common style ends */
57+
58+
/* hour hand */
59+
60+
.hour {
61+
width: 8px;
62+
height: 28%;
63+
background-color: #000;
64+
}
65+
66+
/* hour hand style ends */
67+
/* minute hand style */
68+
69+
.minute {
70+
width: 5px;
71+
height: 38%;
72+
background-color: #000;
73+
}
74+
75+
/* minute hand style ends */
76+
/* second hand style */
77+
78+
.second {
79+
width: 3px;
80+
height: 40%;
81+
background-color: #ff0000;
82+
}
83+
84+
/* second hand style ends */

‎ex2/www/img/clock.png‎

502 KB
Loading

‎ex2/www/index.html‎

Lines changed: 8 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,8 @@
11
<!DOCTYPE html>
2-
<!--
3-
Licensed to the Apache Software Foundation (ASF) under one
4-
or more contributor license agreements. See the NOTICE file
5-
distributed with this work for additional information
6-
regarding copyright ownership. The ASF licenses this file
7-
to you under the Apache License, Version 2.0 (the
8-
"License"); you may not use this file except in compliance
9-
with the License. You may obtain a copy of the License at
10-
11-
http://www.apache.org/licenses/LICENSE-2.0
12-
13-
Unless required by applicable law or agreed to in writing,
14-
software distributed under the License is distributed on an
15-
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16-
KIND, either express or implied. See the License for the
17-
specific language governing permissions and limitations
18-
under the License.
19-
-->
202
<html>
213
<head>
224
<meta charset="utf-8">
23-
<!--
24-
Customize this policy to fit your own app's needs. For more guidance, please refer to the docs:
25-
https://cordova.apache.org/docs/en/latest/
26-
Some notes:
27-
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
28-
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
29-
* Enable inline JS: add 'unsafe-inline' to default-src
30-
-->
31-
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
5+
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
326
<meta name="format-detection" content="telephone=no">
337
<meta name="msapplication-tap-highlight" content="no">
348
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
@@ -37,13 +11,13 @@
3711
<title>Hello World</title>
3812
</head>
3913
<body>
40-
<div class="app">
41-
<h1>Apache Cordova</h1>
42-
<div id="deviceready" class="blink">
43-
<p class="event listening">Connecting to Device</p>
44-
<p class="event received">Device is Ready</p>
45-
</div>
46-
</div>
14+
<div class="clock">
15+
16+
<div class="hand hour"></div>
17+
<div class="hand minute"></div>
18+
<div class="hand second"></div>
19+
20+
</div>
4721
<script src="cordova.js"></script>
4822
<script src="js/index.js"></script>
4923
</body>

‎ex2/www/js/index.js‎

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,44 @@
1-
/*
2-
* Licensed to the Apache Software Foundation (ASF) under one
3-
* or more contributor license agreements. See the NOTICE file
4-
* distributed with this work for additional information
5-
* regarding copyright ownership. The ASF licenses this file
6-
* to you under the Apache License, Version 2.0 (the
7-
* "License"); you may not use this file except in compliance
8-
* with the License. You may obtain a copy of the License at
9-
*
10-
* http://www.apache.org/licenses/LICENSE-2.0
11-
*
12-
* Unless required by applicable law or agreed to in writing,
13-
* software distributed under the License is distributed on an
14-
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15-
* KIND, either express or implied. See the License for the
16-
* specific language governing permissions and limitations
17-
* under the License.
18-
*/
19-
20-
// Wait for the deviceready event before using any of Cordova's device APIs.
21-
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
221
document.addEventListener('deviceready', onDeviceReady, false);
232

243
function onDeviceReady() {
254
// Cordova is now initialized. Have fun!
265

27-
console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
28-
document.getElementById('deviceready').classList.add('ready');
6+
// grab a reference of every hands
7+
8+
// hour hand
9+
let hourHand = document.querySelector('.hour');
10+
// minute hand
11+
let minuteHand = document.querySelector('.minute');
12+
// second hand
13+
let secondHand = document.querySelector('.second');
14+
15+
// function that rotates the hands
16+
function rotate() {
17+
// get the current Date object from which we can obtain the current hour, minute and second
18+
const currentDate = new Date();
19+
20+
// get the hours, minutes and seconds
21+
const hours = currentDate.getHours();
22+
const minutes = currentDate.getMinutes();
23+
const seconds = currentDate.getSeconds();
24+
25+
// rotating fraction --> how many fraction to rotate for each hand.
26+
const secondsFraction = seconds / 60;
27+
const minutesFraction = (secondsFraction + minutes) / 60;
28+
const hoursFraction = (minutesFraction + hours) / 12;
29+
30+
// actual deg to rotate
31+
const secondsRotate = secondsFraction * 360;
32+
const minutesRotate = minutesFraction * 360;
33+
const hoursRotate = hoursFraction * 360;
34+
35+
// apply the rotate style to each element
36+
// use backtick `` instead of single quotes ''
37+
secondHand.style.transform = `rotate(${secondsRotate}deg)`;
38+
minuteHand.style.transform = `rotate(${minutesRotate}deg)`;
39+
hourHand.style.transform = `rotate(${hoursRotate}deg)`;
40+
}
41+
42+
// for every 1000 milliseconds(ie, 1 second) interval, activate the rotate() function.
43+
setInterval(rotate, 1000);
2944
}

0 commit comments

Comments
 (0)