Neu: YouTube Playlist Analyzer
This commit is contained in:
Akamaru
@@ -217,6 +217,10 @@
|
|||||||
<h2 class="tool-title">YouTube Thumbnail Viewer</h2>
|
<h2 class="tool-title">YouTube Thumbnail Viewer</h2>
|
||||||
<p class="tool-description">Zeige Thumbnails zu YouTube-Videos an und speicher sie</p>
|
<p class="tool-description">Zeige Thumbnails zu YouTube-Videos an und speicher sie</p>
|
||||||
</a>
|
</a>
|
||||||
|
<a href="https://tools.ponywave.de/yt_playlist" class="tool-bubble">
|
||||||
|
<h2 class="tool-title">YouTube Playlist Analyzer</h2>
|
||||||
|
<p class="tool-description">Analysiere YouTube-Playlists</p>
|
||||||
|
</a>
|
||||||
<a href="https://tools.ponywave.de/flash_dl" class="tool-bubble">
|
<a href="https://tools.ponywave.de/flash_dl" class="tool-bubble">
|
||||||
<h2 class="tool-title">Flash Downloader</h2>
|
<h2 class="tool-title">Flash Downloader</h2>
|
||||||
<p class="tool-description">Downloade Flash-Dateien von Z0R und FUS RO GA</p>
|
<p class="tool-description">Downloade Flash-Dateien von Z0R und FUS RO GA</p>
|
||||||
|
|||||||
55
sitemap.txt
55
sitemap.txt
@@ -1,31 +1,32 @@
|
|||||||
https://tools.ponywave.de/
|
https://tools.ponywave.de/
|
||||||
https://tools.ponywave.de/text_decoder
|
|
||||||
https://tools.ponywave.de/sys_info
|
|
||||||
https://tools.ponywave.de/zeitzonen
|
|
||||||
https://tools.ponywave.de/dsgvo_helper
|
|
||||||
https://tools.ponywave.de/text_cleaner
|
|
||||||
https://tools.ponywave.de/text_sorter
|
|
||||||
https://tools.ponywave.de/yt_thumb
|
|
||||||
https://tools.ponywave.de/flash_dl
|
|
||||||
https://tools.ponywave.de/kemonogen
|
|
||||||
https://tools.ponywave.de/breakout
|
|
||||||
https://tools.ponywave.de/emoji_jump
|
|
||||||
https://tools.ponywave.de/2048
|
https://tools.ponywave.de/2048
|
||||||
https://tools.ponywave.de/solitaire
|
|
||||||
https://tools.ponywave.de/ba_memory
|
|
||||||
https://tools.ponywave.de/cell
|
|
||||||
https://tools.ponywave.de/shape_shifter
|
|
||||||
https://tools.ponywave.de/dogify
|
|
||||||
https://tools.ponywave.de/bohne
|
|
||||||
https://tools.ponywave.de/pinkie_timer
|
|
||||||
https://tools.ponywave.de/depp_gpt
|
|
||||||
https://tools.ponywave.de/emoji
|
|
||||||
https://tools.ponywave.de/banana_run
|
|
||||||
https://tools.ponywave.de/pokemon_quiz
|
|
||||||
https://tools.ponywave.de/gronkh_games
|
|
||||||
https://tools.ponywave.de/url_expander
|
|
||||||
https://tools.ponywave.de/minesweeper
|
|
||||||
https://tools.ponywave.de/anime_graph
|
https://tools.ponywave.de/anime_graph
|
||||||
https://tools.ponywave.de/favorites_viewer
|
https://tools.ponywave.de/ba_memory
|
||||||
https://tools.ponywave.de/chrome_extensions_checker
|
|
||||||
https://tools.ponywave.de/ba_steam
|
https://tools.ponywave.de/ba_steam
|
||||||
|
https://tools.ponywave.de/banana_run
|
||||||
|
https://tools.ponywave.de/bohne
|
||||||
|
https://tools.ponywave.de/breakout
|
||||||
|
https://tools.ponywave.de/cell
|
||||||
|
https://tools.ponywave.de/chrome_extensions_checker
|
||||||
|
https://tools.ponywave.de/depp_gpt
|
||||||
|
https://tools.ponywave.de/dogify
|
||||||
|
https://tools.ponywave.de/dsgvo_helper
|
||||||
|
https://tools.ponywave.de/emoji
|
||||||
|
https://tools.ponywave.de/emoji_jump
|
||||||
|
https://tools.ponywave.de/favorites_viewer
|
||||||
|
https://tools.ponywave.de/flash_dl
|
||||||
|
https://tools.ponywave.de/gronkh_games
|
||||||
|
https://tools.ponywave.de/kemonogen
|
||||||
|
https://tools.ponywave.de/minesweeper
|
||||||
|
https://tools.ponywave.de/pinkie_timer
|
||||||
|
https://tools.ponywave.de/pokemon_quiz
|
||||||
|
https://tools.ponywave.de/shape_shifter
|
||||||
|
https://tools.ponywave.de/solitaire
|
||||||
|
https://tools.ponywave.de/sys_info
|
||||||
|
https://tools.ponywave.de/text_cleaner
|
||||||
|
https://tools.ponywave.de/text_decoder
|
||||||
|
https://tools.ponywave.de/text_sorter
|
||||||
|
https://tools.ponywave.de/url_expander
|
||||||
|
https://tools.ponywave.de/yt_playlist
|
||||||
|
https://tools.ponywave.de/yt_thumb
|
||||||
|
https://tools.ponywave.de/zeitzonen
|
||||||
214
yt_playlist/fetch_playlist.php
Normal file
214
yt_playlist/fetch_playlist.php
Normal file
@@ -0,0 +1,214 @@
|
|||||||
|
<?php
|
||||||
|
// Fehlerberichterstattung für Debugging
|
||||||
|
error_reporting(E_ALL);
|
||||||
|
ini_set('display_errors', 0); // Keine Ausgabe, nur JSON
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
header('Access-Control-Allow-Origin: *');
|
||||||
|
header('Access-Control-Allow-Methods: POST');
|
||||||
|
header('Access-Control-Allow-Headers: Content-Type');
|
||||||
|
|
||||||
|
// Fehlerbehandlung
|
||||||
|
set_error_handler(function($errno, $errstr, $errfile, $errline) {
|
||||||
|
throw new ErrorException($errstr, 0, $errno, $errfile, $errline);
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Nur POST-Anfragen erlauben
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||||
|
http_response_code(405);
|
||||||
|
echo json_encode(['error' => 'Nur POST-Anfragen erlaubt']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lese JSON-Input
|
||||||
|
$rawInput = file_get_contents('php://input');
|
||||||
|
$input = json_decode($rawInput, true);
|
||||||
|
|
||||||
|
if (json_last_error() !== JSON_ERROR_NONE) {
|
||||||
|
throw new Exception('Ungültiges JSON: ' . json_last_error_msg());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isset($input['playlistId']) || !isset($input['apiKey'])) {
|
||||||
|
http_response_code(400);
|
||||||
|
echo json_encode(['error' => 'playlistId und apiKey sind erforderlich']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$playlistId = $input['playlistId'];
|
||||||
|
$apiKey = $input['apiKey'];
|
||||||
|
|
||||||
|
// Validierung
|
||||||
|
if (empty($playlistId) || empty($apiKey)) {
|
||||||
|
http_response_code(400);
|
||||||
|
echo json_encode(['error' => 'playlistId und apiKey dürfen nicht leer sein']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$videos = [];
|
||||||
|
$pageToken = '';
|
||||||
|
$maxResults = 50;
|
||||||
|
$playlistTitle = '';
|
||||||
|
|
||||||
|
// Prüfe ob cURL verfügbar ist
|
||||||
|
if (!function_exists('curl_init')) {
|
||||||
|
throw new Exception('cURL ist nicht verfügbar. Bitte aktiviere die cURL-Extension in PHP.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hole Playlist-Informationen (Titel)
|
||||||
|
$playlistInfoUrl = "https://www.googleapis.com/youtube/v3/playlists?part=snippet&id=" . urlencode($playlistId) . "&key=" . urlencode($apiKey);
|
||||||
|
$playlistInfoResponse = curlRequest($playlistInfoUrl);
|
||||||
|
|
||||||
|
if ($playlistInfoResponse !== false) {
|
||||||
|
$playlistInfoData = json_decode($playlistInfoResponse, true);
|
||||||
|
if (isset($playlistInfoData['items'][0]['snippet']['title'])) {
|
||||||
|
$playlistTitle = $playlistInfoData['items'][0]['snippet']['title'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hole alle Videos der Playlist (paginiert)
|
||||||
|
do {
|
||||||
|
$url = "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&playlistId=" . urlencode($playlistId) . "&maxResults=" . $maxResults . "&pageToken=" . urlencode($pageToken) . "&key=" . urlencode($apiKey);
|
||||||
|
|
||||||
|
$response = curlRequest($url);
|
||||||
|
|
||||||
|
if ($response === false) {
|
||||||
|
throw new Exception('API-Anfrage fehlgeschlagen (Netzwerkfehler)');
|
||||||
|
}
|
||||||
|
|
||||||
|
$data = json_decode($response, true);
|
||||||
|
|
||||||
|
if (json_last_error() !== JSON_ERROR_NONE) {
|
||||||
|
throw new Exception('Ungültige JSON-Antwort von YouTube API');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($data['error'])) {
|
||||||
|
$errorMsg = $data['error']['message'] ?? 'YouTube API Fehler';
|
||||||
|
$errorCode = $data['error']['code'] ?? 'unbekannt';
|
||||||
|
throw new Exception("YouTube API Fehler ($errorCode): $errorMsg");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isset($data['items'])) {
|
||||||
|
throw new Exception('Ungültige API-Antwort: items fehlt');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sammle Video-IDs
|
||||||
|
$videoIds = array_map(function($item) {
|
||||||
|
return $item['contentDetails']['videoId'];
|
||||||
|
}, $data['items']);
|
||||||
|
|
||||||
|
if (empty($videoIds)) {
|
||||||
|
break; // Keine Videos mehr
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hole Video-Details (inkl. Upload-Datum und Dauer)
|
||||||
|
$videoDetailsUrl = "https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails&id=" . implode(',', $videoIds) . "&key=" . urlencode($apiKey);
|
||||||
|
$videoResponse = curlRequest($videoDetailsUrl);
|
||||||
|
|
||||||
|
if ($videoResponse === false) {
|
||||||
|
throw new Exception('Video-Details konnten nicht geladen werden');
|
||||||
|
}
|
||||||
|
|
||||||
|
$videoData = json_decode($videoResponse, true);
|
||||||
|
|
||||||
|
if (json_last_error() !== JSON_ERROR_NONE) {
|
||||||
|
throw new Exception('Ungültige JSON-Antwort bei Video-Details');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($videoData['error'])) {
|
||||||
|
$errorMsg = $videoData['error']['message'] ?? 'YouTube API Fehler';
|
||||||
|
throw new Exception("YouTube API Fehler bei Video-Details: $errorMsg");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extrahiere Upload-Daten und Dauer
|
||||||
|
if (isset($videoData['items'])) {
|
||||||
|
foreach ($videoData['items'] as $video) {
|
||||||
|
$videos[] = [
|
||||||
|
'publishedAt' => $video['snippet']['publishedAt'] ?? null,
|
||||||
|
'duration' => $video['contentDetails']['duration'] ?? null
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$pageToken = $data['nextPageToken'] ?? '';
|
||||||
|
} while ($pageToken);
|
||||||
|
|
||||||
|
// Berechne Gesamtdauer
|
||||||
|
$totalMinutes = 0;
|
||||||
|
foreach ($videos as $video) {
|
||||||
|
if ($video['duration']) {
|
||||||
|
$totalMinutes += parseDuration($video['duration']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Finde ältestes und neuestes Datum
|
||||||
|
$dates = array_filter(array_map(function($video) {
|
||||||
|
return $video['publishedAt'];
|
||||||
|
}, $videos));
|
||||||
|
|
||||||
|
sort($dates);
|
||||||
|
|
||||||
|
$oldestDate = count($dates) > 0 ? substr($dates[0], 0, 10) : null;
|
||||||
|
$newestDate = count($dates) > 0 ? substr($dates[count($dates) - 1], 0, 10) : null;
|
||||||
|
|
||||||
|
// Sende Ergebnis
|
||||||
|
echo json_encode([
|
||||||
|
'playlistTitle' => $playlistTitle,
|
||||||
|
'videoCount' => count($videos),
|
||||||
|
'totalMinutes' => $totalMinutes,
|
||||||
|
'oldestDate' => $oldestDate,
|
||||||
|
'newestDate' => $newestDate
|
||||||
|
]);
|
||||||
|
|
||||||
|
} catch (Exception $e) {
|
||||||
|
http_response_code(500);
|
||||||
|
echo json_encode([
|
||||||
|
'error' => $e->getMessage(),
|
||||||
|
'file' => basename($e->getFile()),
|
||||||
|
'line' => $e->getLine()
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Macht HTTP-Anfrage mit cURL
|
||||||
|
*/
|
||||||
|
function curlRequest($url) {
|
||||||
|
$ch = curl_init();
|
||||||
|
|
||||||
|
curl_setopt($ch, CURLOPT_URL, $url);
|
||||||
|
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||||||
|
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
|
||||||
|
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
|
||||||
|
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
|
||||||
|
curl_setopt($ch, CURLOPT_USERAGENT, 'YouTube Playlist Analyzer/1.0');
|
||||||
|
|
||||||
|
$response = curl_exec($ch);
|
||||||
|
$error = curl_error($ch);
|
||||||
|
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||||
|
|
||||||
|
curl_close($ch);
|
||||||
|
|
||||||
|
if ($response === false) {
|
||||||
|
throw new Exception('cURL-Fehler: ' . $error);
|
||||||
|
}
|
||||||
|
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Konvertiert ISO 8601 Duration in Minuten
|
||||||
|
* Format: PT#H#M#S
|
||||||
|
*/
|
||||||
|
function parseDuration($duration) {
|
||||||
|
preg_match('/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/', $duration, $matches);
|
||||||
|
|
||||||
|
$hours = isset($matches[1]) ? (int)$matches[1] : 0;
|
||||||
|
$minutes = isset($matches[2]) ? (int)$matches[2] : 0;
|
||||||
|
$seconds = isset($matches[3]) ? (int)$matches[3] : 0;
|
||||||
|
|
||||||
|
// Auf volle Minuten aufrunden
|
||||||
|
$totalMinutes = $hours * 60 + $minutes + ceil($seconds / 60);
|
||||||
|
|
||||||
|
return $totalMinutes;
|
||||||
|
}
|
||||||
|
?>
|
||||||
822
yt_playlist/index.html
Normal file
822
yt_playlist/index.html
Normal file
@@ -0,0 +1,822 @@
|
|||||||
|
<!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>
|
||||||
Reference in New Issue
Block a user