-
Notifications
You must be signed in to change notification settings - Fork 2
/
dashboard.html
201 lines (174 loc) · 9.43 KB
/
dashboard.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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.00">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Dashboard</title>
</head>
<body class="bg-primary">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg py-3 bg-dark navbar-dark">
<div class="container">
<a href="#" class="navbar-brand"><h3><b>College Space</b></h3></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item p-1">
<a href="#mailInput" class="nav-link">
Write a mail to your subscribers
</a>
</li>
<li class="nav-item p-1">
<a href="#previousEvents" class="nav-link">
Take a peek at the emails you've already sent
</a>
</li>
<li class="nav-item p-1">
<a href="#contactUs" class="nav-link">
Contact Us
</a>
</li>
<li class="nav-item p-1">
<a class="nav-link">|</a>
</li>
<li class="nav-item p-1">
<a href="#contactUs" class="nav-link">
Log Out
</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<section class="bg-dark text-light p-5 text-center">
<div class="container">
<div class="d-sm-flex">
<div>
<h1>Hello, <span class="text-warning">UserName!</span></h1>
<p class="lead">
Welcome to the dashboard, You can either write a message to your subscribers or look over the messages you've already sent.</p>
</div>
<img class="img-fluid" src="images/newsletter.svg" width="40%">
</div>
</div>
</section>
<section id="mailInput" class="bg-primary text-light p-5">
<h2 class="text-center">Write an email to your subscribers</h2>
<p class="text-danger text-center">Note: Please don't send bogus emails. Also, refrain from using inappropriate language.</p>
<div class="d-sm-flex">
<div class="container py-4">
<form id="emailForm">
<div class="mb-3">
<label for="eventName" class="form-label">Event Name</label>
<input type="text" class="form-control" id="eventName">
</div>
<div class="mb-3">
<label for="eventDate" class="form-label">Event Date</label>
<input type="date" class="form-control" id="eventDate">
</div>
<div class="mb-3">
<label for="eventTime" class="form-label">Event Time</label>
<input type="time" class="form-control" id="eventTime">
</div>
<div class="mb-3">
<label for="eventDescription" class="form-label">Event Description</label>
<textarea class="form-control" id="eventDescription" rows="10"></textarea>
</div>
<div class="d-grid">
<button class="btn btn-secondary btn-lg" id="submitButton" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</section>
<section class="p-4 bg-dark" id="previousEvents">
<div class="container-fluid text-center content-row">
<h2 class="text-center text-light">Previous Events</h2>
<br>
<div class="row g-4 row-lg-3">
<div class="col-md-6 col-lg-4 col-sm-8">
<div class="card mx-auto" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Event Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Date</h6>
<p class="card-text">(Description) Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-sm-8">
<div class="card mx-auto" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Event Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Date</h6>
<p class="card-text">(Description) Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-sm-8">
<div class="card mx-auto" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Event Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Date</h6>
<p class="card-text">(Description) Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-primary text-light p-5" id="contactUs">
<h2 class="text-center">Contact Us</h2>
<div class="container">
<div class="d-sm-flex">
<img class="img-fluid" src="images/contactUs.svg" width="50%">
<!-- Wrapper container -->
<div class="container py-4 bg-primary text-light">
<!-- Bootstrap 5 starter form -->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<!-- Name input -->
<div class="mb-3">
<label class="form-label" for="name">Name</label>
<input class="form-control" id="name" type="text" placeholder="Name" data-sb-validations="required" />
<div class="invalid-feedback" data-sb-feedback="name:required">Name is required.</div>
</div>
<!-- Email address input -->
<div class="mb-3">
<label class="form-label" for="emailAddress">Email Address</label>
<input class="form-control" id="emailAddress" type="email" placeholder="Email Address" data-sb-validations="required, email" />
<div class="invalid-feedback" data-sb-feedback="emailAddress:required">Email Address is required.</div>
<div class="invalid-feedback" data-sb-feedback="emailAddress:email">Email Address Email is not valid.</div>
</div>
<!-- Message input -->
<div class="mb-3">
<label class="form-label" for="message">Message</label>
<textarea class="form-control" id="message" type="text" placeholder="Message" style="height: 10rem;" data-sb-validations="required"></textarea>
<div class="invalid-feedback" data-sb-feedback="message:required">Message is required.</div>
</div>
<!-- Form submissions success message -->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">Form submission successful!</div>
</div>
<!-- Form submissions error message -->
<div class="d-none" id="submitErrorMessage">
<div class="text-center text-danger mb-3">Error sending message!</div>
</div>
<!-- Form submit button -->
<div class="d-grid">
<button class="btn btn-secondary btn-lg disabled" id="submitButton" type="submit">Submit</button>
</div>
</form>
</div>
<!-- SB Forms JS -->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</div>
</div>
<br>
<h6 class="text-center text-light">Crafted with ❤️ for TSEC</h6>
</section>
</body>
</html>