charles
ac09a31961
Add a calendar page and ICS file for event subscriptions. Update the Hello Linux presentation with Tux images and add setup instructions to the README.
160 lines
5.3 KiB
HTML
160 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>FLUG Calendar</title>
|
|
<style>
|
|
body {
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
line-height: 1.5;
|
|
}
|
|
h1 {
|
|
border-bottom: 2px solid #eaecef;
|
|
padding-bottom: 0.3em;
|
|
}
|
|
.event {
|
|
padding: 1rem;
|
|
border: 1px solid #eaecef;
|
|
border-radius: 6px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.event-title {
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.event-details {
|
|
color: #586069;
|
|
font-size: 0.9rem;
|
|
}
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 0.5rem 1rem;
|
|
background-color: #0366d6;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 6px;
|
|
font-weight: bold;
|
|
margin-top: 1rem;
|
|
}
|
|
.btn:hover {
|
|
background-color: #0256b6;
|
|
}
|
|
a.back {
|
|
display: block;
|
|
margin-bottom: 1rem;
|
|
color: #0366d6;
|
|
text-decoration: none;
|
|
}
|
|
.google-sub {
|
|
margin-top: 2rem;
|
|
padding: 1.5rem;
|
|
background-color: #f6f8fa;
|
|
border: 1px solid #eaecef;
|
|
border-radius: 6px;
|
|
}
|
|
.google-sub h3 {
|
|
margin-top: 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
.copy-box {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
background: white;
|
|
padding: 0.5rem;
|
|
border: 1px solid #d1d5da;
|
|
border-radius: 4px;
|
|
margin: 1rem 0;
|
|
}
|
|
.copy-box code {
|
|
flex-grow: 1;
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-copy {
|
|
padding: 0.3rem 0.6rem;
|
|
background-color: #fafbfc;
|
|
border: 1px solid #d1d5da;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
}
|
|
.btn-copy:hover {
|
|
background-color: #f3f4f6;
|
|
}
|
|
.hint {
|
|
font-size: 0.85rem;
|
|
color: #586069;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="/index.html" class="back">← Back to Home</a>
|
|
<h1>FLUG Calendar</h1>
|
|
|
|
<div class="event">
|
|
<div class="event-title">Next FLUG Meeting</div>
|
|
<div class="event-details">
|
|
<strong>Date:</strong> May 29, 2026<br />
|
|
<strong>Time:</strong> 8:30pm PT<br />
|
|
<strong>Location:</strong> Google CRSM1240, Sunnyvale CA 94089
|
|
</div>
|
|
<div class="btn-group">
|
|
<a href="/events.ics" class="btn">Download ICS</a>
|
|
<a
|
|
href="https://www.google.com/calendar/render?action=TEMPLATE&text=FLUG+Meeting&dates=20260530T033000Z/20260530T053000Z&details=FLUG+Meeting&location=Google+CRSM1240%2C+Sunnyvale+CA+94089"
|
|
class="btn btn-google"
|
|
>Add to Google Calendar</a
|
|
>
|
|
<a href="#" id="subscribe-btn" class="btn"
|
|
>Subscribe (Thunderbird/Evolution/Merkuro/Calendar)</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="google-sub">
|
|
<h3>Subscribe via Google Calendar</h3>
|
|
<p>
|
|
Google Calendar requires you to manually add the calendar URL:
|
|
</p>
|
|
<div class="copy-box">
|
|
<code id="cal-url"></code>
|
|
<button id="copy-url-btn" class="btn-copy">Copy URL</button>
|
|
</div>
|
|
<p class="hint">
|
|
Then go to Google Calendar →
|
|
<strong>Other calendars (+)</strong> →
|
|
<strong>From URL</strong> and paste the link.
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
const fullUrl = window.location.origin + "/events.ics";
|
|
document.getElementById("subscribe-btn").href =
|
|
"webcal://" + window.location.host + "/events.ics";
|
|
document.getElementById("cal-url").textContent = fullUrl;
|
|
|
|
document.getElementById("copy-url-btn").onclick = function () {
|
|
navigator.clipboard.writeText(fullUrl).then(() => {
|
|
this.textContent = "Copied!";
|
|
setTimeout(() => {
|
|
this.textContent = "Copy URL";
|
|
}, 2000);
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|