feat: complete day 16
This commit is contained in:
Ayobami
@@ -0,0 +1,56 @@
|
||||
<%- include('partials/header') %>
|
||||
<div style="padding: 32px; max-width: 700px; margin: 0 auto">
|
||||
<h3>Pick a date and time</h3>
|
||||
<p><b>Duration:</b> 1 hour</p>
|
||||
<p>Your timezone: <%= selectedTimezone %></p>
|
||||
<form action="/book" method="POST" style="margin-top: 32px">
|
||||
<h4>Additional Information</h4>
|
||||
<label>*Full Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="fullName"
|
||||
required
|
||||
style="width: 100%; margin-bottom: 12px"
|
||||
/>
|
||||
<label>*Email</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
style="width: 100%; margin-bottom: 12px"
|
||||
/>
|
||||
<label>*Company</label>
|
||||
<input
|
||||
type="text"
|
||||
name="company"
|
||||
required
|
||||
style="width: 100%; margin-bottom: 12px"
|
||||
/>
|
||||
<label>*Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
required
|
||||
style="width: 100%; margin-bottom: 12px"
|
||||
/>
|
||||
<label>*Your Notes</label>
|
||||
<textarea
|
||||
name="notes"
|
||||
required
|
||||
style="width: 100%; margin-bottom: 16px"
|
||||
></textarea>
|
||||
<button
|
||||
type="submit"
|
||||
style="
|
||||
background: #063970;
|
||||
color: #fff;
|
||||
padding: 8px 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<%- include('partials/footer') %>
|
||||
@@ -0,0 +1,58 @@
|
||||
<%- include('partials/header') %>
|
||||
<div style="padding: 32px; max-width: 1100px; margin: 0 auto">
|
||||
<h3>Pick a date and time</h3>
|
||||
<p><b>Duration:</b> 1 hour</p>
|
||||
<p>Your timezone: <%= selectedTimezone %> <a href="/timezone">(Change)</a></p>
|
||||
<div style="overflow-x: auto; margin-top: 32px">
|
||||
<table style="width: 100%; border-collapse: collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<% weekDays.forEach(function(day) { %>
|
||||
<th style="padding: 8px 12px; border-bottom: 2px solid #eee">
|
||||
<div style="font-weight: bold; font-size: 1.1em">
|
||||
<%= day.label %>
|
||||
</div>
|
||||
<div style="font-size: 0.95em; color: #888"><%= day.date %></div>
|
||||
</th>
|
||||
<% }) %>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% for (let i = 0; i < maxSlots; i++) { %>
|
||||
<tr>
|
||||
<% weekDays.forEach(function(day) { %>
|
||||
<td style="padding: 8px 12px; text-align: center">
|
||||
<% if (day.slots[i]) { %>
|
||||
<form action="/book" method="GET" style="display: inline">
|
||||
<input type="hidden" name="date" value="<%= day.dateISO %>" />
|
||||
<input type="hidden" name="time" value="<%= day.slots[i] %>" />
|
||||
<button
|
||||
type="submit"
|
||||
style="
|
||||
background: #fff;
|
||||
border: 1px solid #063970;
|
||||
color: #063970;
|
||||
border-radius: 4px;
|
||||
padding: 4px 12px;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
<%= day.slots[i] %>
|
||||
</button>
|
||||
</form>
|
||||
<% } %>
|
||||
</td>
|
||||
<% }) %>
|
||||
</tr>
|
||||
<% } %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 16px">
|
||||
<% if (showPrevWeek) { %>
|
||||
<a href="/calendar?week=prev">Previous Week</a>
|
||||
<% } %>
|
||||
<a href="/calendar?week=next" style="margin-left: 24px">Next Week</a>
|
||||
</div>
|
||||
</div>
|
||||
<%- include('partials/footer') %>
|
||||
@@ -0,0 +1 @@
|
||||
<div style="height: 40px"></div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<div
|
||||
style="
|
||||
background: #063970;
|
||||
color: white;
|
||||
padding: 24px 24px 12px 24px;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
"
|
||||
>
|
||||
Calendar
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
<%- include('partials/header') %>
|
||||
<div style="padding: 32px; max-width: 700px; margin: 0 auto">
|
||||
<p style="margin-top: 32px; font-size: 1.2em">
|
||||
Thanks for filling in the form. You will be emailed next steps.
|
||||
</p>
|
||||
</div>
|
||||
<%- include('partials/footer') %>
|
||||
@@ -0,0 +1,48 @@
|
||||
<%- include('partials/header') %>
|
||||
<div style="padding: 32px; max-width: 900px; margin: 0 auto">
|
||||
<h3>Pick a date and time</h3>
|
||||
<p><b>Duration:</b> 1 hour</p>
|
||||
<label>Your timezone:</label>
|
||||
<select name="timezone" id="timezone-select">
|
||||
<% timezones.forEach(function(tz) { %>
|
||||
<option value="<%= tz.value %>"><%= tz.label %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
<hr />
|
||||
<div style="display: flex; justify-content: center; margin-top: 40px">
|
||||
<div
|
||||
style="
|
||||
background: #fff;
|
||||
padding: 32px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px #0001;
|
||||
min-width: 400px;
|
||||
"
|
||||
>
|
||||
<h4>TIME ZONE</h4>
|
||||
<div style="display: flex; gap: 32px">
|
||||
<% Object.keys(timezoneGroups).forEach(function(region) { %>
|
||||
<div>
|
||||
<b><%= region %></b>
|
||||
<% timezoneGroups[region].forEach(function(tz) { %>
|
||||
<div>
|
||||
<input type="radio" name="timezoneRadio" value="<%= tz.value %>" />
|
||||
<%= tz.label %>
|
||||
</div>
|
||||
<% }) %>
|
||||
</div>
|
||||
<% }) %>
|
||||
</div>
|
||||
<div style="margin-top: 16px">
|
||||
<label
|
||||
><input type="radio" name="format" value="ampm" checked />
|
||||
am/pm</label
|
||||
>
|
||||
<label style="margin-left: 16px"
|
||||
><input type="radio" name="format" value="24hr" /> 24hr</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%- include('partials/footer') %>
|
||||
Reference in New Issue
Block a user