Spaces:

Marv12
/

ppp

Running

App Files Files Community

Marv12 commited on May 8, 2025

Commit

2066d27

verified ·

1 Parent(s): 015ad67

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +160 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ppp
-emoji: 🐨
-colorFrom: yellow
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ppp
+emoji: 🐳
+colorFrom: gray
 colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,160 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Effect Templates</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: #000;
+            color: white;
+            -webkit-tap-highlight-color: transparent;
+        }
+        .card {
+            position: relative;
+            overflow: hidden;
+            transition: transform 150ms ease-out;
+            aspect-ratio: 1.8;
+        }
+        .card:hover {
+            transform: scale(1.03);
+        }
+        .card::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 30%;
+            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
+        }
+        .thumbnail {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.3s ease;
+        }
+        .scroll-container:hover .thumbnail {
+            transform: translateY(calc(var(--scroll-pos) * -0.1px));
+        }
+        .badge-top-choice {
+            background-color: rgba(255,255,255,0.3);
+            backdrop-filter: blur(4px);
+        }
+        .badge-new {
+            border: 1px solid rgba(255,255,255,0.7);
+        }
+    </style>
+</head>
+<body class="min-h-screen p-4">
+    <div class="scroll-container">
+        <div class="grid grid-cols-2 gap-4">
+            <!-- Card 1 -->
+            <div class="card rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.2)]">
+                <img src="https://images.unsplash.com/photo-1604537466158-719b1972feb8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
+                     alt="Thunder God effect" class="thumbnail">
+                <span class="absolute top-2 right-2 badge-new rounded px-2 py-1 text-xs font-medium flex items-center gap-1">
+                    <i class="fas fa-star text-xs"></i>
+                    New
+                </span>
+                <span class="absolute bottom-2 left-2 font-bold text-sm z-10">Thunder God</span>
+            </div>
+            <!-- Card 2 -->
+            <div class="card rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.2)]">
+                <img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
+                     alt="FPV Drone effect" class="thumbnail">
+                <span class="absolute top-2 left-1/2 transform -translate-x-1/2 badge-top-choice rounded-full px-3 py-1 text-xs font-medium">
+                    Top Choice
+                </span>
+                <span class="absolute bottom-2 left-2 font-bold text-sm z-10">FPV Drone</span>
+            </div>
+            <!-- Card 3 -->
+            <div class="card rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.2)]">
+                <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
+                     alt="Time Warp effect" class="thumbnail">
+                <span class="absolute bottom-2 left-2 font-bold text-sm z-10">Time Warp</span>
+            </div>
+            <!-- Card 4 -->
+            <div class="card rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.2)]">
+                <img src="https://images.unsplash.com/photo-1518709268805-4e9042af9f23?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
+                     alt="Neon Dreams effect" class="thumbnail">
+                <span class="absolute top-2 right-2 badge-new rounded px-2 py-1 text-xs font-medium flex items-center gap-1">
+                    <i class="fas fa-star text-xs"></i>
+                    New
+                </span>
+                <span class="absolute bottom-2 left-2 font-bold text-sm z-10">Neon Dreams</span>
+            </div>
+            <!-- Card 5 -->
+            <div class="card rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.2)]">
+                <img src="https://images.unsplash.com/photo-1518562180175-0c0b7f070809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
+                     alt="Cyberpunk effect" class="thumbnail">
+                <span class="absolute top-2 left-1/2 transform -translate-x-1/2 badge-top-choice rounded-full px-3 py-1 text-xs font-medium">
+                    Collection
+                </span>
+                <span class="absolute bottom-2 left-2 font-bold text-sm z-10">Cyberpunk</span>
+            </div>
+            <!-- Card 6 -->
+            <div class="card rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.2)]">
+                <img src="https://images.unsplash.com/photo-1505142468610-359eebb587d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
+                     alt="Glitch effect" class="thumbnail">
+                <span class="absolute top-2 right-2 badge-top-choice rounded px-2 py-1 text-xs font-medium flex items-center gap-1">
+                    <i class="fas fa-layer-group text-xs"></i>
+                    Mixed
+                </span>
+                <span class="absolute bottom-2 left-2 font-bold text-sm z-10">Glitch</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Simple parallax effect on scroll
+        const scrollContainer = document.querySelector('.scroll-container');
+        let lastScrollPosition = 0;
+        scrollContainer.addEventListener('scroll', () => {
+            const currentScroll = scrollContainer.scrollTop;
+            lastScrollPosition = currentScroll;
+            // Update CSS variable for parallax effect
+            document.documentElement.style.setProperty('--scroll-pos', currentScroll);
+            // Apply to all thumbnails
+            const thumbnails = document.querySelectorAll('.thumbnail');
+            thumbnails.forEach(thumb => {
+                thumb.style.transform = `translateY(${currentScroll * -0.1}px)`;
+            });
+        });
+        // Card click effect
+        const cards = document.querySelectorAll('.card');
+        cards.forEach(card => {
+            card.addEventListener('click', function() {
+                // Scale animation
+                this.style.transform = 'scale(0.98)';
+                setTimeout(() => {
+                    this.style.transform = 'scale(1.03)';
+                    // In a real app, you would navigate to the detail view here
+                    console.log('Navigating to detail view for:', this.querySelector('span:last-child').textContent);
+                }, 150);
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Marv12/ppp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Here’s a fully-structured description you can drop straight into an AI prompt to recreate this UI/UX. Feel free to tweak any values to suit your exact needs: --- Prompt > Create a dark-mode mobile app screen for browsing short-video effect templates. The overall layout is a two-column, scrollable grid of “cards,” each showcasing a thumbnail, label text, and optional badge. Screen background Solid pure black (#000000) No visible borders or chrome Grid layout Two columns, equal width, 16 px gutter between cards horizontally and vertically Content inset 16 px from left/right edges Vertical scroll, cards flow top-to-bottom Card container Aspect ratio roughly 1.8 : 1 (wider than tall) Rounded corners radius 12 px Background: full-bleed thumbnail image, clipped to rounded corners Overlay: subtle black gradient at bottom 30% to ensure text readability No explicit border; cast a soft drop shadow (black at 20% opacity, offset 0 × 2 px, blur 4 px) Thumbnail images High-contrast, cinematic stills or 3D renders that illustrate the effect name (e.g. “Thunder God”: lightning and a person; “FPV Drone”: aerial shot of pagoda) Cropped to fill the card, maintain focal point in center Label text Positioned at bottom-left corner, on top of the gradient Font: Sans-serif (e.g. “SF Pro Display” or “Roboto”) Weight: bold (700) Size: 14 px Color: pure white (#FFFFFF) Text shadow: none (rely on the gradient) Badges & Tags Some cards carry a small badge anchored top-center or top-right: “Top Choice”: rounded pill, background semi-opaque white at 30% (rgba(255,255,255,0.3)), border radius 10 px, horizontal padding 8 px, vertical padding 4 px, font size 10 px, weight medium (500), text color white. “New”: white outline star icon + text, white stroke at 70% opacity, no fill, 1 px border, radius 6 px, padding 4 px 6 px, font size 10 px. “Mixed”, “Collection”: small semi-opaque label with icon placeholders, same style as “Top Choice” but different text. Badges sit 8 px from top edge, centered horizontally (or 8 px from right edge for right-aligned badges). Spacing & Alignment Each card’s internal padding only comes from the overlay gradient—no extra padding around thumbnail. Label text has 8 px margin from left and bottom edges of the card. Badge has 8 px margin from top edge, and 8 px margin from side where it’s anchored. Typography & Icons All text in white. Icons (star, collection, mixed) are line icons in white, 12 × 12 px, aligned vertically with text. Interactions & Motion On tap: card scales up to 1.03× with a 150 ms ease-out, then navigates to detail view. On scroll: gentle parallax on thumbnails (they move 10% slower than scrolling). Accessibility Ensure minimum 4.5:1 contrast between text and background (gradient should guarantee this). Touch targets: at least 44 × 44 px tappable area (the whole card). --- Example JSON-Style Spec { "screen": { "mode": "dark", "background": "#000000" }, "layout": { "type": "grid", "columns": 2, "gap": 16, "padding": 16 }, "card": { "aspectRatio": 1.8, "borderRadius": 12, "shadow": { "color": "rgba(0,0,0,0.2)", "offset": [0,2], "blur": 4 }, "thumbnail": { "fillMode": "cover", "gradientOverlay": { "type": "linear", "direction": "vertical", "from": "transparent", "to": "rgba(0,0,0,0.6)", "height": "30%" } }, "label": { "position": ["bottom", "left"], "font": { "family": "Sans-serif", "weight": 700, "size": 14, "color": "#FFFFFF" }, "margin": [0,0,8,8] }, "badge": { "types": { "topChoice": { "background": "rgba(255,255,255,0.3)", "radius": 10, "padding": [4,8], "fontSize": 10, "fontWeight": 500, "textColor": "#FFFFFF" }, "new": { "border": "1px solid rgba(255,255,255,0.7)", "icon": "star", "radius": 6, "padding": [4,6], "fontSize": 10, "textColor": "#FFFFFF" } /* other badges… */ }, "marginTop": 8, "marginSides": 8 }, "interaction": { "tap": { "scale": 1.03, "durationMs": 150, "easing": "ease-out" }, "scrollParallax": 0.1 }, "accessibility": { "minContrast": 4.5, "touchTarget": [44,44] } } } --- Paste that into your favorite AI-UI generator (like Figma-to-code or a design-assistant), and it’ll spin up an exact match of the grid shown in your screenshot.