172 lines
7 KiB
HTML
172 lines
7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}FantasyCron{% endblock %}</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
<!-- Hamburger Menu Button -->
|
|
<button class="menu-toggle" onclick="toggleSidebar()" aria-label="Toggle menu">
|
|
<span class="menu-icon">☰</span>
|
|
</button>
|
|
|
|
<!-- Sidebar Menu -->
|
|
<div class="sidebar" id="sidebar">
|
|
<button class="close-btn" onclick="toggleSidebar()">✕</button>
|
|
|
|
<div class="sidebar-content">
|
|
<!-- Theme Toggle Section -->
|
|
<div class="sidebar-section">
|
|
<h3>Theme</h3>
|
|
<button class="theme-button" onclick="toggleTheme()">
|
|
<span id="theme-icon">☀️</span>
|
|
<span id="theme-text">Light Mode</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Links Section -->
|
|
<div class="sidebar-section">
|
|
<h3>Links</h3>
|
|
<a href="https://sleeper.app" target="_blank" class="sidebar-link">
|
|
🏈 Sleeper App
|
|
</a>
|
|
<a href="https://github.com" target="_blank" class="sidebar-link">
|
|
💻 GitHub
|
|
</a>
|
|
</div>
|
|
|
|
<!-- About Section -->
|
|
<div class="sidebar-section">
|
|
<h3>About This App</h3>
|
|
<div class="about-text">
|
|
<p>FantasyCron gives you an at-a-glance view of your fantasy football teams and when your players play.</p>
|
|
<p><strong>How to use:</strong></p>
|
|
<ul>
|
|
<li>Enter your Sleeper username on the home page</li>
|
|
<li>View all your leagues' matchup scores at the top</li>
|
|
<li>See when each of your players plays, grouped by league (indicated by colored borders)</li>
|
|
<li>Navigate between weeks using the arrows</li>
|
|
<li>Scores auto-refresh during game times</li>
|
|
</ul>
|
|
<p class="cron-note">* * * * 0,1,4 - Updates every Sunday, Monday, and Thursday!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overlay for sidebar -->
|
|
<div class="sidebar-overlay" id="sidebar-overlay" onclick="toggleSidebar()"></div>
|
|
|
|
<div class="container">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<!-- App version footer -->
|
|
<footer class="app-footer">
|
|
<div class="version">FantasyCron v{{ app_version }}</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Sidebar management
|
|
const toggleSidebar = () => {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('sidebar-overlay');
|
|
sidebar.classList.toggle('active');
|
|
overlay.classList.toggle('active');
|
|
};
|
|
|
|
// Theme management
|
|
const getTheme = () => localStorage.getItem('theme') || 'light';
|
|
|
|
const setTheme = (theme) => {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
const icon = document.getElementById('theme-icon');
|
|
const text = document.getElementById('theme-text');
|
|
if (theme === 'dark') {
|
|
icon.textContent = '🌙';
|
|
text.textContent = 'Dark Mode';
|
|
} else {
|
|
icon.textContent = '☀️';
|
|
text.textContent = 'Light Mode';
|
|
}
|
|
};
|
|
|
|
const toggleTheme = () => {
|
|
const currentTheme = getTheme();
|
|
setTheme(currentTheme === 'dark' ? 'light' : 'dark');
|
|
};
|
|
|
|
// Initialize theme on load
|
|
setTheme(getTheme());
|
|
|
|
// Timezone conversion
|
|
const convertGameTimes = () => {
|
|
const timeElements = document.querySelectorAll('.game-time[data-utc]');
|
|
const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
|
|
timeElements.forEach(element => {
|
|
const utcDateStr = element.getAttribute('data-utc');
|
|
if (utcDateStr) {
|
|
const utcDate = new Date(utcDateStr);
|
|
|
|
// Format time in user's timezone (or PST as fallback)
|
|
const options = {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
hour12: true,
|
|
timeZone: userTimezone || 'America/Los_Angeles'
|
|
};
|
|
|
|
const localTime = utcDate.toLocaleString('en-US', options);
|
|
element.textContent = localTime;
|
|
|
|
// Add timezone abbreviation on hover
|
|
const tzOptions = { timeZoneName: 'short', timeZone: userTimezone || 'America/Los_Angeles' };
|
|
const tzAbbr = utcDate.toLocaleString('en-US', tzOptions).split(' ').pop();
|
|
element.title = `${localTime} ${tzAbbr}`;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Convert times on page load
|
|
window.addEventListener('DOMContentLoaded', convertGameTimes);
|
|
|
|
// Score refresh functionality
|
|
function refreshScores() {
|
|
const username = document.querySelector('meta[name="username"]')?.content;
|
|
const week = document.querySelector('meta[name="week"]')?.content;
|
|
|
|
if (username && week) {
|
|
fetch(`/api/refresh/${username}/${week}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.league_scores) {
|
|
data.league_scores.forEach(league => {
|
|
const userScore = document.getElementById(`user-score-${league.league_id}`);
|
|
const oppScore = document.getElementById(`opp-score-${league.league_id}`);
|
|
|
|
if (userScore) userScore.textContent = league.user_points.toFixed(1);
|
|
if (oppScore) oppScore.textContent = league.opponent_points.toFixed(1);
|
|
});
|
|
}
|
|
})
|
|
.catch(error => console.log('Refresh failed:', error));
|
|
}
|
|
}
|
|
|
|
// Set refresh interval based on game day
|
|
const now = new Date();
|
|
const dayOfWeek = now.getDay();
|
|
const isGameTime = dayOfWeek === 4 || dayOfWeek === 0 || dayOfWeek === 1; // Thu, Sun, Mon
|
|
|
|
if (isGameTime) {
|
|
setInterval(refreshScores, 60000); // Every minute during games
|
|
} else {
|
|
setInterval(refreshScores, 21600000); // Every 6 hours otherwise
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|