Hugging Face's logo

Spaces:
SafidRahman
/
waxir-spicy-green-flicks
Running

App Files Community
SafidRahman commited on
Commit
2d4a098
·
verified ·
1 Parent(s): 98a510b

Make full functional and useable user will allow to upload videos,like and coment video etc

Browse files

I want to build short reels porn site my porn site name will Waxir the website should full direct functional write me full site coding

Here is a foundational structure for a short reels video site named "Waxir." This will provide you with the basic building blocks for both the frontend (what users see) and a simple backend (how the site processes data).

Building a complete, fully functional website with all features (user accounts, uploads, search, categories, video streaming optimization, moderation, etc.) requires extensive development and robust infrastructure. The code below is a starting point, demonstrating core concepts.

We'll use:
* **HTML, CSS, JavaScript** for the frontend.
* **Python with Flask** for a simple backend API.
* **SQLite** for a basic database (suitable for development, for production you might use PostgreSQL or MySQL).

---

### **1. Frontend (HTML, CSS, JavaScript)**

Create a folder named `frontend`. Inside, create `index.html`, `style.css`, and `script.js`.

**`frontend/index.html`**



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waxir - Short Reels</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Waxir</h1>
<nav>
<a href="#">Home</a>
<a href="#">Categories</a>
<a href="#">Upload (Coming Soon)</a>
<input type="text" id="searchBar" placeholder="Search reels...">
<button onclick="searchReels()">Search</button>
</nav>
</header>

<main id="reelGrid">
<!-- Reels will be loaded here by JavaScript -->
</main>

<footer>
<p>© 2023 Waxir. All rights reserved.</p>
</footer>

<script src="script.js"></script>
</body>
</html>


**`frontend/style.css`**



body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #1a1a1a;
color: #f0f0f0;
}

header {
background-color: #333;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #ff0055;
}

header h1 {
color: #ff0055;
margin: 0;
font-size: 2.5em;
}

header nav a {
color: #f0f0f0;
text-decoration: none;
margin-left: 20px;
font-weight: bold;
}

header nav a:hover {
color: #ff0055;
}

#searchBar {
padding: 8px;
border: none;
border-radius: 5px;
margin-left: 30px;
width: 200px;
}

header nav button {
background-color: #ff0055;
color: white;
border: none;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
margin-left: 5px;
}

header nav button:hover {
background-color: #cc0044;
}

#reelGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 20px auto;
}

.reel-card {
background-color: #2a2a2a;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
transition: transform 0.2s;
}

.reel-card:hover {
transform: translateY(-5px);
}

.reel-card video {
width: 100%;
height: 350px; /* Standard short reel height */
display: block;
object-fit: cover;
background-color: black;
}

.reel-info {
padding: 15px;
}

.reel-info h3 {
margin-top: 0;
color: #f0f0f0;
font-size: 1.2em;
}

.reel-info p {
color: #aaa;
font-size: 0.9em;
}

footer {
background-color: #333;
color: #aaa;
text-align: center;
padding: 20px;
position: relative;
bottom: 0;
width: 100%;
margin-top: 40px;
border-top: 2px solid #ff0055;
}


**`frontend/script.js`**



document.addEventListener('DOMContentLoaded', fetchReels);

async function fetchReels() {
try {
const response = await fetch('http://127.0.0.1:5000/reels'); // Pointing to your Flask backend
const reels = await response.json();
displayReels(reels);
} catch (error) {
console.error('Error fetching reels:', error);
document.getElementById('reelGrid').innerHTML = '<p>Failed to load reels. Please try again later.</p>';
}
}

function displayReels(reels) {
const reelGrid = document.getElementById('reelGrid');
reelGrid.innerHTML = ''; // Clear existing reels

if (reels.length === 0) {
reelGrid.innerHTML = '<p>No reels found.</p>';
return;
}

reels.forEach(reel => {
const reelCard = document.createElement('div');
reelCard.classList.add('reel-card');

reelCard.innerHTML = `
<video controls preload="metadata" poster="${reel.thumbnail_url || 'https://via.placeholder.com/300x350.png?text=Loading'}">
<source src="${reel.video_url}" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="reel-info">
<h3>${reel.title}</h3>
<p>Views: ${reel.views}</p>
</div>
`;
reelGrid.appendChild(reelCard);
});
}

function searchReels() {
const searchTerm = document.getElementById('searchBar').value;
// Implement search logic here, e.g., filter existing reels or make a new API call
console.log('Searching for:', searchTerm);
// For now, let's just re-fetch all reels if search bar is empty, otherwise alert
if (searchTerm === '') {
fetchReels();
} else {
alert('Search functionality not fully implemented yet for frontend. Showing all reels.');
// In a real app, you'd call an API like `/reels?q=${searchTerm}`
}
}

**Important Note on Video URLs:** The `script.js` expects `reel.video_url` and `reel.thumbnail_url` to be accessible. For local development, you'd place your video files (e.g., `video1.mp4`, `thumbnail1.jpg`) in a folder accessible by your web server or use publicly hosted links. For the backend example, we'll use placeholder URLs.

---

### **2. Backend (Python with Flask)**

Create a folder named `backend`. Inside, create `app.py` and `database.py`. You'll also need to install Flask.

First, set up your Python environment:
1. **Install Python:** Make sure you have Python 3 installed.
2. **Create a virtual environment:**



python -m venv venv

3. **Activate it:**
* On Windows: `venv\Scripts\activate`
* On macOS/Linux: `source venv/bin/activate`
4. **Install Flask:**



pip install Flask


**`backend/database.py`** (This handles our SQLite database)



import sqlite3

DATABASE_NAME = 'waxir_reels.db'

def init_db():
conn = sqlite3.connect(DATABASE_NAME)
cursor = conn.cursor()
cursor.execute('''
CREATE TABLE IF NOT EXISTS reels (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT NOT NULL,
video_url TEXT NOT NULL,
thumbnail_url TEXT,
views INTEGER DEFAULT 0,
upload_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)
''')
conn.commit()
conn.close()

def get_db_connection():
conn = sqlite3.connect(DATABASE_NAME)
conn.row_factory = sqlite3.Row # This allows us to access columns by name
return conn

def add_sample_data():
conn = get_db_connection()
cursor = conn.cursor()

# Check if data already exists to avoid duplicates
cursor.execute("SELECT COUNT(*) FROM reels")
if cursor.fetchone()[0] == 0:
sample_reels = [
("Sensual Dance Moves", "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4", "https://via.placeholder.com/300x350?text=Clip1", 1234),
("Intimate Moments", "http://techslides.com/demos/sample-videos/small.mp4", "https://via.placeholder.com/300x350?text=Clip2", 5678),
("Hot Reel Collection", "https://www.w3schools.com/html/mov_bbb.mp4", "https://via.placeholder.com/300x350?text=Clip3", 9101),
]
for title, video_url, thumbnail_url, views in sample_reels:
cursor.execute("INSERT INTO reels (title, video_url, thumbnail_url, views) VALUES (?, ?, ?, ?)",
(title, video_url, thumbnail_url, views))
conn.commit()
print("Sample data added to the database.")
else:
print("Database already contains data, skipping sample data insertion.")
conn.close()

if __name__ == '__main__':
init_db()
add_sample_data()


**`backend/app.py`** (Our Flask application)



from flask import Flask, jsonify, request
from flask_cors import CORS # Required for frontend to access backend
from database import init_db, get_db_connection, add_sample_data

app = Flask(__name__)
CORS(app) # Enable CORS for all routes, allowing frontend to access

# Initialize the database and add sample data on startup
with app.app_context():
init_db()
add_sample_data()



@app
.route('/')
def health_check():
return jsonify({"status": "Waxir Backend is running!"})



@app
.route('/reels', methods=['GET'])
def get_reels():
conn = get_db_connection()
cursor = conn.cursor()

# Basic search functionality (can be expanded)
search_query = request.args.get('q')
if search_query:
cursor.execute("SELECT * FROM reels WHERE title LIKE ?", ('%' + search_query + '%',))
else:
cursor.execute("SELECT * FROM reels ORDER BY upload_date DESC")

reels = [dict(row) for row in cursor.fetchall()]
conn.close()
return jsonify(reels)



@app
.route('/reels/<int:reel_id>', methods=['GET'])
def get_reel(reel_id):
conn = get_db_connection()
cursor = conn.cursor()
cursor.execute("SELECT * FROM reels WHERE id = ?", (reel_id,))
reel = cursor.fetchone()
conn.close()
if reel:
return jsonify(dict(reel))
return jsonify({"message": "Reel not found"}), 404

# Example of how to add a reel (you'd secure this in a real app)


@app
.route('/reels', methods=['POST'])
def add_reel():
new_reel_data = request.json
if not new_reel_data or not all(key in new_reel_data for key in ['title', 'video_url']):
return jsonify({"message": "Missing required fields: title, video_url"}), 400

conn = get_db_con

Files changed (3) hide show
  1. README.md +8 -5
  2. index.html +353 -18
  3. upload.html +334 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Waxir Spicy Green Flicks
3
- emoji: 🏃
4
- colorFrom: indigo
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Waxir - Spicy Green Flicks 🌶️
3
+ colorFrom: yellow
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,354 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Waxir - Hot Short Reels</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ darkMode: 'class',
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ 500: '#22c55e',
16
+ 600: '#16a34a',
17
+ },
18
+ secondary: {
19
+ 500: '#eab308',
20
+ 600: '#ca8a04',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <script src="https://unpkg.com/feather-icons"></script>
28
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
29
+ <style>
30
+ .video-container {
31
+ aspect-ratio: 9/16;
32
+ }
33
+ .video-card:hover .play-icon {
34
+ opacity: 1;
35
+ }
36
+ .gradient-overlay {
37
+ background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.7) 100%);
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
42
+ <!-- Animated background -->
43
+ <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>
44
+
45
+ <!-- Main container -->
46
+ <div class="container mx-auto px-4 max-w-6xl">
47
+ <!-- Header -->
48
+ <header class="py-6 flex justify-between items-center sticky top-0 bg-gray-900/80 backdrop-blur-md z-50">
49
+ <div class="flex items-center space-x-2">
50
+ <h1 class="text-3xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">
51
+ WAXIR
52
+ </h1>
53
+ <span class="text-xs bg-primary-500 text-gray-900 px-2 py-1 rounded-full font-bold">HOT</span>
54
+ </div>
55
+
56
+ <div class="flex items-center space-x-4">
57
+ <div class="relative">
58
+ <input type="text" placeholder="Search spicy reels..."
59
+ class="bg-gray-800 border border-gray-700 rounded-full py-2 px-4 pr-10 w-64 focus:outline-none focus:ring-2 focus:ring-primary-500">
60
+ <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400"></i>
61
+ </div>
62
+ <button class="bg-primary-500 hover:bg-primary-600 text-gray-900 font-bold py-2 px-4 rounded-full flex items-center space-x-1 transition-all">
63
+ <i data-feather="upload"></i>
64
+ <span>Upload</span>
65
+ </button>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- Categories -->
70
+ <div class="mb-8 overflow-x-auto hide-scrollbar">
71
+ <div class="flex space-x-2 pb-2">
72
+ <button class="bg-primary-500/20 text-primary-500 px-4 py-1 rounded-full font-medium whitespace-nowrap">For You</button>
73
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-1 rounded-full font-medium whitespace-nowrap">Trending</button>
74
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-1 rounded-full font-medium whitespace-nowrap">Amateur</button>
75
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-1 rounded-full font-medium whitespace-nowrap">Couples</button>
76
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-1 rounded-full font-medium whitespace-nowrap">Solo</button>
77
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-1 rounded-full font-medium whitespace-nowrap">HD</button>
78
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-1 rounded-full font-medium whitespace-nowrap">+18</button>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Video Grid -->
83
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 pb-16">
84
+ <!-- Video Card 1 -->
85
+ <div class="video-card bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all relative group">
86
+ <div class="video-container relative">
87
+ <video poster="http://static.photos/black/640x360/1" class="w-full h-full object-cover">
88
+ <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
89
+ </video>
90
+ <div class="gradient-overlay absolute inset-0"></div>
91
+ <div class="absolute bottom-0 left-0 right-0 p-4">
92
+ <div class="flex justify-between items-end">
93
+ <div>
94
+ <h3 class="font-bold text-lg">Late Night Fun</h3>
95
+ <p class="text-sm text-gray-300">@hotcouple123</p>
96
+ </div>
97
+ <div class="flex items-center space-x-3">
98
+ <button class="flex flex-col items-center group">
99
+ <i data-feather="heart" class="w-5 h-5 group-hover:text-primary-500"></i>
100
+ <span class="text-xs mt-1">1.2K</span>
101
+ </button>
102
+ <button class="flex flex-col items-center group">
103
+ <i data-feather="message-circle" class="w-5 h-5 group-hover:text-secondary-500"></i>
104
+ <span class="text-xs mt-1">243</span>
105
+ </button>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ <div class="play-icon absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
110
+ <div class="bg-primary-500/80 rounded-full p-3">
111
+ <i data-feather="play" class="w-8 h-8"></i>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Video Card 2 -->
118
+ <div class="video-card bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all relative group">
119
+ <div class="video-container relative">
120
+ <video poster="http://static.photos/black/640x360/2" class="w-full h-full object-cover">
121
+ <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
122
+ </video>
123
+ <div class="gradient-overlay absolute inset-0"></div>
124
+ <div class="absolute bottom-0 left-0 right-0 p-4">
125
+ <div class="flex justify-between items-end">
126
+ <div>
127
+ <h3 class="font-bold text-lg">Beach Adventure</h3>
128
+ <p class="text-sm text-gray-300">@naughtytraveler</p>
129
+ </div>
130
+ <div class="flex items-center space-x-3">
131
+ <button class="flex flex-col items-center group">
132
+ <i data-feather="heart" class="w-5 h-5 group-hover:text-primary-500"></i>
133
+ <span class="text-xs mt-1">3.4K</span>
134
+ </button>
135
+ <button class="flex flex-col items-center group">
136
+ <i data-feather="message-circle" class="w-5 h-5 group-hover:text-secondary-500"></i>
137
+ <span class="text-xs mt-1">512</span>
138
+ </button>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ <div class="play-icon absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
143
+ <div class="bg-primary-500/80 rounded-full p-3">
144
+ <i data-feather="play" class="w-8 h-8"></i>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Video Card 3 -->
151
+ <div class="video-card bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all relative group">
152
+ <div class="video-container relative">
153
+ <video poster="http://static.photos/black/640x360/3" class="w-full h-full object-cover">
154
+ <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
155
+ </video>
156
+ <div class="gradient-overlay absolute inset-0"></div>
157
+ <div class="absolute bottom-0 left-0 right-0 p-4">
158
+ <div class="flex justify-between items-end">
159
+ <div>
160
+ <h3 class="font-bold text-lg">Sensual Dance</h3>
161
+ <p class="text-sm text-gray-300">@dancequeen</p>
162
+ </div>
163
+ <div class="flex items-center space-x-3">
164
+ <button class="flex flex-col items-center group">
165
+ <i data-feather="heart" class="w-5 h-5 group-hover:text-primary-500"></i>
166
+ <span class="text-xs mt-1">8.7K</span>
167
+ </button>
168
+ <button class="flex flex-col items-center group">
169
+ <i data-feather="message-circle" class="w-5 h-5 group-hover:text-secondary-500"></i>
170
+ <span class="text-xs mt-1">1.2K</span>
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ <div class="play-icon absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
176
+ <div class="bg-primary-500/80 rounded-full p-3">
177
+ <i data-feather="play" class="w-8 h-8"></i>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Video Card 4 -->
184
+ <div class="video-card bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all relative group">
185
+ <div class="video-container relative">
186
+ <video poster="http://static.photos/black/640x360/4" class="w-full h-full object-cover">
187
+ <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
188
+ </video>
189
+ <div class="gradient-overlay absolute inset-0"></div>
190
+ <div class="absolute bottom-0 left-0 right-0 p-4">
191
+ <div class="flex justify-between items-end">
192
+ <div>
193
+ <h3 class="font-bold text-lg">Private Show</h3>
194
+ <p class="text-sm text-gray-300">@exclusivecontent</p>
195
+ </div>
196
+ <div class="flex items-center space-x-3">
197
+ <button class="flex flex-col items-center group">
198
+ <i data-feather="heart" class="w-5 h-5 group-hover:text-primary-500"></i>
199
+ <span class="text-xs mt-1">5.1K</span>
200
+ </button>
201
+ <button class="flex flex-col items-center group">
202
+ <i data-feather="message-circle" class="w-5 h-5 group-hover:text-secondary-500"></i>
203
+ <span class="text-xs mt-1">876</span>
204
+ </button>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ <div class="play-icon absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
209
+ <div class="bg-primary-500/80 rounded-full p-3">
210
+ <i data-feather="play" class="w-8 h-8"></i>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Video Card 5 -->
217
+ <div class="video-card bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all relative group">
218
+ <div class="video-container relative">
219
+ <video poster="http://static.photos/black/640x360/5" class="w-full h-full object-cover">
220
+ <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
221
+ </video>
222
+ <div class="gradient-overlay absolute inset-0"></div>
223
+ <div class="absolute bottom-0 left-0 right-0 p-4">
224
+ <div class="flex justify-between items-end">
225
+ <div>
226
+ <h3 class="font-bold text-lg">Hotel Rendezvous</h3>
227
+ <p class="text-sm text-gray-300">@travelinglovers</p>
228
+ </div>
229
+ <div class="flex items-center space-x-3">
230
+ <button class="flex flex-col items-center group">
231
+ <i data-feather="heart" class="w-5 h-5 group-hover:text-primary-500"></i>
232
+ <span class="text-xs mt-1">2.3K</span>
233
+ </button>
234
+ <button class="flex flex-col items-center group">
235
+ <i data-feather="message-circle" class="w-5 h-5 group-hover:text-secondary-500"></i>
236
+ <span class="text-xs mt-1">421</span>
237
+ </button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ <div class="play-icon absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
242
+ <div class="bg-primary-500/80 rounded-full p-3">
243
+ <i data-feather="play" class="w-8 h-8"></i>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Video Card 6 -->
250
+ <div class="video-card bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all relative group">
251
+ <div class="video-container relative">
252
+ <video poster="http://static.photos/black/640x360/6" class="w-full h-full object-cover">
253
+ <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
254
+ </video>
255
+ <div class="gradient-overlay absolute inset-0"></div>
256
+ <div class="absolute bottom-0 left-0 right-0 p-4">
257
+ <div class="flex justify-between items-end">
258
+ <div>
259
+ <h3 class="font-bold text-lg">Morning Bliss</h3>
260
+ <p class="text-sm text-gray-300">@earlyriser</p>
261
+ </div>
262
+ <div class="flex items-center space-x-3">
263
+ <button class="flex flex-col items-center group">
264
+ <i data-feather="heart" class="w-5 h-5 group-hover:text-primary-500"></i>
265
+ <span class="text-xs mt-1">4.8K</span>
266
+ </button>
267
+ <button class="flex flex-col items-center group">
268
+ <i data-feather="message-circle" class="w-5 h-5 group-hover:text-secondary-500"></i>
269
+ <span class="text-xs mt-1">932</span>
270
+ </button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ <div class="play-icon absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
275
+ <div class="bg-primary-500/80 rounded-full p-3">
276
+ <i data-feather="play" class="w-8 h-8"></i>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Load More Button -->
284
+ <div class="text-center pb-16">
285
+ <button class="bg-primary-500 hover:bg-primary-600 text-gray-900 font-bold py-3 px-6 rounded-full inline-flex items-center space-x-2 transition-all">
286
+ <i data-feather="refresh-cw"></i>
287
+ <span>Load More Hot Content</span>
288
+ </button>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Bottom Navigation (Mobile) -->
293
+ <div class="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-800 flex justify-around py-3 lg:hidden">
294
+ <a href="#" class="flex flex-col items-center text-primary-500">
295
+ <i data-feather="home"></i>
296
+ <span class="text-xs mt-1">Home</span>
297
+ </a>
298
+ <a href="#" class="flex flex-col items-center text-gray-400 hover:text-primary-500">
299
+ <i data-feather="compass"></i>
300
+ <span class="text-xs mt-1">Explore</span>
301
+ </a>
302
+ <a href="#" class="flex flex-col items-center text-gray-400 hover:text-primary-500">
303
+ <i data-feather="plus-circle"></i>
304
+ <span class="text-xs mt-1">Upload</span>
305
+ </a>
306
+ <a href="#" class="flex flex-col items-center text-gray-400 hover:text-primary-500">
307
+ <i data-feather="heart"></i>
308
+ <span class="text-xs mt-1">Likes</span>
309
+ </a>
310
+ <a href="#" class="flex flex-col items-center text-gray-400 hover:text-primary-500">
311
+ <i data-feather="user"></i>
312
+ <span class="text-xs mt-1">Profile</span>
313
+ </a>
314
+ </div>
315
+
316
+ <script>
317
+ // Initialize Vanta.js waves background
318
+ VANTA.WAVES({
319
+ el: "#vanta-bg",
320
+ mouseControls: true,
321
+ touchControls: true,
322
+ gyroControls: false,
323
+ minHeight: 200.00,
324
+ minWidth: 200.00,
325
+ scale: 1.00,
326
+ scaleMobile: 1.00,
327
+ color: 0x22c55e,
328
+ shininess: 20.00,
329
+ waveHeight: 15.00,
330
+ waveSpeed: 0.80,
331
+ zoom: 0.85
332
+ });
333
+
334
+ // Initialize feather icons
335
+ feather.replace();
336
+
337
+ // Make video cards clickable
338
+ document.querySelectorAll('.video-card').forEach(card => {
339
+ card.addEventListener('click', function(e) {
340
+ if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'I') {
341
+ const video = this.querySelector('video');
342
+ if (video.paused) {
343
+ video.play();
344
+ this.querySelector('.play-icon').style.opacity = '0';
345
+ } else {
346
+ video.pause();
347
+ this.querySelector('.play-icon').style.opacity = '1';
348
+ }
349
+ }
350
+ });
351
+ });
352
+ </script>
353
+ </body>
354
  </html>
upload.html ADDED
@@ -0,0 +1,334 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Upload Video - Waxir</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ darkMode: 'class',
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ 500: '#22c55e',
16
+ 600: '#16a34a',
17
+ },
18
+ secondary: {
19
+ 500: '#eab308',
20
+ 600: '#ca8a04',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <script src="https://unpkg.com/feather-icons"></script>
28
+ <style>
29
+ .drag-active {
30
+ border-color: #22c55e;
31
+ background-color: rgba(34, 197, 94, 0.1);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
36
+ <!-- Main container -->
37
+ <div class="container mx-auto px-4 py-12 max-w-4xl">
38
+ <!-- Header -->
39
+ <header class="mb-10">
40
+ <div class="flex items-center space-x-2">
41
+ <h1 class="text-3xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">
42
+ WAXIR
43
+ </h1>
44
+ <span class="text-xs bg-primary-500 text-gray-900 px-2 py-1 rounded-full font-bold">UPLOAD</span>
45
+ </div>
46
+ <p class="mt-2 text-gray-400">Share your spicy content with the community</p>
47
+ </header>
48
+
49
+ <!-- Upload Form -->
50
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
51
+ <h2 class="text-xl font-bold mb-6 flex items-center">
52
+ <i data-feather="upload" class="mr-2"></i>
53
+ Upload New Video
54
+ </h2>
55
+
56
+ <!-- Drag and Drop Area -->
57
+ <div id="dropZone" class="border-2 border-dashed border-gray-700 rounded-lg p-10 text-center mb-6 transition-all">
58
+ <div class="max-w-md mx-auto">
59
+ <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-primary-500 mb-4"></i>
60
+ <h3 class="font-medium text-lg mb-2">Drag & drop your video file</h3>
61
+ <p class="text-gray-400 mb-4">MP4, WebM or MOV. Max 100MB.</p>
62
+ <label class="bg-primary-500 hover:bg-primary-600 text-gray-900 font-medium py-2 px-6 rounded-full inline-flex items-center cursor-pointer transition-all">
63
+ <i data-feather="file" class="mr-2"></i>
64
+ Select File
65
+ <input type="file" id="fileInput" accept="video/*" class="hidden">
66
+ </label>
67
+ </div>
68
+ </div>
69
+
70
+ <!-- Preview Section -->
71
+ <div id="previewSection" class="hidden mb-6">
72
+ <div class="flex items-center space-x-4 mb-4">
73
+ <video id="videoPreview" class="w-24 h-24 rounded-md object-cover" controls></video>
74
+ <div>
75
+ <p id="fileName" class="font-medium"></p>
76
+ <p id="fileSize" class="text-sm text-gray-400"></p>
77
+ </div>
78
+ <button id="removeFile" class="ml-auto text-gray-400 hover:text-red-500">
79
+ <i data-feather="x"></i>
80
+ </button>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Video Details Form -->
85
+ <form id="uploadForm" class="space-y-6">
86
+ <div>
87
+ <label for="title" class="block text-sm font-medium mb-2">Video Title</label>
88
+ <input type="text" id="title" name="title" placeholder="Make it hot and descriptive"
89
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
90
+ </div>
91
+
92
+ <div>
93
+ <label for="description" class="block text-sm font-medium mb-2">Description</label>
94
+ <textarea id="description" name="description" rows="3" placeholder="Tell viewers what makes your content special..."
95
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
96
+ </div>
97
+
98
+ <div>
99
+ <label class="block text-sm font-medium mb-2">Thumbnail</label>
100
+ <div class="flex items-center space-x-6">
101
+ <div id="thumbnailPreview" class="w-32 h-32 bg-gray-700 rounded-lg overflow-hidden relative">
102
+ <img id="thumbImage" src="" alt="Thumbnail preview" class="w-full h-full object-cover hidden">
103
+ <div id="thumbPlaceholder" class="absolute inset-0 flex items-center justify-center text-gray-500">
104
+ <i data-feather="image" class="w-8 h-8"></i>
105
+ </div>
106
+ </div>
107
+ <div class="flex-1">
108
+ <label class="bg-gray-700 hover:bg-gray-600 border border-gray-600 text-gray-300 font-medium py-2 px-4 rounded-lg inline-flex items-center cursor-pointer transition-all">
109
+ <i data-feather="upload" class="mr-2"></i>
110
+ Upload Custom Thumbnail
111
+ <input type="file" id="thumbnailInput" accept="image/*" class="hidden">
112
+ </label>
113
+ <p class="text-xs text-gray-400 mt-2">Recommended: 1280x720 or 9:16 aspect ratio</p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
119
+ <div>
120
+ <label for="category" class="block text-sm font-medium mb-2">Category</label>
121
+ <select id="category" name="category"
122
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
123
+ <option value="">Select a category</option>
124
+ <option value="amateur">Amateur</option>
125
+ <option value="couples">Couples</option>
126
+ <option value="solo">Solo</option>
127
+ <option value="hd">HD</option>
128
+ <option value="fetish">Fetish</option>
129
+ <option value="toys">Toys</option>
130
+ </select>
131
+ </div>
132
+
133
+ <div>
134
+ <label for="tags" class="block text-sm font-medium mb-2">Tags (comma separated)</label>
135
+ <input type="text" id="tags" name="tags" placeholder="E.g. couple, outdoor, bj"
136
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
137
+ </div>
138
+ </div>
139
+
140
+ <div class="flex items-center space-x-4 pt-4">
141
+ <input type="checkbox" id="terms" name="terms" class="w-5 h-5 text-primary-500 bg-gray-700 border-gray-600 rounded focus:ring-primary-500">
142
+ <label for="terms" class="text-sm">
143
+ I confirm that I own the rights to this content and that all participants are 18+ years old
144
+ </label>
145
+ </div>
146
+
147
+ <div class="flex justify-end space-x-4 pt-6 border-t border-gray-700">
148
+ <button type="button" class="px-6 py-2 border border-gray-600 rounded-lg hover:bg-gray-700 transition-all">
149
+ Cancel
150
+ </button>
151
+ <button type="submit" class="bg-primary-500 hover:bg-primary-600 text-gray-900 font-bold px-6 py-2 rounded-lg inline-flex items-center space-x-2 transition-all">
152
+ <i data-feather="upload" id="uploadIcon"></i>
153
+ <span id="uploadText">Upload Video</span>
154
+ <span id="uploadSpinner" class="hidden">
155
+ <svg class="animate-spin -ml-1 mr-2 h-5 w-5 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
156
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
157
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
158
+ </svg>
159
+ </span>
160
+ </button>
161
+ </div>
162
+ </form>
163
+ </div>
164
+ </div>
165
+
166
+ <script>
167
+ // Initialize feather icons
168
+ feather.replace();
169
+
170
+ // Drag and drop functionality
171
+ const dropZone = document.getElementById('dropZone');
172
+ const fileInput = document.getElementById('fileInput');
173
+ const previewSection = document.getElementById('previewSection');
174
+ const videoPreview = document.getElementById('videoPreview');
175
+ const fileName = document.getElementById('fileName');
176
+ const fileSize = document.getElementById('fileSize');
177
+ const removeFile = document.getElementById('removeFile');
178
+ const thumbImage = document.getElementById('thumbImage');
179
+ const thumbPlaceholder = document.getElementById('thumbPlaceholder');
180
+ const thumbnailInput = document.getElementById('thumbnailInput');
181
+ const uploadForm = document.getElementById('uploadForm');
182
+ const uploadIcon = document.getElementById('uploadIcon');
183
+ const uploadText = document.getElementById('uploadText');
184
+ const uploadSpinner = document.getElementById('uploadSpinner');
185
+
186
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
187
+ dropZone.addEventListener(eventName, preventDefaults, false);
188
+ });
189
+
190
+ function preventDefaults(e) {
191
+ e.preventDefault();
192
+ e.stopPropagation();
193
+ }
194
+
195
+ ['dragenter', 'dragover'].forEach(eventName => {
196
+ dropZone.addEventListener(eventName, highlight, false);
197
+ });
198
+
199
+ ['dragleave', 'drop'].forEach(eventName => {
200
+ dropZone.addEventListener(eventName, unhighlight, false);
201
+ });
202
+
203
+ function highlight() {
204
+ dropZone.classList.add('drag-active');
205
+ }
206
+
207
+ function unhighlight() {
208
+ dropZone.classList.remove('drag-active');
209
+ }
210
+
211
+ dropZone.addEventListener('drop', handleDrop, false);
212
+ dropZone.addEventListener('click', () => fileInput.click(), false);
213
+
214
+ function handleDrop(e) {
215
+ const dt = e.dataTransfer;
216
+ const files = dt.files;
217
+ handleFiles(files);
218
+ }
219
+
220
+ fileInput.addEventListener('change', function() {
221
+ handleFiles(this.files);
222
+ });
223
+
224
+ function handleFiles(files) {
225
+ if (files.length > 0) {
226
+ const file = files[0];
227
+ if (file.type.startsWith('video/')) {
228
+ // Display file info
229
+ fileName.textContent = file.name;
230
+ fileSize.textContent = formatFileSize(file.size);
231
+ previewSection.classList.remove('hidden');
232
+
233
+ // Create video preview
234
+ const videoURL = URL.createObjectURL(file);
235
+ videoPreview.src = videoURL;
236
+
237
+ // Auto-generate thumbnail from video
238
+ videoPreview.addEventListener('loadedmetadata', function() {
239
+ // Seek to middle of video for thumbnail
240
+ videoPreview.currentTime = Math.min(1, videoPreview.duration / 2);
241
+ });
242
+
243
+ videoPreview.addEventListener('seeked', function() {
244
+ // Capture frame as thumbnail
245
+ const canvas = document.createElement('canvas');
246
+ canvas.width = videoPreview.videoWidth;
247
+ canvas.height = videoPreview.videoHeight;
248
+ const ctx = canvas.getContext('2d');
249
+ ctx.drawImage(videoPreview, 0, 0, canvas.width, canvas.height);
250
+
251
+ // Display the thumbnail
252
+ thumbImage.src = canvas.toDataURL('image/jpeg');
253
+ thumbImage.classList.remove('hidden');
254
+ thumbPlaceholder.classList.add('hidden');
255
+ });
256
+ } else {
257
+ alert('Please select a video file.');
258
+ }
259
+ }
260
+ }
261
+
262
+ removeFile.addEventListener('click', function() {
263
+ videoPreview.src = '';
264
+ thumbImage.src = '';
265
+ thumbImage.classList.add('hidden');
266
+ thumbPlaceholder.classList.remove('hidden');
267
+ previewSection.classList.add('hidden');
268
+ fileInput.value = '';
269
+ });
270
+
271
+ thumbnailInput.addEventListener('change', function() {
272
+ if (this.files.length > 0) {
273
+ const file = this.files[0];
274
+ if (file.type.startsWith('image/')) {
275
+ const reader = new FileReader();
276
+ reader.onload = function(e) {
277
+ thumbImage.src = e.target.result;
278
+ thumbImage.classList.remove('hidden');
279
+ thumbPlaceholder.classList.add('hidden');
280
+ };
281
+ reader.readAsDataURL(file);
282
+ } else {
283
+ alert('Please select an image file.');
284
+ }
285
+ }
286
+ });
287
+
288
+ function formatFileSize(bytes) {
289
+ if (bytes === 0) return '0 Bytes';
290
+ const k = 1024;
291
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
292
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
293
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
294
+ }
295
+
296
+ uploadForm.addEventListener('submit', function(e) {
297
+ e.preventDefault();
298
+
299
+ // Validate form
300
+ if (!fileInput.files.length) {
301
+ alert('Please select a video file to upload.');
302
+ return;
303
+ }
304
+
305
+ if (!document.getElementById('terms').checked) {
306
+ alert('You must confirm the terms before uploading.');
307
+ return;
308
+ }
309
+
310
+ // Show loading state
311
+ uploadIcon.classList.add('hidden');
312
+ uploadText.classList.add('hidden');
313
+ uploadSpinner.classList.remove('hidden');
314
+
315
+ // Simulate upload (in a real app, you would send to your server)
316
+ setTimeout(function() {
317
+ alert('Upload complete! (This is a demo - no actual upload occurred)');
318
+ uploadIcon.classList.remove('hidden');
319
+ uploadText.classList.remove('hidden');
320
+ uploadSpinner.classList.add('hidden');
321
+
322
+ // Reset form
323
+ uploadForm.reset();
324
+ videoPreview.src = '';
325
+ thumbImage.src = '';
326
+ thumbImage.classList.add('hidden');
327
+ thumbPlaceholder.classList.remove('hidden');
328
+ previewSection.classList.add('hidden');
329
+ fileInput.value = '';
330
+ }, 2000);
331
+ });
332
+ </script>
333
+ </body>
334
+ </html>