-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
166 lines (153 loc) · 9.27 KB
/
Copy pathcontact.html
File metadata and controls
166 lines (153 loc) · 9.27 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>YR11 Radio — Contact 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="contact-page">
<div class="page">
<main class="main-content" aria-labelledby="contact-title">
<header class="contact-header">
<p class="eyebrow contact-eyebrow">Let's talk</p>
<h1 id="contact-title" class="contact-title">Contact the Studio</h1>
<p class="contact-subtitle">Drop us a line for requests, shout-outs, collaborations, or press. We monitor our inbox 7 days a week during broadcast hours.</p>
<dl class="contact-stats" aria-label="Response time stats">
<div>
<dt>Average reply</dt>
<dd>under 2 hours</dd>
</div>
<div>
<dt>Studio hotline</dt>
<dd>+44 00000000</dd>
</div>
<div>
<dt>Live desk</dt>
<dd>Weekdays 8:00–22:00</dd>
</div>
</dl>
</header>
<section class="contact-layout">
<section class="contact-methods" aria-label="Ways to reach us">
<article class="contact-card">
<h2>Listener Hotline</h2>
<p>Call during live shows to queue a song, share a story, or deliver a campus tip.</p>
<ul>
<li><span aria-hidden="true">☎</span> +44 00000000</li>
<li><span aria-hidden="true">⏱</span> Weekdays 7:00–23:00</li>
</ul>
<button class="btn outline" type="button">Add to Contacts</button>
</article>
<article class="contact-card">
<h2>Bookings & Collaborations</h2>
<p>Looking to appear on air or host your own hour? Pitch your idea and our programming team will follow up.</p>
<ul>
<li><span aria-hidden="true">✉</span> collaborations@yr11.freddiephilpot.dev</li>
<li><span aria-hidden="true">📅</span> Slots released monthly</li>
</ul>
<button class="btn" type="button">View open slots</button>
</article>
<article class="contact-card">
<h2>Visit the Studio</h2>
<p>Drop by our media lab for tours, workshops, and student newsroom drop-ins.</p>
<ul>
<li><span aria-hidden="true">📍</span> Media Lab, Building C</li>
<li><span aria-hidden="true">🗓</span> Tours Friday 16:00</li>
</ul>
<button class="btn outline" type="button">Book a tour</button>
</article>
</section>
<section class="contact-form-section" aria-labelledby="contact-form-title">
<div class="contact-form-wrapper">
<h2 id="contact-form-title">Send us a message</h2>
<p class="contact-form-subtitle">Fill in the form and we’ll reply from <strong>studio@yr11.fm</strong>. All fields are required.</p>
<form class="contact-form" aria-describedby="contact-form-title">
<div class="field-group">
<label for="contact-name">Name</label>
<input id="contact-name" name="name" type="text" autocomplete="name" required />
</div>
<div class="field-group">
<label for="contact-email">Email</label>
<input id="contact-email" name="email" type="email" autocomplete="email" required />
</div>
<fieldset class="field-group" aria-labelledby="contact-reason-label">
<legend id="contact-reason-label">Reason for reaching out</legend>
<div class="chip-group" role="radiogroup" aria-labelledby="contact-reason-label">
<label class="chip-option">
<input type="radio" name="reason" value="request" required />
<span>Song request</span>
</label>
<label class="chip-option">
<input type="radio" name="reason" value="shoutout" />
<span>Shout-out</span>
</label>
<label class="chip-option">
<input type="radio" name="reason" value="collaboration" />
<span>Collaboration</span>
</label>
<label class="chip-option">
<input type="radio" name="reason" value="press" />
<span>Press / media</span>
</label>
</div>
</fieldset>
<div class="field-group">
<label for="contact-message">Message</label>
<textarea id="contact-message" name="message" rows="6" required></textarea>
</div>
<div class="field-inline">
<label class="checkbox-option">
<input type="checkbox" name="subscribe" value="updates" />
<span>Keep me posted about campus events</span>
</label>
<label class="checkbox-option">
<input type="checkbox" name="subscribe" value="podcasts" />
<span>Send new podcast drops</span>
</label>
</div>
<div class="field-group">
<label for="contact-preferred">Preferred response channel</label>
<select id="contact-preferred" name="preferred" class="profile-select contact-select" required>
<option value="email" selected>Email</option>
<option value="phone">Phone</option>
<option value="teams">Campus Teams</option>
</select>
</div>
<button class="btn contact-submit" type="submit">Submit message</button>
<p class="contact-footnote" id="contact-footnote" role="status" aria-live="polite">Responses arrive from studio@yr11.fm.</p>
</form>
</div>
</section>
</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 href="/about">About Us</a></li>
<li><a class="outline active" href="/contact">Contact Us</a></li>
</ul>
</nav>
</aside>
</div>
</body>
</html>