-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
173 lines (155 loc) · 8.26 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:description" content="The EventHorizon App is an intuitive event countdown tool, perfect for tracking important dates and occasions in your life." />
<meta property="og:url" content="https://hoangsonww.github.io/The-Event-Horizon-App/" />
<meta property="og:site_name" content="The EventHorizon App" />
<meta property="og:image" content="./images/eventhorizon-logo.png" />
<meta property="og:favicon" content="./images/favicon.ico" />
<meta name="keywords" content="event countdown, important dates, event tracker, date countdown, personal organizer">
<meta name="author" content="Son Nguyen Hoang">
<link rel="canonical" href="https://hoangsonww.github.io/The-Event-Horizon-App/">
<meta name="robots" content="index, follow">
<meta name="description" content="The EventHorizon App is an intuitive event countdown tool, perfect for tracking important dates and occasions in your life.">
<meta name="rating" content="general" />
<meta name="rights" content="© 2023 Son Nguyen Hoang" />
<meta name="rating" content="General">
<meta name="revisit-after" content="3 days">
<meta name="twitter:card" content="./images/eventhorizon-logo.png">
<meta name="twitter:title" content="The EventHorizon App - Track Your Important Dates">
<meta name="twitter:description" content="The EventHorizon App is an intuitive event countdown tool, perfect for tracking important dates and occasions in your life.">
<meta name="twitter:image" content="./images/eventhorizon-logo.png">
<meta name="referrer" content="no-referrer-when-downgrade">
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="manifest.json">
<title>The EventHorizon App</title>
<link rel="stylesheet" href="src/css/style.css" />
<script src="src/js/script.js" defer></script>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9NPSN4RVS4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-9NPSN4RVS4');
</script>
</head>
<body>
<header>
<div class="header-content">
<h2>The EventHorizon App</h2>
<p style="font-size: 18px">Track your important dates and plan your events with ease</p>
</div>
<div class="weather-widget" style="text-align: center">
<h4 style="margin-top: 10px; margin-bottom: -10px">View weather at your location</h4>
<input type="text" id="weatherLocation" style="margin-bottom: 10px; font: inherit" placeholder="Enter location">
<button onclick="fetchWeather()" style="margin-bottom: 10px; width: 147px; margin-right: -5px; font: inherit">View Weather</button>
<div id="weatherDisplay"></div>
</div>
</header>
<div class="event-header">
<p id="inspirational-quote"></p>
<h1 id="event-title">New Years Eve</h1>
</div>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdown-el mins-c">
<p class="big-text" id="mins">0</p>
<span>mins</span>
</div>
<div class="countdown-el seconds-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
<div class="event-selector">
<label for="event-dropdown" style="font: inherit"><strong>Choose an event: </strong></label>
<select id="event-dropdown" style="font: inherit">
<option value="1 Jan">New Year</option>
<option value="10 Feb">Lunar New Year</option>
<option value="9 Nov">My Birthday</option>
</select>
<p><strong>OR</strong></p>
<label for="custom-event-name"><strong>Create a New Event:</strong></label>
<label for="custom-event-name">Event name: </label>
<input type="text" id="custom-event-name">
<label for="custom-event">Event date: </label>
<input type="date" id="custom-event" style="font: inherit">
<button style="font: inherit" onclick="updateEvent()">Set Event</button>
<p id="date-warning" style="color:red;"></p>
</div>
<button style="font: inherit" id="editEventButton">Edit Event</button>
<div id="editEventModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeEditModal()">×</span>
<h2 style="margin-top: 5px">Edit Event</h2>
<div style="text-align: center; margin-bottom: 10px">
<label for="newEventName">Event Name:</label>
<input type="text" id="newEventName" placeholder="Enter new event name">
</div>
<div style="text-align: center">
<label for="newEventDate">Event Date:</label>
<input type="datetime-local" id="newEventDate">
</div>
<div style="text-align: center">
<button onclick="updateEventDetails()">Update Event</button>
</div>
</div>
</div>
<button id="shareEventButton" style="font: inherit" onclick="shareEvent()">Share Event</button>
<div id="shareModal" class="modal">
<div class="modal-content" style="border-radius: 8px">
<span class="close" onclick="closeModal()">×</span>
<p style="margin-bottom: -20px">Copy this link to share your event:</p>
<input type="text" id="shareLink" readonly>
<button onclick="copyToClipboard()">Copy Link</button>
<p style="margin-bottom: -20px">Or share it automatically on social media:</p>
<div class="share-buttons" style="margin-top: 19px; margin-left: -8px">
<a href="#" id="facebookShare" target="_blank">Share on Facebook</a>
<a href="#" id="twitterShare" target="_blank">Share on Twitter</a>
<a href="#" id="emailShare" target="_blank">Share via Email</a>
</div>
</div>
</div>
<div class="reminder-setup">
<h3>Set a reminder:</h3>
<input type="number" id="reminder-time" min="0" style="border-radius: 8px; height: 28px; border: none; padding-left: 8px; font: inherit" placeholder="Hours before event">
<button style="font: inherit" onclick="setReminder()">Set Reminder</button>
</div>
<div id="custom-events-list">
<h3>Your Recently Added Events:</h3>
<ul></ul>
</div>
<div id="notesWidget" class="notes-widget">
<div id="notesHeader" class="notes-header">
<span id="notesTitle">Add an Quick Note</span>
<button id="toggleNotesButton" onclick="toggleNotes()" title="Maximize/Minimize Notes" style="box-shadow: none">+</button>
</div>
<div id="notesContent" class="notes-content">
<textarea id="eventNotes" placeholder="Quick notes about your event..." style="font: inherit; font-size: 14px"></textarea>
<button style="font: inherit" onclick="saveNotes()">Save Notes</button>
</div>
</div>
<div id="chatbotContainer">
<div id="chatbotHeader">
<span>The EventHorizon Assistant</span>
<button id="minimizeChatbot" onclick="toggleChatbot()" title="Maximize/Minimize Chatbot">-</button>
</div>
<div id="chatbotBody"></div>
<input id="chatbotInput" type="text" style="color: white; font: inherit" placeholder="Ask me anything...">
</div>
<button onclick="window.location.href='src/html/about.html'" style="margin-bottom: 10px; font: inherit">About</button>
</body>
</html>