-
Notifications
You must be signed in to change notification settings - Fork 3
/
quote.html
201 lines (171 loc) · 6.68 KB
/
quote.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Daily Inspirational Quotes</title>
<link rel="shortcut icon" href="/assets/Images/favicon-png.png" type="image/x-icon">
<link rel="stylesheet" href="/css/hAndfStyle.css">
<style>
/* Your CSS styles here */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
h1 {
font-size: 24px;
color: #333;
}
h2 {
font-size: 20px;
color: #007bff;
margin-top: 20px;
}
p {
font-size: 18px;
color: #555;
text-align: center;
margin-top: 20px;
}
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
}
main div {
margin-block: 2em;
}
</style>
</head>
<body>
<header>
<nav>
<div class="nav-img">
<a href="index.html" id="head1" class="dmh"><img src="assets/Images/logo-png.png" alt="" id="nav-img"></a>
</div>
<div class="navbar" id="nav-bar">
<ul>
<li style="color: var(--gold-color);">
<a href="index.html" id="home">Home</a>
</li>
<li>
<a href="about.html" id="al">About</a>
</li>
<li>
<a href="audio.html" id="ss">Relax</a>
</li>
<li>
<a href="help.html" id="ct">Support</a>
</li>
<li>
<a href="awareness.html">Awareness</a>
</li>
<li>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</li>
</ul>
<!-- Add this code within the <header> element -->
<!-- <button class="hamburger" id="hamburger-btn">
<div class="bar">.</div>
<div class="bar"></div>
<div class="bar"></div>
</button> -->
</nav>
</div>
</header>
<main>
<h1>Daily Inspirational Quote</h1>
<h2>Inspiration of the Day</h2>
<div id="quote-container">
<!-- The JavaScript code will insert the daily quote here -->
</div>
</main>
<footer>
<p>© 2023 Debug Mental Health</p>
<div>
<h4>Connect with creators</h4>
<div class="creaters">
<a href="https://www.linkedin.com/in/supradeep-revuru/" target="_blank">
Supradeep R
</a>
<a href="https://www.linkedin.com/in/sai-uttej-r/" target="_blank">
SaiUttej R
</a>
<a href="https://www.linkedin.com/in/akshay-rairao/" target="_blank">
Akshay Rairao
</a>
<a href="https://www.linkedin.com/in/saketh-valakatla-a9194122b/" target="_blank">
Saketh Valakatla
</a>
<a href="https://www.linkedin.com/in/pavankumar1006/" target="_blank">
Pavan Kumar Sadhanaveni
</a>
</div>
</div>
</footer>
<script>
// Array of daily quotes
const quotes = [
"Your time is limited, don't waste it living someone else's life. - Steve Jobs",
"Believe you can and you're halfway there. - Theodore Roosevelt",
"The only way to do great work is to love what you do. - Steve Jobs",
"In the middle of every difficulty lies opportunity. - Albert Einstein",
"Success is not final, failure is not fatal: It is the courage to continue that counts. - Winston Churchill",
"The future belongs to those who believe in the beauty of their dreams. - Eleanor Roosevelt",
"Don't count the days, make the days count. - Muhammad Ali",
"You are never too old to set another goal or to dream a new dream. - C.S. Lewis",
"The only person you should try to be better than is the person you were yesterday. - Anonymous",
"The best way to predict the future is to create it. - Peter Drucker",
"Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle. - Christian D. Larson",
"You miss 100% of the shots you don't take. - Wayne Gretzky",
"The biggest risk is not taking any risk. In a world that's changing quickly, the only strategy that is guaranteed to fail is not taking risks.- Mark Zuckerberg",
"Difficulties in life are intended to make us better, not bitter.- Dan Reeves",
"The only limit to our realization of tomorrow will be our doubts of today. - Franklin D. Roosevelt",
"Life is 10% what happens to us and 90% how we react to it.- Charles R. Swindoll",
"The greatest glory in living lies not in never falling, but in rising every time we fall. - Nelson Mandela",
"The best preparation for tomorrow is doing your best today. - H. Jackson Brown Jr.",
"Your time is now. Start where you stand and never back down! - Tom Hopkins",
"Believe in the magic within yourself. - Anonymous",
"You are the author of your own life story. - Unknown",
"Every accomplishment starts with the decision to try.- Unknown",
"You have within you the strength, the patience, and the passion to reach for the stars to change the world. - Harriet Tubman",
"Challenges are what make life interesting, and overcoming them is what makes life meaningful. - Joshua J. Marine",
"The secret of getting ahead is getting started. - Mark Twain",
"Life is either a daring adventure or nothing at all. - Helen Keller",
"Happiness is not by chance, but by choice.- Jim Rohn",
"Dream big and dare to fail. - Norman Vaughan",
"The journey of a thousand miles begins with one step.- Lao Tzu",
"You are enough just as you are. Each emotion you feel, everything in your life, everything you do or do not do... where you are and who you are right now is enough. It is perfect.- Haemin Sunim",
];
// Function to display a random quote
function displayRandomQuote() {
const quoteContainer = document.getElementById("quote-container");
const randomIndex = Math.floor(Math.random() * quotes.length);
const quote = quotes[randomIndex];
quoteContainer.innerHTML = `<blockquote>${quote}</blockquote>`;
}
// Call the function to display a random quote on page load
displayRandomQuote();
let quote;
fetch("https://api.quotable.io/random")
.then((response) => response.json())
.then((data) => {
Notification.requestPermission().then((perm) => {
if (perm === "granted") {
const notification = new Notification("Quote of the Day", {
body: data.content,
});
}
});
});
</script>
<script src="responsiveNav.js"></script>
</body>
</html>