forked from Omkar-Sonawane-23/Maa-Vimala
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (129 loc) · 5.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
@keyframes swipe {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px); /* Adjust this value for the swipe height */
}
100% {
transform: translateY(0);
}
}
#logoName {
font-family: 'Poppins', sans-serif;
animation: swipe 2s infinite; /* Adjust the duration as needed */
}
.search-icon {
position: relative;
}
.tooltip {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px; /* Adjust padding as needed */
border-radius: 5px;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
white-space: nowrap; /* Prevent line breaks */
}
.search-icon:hover .tooltip {
opacity: 1;
}
</style>
<title>Maa-Vimala</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body id="body">
<header>
<nav class="navbar">
<h1 id="logoName">Maa-Vimala</h1>
<ul class="nav-links">
<li><i class="fa-solid fa-house"></i><a href="#home"> Home </a></li>
<li><i class="fa-solid fa-info-circle"></i><a href="#about"> About Us </a></li>
<li><i class="fa-solid fa-concierge-bell"></i><a href="#services"> Services </a></li>
<li><i class="fa-solid fa-star"></i><a href="#reviews"> Reviews </a></li>
<li><i class="fa-solid fa-envelope"></i><a href="#contact"> Contact Us </a></li>
</ul>
</nav>
</header>
<div>
<div>
<div>
<h1 id="search-txt">Start Typing To Search...</h1>
</div>
<div class="search-container">
<input type="text" id="input_text" class="search-bar" placeholder="">
<i class="fas fa-search search-icon">
<span class="tooltip">Hey! Click here to get the details</span>
</i>
</div>
</div>
<div>
<ul id="content" class="max-h-[300px] overflow-y-scroll">
<!-- Content dynamically generated here -->
</ul>
</div>
<div id="loader"></div>
<div class="result" id="result">
</div>
<div id="link">
<a href="https://github.com/Web403/Maa-Vimala/blob/main/README.md">Read Me</a>
</div>
</div>
<script>
let time = document.getElementById('time');
let date = document.getElementById('date');
let whether = document.getElementById('whether');
let wind = document.getElementById('wind');
const currentDate = new Date();
const day = currentDate.getDate();
const month = currentDate.getMonth() + 1;
const year = currentDate.getFullYear();
const hour = currentDate.getHours();
const minute = currentDate.getMinutes();
var months = [ "Jan", "Feb", "March", "April", "May", "June",
"July", "Aug", "Sep", "Oct", "Nov", "Dec" ];
let timeext;
hour < 12? timeext = "AM" : timeext = "PM";
setInterval(() => {
time.innerText = hour + " : " + minute + " " + timeext;
}, 60000);
date.innerText = day + " " + months[month] + " " + year;
setInterval(() => {
time.innerText = ""
}, 60000);
function getlocation() {
if (navigator.geolocation) {
console.log("done")
navigator.geolocation.getCurrentPosition(showPosition)
}
else {
console.log("Sorry! your browser is not supporting")
}
}
async function showPosition(position) {
const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}¤t=temperature_2m,wind_speed_10m&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m`);
const wdata = await response.json();
console.log(wdata);
whether.innerText = "Temp : " + wdata.current.temperature_2m + " c";
wind.innerText = "Wind : " + wdata.current.wind_speed_10m + " KM/H";
}
getlocation()
</script>
<script src="script.js"></script>
</body>
</html>