yr11-programming/about.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>YR11 Radio — About Us</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="about-page">
    <div class="page">
      <main class="main-content" aria-labelledby="about-title">
        <header class="about-header">
          <div>
            <p class="eyebrow">About Us</p>
            <h1 id="about-title" class="about-title">Meet the Team</h1>
          </div>
        </header>

        <section class="team-grid" aria-label="Team members">
          <article class="team-card" tabindex="0" data-name="Chris Evans" data-role="Morning Presenter" data-photo="public/logo.jpg" data-description="Chris Evans has just joined YR11 and is pumped to bring high-energy mornings with stories, banter, and chart-topping throwbacks. Expect spontaneous challenges and listener shout‑outs.">
            <div class="team-photo"><img src="public/logo.jpg" alt="Chris Evans" /></div>
            <div class="team-body">
              <h2 class="team-name">Chris Evans</h2>
              <p class="team-bio">High-energy mornings, stories & throwbacks.</p>
              <button class="btn outline team-more" type="button">Learn More</button>
            </div>
          </article>
          <article class="team-card" tabindex="0" data-name="Zoe Ball" data-role="Late Night Host" data-photo="public/logo.jpg" data-description="Zoe brings warmth to late nights with intimate interviews, relaxed mixes, and deep-cut discoveries that help listeners wind down.">
            <div class="team-photo"><img src="public/logo.jpg" alt="Zoe Ball" /></div>
            <div class="team-body">
              <h2 class="team-name">Zoe Ball</h2>
              <p class="team-bio">Late‑night warmth & deep-cut discoveries.</p>
              <button class="btn outline team-more" type="button">Learn More</button>
            </div>
          </article>
          <article class="team-card" tabindex="0" data-name="Kate McCann" data-role="Current Affairs" data-photo="public/logo.jpg" data-description="Kate dives into current events with sharp insight and a calm voice that makes complex stories accessible to younger audiences.">
            <div class="team-photo"><img src="public/logo.jpg" alt="Kate McCann" /></div>
            <div class="team-body">
              <h2 class="team-name">Kate McCann</h2>
              <p class="team-bio">Breaking down today’s biggest stories.</p>
              <button class="btn outline team-more" type="button">Learn More</button>
            </div>
          </article>
          <article class="team-card" tabindex="0" data-name="Casey Kasem" data-role="Countdown Legend" data-photo="public/logo.jpg" data-description="A legendary countdown storyteller—Casey mentors new hosts and brings iconic delivery to weekend format shows.">
            <div class="team-photo"><img src="public/logo.jpg" alt="Casey Kasem" /></div>
            <div class="team-body">
              <h2 class="team-name">Casey Kasem</h2>
              <p class="team-bio">Iconic weekend countdown & mentoring.</p>
              <button class="btn outline team-more" type="button">Learn More</button>
            </div>
          </article>
          <article class="team-card" tabindex="0" data-name="Sara Cox" data-role="Afternoon Drive" data-photo="public/logo.jpg" data-description="Sara mixes humor, life chats, and listener call‑ins for an easy‑drive afternoon soundtrack that feels like a friend riding along.">
            <div class="team-photo"><img src="public/logo.jpg" alt="Sara Cox" /></div>
            <div class="team-body">
              <h2 class="team-name">Sara Cox</h2>
              <p class="team-bio">Humor, call‑ins & afternoon energy.</p>
              <button class="btn outline team-more" type="button">Learn More</button>
            </div>
          </article>
          <article class="team-card" tabindex="0" data-name="Production Crew" data-role="Audio & Ops" data-photo="public/logo.jpg" data-description="The production crew edits, schedules, mixes, and keeps everything on‑air sounding clean, tight, and alive.">
            <div class="team-photo"><img src="public/logo.jpg" alt="Production Team" /></div>
            <div class="team-body">
              <h2 class="team-name">Production Crew</h2>
              <p class="team-bio">Editing, mixing & on‑air polish.</p>
              <button class="btn outline team-more" type="button">Learn More</button>
            </div>
          </article>
        </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 href="/schedule">Schedule</a></li>
            <li><a href="/podcasts">Podcasts</a></li>
            <li><a class="active" href="/about">About Us</a></li>
            <li><a class="outline" href="/contact">Contact Us</a></li>
          </ul>
        </nav>
      </aside>
    </div>

    <!-- Team Member Modal -->
    <div class="modal-overlay" id="team-modal" aria-hidden="true">
      <div class="modal team-modal" role="dialog" aria-modal="true" aria-labelledby="team-modal-name">
        <button class="modal-close" aria-label="Close dialog">✕</button>
        <div class="modal-header">
          <div class="modal-badge">Team Member</div>
          <h3 id="team-modal-name"></h3>
          <p class="modal-artist" id="team-modal-role"></p>
        </div>
        <div class="modal-body">
          <div class="team-modal-photo-wrapper"><img id="team-modal-photo" alt="" /></div>
          <p id="team-modal-desc"></p>
        </div>
        <div class="modal-actions">
          <button class="btn" data-close-team>Close</button>
        </div>
      </div>
    </div>
  </body>
</html>