From 61f3814abedb71bd5efd6e3e16e80d653e12b230 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Sat, 1 Nov 2025 09:51:53 +0000 Subject: [PATCH] 2.1 --- assets/css/custom.css | 136 ++++++++++++++++++++++ assets/js/main.js | 44 ++++++++ index.php | 256 +++++++++++++++++++----------------------- 3 files changed, 294 insertions(+), 142 deletions(-) create mode 100644 assets/css/custom.css create mode 100644 assets/js/main.js diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..6f6eb12 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,136 @@ + +body { + background-color: #121212; + color: #FFFFFF; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + overflow: hidden; + height: 100vh; + width: 100vw; + margin: 0; +} + +.app-container { + height: 100vh; + width: 100%; + max-width: 480px; /* Mobile-first constraint */ + margin: 0 auto; + position: relative; + overflow: hidden; + border-left: 1px solid #1F1F1F; + border-right: 1px solid #1F1F1F; +} + +.video-feed { + height: 100%; + width: 100%; + scroll-snap-type: y mandatory; + overflow-y: scroll; + overflow-x: hidden; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.video-feed::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ +} + +.video-slide { + height: 100%; + width: 100%; + scroll-snap-align: start; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.video-slide video { + width: 100%; + height: 100%; + object-fit: cover; +} + +.video-overlay { + position: absolute; + bottom: 70px; /* Above bottom nav */ + left: 0; + width: 100%; + padding: 16px; + background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)); + color: #fff; +} + +.video-overlay .username { + font-weight: 700; + font-size: 1rem; +} + +.video-overlay .caption { + font-size: 0.9rem; + margin-top: 4px; +} + +.video-actions { + position: absolute; + bottom: 90px; + right: 10px; + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +.video-actions .action-btn { + display: flex; + flex-direction: column; + align-items: center; + color: #fff; + text-decoration: none; + font-size: 0.8rem; +} + +.video-actions .action-btn i { + font-size: 2rem; +} + +.video-actions .action-btn .bi-heart-fill { + color: #FF3B6C; +} + +.bottom-nav { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 60px; + background-color: #000000; + border-top: 1px solid #1F1F1F; + display: flex; + justify-content: space-around; + align-items: center; +} + +.bottom-nav .nav-item { + color: #fff; + text-decoration: none; + display: flex; + flex-direction: column; + align-items: center; + font-size: 0.7rem; + opacity: 0.7; +} + +.bottom-nav .nav-item.active { + opacity: 1; + font-weight: 600; +} + +.bottom-nav .nav-item i { + font-size: 1.5rem; + margin-bottom: 2px; +} + +.bottom-nav .upload-btn i { + font-size: 2.2rem; + color: #FF3B6C; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..0ec68d5 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,44 @@ + +document.addEventListener('DOMContentLoaded', () => { + const videos = document.querySelectorAll('.video-slide video'); + + // Toggle play/pause on click + videos.forEach(video => { + video.addEventListener('click', () => { + if (video.paused) { + video.play(); + } else { + video.pause(); + } + }); + }); + + // Observer to play/pause videos when they enter/leave the viewport + const observerOptions = { + root: document.querySelector('.video-feed'), + rootMargin: '0px', + threshold: 0.8 // Trigger when 80% of the video is visible + }; + + const videoObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + const video = entry.target; + if (entry.isIntersecting) { + // Use a promise to avoid errors if play() is interrupted + const playPromise = video.play(); + if (playPromise !== undefined) { + playPromise.catch(error => { + // Auto-play was prevented, which is common in some browsers. + // The user can still click to play. + }); + } + } else { + video.pause(); + } + }); + }, observerOptions); + + videos.forEach(video => { + videoObserver.observe(video); + }); +}); diff --git a/index.php b/index.php index 7205f3d..ac6ab47 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,122 @@ "https://media.w3.org/2010/05/sintel/trailer.mp4", + "username" => "@coolcreator", + "caption" => "This is an amazing video! #epic #awesome", + "likes" => "1.2M", + "comments" => "4,521", + "shares" => "2,310" + ], + [ + "video_url" => "https://www.w3schools.com/html/mov_bbb.mp4", + "username" => "@anotherstar", + "caption" => "Just having fun with this app!", + "likes" => "892K", + "comments" => "1,123", + "shares" => "987" + ], + [ + "video_url" => "https://media.w3.org/2010/05/bunny/movie.mp4", + "username" => "@bunnylover", + "caption" => "Check out this cute bunny! ❤️ #cute #animals", + "likes" => "2.5M", + "comments" => "10.1K", + "shares" => "5,432" + ] +]; ?> - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + + Kannadigas + + + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+ +
+ +
+ + +
+
+
+
+ +
+ + + + + + + + + + + + +
+
+ +
+ + +
+ + + Home + + + + Discover + + + + + + + Inbox + + + + Profile + +
-
- + + + + + - + \ No newline at end of file