Синхронизация
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