body.html
Changed around line 1
+
+
Dance Trends
+
Discover the latest trending TikTok dances and challenges by region
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Stay updated with the latest dance trends from around the world
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://dancetrends.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Dance Trends - Trending TikTok Dances by Region
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # 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
script.js
Changed around line 1
+ 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');
style.css
Changed around line 1
+ :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;
+ }
+ }