Xtream Code Club -

.login-container { display: flex; justify-content: center; align-items: center; height: 100vh; }

const connectToServer = async () => { try { const response = await fetch('/api/connect', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(credentials) }); const data = await response.json(); if (data.success) { setConnected(true); await loadCategories(); } else { alert('Connection failed: ' + data.error); } } catch (error) { alert('Error connecting: ' + error.message); } };

.login-box { background: white; padding: 40px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); width: 350px; } xtream code club

.sidebar { width: 250px; background: white; border-right: 1px solid #e0e0e0; overflow-y: auto; }

const handleCategoryChange = async (type, categoryId) => { setActiveCategory(type); setSelectedCategoryId(categoryId); await loadStreams(categoryId, type); }; .login-container { display: flex

::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }

const loadCategories = async () => { const response = await fetch('/api/categories'); const data = await response.json(); setCategories(data); if (data.live.length > 0) { setSelectedCategoryId(data.live[0].category_id); await loadStreams(data.live[0].category_id, 'live'); } }; { method: 'POST'

.favorite-item button, .recent-item button { padding: 5px 10px; background: #667eea; color: white; border: none; border-radius: 3px; cursor: pointer; }

.channel-actions { padding: 10px 15px; border-top: 1px solid #f0f0f0; display: flex; gap: 10px; }