Синхронизация
This commit is contained in:
kromskii2 committed
1 parent
5432bc6bb0
commit
b7d803c5aa
4 files changed
+425
No files matched your search
+72
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Femboy Cinema Vibes</title>
|
||||
<meta name="description" content="Beautiful Video Player" />
|
||||
<link rel="stylesheet" href="/src/styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Decorative elements -->
|
||||
<div class="decoration-circle top-left"></div>
|
||||
<div class="decoration-circle bottom-right"></div>
|
||||
<div class="decoration-circle mid-left"></div>
|
||||
<div class="decoration-circle mid-right"></div>
|
||||
|
||||
<!-- Hearts decoration -->
|
||||
<div class="heart top-heart">♥</div>
|
||||
<div class="heart bottom-heart">♥</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="header">
|
||||
<span class="badge">Video Player</span>
|
||||
<h1>Elegant Video Experience</h1>
|
||||
<p>Enjoy your favorite content with our beautiful and intuitive video player</p>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<div class="video-frame">
|
||||
<video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
<div class="video-controls">
|
||||
<div class="progress-container">
|
||||
<input type="range" class="progress-bar" value="0" min="0" max="100">
|
||||
</div>
|
||||
|
||||
<div class="controls-main">
|
||||
<div class="left-controls">
|
||||
<button id="playPauseBtn" class="control-btn">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
|
||||
<div class="volume-container">
|
||||
<button id="muteBtn" class="control-btn">
|
||||
<i class="fas fa-volume-up"></i>
|
||||
</button>
|
||||
<input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-controls">
|
||||
<button id="fullscreenBtn" class="control-btn">
|
||||
<i class="fas fa-expand"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span class="made-with">Made with ♥ for you</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "fem_player",
|
||||
"version": "1.0.0",
|
||||
"description": "��#\u0000 \u0000F\u0000e\u0000m\u0000_\u0000p\u0000l\u0000a\u0000y\u0000e\u0000r\u0000\r\u0000 \u0000",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const video = document.getElementById('video');
|
||||
const playPauseBtn = document.getElementById('playPauseBtn');
|
||||
const muteBtn = document.getElementById('muteBtn');
|
||||
const fullscreenBtn = document.getElementById('fullscreenBtn');
|
||||
const progressBar = document.querySelector('.progress-bar');
|
||||
const volumeSlider = document.querySelector('.volume-slider');
|
||||
const videoContainer = document.querySelector('.video-frame');
|
||||
|
||||
// Play/Pause
|
||||
function togglePlay() {
|
||||
if (video.paused) {
|
||||
video.play();
|
||||
playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
|
||||
} else {
|
||||
video.pause();
|
||||
playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
|
||||
}
|
||||
}
|
||||
|
||||
// Update progress bar
|
||||
function updateProgress() {
|
||||
const progress = (video.currentTime / video.duration) * 100;
|
||||
progressBar.value = progress;
|
||||
}
|
||||
|
||||
// Set video time based on progress bar
|
||||
function setVideoProgress() {
|
||||
video.currentTime = (progressBar.value * video.duration) / 100;
|
||||
}
|
||||
|
||||
// Volume controls
|
||||
function updateVolume() {
|
||||
video.volume = volumeSlider.value;
|
||||
updateVolumeIcon();
|
||||
}
|
||||
|
||||
function toggleMute() {
|
||||
video.muted = !video.muted;
|
||||
updateVolumeIcon();
|
||||
}
|
||||
|
||||
function updateVolumeIcon() {
|
||||
const icon = muteBtn.querySelector('i');
|
||||
if (video.muted || video.volume === 0) {
|
||||
icon.className = 'fas fa-volume-mute';
|
||||
volumeSlider.value = 0;
|
||||
} else {
|
||||
icon.className = 'fas fa-volume-up';
|
||||
volumeSlider.value = video.volume;
|
||||
}
|
||||
}
|
||||
|
||||
// Fullscreen
|
||||
function toggleFullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
videoContainer.requestFullscreen();
|
||||
fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
playPauseBtn.addEventListener('click', togglePlay);
|
||||
video.addEventListener('click', togglePlay);
|
||||
video.addEventListener('timeupdate', updateProgress);
|
||||
progressBar.addEventListener('change', setVideoProgress);
|
||||
muteBtn.addEventListener('click', toggleMute);
|
||||
volumeSlider.addEventListener('input', updateVolume);
|
||||
fullscreenBtn.addEventListener('click', toggleFullscreen);
|
||||
|
||||
// Keyboard controls
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.code === 'Space') {
|
||||
e.preventDefault();
|
||||
togglePlay();
|
||||
}
|
||||
});
|
||||
|
||||
// Log ready state
|
||||
console.log('Video player initialized');
|
||||
});
|
||||
+258
@@ -0,0 +1,258 @@
|
||||
:root {
|
||||
--primary: hsl(320, 80%, 80%);
|
||||
--primary-foreground: hsl(320, 10%, 20%);
|
||||
--background: linear-gradient(to bottom right, #ffd1dc, #e6e6fa, #add8e6);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
min-height: 100vh;
|
||||
background: var(--background);
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
width: 100%;
|
||||
max-width: 64rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Decorative elements */
|
||||
.decoration-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
}
|
||||
|
||||
.top-left {
|
||||
top: -5rem;
|
||||
left: -5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background: rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
bottom: -5rem;
|
||||
right: -5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background: rgba(230, 230, 250, 0.3);
|
||||
}
|
||||
|
||||
.mid-left {
|
||||
top: 50%;
|
||||
left: -8rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
background: rgba(173, 216, 230, 0.3);
|
||||
}
|
||||
|
||||
.mid-right {
|
||||
top: 50%;
|
||||
right: -8rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
background: rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
font-size: 2.5rem;
|
||||
color: rgba(255, 182, 193, 0.8);
|
||||
}
|
||||
|
||||
.top-heart {
|
||||
top: -2.5rem;
|
||||
right: 2.5rem;
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
|
||||
.bottom-heart {
|
||||
bottom: -2.5rem;
|
||||
left: 2.5rem;
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 1rem;
|
||||
background: rgba(255, 182, 193, 0.2);
|
||||
color: var(--primary-foreground);
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding: 0.75rem;
|
||||
background: linear-gradient(to right, #ffd1dc, #e6e6fa, #add8e6);
|
||||
border-radius: 2.5rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.video-frame {
|
||||
position: relative;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
.video-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.video-frame:hover .video-controls {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.progress-bar::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.progress-bar::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.controls-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-controls, .right-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.volume-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
width: 6rem;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.volume-slider::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.volume-slider::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.made-with {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user