Anime Hub

My Anime List

Anime Blog

:root { --primary: #2e51a2; --secondary: #e1e7f4; --accent: #ff9a00; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; background-color: #f8f9fa; } header { background: var(--primary); color: white; padding: 1rem; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } nav { margin: 1rem 0; display: flex; justify-content: center; gap: 1rem; } .nav-btn { padding: 0.5rem 1.5rem; border: none; border-radius: 20px; background: var(--secondary); color: var(--primary); cursor: pointer; transition: all 0.3s ease; } .nav-btn.active { background: var(--accent); color: white; } .container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; } .page { display: none; } .page.active { display: block; } /* Anime Tracker Styles */ #anime-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; padding: 1rem; background: white; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .anime-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .anime-card { background: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: relative; } .anime-card h3 { color: var(--primary); margin-bottom: 0.5rem; } .status-badge { position: absolute; top: -10px; right: -10px; background: var(--accent); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; } /* Blog Styles */ #blog-form { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0; padding: 1rem; background: white; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } #blog-content { height: 150px; padding: 1rem; resize: vertical; } .blog-grid { display: grid; gap: 2rem; } .blog-post { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .blog-post h3 { color: var(--primary); margin-bottom: 1rem; } .blog-tags { display: flex; gap: 0.5rem; margin-top: 1rem; } .tag { background: var(--secondary); color: var(--primary); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.9rem; } button { background: var(--primary); color: white; border: none; padding: 0.8rem 1.5rem; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } button:hover { background: var(--accent); } input, select, textarea { padding: 0.8rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; } document.addEventListener('DOMContentLoaded', () => { // Navigation document.querySelectorAll('.nav-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelector('.nav-btn.active').classList.remove('active'); btn.classList.add('active'); document.querySelector('.page.active').classList.remove('active'); document.getElementById(btn.dataset.page).classList.add('active'); }); }); // Anime Tracker const animeForm = document.getElementById('anime-form'); const animeList = document.getElementById('anime-list'); let animeData = JSON.parse(localStorage.getItem('animeData')) || []; // Blog System const blogForm = document.getElementById('blog-form'); const blogPosts = document.getElementById('blog-posts'); let blogData = JSON.parse(localStorage.getItem('blogData')) || []; // Load initial data renderAnimeList(); renderBlogPosts(); // Anime Form Handler animeForm.addEventListener('submit', (e) => { e.preventDefault(); const newAnime = { id: Date.now(), title: document.getElementById('anime-title').value, status: document.getElementById('anime-status').value, rating: document.getElementById('anime-rating').value, episodes: document.getElementById('anime-episodes').value, date: new Date().toLocaleDateString() }; animeData.push(newAnime); saveAnimeData(); renderAnimeList(); animeForm.reset(); }); // Blog Form Handler blogForm.addEventListener('submit', (e) => { e.preventDefault(); const newPost = { id: Date.now(), title: document.getElementById('blog-title').value, content: document.getElementById('blog-content').value, tags: document.getElementById('blog-tags').value.split(',').map(tag => tag.trim()), date: new Date().toLocaleDateString() }; blogData.push(newPost); saveBlogData(); renderBlogPosts(); blogForm.reset(); }); // Data Management Functions function saveAnimeData() { localStorage.setItem('animeData', JSON.stringify(animeData)); } function saveBlogData() { localStorage.setItem('blogData', JSON.stringify(blogData)); } function renderAnimeList() { animeList.innerHTML = animeData.map(anime => `

${anime.status}

${anime.title}

📅 Added: ${anime.date}

${anime.rating ? `

⭐ Rating: ${anime.rating}/10

` : ''} ${anime.episodes ? `

📺 Episodes: ${anime.episodes}

` : ''}

`).join(''); } function renderBlogPosts() { blogPosts.innerHTML = blogData.map(post => `

${post.title}

📅 ${post.date}

${post.content}

${post.tags.length ? `

${post.tags.map(tag => `#${tag}`).join('')}

` : ''}

`).join(''); } // Delete Functions window.deleteAnime = (id) => { animeData = animeData.filter(anime => anime.id !== id); saveAnimeData(); renderAnimeList(); } window.deletePost = (id) => { blogData = blogData.filter(post => post.id !== id); saveBlogData(); renderBlogPosts(); } });