feat: new shadcn-style ui, code cleanup and better reliability
This commit is contained in:
parent
4027e37f26
commit
77b597e5d8
6 changed files with 1953 additions and 750 deletions
|
|
@ -1,180 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Repiped</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Repiped</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
||||
<link rel="stylesheet" href="plyr.min.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-content">
|
||||
<div class="logo" id="logo">
|
||||
<i class="fas fa-play logo-icon"></i>
|
||||
<h1>Repiped</h1>
|
||||
</div>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo" id="logo">
|
||||
<i class="fas fa-play logo-icon"></i>
|
||||
<h1>Repiped</h1>
|
||||
</div>
|
||||
<div class="search-bar">
|
||||
<input type="text" class="search-input" id="search-input" placeholder="Search for videos..." />
|
||||
<button class="search-button" id="search-button">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
<a href="https://git.eplg.services/obvtiger/repiped" target="_blank" class="github-button" title="View source code">
|
||||
<i class="fas fa-code-branch"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="page active" id="trending-page">
|
||||
<div id="trending-content">
|
||||
<div class="loading-container" id="trending-loader">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<div class="trending-grid" id="trending-grid" style="display: none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page" id="search-results-page">
|
||||
<div class="search-heading">
|
||||
<h2 class="search-query" id="search-query">Search Results</h2>
|
||||
<span class="search-count" id="search-count">0 results</span>
|
||||
</div>
|
||||
<div id="search-content">
|
||||
<div class="loading-container" id="search-loader">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<div class="search-grid" id="search-grid" style="display: none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page" id="channel-page">
|
||||
<div class="channel-header">
|
||||
<div class="channel-banner-container">
|
||||
<img class="channel-banner" id="channel-banner" src="" alt="Channel banner" />
|
||||
</div>
|
||||
<div class="channel-info">
|
||||
<div class="channel-avatar-container">
|
||||
<img class="channel-avatar" id="channel-avatar" src="" alt="Channel avatar" />
|
||||
</div>
|
||||
<div class="channel-details">
|
||||
<div class="channel-title-container">
|
||||
<h1 class="channel-title" id="channel-title"></h1>
|
||||
<span class="channel-verified" id="channel-verified" style="display: none"><i
|
||||
class="fas fa-check-circle"></i></span>
|
||||
</div>
|
||||
<div class="channel-stats">
|
||||
<span class="channel-subs" id="channel-subs"></span>
|
||||
</div>
|
||||
<div class="channel-description" id="channel-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="channel-content">
|
||||
<div class="loading-container" id="channel-loader">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<div class="channel-videos-grid" id="channel-videos-grid" style="display: none"></div>
|
||||
<div class="load-more-container" id="channel-load-more" style="display: none">
|
||||
<div class="loader" id="channel-load-more-spinner" style="display: none"></div>
|
||||
<button class="load-more-button" id="channel-load-more-button">
|
||||
Load More
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page" id="video-player-page">
|
||||
<div class="video-player-container">
|
||||
<div class="player-wrapper" id="player-wrapper">
|
||||
<div id="preparation-overlay" class="preparation-overlay">
|
||||
<div class="preparation-status" id="preparation-status">
|
||||
Preparing video...
|
||||
</div>
|
||||
<div class="preparation-progress-container">
|
||||
<div class="preparation-progress-bar" id="preparation-progress-bar"></div>
|
||||
</div>
|
||||
<button class="reload-button" id="reload-button" style="display: none">
|
||||
Reload Page
|
||||
<div class="search-container">
|
||||
<div class="search-form">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
id="search-input"
|
||||
placeholder="Search for videos..."
|
||||
/>
|
||||
<button class="search-button" id="search-button">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-detail">
|
||||
<h1 class="video-detail-title" id="detail-title"></h1>
|
||||
<div class="video-detail-meta">
|
||||
<div class="video-detail-uploader">
|
||||
<img class="uploader-avatar-large" id="detail-avatar" src="" alt="Uploader avatar" />
|
||||
<div class="uploader-info">
|
||||
<span class="uploader-name" id="detail-uploader"></span>
|
||||
<span class="uploaded-date" id="detail-uploaded"></span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://git.eplg.services/obvtiger/repiped"
|
||||
target="_blank"
|
||||
class="github-button"
|
||||
title="View source code"
|
||||
>
|
||||
<i class="fas fa-code-branch"></i>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="page active" id="trending-page">
|
||||
<div id="trending-content">
|
||||
<div class="loading-container" id="trending-loader">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<div
|
||||
class="trending-grid"
|
||||
id="trending-grid"
|
||||
style="display: none"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page" id="search-results-page">
|
||||
<div class="search-heading">
|
||||
<h2 class="search-query" id="search-query">Search Results</h2>
|
||||
<span class="search-count" id="search-count">0 results</span>
|
||||
</div>
|
||||
<div id="search-content">
|
||||
<div class="loading-container" id="search-loader">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<div class="search-grid" id="search-grid" style="display: none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page" id="channel-page">
|
||||
<div class="channel-header">
|
||||
<div class="channel-banner-container">
|
||||
<img
|
||||
class="channel-banner"
|
||||
id="channel-banner"
|
||||
src=""
|
||||
alt="Channel banner"
|
||||
/>
|
||||
</div>
|
||||
<div class="channel-info">
|
||||
<div class="channel-avatar-container">
|
||||
<img
|
||||
class="channel-avatar"
|
||||
id="channel-avatar"
|
||||
src=""
|
||||
alt="Channel avatar"
|
||||
/>
|
||||
</div>
|
||||
<div class="video-detail-stats">
|
||||
<div class="detail-stat">
|
||||
<div class="channel-details">
|
||||
<div class="channel-title-container">
|
||||
<h1 class="channel-title" id="channel-title"></h1>
|
||||
<span
|
||||
class="channel-verified"
|
||||
id="channel-verified"
|
||||
style="display: none"
|
||||
>
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="channel-stats">
|
||||
<span class="channel-subs" id="channel-subs"></span>
|
||||
</div>
|
||||
<div class="channel-description" id="channel-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="channel-content">
|
||||
<div class="loading-container" id="channel-loader">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<div
|
||||
class="channel-videos-grid"
|
||||
id="channel-videos-grid"
|
||||
style="display: none"
|
||||
></div>
|
||||
<div
|
||||
class="load-more-container"
|
||||
id="channel-load-more"
|
||||
style="display: none"
|
||||
>
|
||||
<div
|
||||
class="loader"
|
||||
id="channel-load-more-spinner"
|
||||
style="display: none"
|
||||
></div>
|
||||
<button class="load-more-button" id="channel-load-more-button">
|
||||
Load More Videos
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="video-card-template">
|
||||
<div class="video-card animated-item">
|
||||
<div class="thumbnail-container">
|
||||
<img class="thumbnail" src="" alt="Video thumbnail" />
|
||||
<span class="duration"></span>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h3 class="video-title"></h3>
|
||||
<div class="video-meta">
|
||||
<div class="uploader">
|
||||
<img class="uploader-avatar" src="" alt="Uploader avatar" />
|
||||
<span class="uploader-name"></span>
|
||||
</div>
|
||||
<div class="video-stats">
|
||||
<span class="stat views">
|
||||
<i class="fas fa-eye"></i>
|
||||
<span id="detail-views"></span>
|
||||
</div>
|
||||
<div class="detail-stat">
|
||||
<span class="view-count"></span>
|
||||
</span>
|
||||
<span class="stat uploaded">
|
||||
<i class="fas fa-clock"></i>
|
||||
<span id="detail-duration"></span>
|
||||
</div>
|
||||
<span class="upload-time"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-description" id="detail-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="related-videos">
|
||||
<h2 class="section-title">Watch More</h2>
|
||||
<div class="related-grid" id="related-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="video-card-template">
|
||||
<div class="video-card animated-item">
|
||||
<div class="thumbnail-container">
|
||||
<img class="thumbnail" src="" alt="Video thumbnail" />
|
||||
<span class="duration"></span>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h3 class="video-title"></h3>
|
||||
<div class="video-meta">
|
||||
<div class="uploader">
|
||||
<img class="uploader-avatar" src="" alt="Uploader avatar" />
|
||||
<span class="uploader-name"></span>
|
||||
</div>
|
||||
<div class="video-stats">
|
||||
<span class="stat views">
|
||||
<i class="fas fa-eye"></i>
|
||||
<span class="view-count"></span>
|
||||
</span>
|
||||
<span class="stat uploaded">
|
||||
<i class="fas fa-clock"></i>
|
||||
<span class="upload-time"></span>
|
||||
</span>
|
||||
</div>
|
||||
<template id="skeleton-template">
|
||||
<div class="video-card animated-item">
|
||||
<div class="skeleton skeleton-video"></div>
|
||||
<div class="video-info">
|
||||
<div class="skeleton skeleton-title"></div>
|
||||
<div class="skeleton skeleton-uploader"></div>
|
||||
<div class="skeleton skeleton-stats"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template id="skeleton-template">
|
||||
<div class="video-card animated-item">
|
||||
<div class="skeleton skeleton-video"></div>
|
||||
<div class="video-info">
|
||||
<div class="skeleton skeleton-title"></div>
|
||||
<div class="skeleton skeleton-uploader"></div>
|
||||
<div class="skeleton skeleton-stats"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="plyr.min.js"></script>
|
||||
<script src="hls.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="trending.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue