mirror of
https://github.com/ovosimpatico/xtream2m3u.git
synced 2026-01-15 16:32:55 -03:00
167 lines
7.1 KiB
HTML
167 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>xtream2m3u - Playlist Generator</title>
|
|
<meta name="description" content="Convert Xtream IPTV APIs into customizable M3U playlists">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="icon" type="image/png" href="/assets/logo.png">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="logo">
|
|
<img src="/assets/logo.png" alt="xtream2m3u Logo">
|
|
</div>
|
|
<h1>xtream2m3u</h1>
|
|
<p class="subtitle">Generate custom M3U playlists from your Xtream IPTV subscription.</p>
|
|
</header>
|
|
|
|
<!-- Step 1: Credentials -->
|
|
<section class="step active" id="step1">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span>🔐 Service Credentials</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="credentialsForm" onsubmit="event.preventDefault(); loadCategories();">
|
|
<div class="form-group">
|
|
<label for="url">Service URL (DNS)</label>
|
|
<input type="url" id="url" placeholder="http://iptv.provider.com:8080" required autocomplete="url">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" placeholder="Enter your username" required autocomplete="username">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" placeholder="Enter your password" required autocomplete="current-password">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="checkbox-wrapper">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="includeVod">
|
|
<div class="checkmark"></div>
|
|
<div class="checkbox-text">
|
|
<strong>Include VOD Content</strong>
|
|
<small>Movies & Series (May increase loading time)</small>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary" id="loadBtn">
|
|
<span id="loadCategoriesText">Connect & Load Categories</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Loading State -->
|
|
<div class="loading" id="loading">
|
|
<div class="spinner"></div>
|
|
<p id="loadingText">Connecting to service...</p>
|
|
</div>
|
|
|
|
<!-- Step 2: Category Selection -->
|
|
<section class="step" id="step2">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span>📁 Customize Playlist</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="toolbar">
|
|
<div class="filter-mode">
|
|
<label>
|
|
<input type="radio" name="filterMode" value="include" checked>
|
|
<span>Include Selected</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="filterMode" value="exclude">
|
|
<span>Exclude Selected</span>
|
|
</label>
|
|
</div>
|
|
<div class="search-box">
|
|
<input type="text" id="categorySearch" placeholder="Search categories..." autocomplete="off">
|
|
<span class="search-icon">🔍</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="selection-counter" id="selectionCounter">
|
|
<span id="selectionText">Select categories to include in your playlist</span>
|
|
<div class="selection-actions">
|
|
<button class="btn-text" onclick="selectAllVisible()">Select Visible</button>
|
|
<button class="btn-text" onclick="clearSelection()">Clear All</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="category-chips" id="categoryChips">
|
|
<!-- Categories populated via JS -->
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap;">
|
|
<button class="btn btn-secondary" onclick="goBackToStep1()">
|
|
Back
|
|
</button>
|
|
<button class="btn btn-success" onclick="showConfirmation()">
|
|
Generate Playlist
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Step 3: Success -->
|
|
<section class="step" id="step3">
|
|
<div class="card">
|
|
<div class="success-state">
|
|
<div class="success-checkmark">✓</div>
|
|
<h2 class="success-title">Playlist Ready!</h2>
|
|
<p class="success-message">Your custom M3U playlist has been generated successfully.</p>
|
|
|
|
<div class="success-actions">
|
|
<a class="btn btn-success download-link" id="finalDownloadLink">
|
|
<span>📥 Download .m3u</span>
|
|
</a>
|
|
<button class="btn btn-primary" onclick="startOver()">
|
|
Create Another
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div class="modal" id="confirmationModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Review & Generate</h3>
|
|
</div>
|
|
<div class="modal-summary" id="modalSummary">
|
|
<!-- Summary populated via JS -->
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
|
|
<button class="btn btn-success" onclick="confirmGeneration()">Generate</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="results"></div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html>
|