yr11-programming/schedule.html at main · pphilfre/yr11-programming · 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
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
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>YR11 Radio — Schedule</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Unica+One&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <link rel="icon" href="favicon.ico" />
    <script src="script.js" defer></script>
    <script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init fi Cr Or ci Tr Ir capture Mi calculateEventProperties Ar register register_once register_for_session unregister unregister_for_session Nr getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty jr Mr createPersonProfile Lr kr Ur opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing Fr debug M Dr getPageViewId captureTraceFeedback captureTraceMetric Sr".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('phc_kHZWuiUzdGkjQ7OvXfER2jygjMyTK9oyFfjVeg5vuAg', {
        api_host: 'https://us.i.posthog.com',
        defaults: '2025-05-24',
        person_profiles: 'always', // or 'always' to create profiles for anonymous users as well
    })
</script>
  </head>
  <body class="schedule-page">
    <div class="page">
      <main class="main-content" aria-labelledby="page-title">
        <header class="schedule-header">
          <div>
            <p class="eyebrow">Schedule</p>
            <h1 id="page-title" class="schedule-title">April 2025</h1>
          </div>
        </header>

        <section class="calendar" aria-label="April 2025 schedule">
          <div class="day-names" aria-hidden="true">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
          </div>

          <ol class="calendar-grid" role="grid" aria-readonly="true">
            <!-- Row 1: Mar 30-31, Apr 1-5 -->
            <li class="day out-month" role="gridcell" aria-label="March 30, 2025"><span class="date">30</span></li>
            <li class="day out-month" role="gridcell" aria-label="March 31, 2025"><span class="date">31</span></li>
            <li class="day" role="gridcell" aria-label="April 1, 2025">
              <span class="date">1</span>
              <div class="events">
                <a class="event blue" href="#" aria-label="The Carbon Algorithm by Robert Fox on April 1, 2025" data-title="The Carbon Algorithm" data-performer="Robert Fox" data-date="2025-04-01" data-time="09:00 – 10:00" data-color="blue" data-image="public/microphone.png" data-description="An exploration into how carbon-aware algorithms are reshaping sustainable tech infrastructure and media delivery.">
                  <strong>The Carbon Algorithm</strong>
                  <span class="meta">Robert Fox</span>
                </a>
              </div>
            </li>
            <li class="day" role="gridcell" aria-label="April 2, 2025"><span class="date">2</span></li>
            <li class="day" role="gridcell" aria-label="April 3, 2025"><span class="date">3</span></li>
            <li class="day" role="gridcell" aria-label="April 4, 2025">
              <span class="date">4</span>
              <div class="events">
                <a class="event tan" href="#" aria-label="Flicker &amp; Fade by Annette Black on April 4, 2025" data-title="Flicker &amp; Fade" data-performer="Annette Black" data-date="2025-04-04" data-time="14:00 – 15:00" data-color="tan" data-image="public/microphone.png" data-description="Annette discusses creative burnout, recovery rhythms, and how artists reignite their spark in a distracted world.">
                  <strong>Flicker &amp; Fade</strong>
                  <span class="meta">Annette Black</span>
                </a>
              </div>
            </li>
            <li class="day" role="gridcell" aria-label="April 5, 2025"><span class="date">5</span></li>

            <!-- Row 2: Apr 6-12 -->
            <li class="day" role="gridcell" aria-label="April 6, 2025">
              <span class="date">6</span>
              <div class="events">
                <a class="event light" href="#" aria-label="Microwave for One by Dianne Russell on April 6, 2025" data-title="Microwave for One" data-performer="Dianne Russell" data-date="2025-04-06" data-time="11:00 – 12:00" data-color="light" data-image="public/microphone.png" data-description="Comfort food science, solo cooking hacks, and the psychology of mindful eating for busy students." >
                  <strong>Microwave for One</strong>
                  <span class="meta">Dianne Russell</span>
                </a>
              </div>
            </li>
            <li class="day" role="gridcell" aria-label="April 7, 2025"><span class="date">7</span></li>
            <li class="day" role="gridcell" aria-label="April 8, 2025">
              <span class="date">8</span>
              <div class="events">
                <a class="event pink" href="#" aria-label="The Alibi Weavers by Darrell Stewart on April 8, 2025" data-title="The Alibi Weavers" data-performer="Darrell Stewart" data-date="2025-04-08" data-time="16:00 – 17:00" data-color="pink" data-image="public/microphone.png" data-description="A narrative mini‑doc about infamous unsolved small‑town mysteries and the folk lore they spawn." >
                  <strong>The Alibi Weavers</strong>
                  <span class="meta">Darrell Stewart</span>
                </a>
              </div>
            </li>
            <li class="day" role="gridcell" aria-label="April 9, 2025"><span class="date">9</span></li>
            <li class="day" role="gridcell" aria-label="April 10, 2025"><span class="date">10</span></li>
            <li class="day" role="gridcell" aria-label="April 11, 2025"><span class="date">11</span></li>
            <li class="day" role="gridcell" aria-label="April 12, 2025"><span class="date">12</span></li>

            <!-- Row 3: Apr 13-19 -->
            <li class="day" role="gridcell" aria-label="April 13, 2025"><span class="date">13</span></li>
            <li class="day" role="gridcell" aria-label="April 14, 2025">
              <span class="date">14</span>
              <div class="events">
                <a class="event green" href="#" aria-label="Concrete &amp; Clover by Krista Watson on April 14, 2025" data-title="Concrete &amp; Clover" data-performer="Krista Watson" data-date="2025-04-14" data-time="10:00 – 11:00" data-color="green" data-image="public/microphone.png" data-description="Urban gardening, micro‑ecosystems, and reclaiming forgotten spaces for biodiversity." >
                  <strong>Concrete &amp; Clover</strong>
                  <span class="meta">Krista Watson</span>
                </a>
              </div>
            </li>
            <li class="day" role="gridcell" aria-label="April 15, 2025"><span class="date">15</span></li>
            <li class="day" role="gridcell" aria-label="April 16, 2025"><span class="date">16</span></li>
            <li class="day" role="gridcell" aria-label="April 17, 2025"><span class="date">17</span></li>
            <li class="day" role="gridcell" aria-label="April 18, 2025">
              <span class="date">18</span>
              <div class="events">
                <a class="event yellow" href="#" aria-label="The Midnight Snack by Dorian Lane on April 18, 2025" data-title="The Midnight Snack" data-performer="Dorian Lane" data-date="2025-04-18" data-time="13:00 – 14:00" data-color="yellow" data-image="public/microphone.png" data-description="Late lunch energy show: listener dilemmas, quick taste tests, and music pairings." >
                  <strong>The Midnight Snack</strong>
                  <span class="meta">Dorian Lane</span>
                </a>
              </div>
            </li>
            <li class="day" role="gridcell" aria-label="April 19, 2025"><span class="date">19</span></li>

            <!-- Row 4: Apr 20-26 -->
            <li class="day" role="gridcell" aria-label="April 20, 2025">
              <span class="date">20</span>
              <div class="events">
                <a class="event light" href="#" aria-label="Blank Slate by Glenn Peter on April 20, 2025" data-title="Blank Slate" data-performer="Glenn Peter" data-date="2025-04-20" data-time="09:30 – 10:30" data-color="light" data-image="public/microphone.png" data-description="Reset rituals for a focused week: journaling, sleep cycles, and quiet tech habits." >
                  <strong>Blank Slate</strong>
                  <span class="meta">Glenn Peter</span>
                </a>
              </div>
            </li>
            <li class="day" role="gridcell" aria-label="April 21, 2025"><span class="date">21</span></li>
            <li class="day" role="gridcell" aria-label="April 22, 2025"><span class="date">22</span></li>
            <li class="day" role="gridcell" aria-label="April 23, 2025">
              <span class="date">23</span>
              <div class="events">
                <a class="event pink" href="#" aria-label="The Neon Jungle by Jane Cooper on April 23, 2025" data-title="The Neon Jungle" data-performer="Jane Cooper" data-date="2025-04-23" data-time="15:00 – 16:00" data-color="pink" data-image="public/microphone.png" data-description="Synthwave culture, vapor aesthetics, and the return of analog warm sounds in digital music." >
                  <strong>The Neon Jungle</strong>
                  <span class="meta">Jane Cooper</span>
                </a>
              </div>
            </li>
            <li class="day" role="gridcell" aria-label="April 24, 2025"><span class="date">24</span></li>
            <li class="day" role="gridcell" aria-label="April 25, 2025"><span class="date">25</span></li>
            <li class="day" role="gridcell" aria-label="April 26, 2025">
              <span class="date">26</span>
              <div class="events">
                <a class="event blue" href="#" aria-label="Venture Velocity by Wade Warren on April 26, 2025" data-title="Venture Velocity" data-performer="Wade Warren" data-date="2025-04-26" data-time="18:00 – 19:00" data-color="blue" data-image="public/microphone.png" data-description="Start‑up sprint stories: rapid prototyping, pivots under pressure, and founder resilience." >
                  <strong>Venture Velocity</strong>
                  <span class="meta">Wade Warren</span>
                </a>
              </div>
            </li>

            <!-- Row 5: Apr 27-30 then blanks for May 1-3 -->
            <li class="day" role="gridcell" aria-label="April 27, 2025"><span class="date">27</span></li>
            <li class="day" role="gridcell" aria-label="April 28, 2025"><span class="date">28</span></li>
            <li class="day" role="gridcell" aria-label="April 29, 2025"><span class="date">29</span></li>
            <li class="day" role="gridcell" aria-label="April 30, 2025"><span class="date">30</span></li>
            <li class="day blank" role="gridcell" aria-hidden="true"></li>
            <li class="day blank" role="gridcell" aria-hidden="true"></li>
            <li class="day blank" role="gridcell" aria-hidden="true"></li>
          </ol>
        </section>
      </main>

      <aside class="nav-panel" aria-label="Primary navigation">
        <div class="logo" aria-hidden="true">
          <img src="public/logo.jpg" alt="YR11 logo" class="logo-image" />
        </div>
        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li>
              <a class="active" href="/schedule">
                Schedule
                <span class="nav-pip" aria-hidden="true"></span>
              </a>
            </li>
            <li><a href="/podcasts">Podcasts</a></li>
            <li><a href="/about">About Us</a></li>
            <li><a class="outline" href="/contact">Contact Us</a></li>
          </ul>
        </nav>
      </aside>
    </div>

    <!-- Event Detail Modal -->
    <div class="modal-overlay" id="schedule-event-modal" aria-hidden="true">
      <div class="modal event-modal" role="dialog" aria-modal="true" aria-labelledby="event-modal-title">
        <button class="modal-close" aria-label="Close dialog">✕</button>
        <header class="modal-header">
          <div class="modal-badge" id="event-modal-badge">Show</div>
          <h3 id="event-modal-title"></h3>
          <p class="modal-artist" id="event-modal-performer"></p>
          <p class="event-meta-line" id="event-modal-datetime"></p>
        </header>
        <div class="modal-body event-modal-body">
          <div class="event-modal-art-wrapper"><img id="event-modal-image" alt="" /></div>
          <div class="event-modal-text">
            <p id="event-modal-description"></p>
          </div>
        </div>
        <div class="modal-actions">
          <button class="btn" data-close-event>Close</button>
        </div>
      </div>
    </div>
  </body>
  </html>