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>
|