823 lines
27 KiB
HTML
823 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>YouTube Playlist Analyzer | PonyWave Tools</title>
|
|
<meta property="og:title" content="YouTube Playlist Analyzer | PonyWave Tools">
|
|
<meta property="og:description" content="Analysiere YouTube-Playlists">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://tools.ponywave.de/yt_playlist">
|
|
<meta property="og:image" content="https://tools.ponywave.de/favicon.png">
|
|
<link rel="icon" href="https://tools.ponywave.de/favicon.png">
|
|
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="yt_playlist"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
background-color: #181818;
|
|
color: #e0e0e0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
h1 {
|
|
color: #ff0000;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
font-size: 2em;
|
|
}
|
|
|
|
.input-section {
|
|
background: #282828;
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
color: #aaa;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="date"],
|
|
textarea {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background: #3a3a3a;
|
|
border: 2px solid #4a4a4a;
|
|
border-radius: 8px;
|
|
color: #e0e0e0;
|
|
font-size: 16px;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus {
|
|
outline: none;
|
|
border-color: #ff0000;
|
|
}
|
|
|
|
button {
|
|
padding: 12px 25px;
|
|
background-color: #ff0000;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
transition: background-color 0.3s, transform 0.1s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #cc0000;
|
|
}
|
|
|
|
button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
button:disabled {
|
|
background-color: #555;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.api-key-section {
|
|
background: #232323;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.api-key-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.api-key-header:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.api-key-content {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.api-key-input-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.api-key-input-group input {
|
|
flex: 1;
|
|
}
|
|
|
|
.api-key-input-group button {
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.results-section {
|
|
background: #282828;
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
display: none;
|
|
}
|
|
|
|
.results-section.visible {
|
|
display: block;
|
|
}
|
|
|
|
.info-box {
|
|
background: #232323;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #3a3a3a;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 600;
|
|
color: #aaa;
|
|
}
|
|
|
|
.info-value {
|
|
color: #fff;
|
|
}
|
|
|
|
.date-inputs {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.checkbox-group {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.checkbox-group input {
|
|
width: auto;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.checkbox-group label {
|
|
display: inline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
textarea {
|
|
font-family: 'Courier New', monospace;
|
|
min-height: 200px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.status {
|
|
text-align: center;
|
|
padding: 15px;
|
|
background: #232323;
|
|
border-radius: 8px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.spinner {
|
|
border: 3px solid #3a3a3a;
|
|
border-top: 3px solid #ff0000;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #323232;
|
|
color: white;
|
|
padding: 15px 25px;
|
|
border-radius: 8px;
|
|
display: none;
|
|
font-size: 14px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.toast.visible {
|
|
display: block;
|
|
animation: fadeIn 0.3s;
|
|
}
|
|
|
|
.toast.success {
|
|
background: #4CAF50;
|
|
}
|
|
|
|
.toast.error {
|
|
background: #f44336;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
|
|
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 20px;
|
|
margin-top: 40px;
|
|
border-top: 1px solid #3a3a3a;
|
|
color: #888;
|
|
}
|
|
|
|
footer a {
|
|
color: #ff0000;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.heart {
|
|
color: #ff0000;
|
|
animation: heartbeat 1.5s infinite;
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.2); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.toggle-visibility {
|
|
background: #3a3a3a;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle-visibility:hover {
|
|
background: #4a4a4a;
|
|
}
|
|
|
|
.settings-button {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: #282828;
|
|
border: 2px solid #3a3a3a;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
transition: all 0.3s;
|
|
z-index: 100;
|
|
}
|
|
|
|
.settings-button:hover {
|
|
background: #3a3a3a;
|
|
border-color: #ff0000;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.8);
|
|
z-index: 9999;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.modal-overlay.visible {
|
|
display: flex;
|
|
}
|
|
|
|
.modal {
|
|
background: #282828;
|
|
padding: 30px;
|
|
border-radius: 12px;
|
|
max-width: 600px;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.modal h2 {
|
|
margin-top: 0;
|
|
color: #ff0000;
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.modal-close {
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #888;
|
|
cursor: pointer;
|
|
line-height: 20px;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.api-help {
|
|
font-size: 13px;
|
|
color: #888;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.api-help a {
|
|
color: #ff0000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.api-help a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.collapse-icon {
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.collapse-icon.open {
|
|
transform: rotate(180deg);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Settings Button -->
|
|
<button class="settings-button" onclick="openSettingsModal()" title="Einstellungen">⚙️</button>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="settings-modal" class="modal-overlay">
|
|
<div class="modal">
|
|
<span class="modal-close" onclick="closeSettingsModal()">×</span>
|
|
<h2>⚙️ Einstellungen</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="api-key-settings">YouTube API Key</label>
|
|
<p style="font-size: 14px; color: #888; margin-bottom: 10px;">
|
|
Erforderlich zum Abrufen der Playlist-Daten.
|
|
</p>
|
|
<div class="api-key-input-group">
|
|
<input type="password" id="api-key-settings" placeholder="API-Key eingeben...">
|
|
<button class="toggle-visibility" onclick="toggleApiKeyVisibility()">👁️</button>
|
|
<button onclick="saveApiKey()">Speichern</button>
|
|
</div>
|
|
<div class="api-help">
|
|
Wie erstelle ich einen API-Key? <a href="javascript:void(0)" onclick="showApiHelp()">Anleitung anzeigen</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h1>YouTube Playlist Analyzer</h1>
|
|
|
|
<div class="input-section">
|
|
<div class="form-group">
|
|
<label for="playlist-url">Playlist URL</label>
|
|
<input type="text"
|
|
id="playlist-url"
|
|
placeholder="https://www.youtube.com/playlist?list=PLGWGc5dfbzn8zLrOOQK1M0Vmwvjp7biSU"
|
|
onkeypress="handleEnter(event)">
|
|
</div>
|
|
|
|
<button onclick="analyzePlaylist()">Playlist analysieren</button>
|
|
</div>
|
|
|
|
<div id="status" class="status" style="display: none;">
|
|
<div class="spinner"></div>
|
|
<p id="status-text">Lade Playlist-Daten...</p>
|
|
</div>
|
|
|
|
<div id="results" class="results-section">
|
|
<h2>Ergebnisse</h2>
|
|
|
|
<div class="info-box">
|
|
<div class="info-row">
|
|
<span class="info-label">Playlist:</span>
|
|
<span class="info-value" id="playlist-title">-</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Videos:</span>
|
|
<span class="info-value" id="video-count">-</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Gesamtlänge:</span>
|
|
<span class="info-value" id="total-duration">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Zeitraum</label>
|
|
<div class="date-inputs">
|
|
<div>
|
|
<label for="start-date" style="font-size: 14px;">Start-Datum</label>
|
|
<input type="date" id="start-date" onchange="updateWikiFormat()">
|
|
</div>
|
|
<div>
|
|
<label for="end-date" style="font-size: 14px;">End-Datum</label>
|
|
<input type="date" id="end-date" onchange="updateWikiFormat()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="series-finished" onchange="updateWikiFormat()">
|
|
<label for="series-finished">Serie beendet</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="wiki-output">Wiki-Format</label>
|
|
<textarea id="wiki-output" readonly></textarea>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button onclick="copyWikiFormat()">📋 Wiki-Format kopieren</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast"></div>
|
|
|
|
<footer>
|
|
<p>
|
|
<a href="https://tools.ponywave.de/">Zurück zur Startseite</a> |
|
|
© <span id="current-year"></span> Akamaru | Made with <span class="heart">❤️</span> by Claude
|
|
</p>
|
|
</footer>
|
|
|
|
<script>
|
|
let playlistData = null;
|
|
|
|
// Jahr aktualisieren
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.getElementById('current-year').textContent = new Date().getFullYear();
|
|
loadApiKey();
|
|
});
|
|
|
|
function handleEnter(event) {
|
|
if (event.key === 'Enter') {
|
|
analyzePlaylist();
|
|
}
|
|
}
|
|
|
|
function openSettingsModal() {
|
|
document.getElementById('settings-modal').classList.add('visible');
|
|
loadApiKey();
|
|
}
|
|
|
|
function closeSettingsModal() {
|
|
document.getElementById('settings-modal').classList.remove('visible');
|
|
}
|
|
|
|
function toggleApiKeyVisibility() {
|
|
const input = document.getElementById('api-key-settings');
|
|
input.type = input.type === 'password' ? 'text' : 'password';
|
|
}
|
|
|
|
function loadApiKey() {
|
|
const apiKey = localStorage.getItem('youtube_api_key') || '';
|
|
const input = document.getElementById('api-key-settings');
|
|
if (input) {
|
|
input.value = apiKey;
|
|
}
|
|
}
|
|
|
|
function saveApiKey() {
|
|
const apiKey = document.getElementById('api-key-settings').value.trim();
|
|
if (apiKey) {
|
|
localStorage.setItem('youtube_api_key', apiKey);
|
|
showToast('API-Key gespeichert!', 'success');
|
|
closeSettingsModal();
|
|
} else {
|
|
localStorage.removeItem('youtube_api_key');
|
|
showToast('API-Key gelöscht!', 'success');
|
|
}
|
|
}
|
|
|
|
// ESC-Taste zum Schließen des Settings-Modals
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
closeSettingsModal();
|
|
}
|
|
});
|
|
|
|
async function analyzePlaylist() {
|
|
const urlInput = document.getElementById('playlist-url').value.trim();
|
|
const playlistId = extractPlaylistId(urlInput);
|
|
|
|
if (!playlistId) {
|
|
showToast('Ungültige Playlist-URL!', 'error');
|
|
return;
|
|
}
|
|
|
|
// Zeige Status
|
|
document.getElementById('status').style.display = 'block';
|
|
document.getElementById('results').classList.remove('visible');
|
|
document.getElementById('status-text').textContent = 'Lade Playlist-Daten...';
|
|
|
|
// Hole API-Key
|
|
const apiKey = localStorage.getItem('youtube_api_key') || '';
|
|
|
|
if (!apiKey) {
|
|
showToast('Bitte gib zuerst einen API-Key in den Einstellungen ein!', 'error');
|
|
document.getElementById('status').style.display = 'none';
|
|
// Öffne Settings-Modal
|
|
openSettingsModal();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Rufe PHP-Script auf
|
|
const response = await fetch('fetch_playlist.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
playlistId: playlistId,
|
|
apiKey: apiKey
|
|
})
|
|
});
|
|
|
|
// Versuche JSON zu parsen, auch bei Fehlern
|
|
let data;
|
|
try {
|
|
data = await response.json();
|
|
} catch (e) {
|
|
// Falls JSON-Parsing fehlschlägt, hole den Text
|
|
const text = await response.text();
|
|
console.error('Fehler beim JSON-Parsing. Response:', text);
|
|
throw new Error('Server-Fehler: Ungültige Antwort (kein JSON). Siehe Console für Details.');
|
|
}
|
|
|
|
// Zeige detaillierte Fehlermeldung
|
|
if (!response.ok || data.error) {
|
|
const errorDetails = data.error || 'Unbekannter Fehler';
|
|
const debugInfo = data.file && data.line ? ` (${data.file}:${data.line})` : '';
|
|
console.error('API-Fehler:', data);
|
|
throw new Error(errorDetails + debugInfo);
|
|
}
|
|
|
|
// Speichere Daten
|
|
playlistData = data;
|
|
|
|
// Zeige Ergebnisse
|
|
displayResults(data);
|
|
|
|
} catch (error) {
|
|
console.error('Fehler:', error);
|
|
showToast('Fehler: ' + error.message, 'error');
|
|
document.getElementById('status').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function displayResults(data) {
|
|
// Verstecke Status
|
|
document.getElementById('status').style.display = 'none';
|
|
|
|
// Zeige Ergebnisse
|
|
document.getElementById('results').classList.add('visible');
|
|
|
|
// Setze Werte
|
|
document.getElementById('playlist-title').textContent = data.playlistTitle || 'Unbekannt';
|
|
document.getElementById('video-count').textContent = data.videoCount + ' Folgen';
|
|
document.getElementById('total-duration').textContent = '~' + data.totalMinutes + ' Minuten';
|
|
|
|
// Setze Daten
|
|
if (data.oldestDate && data.newestDate) {
|
|
document.getElementById('start-date').value = data.oldestDate;
|
|
document.getElementById('end-date').value = data.newestDate;
|
|
} else {
|
|
const today = new Date().toISOString().split('T')[0];
|
|
document.getElementById('start-date').value = today;
|
|
document.getElementById('end-date').value = today;
|
|
}
|
|
|
|
// Generiere Wiki-Format
|
|
updateWikiFormat();
|
|
}
|
|
|
|
function updateWikiFormat() {
|
|
if (!playlistData) return;
|
|
|
|
const startDate = document.getElementById('start-date').value;
|
|
const endDate = document.getElementById('end-date').value;
|
|
const isFinished = document.getElementById('series-finished').checked;
|
|
const playlistUrl = document.getElementById('playlist-url').value.trim();
|
|
|
|
if (!startDate) return;
|
|
|
|
const startFormatted = formatDate(startDate);
|
|
const endFormatted = endDate ? formatDate(endDate) : null;
|
|
const finishedClass = isFinished ? ' lp-finished' : '';
|
|
|
|
let wikiLines = [];
|
|
wikiLines.push(`|class="dates"| {{SortKey|${startDate}|${startFormatted}}}`);
|
|
|
|
if (isFinished && endFormatted) {
|
|
wikiLines.push(`|class="dates${finishedClass}"| {{SortKey|${endDate}|${endFormatted}}}`);
|
|
}
|
|
|
|
wikiLines.push(`|class="episodes"| {{nts|${playlistData.videoCount}}} Folgen`);
|
|
wikiLines.push(`|class="length"| ~ {{nts|${playlistData.totalMinutes}}} Minuten`);
|
|
wikiLines.push(`|class="link"| <div align="center">[[Datei:YouTubeIcon.png|link=${playlistUrl}]]</div>`);
|
|
|
|
document.getElementById('wiki-output').value = wikiLines.join('\n');
|
|
}
|
|
|
|
function formatDate(isoDate) {
|
|
// Konvertiere YYYY-MM-DD zu DD.MM.YYYY
|
|
const parts = isoDate.split('-');
|
|
return `${parts[2]}.${parts[1]}.${parts[0]}`;
|
|
}
|
|
|
|
async function copyWikiFormat() {
|
|
const textarea = document.getElementById('wiki-output');
|
|
try {
|
|
await navigator.clipboard.writeText(textarea.value);
|
|
showToast('Wiki-Format kopiert!', 'success');
|
|
} catch (error) {
|
|
showToast('Fehler beim Kopieren!', 'error');
|
|
}
|
|
}
|
|
|
|
function extractPlaylistId(url) {
|
|
const patterns = [
|
|
/[?&]list=([^&#]+)/,
|
|
/playlist\?list=([^&#]+)/
|
|
];
|
|
|
|
for (const pattern of patterns) {
|
|
const match = url.match(pattern);
|
|
if (match && match[1]) return match[1];
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function showToast(message, type = 'success') {
|
|
const toast = document.getElementById('toast');
|
|
toast.className = `toast ${type} visible`;
|
|
toast.textContent = message;
|
|
|
|
setTimeout(() => {
|
|
toast.classList.remove('visible');
|
|
}, 3000);
|
|
}
|
|
|
|
function showApiHelp() {
|
|
// Erstelle Modal-Overlay
|
|
const overlay = document.createElement('div');
|
|
overlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;';
|
|
|
|
// Erstelle Modal-Content
|
|
const modal = document.createElement('div');
|
|
modal.style.cssText = 'background: #282828; padding: 30px; border-radius: 12px; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; color: #e0e0e0; box-shadow: 0 8px 32px rgba(0,0,0,0.5);';
|
|
|
|
modal.innerHTML = `
|
|
<h2 style="margin-top: 0; color: #ff0000; font-size: 24px; margin-bottom: 20px;">📖 YouTube API Key erstellen</h2>
|
|
|
|
<div style="background: #232323; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
|
<h3 style="color: #fff; font-size: 18px; margin-top: 0;">1. Google Cloud Console öffnen</h3>
|
|
<p style="margin: 10px 0;">Gehe zu: <a href="https://console.cloud.google.com/" target="_blank" style="color: #ff0000; text-decoration: none;">https://console.cloud.google.com/</a></p>
|
|
</div>
|
|
|
|
<div style="background: #232323; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
|
<h3 style="color: #fff; font-size: 18px; margin-top: 0;">2. Neues Projekt erstellen</h3>
|
|
<ul style="margin: 10px 0; padding-left: 20px; color: #ccc;">
|
|
<li>Klicke oben auf "Projekt auswählen" → "Neues Projekt"</li>
|
|
<li>Name: z.B. "YouTube Playlist Analyzer"</li>
|
|
<li>Klicke auf "Erstellen"</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="background: #232323; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
|
<h3 style="color: #fff; font-size: 18px; margin-top: 0;">3. YouTube Data API v3 aktivieren</h3>
|
|
<ul style="margin: 10px 0; padding-left: 20px; color: #ccc;">
|
|
<li>Gehe zu "APIs & Dienste" → "Bibliothek"</li>
|
|
<li>Suche nach "YouTube Data API v3"</li>
|
|
<li>Klicke auf "Aktivieren"</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="background: #232323; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
|
<h3 style="color: #fff; font-size: 18px; margin-top: 0;">4. API-Key erstellen</h3>
|
|
<ul style="margin: 10px 0; padding-left: 20px; color: #ccc;">
|
|
<li>Gehe zu "APIs & Dienste" → "Anmeldedaten"</li>
|
|
<li>Klicke auf "+ Anmeldedaten erstellen" → "API-Schlüssel"</li>
|
|
<li>Kopiere den generierten Key</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="background: #232323; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
|
<h3 style="color: #fff; font-size: 18px; margin-top: 0;">5. API-Key einschränken (empfohlen)</h3>
|
|
<ul style="margin: 10px 0; padding-left: 20px; color: #ccc;">
|
|
<li>Klicke auf den erstellten Key</li>
|
|
<li>Bei "API-Einschränkungen": Wähle "Schlüssel einschränken"</li>
|
|
<li>Aktiviere nur "YouTube Data API v3"</li>
|
|
<li>Speichern</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="background: #1a3a1a; border-left: 4px solid #4CAF50; padding: 15px; border-radius: 4px; margin: 20px 0; color: #ccc;">
|
|
<strong style="color: #4CAF50;">💡 Hinweis:</strong> Die YouTube API hat ein kostenloses Kontingent von 10.000 Einheiten/Tag.
|
|
Eine Playlist-Abfrage kostet ca. 1-3 Einheiten pro 50 Videos.
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 25px;">
|
|
<button onclick="this.closest('[style*=\\'position: fixed\\']').remove()" style="padding: 12px 30px; background: #ff0000; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 500;">
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
overlay.appendChild(modal);
|
|
document.body.appendChild(overlay);
|
|
|
|
// Schließe Modal bei Klick auf Overlay
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) {
|
|
overlay.remove();
|
|
}
|
|
});
|
|
|
|
// ESC-Taste zum Schließen
|
|
const escHandler = (e) => {
|
|
if (e.key === 'Escape') {
|
|
overlay.remove();
|
|
document.removeEventListener('keydown', escHandler);
|
|
}
|
|
};
|
|
document.addEventListener('keydown', escHandler);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|