Startup / script.js
yetarnished's picture
Update script.js
0d9e6d1 verified
Raw
History Blame Contribute Delete
7.3 kB
document.addEventListener('DOMContentLoaded', () => {
// --- DOM ---
const clockEl = document.getElementById('clock');
const dateEl = document.getElementById('date');
const greetingEl = document.getElementById('greeting');
const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const searchEngine = document.getElementById('search-engine');
const themeToggle = document.getElementById('theme-toggle');
const notesToggle = document.getElementById('notes-toggle'); // optional in your HTML
const notesPanel = document.getElementById('notes-panel'); // optional
const cardGrid = document.getElementById('card-grid');
// --- HARD-CODED CATEGORIES/LINKS (edit these arrays to taste) ---
const CATEGORIES = [
{
id: 'reddit',
name: 'Reddit',
icon: 'fa-brands fa-reddit',
links: [
{ name: 'r/EmulationOnAndroid', url: 'https://www.reddit.com/r/emulationonandroid/', icon: 'fa-solid fa-gamepad' },
{ name: 'r/Singularity', url: 'https://www.reddit.com/r/singularity/', icon: 'fa-solid fa-robot' },
{ name: 'r/OpenAI', url: 'https://www.reddit.com/r/openai/', icon: 'fa-solid fa-brain' },
{ name: 'r/Programming', url: 'https://www.reddit.com/r/programming/', icon: 'fa-solid fa-code' },
{ name: 'r/MLB', url: 'https://www.reddit.com/r/MLB/', icon: 'fa-solid fa-baseball' },
{ name: 'r/DataIsBeautiful', url: 'https://www.reddit.com/r/dataisbeautiful/', icon: 'fa-solid fa-chart-simple' }
]
},
{
id: 'news',
name: 'News & Tech',
icon: 'fa-solid fa-newspaper',
links: [
{ name: 'Hacker News', url: 'https://news.ycombinator.com/', icon: 'fa-brands fa-hacker-news' },
{ name: 'TechCrunch', url: 'https://techcrunch.com/', icon: 'fa-solid fa-microchip' },
{ name: 'The Verge', url: 'https://www.theverge.com/', icon: 'fa-solid fa-bolt' },
{ name: 'Ars Technica', url: 'https://arstechnica.com/', icon: 'fa-solid fa-flask' },
{ name: 'Reuters', url: 'https://www.reuters.com/', icon: 'fa-solid fa-globe' },
{ name: 'AP News', url: 'https://apnews.com/', icon: 'fa-solid fa-circle-info' },
{ name: 'BBC', url: 'https://www.bbc.com/news', icon: 'fa-solid fa-earth-europe' }
]
},
{
id: 'streaming',
name: 'Streaming',
icon: 'fa-solid fa-clapperboard',
links: [
{ name: 'YouTube', url: 'https://www.youtube.com/', icon: 'fa-brands fa-youtube' },
{ name: 'Netflix', url: 'https://www.netflix.com/', icon: 'fa-brands fa-n' }, // FA6 has brand 'n' via kit/alias; if it doesn’t show, swap to fa-tv
{ name: 'Hulu', url: 'https://www.hulu.com/', icon: 'fa-solid fa-film' },
{ name: 'Prime Video', url: 'https://www.primevideo.com/', icon: 'fa-brands fa-amazon' },
{ name: 'Disney+', url: 'https://www.disneyplus.com/', icon: 'fa-solid fa-star' },
{ name: 'Max', url: 'https://www.max.com/', icon: 'fa-solid fa-video' },
{ name: 'Crunchyroll', url: 'https://www.crunchyroll.com/', icon: 'fa-brands fa-critical-role' } // fallback brand icon
]
}
];
// --- SEARCH ENGINES (+ optional HF Space variable DEFAULT_ENGINE) ---
const SEARCH_ENGINES = {
google: 'https://www.google.com/search?q=',
duckduckgo: 'https://duckduckgo.com/?q=',
youtube: 'https://www.youtube.com/results?search_query=',
github: 'https://github.com/search?q='
};
if (window.huggingface?.variables?.DEFAULT_ENGINE &&
SEARCH_ENGINES[window.huggingface.variables.DEFAULT_ENGINE]) {
if (searchEngine) searchEngine.value = window.huggingface.variables.DEFAULT_ENGINE;
}
// --- RENDER ---
function renderCards() {
if (!cardGrid) return;
cardGrid.innerHTML = '';
CATEGORIES.forEach(cat => cardGrid.appendChild(createCard(cat)));
}
function createCard(category) {
const card = document.createElement('div');
card.className = 'card';
card.dataset.categoryId = category.id;
// Links list
const linksHtml = category.links.map(link => `
<li>
<a href="${link.url}" target="_blank" rel="noopener noreferrer">
<i class="${link.icon || 'fa-solid fa-link'}"></i> ${link.name}
</a>
</li>
`).join('');
card.innerHTML = `
<div class="card-header">
<h2><i class="${category.icon || 'fa-solid fa-folder'}"></i> ${category.name}</h2>
</div>
<ul>${linksHtml}</ul>
`;
return card;
}
// --- SEARCH ---
if (searchForm) {
searchForm.addEventListener('submit', (e) => {
e.preventDefault();
const q = (searchInput?.value || '').trim();
if (!q) return;
const engine = searchEngine?.value || 'google';
window.open(SEARCH_ENGINES[engine] + encodeURIComponent(q), '_blank', 'noopener');
if (searchInput) searchInput.value = '';
});
}
// --- THEME ---
if (themeToggle) {
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('light-theme');
const isLight = document.body.classList.contains('light-theme');
localStorage.setItem('theme', isLight ? 'light' : 'dark');
themeToggle.innerHTML = isLight ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
});
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') {
document.body.classList.add('light-theme');
themeToggle.innerHTML = '<i class="fa-solid fa-sun"></i>';
}
}
// --- CLOCK & GREETING ---
function updateClock() {
const now = new Date();
if (clockEl) {
clockEl.textContent = [
String(now.getHours()).padStart(2,'0'),
String(now.getMinutes()).padStart(2,'0'),
String(now.getSeconds()).padStart(2,'0')
].join(':');
}
if (dateEl) {
dateEl.textContent = now.toLocaleDateString('en-US', { weekday:'long', year:'numeric', month:'long', day:'numeric' });
}
}
function setGreeting() {
const hour = new Date().getHours();
const name = localStorage.getItem('userName') || '';
const g = hour < 12 ? 'Good Morning' : hour < 18 ? 'Good Afternoon' : 'Good Evening';
if (greetingEl) greetingEl.textContent = g + (name ? `, ${name}` : '');
}
// --- KEYBOARD SHORTCUTS ---
document.addEventListener('keydown', (e) => {
if (!isInputFocused() && (e.key === '/' || (e.ctrlKey && e.key === 'k'))) {
e.preventDefault();
searchInput?.focus();
}
if (e.key === 'n' && !isInputFocused() && notesToggle && notesPanel) {
// Toggle notes panel if you kept it in the HTML
notesPanel.classList.toggle('active');
}
if (e.key === 'Escape' && notesPanel) {
notesPanel.classList.remove('active');
searchInput?.blur();
}
});
function isInputFocused() {
const a = document.activeElement;
return a && ['INPUT','TEXTAREA','SELECT'].includes(a.tagName);
}
// --- INIT ---
updateClock();
setGreeting();
setInterval(updateClock, 1000);
renderCards();
});