commit 69de4d0f60d2b7aac7d4d32da08b370165a8f331
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 13:44:49 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..aacf985
--- /dev/null
+++ b/body.html
@@ -0,0 +1,27 @@
+<header>
+ <h1>Dance Trends</h1>
+ <p>Discover the latest trending TikTok dances and challenges by region</p>
+</header>
+
+<main>
+ <section class="region-selector">
+ <label for="region">Select Region:</label>
+ <select id="region">
+ <option value="global">Global</option>
+ <option value="north-america">North America</option>
+ <option value="south-america">South America</option>
+ <option value="europe">Europe</option>
+ <option value="asia">Asia</option>
+ <option value="africa">Africa</option>
+ <option value="oceania">Oceania</option>
+ </select>
+ </section>
+
+ <section class="video-grid" id="video-grid">
+ <!-- Video cards will be dynamically inserted here -->
+ </section>
+</main>
+
+<footer>
+ <p>Stay updated with the latest dance trends from around the world</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..2c11ac0
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://dancetrends.scroll.pub
+metaTags
+editButton /edit.html
+title Dance Trends - Trending TikTok Dances by Region
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..82fa1ad
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# dancetrends.scroll.pub
+Website generated by DeepSeek from prompt: i want a website that shows all the trending dance videos and challenges on tiktok. show by region
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..20c90c3
--- /dev/null
+++ b/script.js
@@ -0,0 +1,64 @@
+const videoGrid = document.getElementById('video-grid');
+const regionSelector = document.getElementById('region');
+
+// Sample video data (would be replaced with actual API calls)
+const videos = {
+ global: [
+ {
+ thumbnail: 'images/global1.jpg',
+ title: 'Global Dance Challenge',
+ description: 'The latest global sensation'
+ },
+ // Add more videos...
+ ],
+ 'north-america': [
+ {
+ thumbnail: 'images/na1.jpg',
+ title: 'North American Trend',
+ description: 'Taking over the USA and Canada'
+ },
+ // Add more videos...
+ ],
+ // Add more regions...
+};
+
+function createVideoCard(video) {
+ const card = document.createElement('div');
+ card.className = 'video-card';
+
+ const img = document.createElement('img');
+ img.src = video.thumbnail;
+ img.alt = video.title;
+
+ const info = document.createElement('div');
+ info.className = 'video-info';
+
+ const title = document.createElement('h3');
+ title.textContent = video.title;
+
+ const description = document.createElement('p');
+ description.textContent = video.description;
+
+ info.appendChild(title);
+ info.appendChild(description);
+
+ card.appendChild(img);
+ card.appendChild(info);
+
+ return card;
+}
+
+function updateVideos(region) {
+ videoGrid.innerHTML = '';
+ const regionVideos = videos[region] || [];
+ regionVideos.forEach(video => {
+ videoGrid.appendChild(createVideoCard(video));
+ });
+}
+
+regionSelector.addEventListener('change', (e) => {
+ updateVideos(e.target.value);
+});
+
+// Initial load
+updateVideos('global');
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a2b3ea5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,110 @@
+:root {
+ --primary-color: #ff6b6b;
+ --secondary-color: #4ecdc4;
+ --background-color: #1a1a1a;
+ --text-color: #ffffff;
+ --card-background: #2d2d2d;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ padding: 20px;
+}
+
+header {
+ text-align: center;
+ margin-bottom: 40px;
+}
+
+header h1 {
+ font-size: 2.5rem;
+ color: var(--primary-color);
+ margin-bottom: 10px;
+}
+
+header p {
+ color: var(--secondary-color);
+}
+
+.region-selector {
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+.region-selector label {
+ margin-right: 10px;
+ font-size: 1.1rem;
+}
+
+.region-selector select {
+ padding: 8px 12px;
+ border-radius: 20px;
+ border: 2px solid var(--primary-color);
+ background-color: var(--card-background);
+ color: var(--text-color);
+ font-size: 1rem;
+}
+
+.video-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 20px;
+ padding: 20px;
+}
+
+.video-card {
+ background-color: var(--card-background);
+ border-radius: 15px;
+ overflow: hidden;
+ transition: transform 0.3s ease;
+}
+
+.video-card:hover {
+ transform: translateY(-5px);
+}
+
+.video-card img {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+}
+
+.video-info {
+ padding: 15px;
+}
+
+.video-info h3 {
+ color: var(--primary-color);
+ margin-bottom: 10px;
+}
+
+.video-info p {
+ color: var(--secondary-color);
+ font-size: 0.9rem;
+}
+
+footer {
+ text-align: center;
+ margin-top: 40px;
+ padding: 20px;
+ color: var(--secondary-color);
+}
+
+@media (max-width: 768px) {
+ header h1 {
+ font-size: 2rem;
+ }
+
+ .video-grid {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file