Skip to content

Commit 3a820c0

Browse files
U7P4L-INU7P4L-IN
committed
Add initial set of web UI projects
Added multiple folders containing HTML, CSS, JS, images, and README files for a variety of web UI projects, including analog clocks, calendars, login panels, calculators, games, animations, and more. Also added a .gitignore for common build and IDE artifacts, and removed several unused image and script files. This commit establishes the initial structure and content for the project collection.
1 parent fcb3f71 commit 3a820c0

File tree

233 files changed

+24352
-175
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

233 files changed

+24352
-175
lines changed

‎.gitignore‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Built application files
2+
*.apk
3+
*.aar
4+
*.ap_
5+
*.aab
6+
7+
# Files for the ART/Dalvik VM
8+
*.dex
9+
10+
# Java class files
11+
*.class
12+
13+
# Generated files
14+
bin/
15+
gen/
16+
out/
17+
# Uncomment the following line in case you need and you don't have the release build type files in your app
18+
# release/
19+
20+
# Gradle files
21+
.gradle/
22+
build/
23+
24+
# Local configuration file (sdk path, etc)
25+
local.properties
26+
27+
# Proguard folder generated by Eclipse
28+
proguard/
29+
30+
# Log Files
31+
*.log
32+
33+
# Android Studio Navigation editor temp files
34+
.navigation/
35+
36+
# Android Studio captures folder
37+
captures/
38+
39+
# IntelliJ
40+
*.iml
41+
.idea/workspace.xml
42+
.idea/tasks.xml
43+
.idea/gradle.xml
44+
.idea/assetWizardSettings.xml
45+
.idea/dictionaries
46+
.idea/libraries
47+
# Android Studio 3 in .gitignore file.
48+
.idea/caches
49+
.idea/modules.xml
50+
# Comment next line if keeping position of elements in Navigation Editor is relevant for you
51+
.idea/navEditor.xml
52+
53+
# Keystore files
54+
# Uncomment the following lines if you do not want to check your keystore files in.
55+
#*.jks
56+
#*.keystore
57+
58+
# External native build folder generated in Android Studio 2.2 and later
59+
.externalNativeBuild
60+
.cxx/
61+
62+
# Google Services (e.g. APIs or Firebase)
63+
# google-services.json
64+
65+
# Freeline
66+
freeline.py
67+
freeline/
68+
freeline_project_description.json
69+
70+
# fastlane
71+
fastlane/report.xml
72+
fastlane/Preview.html
73+
fastlane/screenshots
74+
fastlane/test_output
75+
fastlane/readme.md
76+
77+
# Version control
78+
vcs.xml
79+
80+
# lint
81+
lint/intermediates/
82+
lint/generated/
83+
lint/outputs/
84+
lint/tmp/
85+
# lint/reports/

‎01- Analog-clock/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Analog Clock
2+
3+
[Website](https://faisalkhan171101.github.io/Analog-clock/) with an analog clock created using html,css and javascript.
4+
5+
© 2022 Faisal Khan, Presidency University

‎01- Analog-clock/ScreenShot_20240203145023.png‎

49 KB
Loading

‎01- Analog-clock/clock.png‎

5.88 KB
Loading

‎01- Analog-clock/clock.svg‎

Lines changed: 45 additions & 0 deletions
Loading

‎01- Analog-clock/icon-1200x630.png‎

102 KB
Loading

‎01- Analog-clock/icon.png‎

96.6 KB
Loading

‎01- Analog-clock/index.html‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!-- info -->
2+
<!-- coded by U7P4L 1N -->
3+
<!-- GITHUB ; github.com/U7P4L-IN -->
4+
<!-- START -->
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
8+
<head>
9+
<!-- Charset -->
10+
<meta charset="utf-8">
11+
12+
<!-- Style Sheets -->
13+
<link rel="stylesheet" type="text/css" href="style.css">
14+
15+
<!-- Viewport -->
16+
<meta name="viewport" content="width=device-width">
17+
18+
<!-- Title -->
19+
<title>Analog clock</title>
20+
<!-- coded by U7P4L 1N -->
21+
<!-- Description -->
22+
<meta name="description" content="Website with an analog clock.">
23+
24+
<!-- Author -->
25+
<meta name="author" content="U7P4L 1N">
26+
27+
28+
<!-- Icon -->
29+
<link rel="icon" type="image/png" href="logo.ico">
30+
31+
<!-- Apple touch icon -->
32+
<link rel="apple-touch-icon" href="icon.png">
33+
34+
<!-- Theme color -->
35+
<meta name="theme-color" content="#63d7a5">
36+
<meta name="msapplication-TileColor" content="#63d7a5">
37+
<meta name="msapplication-navbutton-color" content="#63d7a5">
38+
<meta name="apple-mobile-web-app-status-bar-style" content="#63d7a5">
39+
40+
41+
<!-- ===================== -->
42+
<!-- ===== OpenGraph ===== -->
43+
<!-- ===================== -->
44+
45+
<!-- Url -->
46+
<meta property="og:url" content="https://u7p4l-in.github.io/">
47+
<!-- coded by U7P4L 1N -->
48+
<!-- Title -->
49+
<meta property="og:title" content="Nice analog clock">
50+
51+
<!-- Description -->
52+
<meta property="og:description" content="Website with nice analog clock.">
53+
54+
<!-- Icon -->
55+
<meta property="og:image" content="">
56+
<meta property="og:image:type" content="image/png">
57+
<meta property="og:image:width" content="1200">
58+
<meta property="og:image:height" content="630">
59+
60+
<meta property="og:type" content="page">
61+
62+
63+
<!-- ===================== -->
64+
<!-- ====== Twitter ====== -->
65+
<!-- ===================== -->
66+
67+
<!-- Twitter type of showed banner -->
68+
<meta property="twitter:card" content="summary_large_image">
69+
70+
<!-- Title -->
71+
<meta property="twitter:title" content="Nice analog clock">
72+
73+
<!-- Description -->
74+
<meta property="twitter:description" content="Website with nice analog clock.">
75+
76+
<!-- Icon -->
77+
<meta property="twitter:image:src" content="">
78+
<meta property="twitter:image:width" content="1200">
79+
<meta property="twitter:image:height" content="630">
80+
</head>
81+
82+
<body>
83+
<div class="clock">
84+
<div class="hour">
85+
<div class="hr" id="hr"></div>
86+
</div>
87+
<div class="min">
88+
<div class="mn" id="mn"></div>
89+
</div>
90+
<div class="sec">
91+
<div class="sc" id="sc"></div>
92+
</div>
93+
</div>
94+
<script type="text/javascript">
95+
const deg = 6;
96+
const hr = document.querySelector('#hr');
97+
const mn = document.querySelector('#mn');
98+
const sc = document.querySelector('#sc');
99+
100+
setInterval(() => {
101+
let day = new Date();
102+
103+
let hh = day.getHours();
104+
let mm = day.getMinutes();
105+
let ss = day.getSeconds();
106+
let ms = day.getMilliseconds();
107+
108+
hr.style.transform = `rotateZ(${(hh*30)+(mm/2)}deg`;
109+
mn.style.transform = `rotateZ(${(mm*6)+(ss/10)}deg`;
110+
sc.style.transform = `rotateZ(${(ss*6)+(ms/1000*6)}deg`;
111+
})
112+
</script>
113+
</body>
114+
115+
</html>

‎01- Analog-clock/logo.ico‎

13.9 KB
Binary file not shown.

‎01- Analog-clock/script.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const HOURHAND = document.querySelector("#hour");
2+
const MINUTEHAND = document.querySelector("#minute");
3+
const SECONDHAND = document.querySelector("#second");
4+
const DIGITALCLOCK = document.querySelector('.digitalClock h1');
5+
6+
function leadingZero(time) {
7+
if (time <= 9) {
8+
time = "0" + time;
9+
}
10+
return time;
11+
}
12+
13+
function runClock() {
14+
var date = new Date();
15+
let hr = date.getHours();
16+
let min = date.getMinutes();
17+
let sec = date.getSeconds();
18+
19+
let hrPosition = (hr * 360 / 12) + (min * (360 / 60) / 12);
20+
let minPosition = (min * 360 / 60) + (sec * (360 / 60) / 60);
21+
let secPosition = sec * 360 / 60;
22+
23+
HOURHAND.style.transform = "rotate(" + hrPosition + "deg)";
24+
MINUTEHAND.style.transform = "rotate(" + minPosition + "deg)";
25+
SECONDHAND.style.transform = "rotate(" + secPosition + "deg)";
26+
DIGITALCLOCK.textContent = leadingZero(hr) + ":" + leadingZero(min) + ":" + leadingZero(sec);
27+
}
28+
29+
var interval = setInterval(runClock, 1000);

0 commit comments

Comments
 (0)