Hugging Face's logo

Spaces:
Marv12
/
ppp
Running

App Files Community
ppp
File size: 8,009 Bytes 
2066d27
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
<!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>