mirror of
https://github.com/fabrice404/olympics-calendar.git
synced 2025-12-13 06:39:47 +00:00
216 lines
6.3 KiB
HTML
216 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Add to Calendar - All Sports Calendar</title>
|
|
<style>
|
|
.add-to-calendar-wrapper {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
max-width: 480px;
|
|
margin: 2rem auto;
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
border: 1px solid #e2e2e2;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,.04);
|
|
}
|
|
|
|
.add-to-calendar-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.add-to-calendar-subtitle {
|
|
font-size: 0.9rem;
|
|
color: #555;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.atc-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.atc-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.45rem;
|
|
padding: 0.6rem 0.9rem;
|
|
border-radius: 999px;
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
border: 1px solid transparent;
|
|
transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.08s ease;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.atc-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,.08);
|
|
}
|
|
|
|
.atc-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Variants */
|
|
.atc-google {
|
|
background: #fff;
|
|
color: #1a73e8;
|
|
border-color: #d2e3fc;
|
|
}
|
|
|
|
.atc-outlook {
|
|
background: #0078d4;
|
|
color: #fff;
|
|
}
|
|
|
|
.atc-office365 {
|
|
background: #ea4c1d;
|
|
color: #fff;
|
|
}
|
|
|
|
.atc-apple {
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
.atc-yahoo {
|
|
background: #5f01d1;
|
|
color: #fff;
|
|
}
|
|
|
|
.atc-ics {
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
border-color: #ddd;
|
|
}
|
|
|
|
.atc-footer {
|
|
margin-top: 0.9rem;
|
|
font-size: 0.8rem;
|
|
color: #777;
|
|
}
|
|
|
|
@media (min-width: 520px) {
|
|
.atc-buttons {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
.atc-btn {
|
|
flex: 1 1 calc(50% - 0.5rem);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="add-to-calendar-wrapper">
|
|
<div class="add-to-calendar-title">Add “All Sports Calendar”</div>
|
|
<div class="add-to-calendar-subtitle">
|
|
Subscribe to keep all sports events up to date in your favorite calendar app.
|
|
</div>
|
|
|
|
<div class="atc-buttons">
|
|
<!-- Google Calendar -->
|
|
<a
|
|
class="atc-btn atc-google"
|
|
href="https://calendar.google.com/calendar/u/0/r?cid=http%3A%2F%2Flocalhost%3A3000%2Fdata%2Fen%2Fall-sports%2Fcalendar.ics"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<!-- simple calendar icon -->
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<rect x="3" y="4" width="18" height="17" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="1.6"/>
|
|
<line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" stroke-width="1.6"/>
|
|
<line x1="8" y1="3" x2="8" y2="7" stroke="currentColor" stroke-width="1.6"/>
|
|
<line x1="16" y1="3" x2="16" y2="7" stroke="currentColor" stroke-width="1.6"/>
|
|
</svg>
|
|
<span>Google Calendar</span>
|
|
</a>
|
|
|
|
<!-- Outlook.com (personal accounts) -->
|
|
<a
|
|
class="atc-btn atc-outlook"
|
|
href="https://outlook.live.com/calendar/0/deeplink/subscribe?url=http%3A%2F%2Flocalhost%3A3000%2Fdata%2Fen%2Fall-sports%2Fcalendar.ics&name=All%20Sports%20Calendar"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<rect x="3" y="5" width="10" height="14" rx="1.5" fill="none" stroke="#ffffff" stroke-width="1.6"/>
|
|
<path d="M13 7h8v10h-8" fill="none" stroke="#ffffff" stroke-width="1.6"/>
|
|
</svg>
|
|
<span>Outlook.com</span>
|
|
</a>
|
|
|
|
<!-- Office 365 / Microsoft 365 (business) -->
|
|
<a
|
|
class="atc-btn atc-office365"
|
|
href="https://outlook.office.com/calendar/0/deeplink/subscribe?url=http%3A%2F%2Flocalhost%3A3000%2Fdata%2Fen%2Fall-sports%2Fcalendar.ics&name=All%20Sports%20Calendar"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M5 5h8v14H5z" fill="none" stroke="#ffffff" stroke-width="1.6"/>
|
|
<path d="M13 7h6v10h-6" fill="none" stroke="#ffffff" stroke-width="1.6"/>
|
|
</svg>
|
|
<span>Office 365</span>
|
|
</a>
|
|
|
|
<!-- Apple Calendar (iCal) -->
|
|
<a
|
|
class="atc-btn atc-apple"
|
|
href="webcal://localhost:3000/data/en/all-sports/calendar.ics"
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<rect x="3" y="4" width="18" height="17" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="1.6"/>
|
|
<line x1="3" y1="9" x2="21" y2="9" stroke="#ffffff" stroke-width="1.6"/>
|
|
<line x1="8" y1="3" x2="8" y2="7" stroke="#ffffff" stroke-width="1.6"/>
|
|
<line x1="16" y1="3" x2="16" y2="7" stroke="#ffffff" stroke-width="1.6"/>
|
|
</svg>
|
|
<span>Apple Calendar</span>
|
|
</a>
|
|
|
|
<!-- Yahoo Calendar -->
|
|
<a
|
|
class="atc-btn atc-yahoo"
|
|
href="https://calendar.yahoo.com/?ics=http%3A%2F%2Flocalhost%3A3000%2Fdata%2Fen%2Fall-sports%2Fcalendar.ics"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="1.6"/>
|
|
<path d="M9 9l3 6 3-6" fill="none" stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span>Yahoo Calendar</span>
|
|
</a>
|
|
|
|
<!-- Direct ICS download (for any other app) -->
|
|
<a
|
|
class="atc-btn atc-ics"
|
|
href="http://localhost:3000/data/en/all-sports/calendar.ics"
|
|
download="all-sports-calendar.ics"
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M12 3v12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
<path d="M8 11l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<rect x="5" y="17" width="14" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="1.6"/>
|
|
</svg>
|
|
<span>Download .ics</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="atc-footer">
|
|
Note: this demo uses <code>localhost</code>. Replace it with your production domain when you deploy.
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|