scheduler/index.html at main · ContextLab/scheduler · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Schedule a Meeting</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="lib/js-yaml.min.js"></script>
  <script src="lib/fullcalendar.min.js"></script>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>Schedule a Meeting</h1>
      <div class="timezone-selector" id="timezone-selector">
        <label for="timezone-select">Timezone:</label>
        <select id="timezone-select" aria-label="Select your timezone"></select>
      </div>
    </header>

    <div class="steps">
      <div class="step-indicator" id="step-indicator">
        <span class="step active" data-step="1">1. Meeting Type</span>
        <span class="step" data-step="2">2. Duration</span>
        <span class="step" data-step="3">3. Date &amp; Time</span>
        <span class="step" data-step="4">4. Your Details</span>
        <span class="step" data-step="5">5. Confirmation</span>
      </div>
    </div>

    <!-- Step 1: Meeting Type Selection -->
    <section id="step-1" class="step-content active" aria-label="Select meeting type">
      <h2>Select a Meeting Type</h2>
      <div id="meeting-types" class="meeting-types-grid"></div>
    </section>

    <!-- Step 2: Duration Selection -->
    <section id="step-2" class="step-content" aria-label="Select meeting duration">
      <h2>Choose a Duration</h2>
      <p id="selected-type-info" class="selected-info"></p>
      <button class="btn btn-back" id="back-to-step-1" aria-label="Go back to meeting type selection">&larr; Back</button>
      <div id="duration-options" class="duration-grid"></div>
    </section>

    <!-- Step 3: Calendar / Slot Selection -->
    <section id="step-3" class="step-content" aria-label="Select date and time">
      <h2>Choose a Time</h2>
      <p id="selected-duration-info" class="selected-info"></p>
      <button class="btn btn-back" id="back-to-step-2" aria-label="Go back to duration selection">&larr; Back</button>
      <div id="calendar-container" class="calendar-container"></div>
    </section>

    <!-- Step 4: Booking Form -->
    <section id="step-4" class="step-content" aria-label="Enter your details">
      <h2>Your Details</h2>
      <p id="selected-slot-info" class="selected-info"></p>
      <div id="instruction-banner" class="instruction-banner"></div>
      <button class="btn btn-back" id="back-to-step-3" aria-label="Go back to time selection">&larr; Back</button>
      <form id="booking-form" novalidate>
        <div class="form-row">
          <div class="form-group">
            <label for="first-name">First Name <span class="required">*</span></label>
            <input type="text" id="first-name" name="firstName" required aria-required="true">
            <span class="error-message" id="first-name-error"></span>
          </div>
          <div class="form-group">
            <label for="last-name">Last Name <span class="required">*</span></label>
            <input type="text" id="last-name" name="lastName" required aria-required="true">
            <span class="error-message" id="last-name-error"></span>
          </div>
        </div>
        <div class="form-group">
          <label for="email">Email Address <span class="required">*</span></label>
          <input type="email" id="email" name="email" required aria-required="true">
          <span class="error-message" id="email-error"></span>
        </div>
        <div class="form-group">
          <label for="format">Meeting Format <span class="required">*</span></label>
          <select id="format" name="format" required aria-required="true">
            <option value="">Select format...</option>
          </select>
          <span class="error-message" id="format-error"></span>
        </div>
        <div class="form-group">
          <label for="purpose">Meeting Purpose</label>
          <textarea id="purpose" name="purpose" rows="3" placeholder="What would you like to discuss?"></textarea>
        </div>
        <div class="form-group">
          <label for="notes">Other notes, links, or information</label>
          <textarea id="notes" name="notes" rows="3" placeholder="Any links, documents, or context you'd like me to review before we meet?"></textarea>
        </div>
        <button type="submit" class="btn btn-primary" id="submit-booking">Confirm Booking</button>
      </form>
    </section>

    <!-- Step 5: Confirmation -->
    <section id="step-5" class="step-content" aria-label="Booking confirmation">
      <div id="confirmation-content"></div>
    </section>

    <!-- Loading overlay -->
    <div id="loading" class="loading-overlay" aria-hidden="true">
      <div class="spinner"></div>
      <p>Processing...</p>
    </div>

    <!-- Error display -->
    <div id="error-banner" class="error-banner" role="alert" aria-live="polite"></div>
  </div>

  <script src="js/config-loader.js"></script>
  <script src="js/timezone.js"></script>
  <script src="js/api-client.js"></script>
  <script src="js/calendar.js"></script>
  <script src="js/booking-form.js"></script>
  <script src="js/app.js"></script>
</body>
</html>