<html lang="en">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Conference Schedule - ICS File</title>

<style>

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

max-width: 1000px;

margin: 0 auto;

padding: 20px;

line-height: 1.6;

background-color: #f8f9fa;

}

.container {

background: white;

border-radius: 12px;

padding: 30px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

h1 {

color: #2c3e50;

text-align: center;

margin-bottom: 30px;

font-size: 2.2em;

}

.download-section {

text-align: center;

margin-bottom: 40px;

padding: 20px;

background-color: #e8f4f8;

border-radius: 8px;

}

.download-btn {

display: inline-block;

padding: 15px 30px;

background-color: #3498db;

color: white;

text-decoration: none;

border-radius: 8px;

font-weight: bold;

font-size: 1.1em;

transition: background-color 0.3s;

}

.download-btn:hover {

background-color: #2980b9;

}

.preview-section {

margin-top: 30px;

}

.preview-header {

font-size: 1.3em;

color: #2c3e50;

margin-bottom: 15px;

border-bottom: 2px solid #3498db;

padding-bottom: 5px;

}

.ics-preview {

background-color: #f8f9fa;

border: 1px solid #dee2e6;

border-radius: 6px;

padding: 20px;

font-family: 'Courier New', monospace;

font-size: 12px;

overflow-x: auto;

white-space: pre-wrap;

max-height: 500px;

overflow-y: auto;

}

.event-count {

color: #7f8c8d;

font-style: italic;

margin-bottom: 20px;

}

</style>

<div class="container">

<h1>📅 Conference Schedule - May 22, 2025</h1>

<div class="download-section">

<p><strong>Download your complete conference schedule</strong></p>

<p class="event-count">Contains 25 events from the San Francisco conference</p>

<a href="#" id="downloadBtn" class="download-btn">📥 Download ICS File</a>

</div>

<div class="preview-section">

<div class="preview-header">📝 ICS File Preview</div>

<div class="ics-preview" id="icsPreview"></div>

</div>

</div>

<script>

// Generate ICS content

const icsContent = `BEGIN:VCALENDAR

// Display preview

document.getElementById('icsPreview').textContent = icsContent;

// Set up download functionality

document.getElementById('downloadBtn').addEventListener('click', function(e) {

e.preventDefault();

const blob = new Blob([icsContent], { type: 'text/calendar;charset=utf-8' });

const url = window.URL.createObjectURL(blob);

const link = document.createElement('a');

link.href = url;

link.download = 'conference-schedule-may-22-2025.ics';

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

window.URL.revokeObjectURL(url);

});

</script>