From b7d803c5aa2d3bb5650c09332c411bbd7d267a0a Mon Sep 17 00:00:00 2001
From: kromskii2 <146603192+kromskii2@users.noreply.github.com>
Date: Sun, 5 Jan 2025 11:45:47 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B8=D0=BD=D1=85=D1=80=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html     |  72 ++++++++++++++
 package.json   |  11 +++
 src/main.js    |  84 ++++++++++++++++
 src/styles.css | 258 +++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 425 insertions(+)
 create mode 100644 index.html
 create mode 100644 package.json
 create mode 100644 src/main.js
 create mode 100644 src/styles.css

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9b6b317
--- /dev/null
+++ b/index.html
@@ -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>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d57a3aa
--- /dev/null
+++ b/package.json
@@ -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"
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..22ed758
--- /dev/null
+++ b/src/main.js
@@ -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');
+  });
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..59fa8e7
--- /dev/null
+++ b/src/styles.css
@@ -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);
+    }
+  }
\ No newline at end of file