Roman/ohm_streaming
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: Redesign web interface with 5 static tabs

Browse Source 
Redesigned the web interface with a cleaner 5-tab layout:
- Accueil: Recommendations + Latest releases mixed
- Recherche: Unified search for anime and series
- Anime: Latest anime releases
- Série: Latest series releases
- Fournisseurs: Provider list with file hosts

Technical changes:
- Created new tabs.js for Anime, Série, and Fournisseurs tabs
- Modified header.html to use static tabs instead of dynamic
- Fixed carousel CSS classes in home_section.html
- Added null checks in main.js to prevent JS errors
- Simplified loadProviders() for legacy support
- All functionality preserved and working

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
root
2026-01-25 11:09:10 +00:00
parent 4d280b5239
commit 5e50081b58
6 changed files with 304 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/main.js
+33 -71
View File
@@ -18,89 +18,42 @@ document.addEventListener('DOMContentLoaded', () => {
*/
function initializeForms() {
// Search form
document.getElementById('searchInput').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
handleSearch();
}
});
const searchInput = document.getElementById('searchInput');
if (searchInput) {
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
handleSearch();
}
});
}
// Direct download form
document.getElementById('downloadForm').addEventListener('submit', handleDirectDownload);
const downloadForm = document.getElementById('downloadForm');
if (downloadForm) {
downloadForm.addEventListener('submit', handleDirectDownload);
}
}
/**
* Load providers dynamically
* Load providers dynamically (legacy support)
* Note: This is kept for compatibility but the new interface uses static tabs
*/
async function loadProviders() {
try {
const data = await getProvidersInfo();
// Update anime tabs
const animeTabsContainer = document.querySelector('.tabs');
const existingAnimeTabs = animeTabsContainer.querySelectorAll('.tab[data-tab-type="anime"]');
existingAnimeTabs.forEach(tab => tab.remove());
// Add anime provider tabs
Object.entries(data.anime_providers).forEach(([id, provider]) => {
// Check if tab doesn't exist
if (!document.querySelector(`.tab[data-provider="${id}"]`)) {
const button = document.createElement('button');
button.className = 'tab';
button.setAttribute('data-tab-type', 'anime');
button.setAttribute('data-provider', id);
button.innerHTML = `${provider.icon} ${provider.name}`;
button.onclick = () => switchTab(`anime-${id}`);
animeTabsContainer.appendChild(button);
// Create corresponding tab content
const tabContent = document.createElement('div');
tabContent.id = `tab-anime-${id}`;
tabContent.className = 'tab-content';
tabContent.innerHTML = createAnimeTabContent(id, provider);
document.querySelector('.container').insertBefore(
tabContent,
document.getElementById('downloadsList')
);
}
});
// Add series provider tabs
const existingSeriesTabs = animeTabsContainer.querySelectorAll('.tab[data-tab-type="series"]');
existingSeriesTabs.forEach(tab => tab.remove());
Object.entries(data.series_providers || {}).forEach(([id, provider]) => {
// Check if tab doesn't exist
if (!document.querySelector(`.tab[data-provider="${id}"]`)) {
const button = document.createElement('button');
button.className = 'tab';
button.setAttribute('data-tab-type', 'series');
button.setAttribute('data-provider', id);
button.innerHTML = `${provider.icon} ${provider.name}`;
button.onclick = () => switchTab(`series-${id}`);
animeTabsContainer.appendChild(button);
// Create corresponding tab content
const tabContent = document.createElement('div');
tabContent.id = `tab-series-${id}`;
tabContent.className = 'tab-content';
tabContent.innerHTML = createSeriesTabContent(id, provider);
document.querySelector('.container').insertBefore(
tabContent,
document.getElementById('downloadsList')
);
}
});
// Update supported hosts badges
// Update supported hosts badges (if element exists)
const hostsContainer = document.querySelector('.supported-hosts');
hostsContainer.innerHTML = '';
if (hostsContainer) {
hostsContainer.innerHTML = '';
Object.values(data.file_hosts).forEach(host => {
const badge = document.createElement('span');
badge.className = 'host-badge';
badge.textContent = `${host.icon} ${host.name}`;
hostsContainer.appendChild(badge);
});
Object.values(data.file_hosts).forEach(host => {
const badge = document.createElement('span');
badge.className = 'host-badge';
badge.textContent = `${host.icon} ${host.name}`;
hostsContainer.appendChild(badge);
});
}
} catch (error) {
console.error('Error loading providers:', error);
@@ -260,6 +213,15 @@ function switchTab(tabName) {
btn.classList.add('active');
} else if (tabType === 'direct' && tabName === 'direct') {
btn.classList.add('active');
} else if (tabType === 'anime' && tabName === 'anime') {
// Static anime tab
btn.classList.add('active');
} else if (tabType === 'series' && tabName === 'series') {
// Static series tab
btn.classList.add('active');
} else if (tabType === 'providers' && tabName === 'providers') {
// Static providers tab
btn.classList.add('active');
} else if (tabType === 'anime' && btn.getAttribute('data-provider') === tabName.replace('anime-', '')) {
btn.classList.add('active');
} else if (tabType === 'series' && btn.getAttribute('data-provider') === tabName.replace('series-', '')) {