← back to Jill Website
public/activity-links-demo.html
269 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Activity Links Component Demo - Nosara Beachfront Rentals</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Activity Links CSS -->
<link rel="stylesheet" href="/css/activity-links.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
}
.demo-container {
max-width: 1200px;
margin: 0 auto;
}
.demo-header {
text-align: center;
color: white;
margin-bottom: 3rem;
}
.demo-header h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.demo-header p {
font-size: 1.2rem;
opacity: 0.9;
}
.demo-section {
background: white;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.demo-section h2 {
color: #2c3e50;
margin-bottom: 0.5rem;
font-size: 1.5rem;
}
.demo-section p {
color: #7f8c8d;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.demo-code {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
overflow-x: auto;
}
.demo-result {
background: #f8f9fa;
border-radius: 8px;
padding: 1.5rem;
margin-top: 1rem;
}
.demo-result-label {
font-weight: 600;
color: #2c3e50;
margin-bottom: 1rem;
display: block;
}
.status-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.875rem;
font-weight: 600;
margin-right: 0.5rem;
}
.status-loading {
background: #ffeaa7;
color: #2d3436;
}
.status-error {
background: #ff7675;
color: white;
}
.status-success {
background: #00b894;
color: white;
}
@media (max-width: 768px) {
body {
padding: 1rem;
}
.demo-header h1 {
font-size: 2rem;
}
.demo-section {
padding: 1.5rem;
}
}
</style>
</head>
<body>
<div class="demo-container">
<div class="demo-header">
<h1>🔗 Activity Links Component</h1>
<p>Loading states, error handling, and timeout management demo</p>
</div>
<!-- Example 1: Normal Loading -->
<div class="demo-section">
<h2>1. Normal Link Display</h2>
<p>Links for a valid activity with website, maps, and review links.</p>
<div class="demo-code">
<div data-activity-links data-activity-id="1"></div>
</div>
<div class="demo-result">
<span class="demo-result-label">Result:</span>
<div data-activity-links data-activity-id="1"></div>
</div>
</div>
<!-- Example 2: Compact Mode -->
<div class="demo-section">
<h2>2. Compact Mode (Icon Only)</h2>
<p>Space-efficient display with icons only, perfect for mobile or sidebars.</p>
<div class="demo-code">
<div data-activity-links data-activity-id="1" data-show-labels="false" data-compact></div>
</div>
<div class="demo-result">
<span class="demo-result-label">Result:</span>
<div data-activity-links data-activity-id="1" data-show-labels="false" data-compact></div>
</div>
</div>
<!-- Example 3: Error State -->
<div class="demo-section">
<h2>3. Error State Handling</h2>
<p>Shows error message when activity ID doesn't exist or API fails.</p>
<div class="demo-code">
<div data-activity-links data-activity-id="99999"></div>
</div>
<div class="demo-result">
<span class="demo-result-label">Result:</span>
<div data-activity-links data-activity-id="99999"></div>
</div>
</div>
<!-- Example 4: Short Timeout -->
<div class="demo-section">
<h2>4. Timeout Handling</h2>
<p>Short timeout (1 second) demonstrates timeout behavior with retry button.</p>
<div class="demo-code">
<div data-activity-links data-activity-id="1" data-timeout="1000"></div>
</div>
<div class="demo-result">
<span class="demo-result-label">Result:</span>
<div data-activity-links data-activity-id="1" data-timeout="1000"></div>
</div>
</div>
<!-- Example 5: Loading State -->
<div class="demo-section">
<h2>5. Loading State (Skeleton)</h2>
<p>Shows skeleton placeholders while fetching data. Refresh page to see loading state.</p>
<div class="demo-result">
<span class="demo-result-label">Skeleton Preview:</span>
<div class="activity-links-loading">
<div class="activity-link-skeleton">
<div class="skeleton-icon"></div>
<div class="skeleton-label"></div>
</div>
<div class="activity-link-skeleton">
<div class="skeleton-icon"></div>
<div class="skeleton-label"></div>
</div>
<div class="activity-link-skeleton">
<div class="skeleton-icon"></div>
<div class="skeleton-label"></div>
</div>
</div>
</div>
</div>
<!-- Example 6: Manual Initialization -->
<div class="demo-section">
<h2>6. Manual JavaScript Initialization</h2>
<p>For advanced use cases where you need programmatic control.</p>
<div class="demo-code">
const links = new ActivityLinks({<br>
activityId: 1,<br>
container: document.getElementById('manual-links'),<br>
showLabels: true,<br>
compact: false,<br>
timeout: 10000<br>
});
</div>
<div class="demo-result">
<span class="demo-result-label">Result:</span>
<div id="manual-links"></div>
</div>
</div>
<!-- Features List -->
<div class="demo-section">
<h2>✨ Key Features</h2>
<ul style="line-height: 2; color: #2c3e50;">
<li><span class="status-badge status-loading">Loading</span> Skeleton placeholders during fetch</li>
<li><span class="status-badge status-error">Error</span> Clear error messages with retry option</li>
<li><span class="status-badge status-success">Timeout</span> Configurable timeout with 10s default</li>
<li><span class="status-badge status-success">Non-blocking</span> Doesn't block other page content</li>
<li><span class="status-badge status-success">Responsive</span> Mobile-optimized display</li>
<li><span class="status-badge status-success">Accessible</span> ARIA labels and keyboard navigation</li>
</ul>
</div>
</div>
<!-- Activity Links JavaScript -->
<script src="/js/activity-links.js"></script>
<!-- Manual initialization example -->
<script>
// Wait for DOM and ActivityLinks class to be ready
window.addEventListener('load', function() {
const manualContainer = document.getElementById('manual-links');
if (manualContainer && window.ActivityLinks) {
new ActivityLinks({
activityId: 1,
container: manualContainer,
showLabels: true,
compact: false,
timeout: 10000
});
}
});
</script>
</body>
</html>