Spaces:

NJU-Jet
/

time-album

Running

App Files Files Community

NJU-Jet commited on May 21, 2025

Commit

f9b7c72

verified ·

1 Parent(s): 94c8515

Add 2 files

Browse files

Files changed (2) hide show

index.html +152 -15
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -92,6 +92,60 @@
                 opacity: 0;
             }
         }
     </style>
 </head>
 <body>
@@ -124,21 +178,44 @@
         </div>
     </nav>
-    <!-- 封面 -->
-    <header class="relative h-screen flex items-center justify-center bg-gradient-to-br from-rose-100 to-pink-200 overflow-hidden">
-        <div class="absolute inset-0 opacity-20">
-            <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-pink-300 blur-xl"></div>
-            <div class="absolute top-1/3 right-1/4 w-40 h-40 rounded-full bg-rose-300 blur-xl"></div>
-            <div class="absolute bottom-1/4 right-1/3 w-28 h-28 rounded-full bg-red-300 blur-xl"></div>
         </div>
-        <div class="text-center z-10 px-4">
-            <h1 class="text-4xl md:text-6xl font-bold text-rose-700 mb-4 title-font">520快乐，我的爱人</h1>
-            <p class="text-xl md:text-2xl text-rose-800 mb-8">记录我们美好的每一刻</p>
-            <div class="animate-bounce">
-                <a href="#photos" class="bg-rose-600 hover:bg-rose-700 text-white px-6 py-3 rounded-full shadow-lg transition flex items-center justify-center space-x-2 mx-auto w-max">
-                    <span>开始回忆</span>
-                    <i class="fas fa-arrow-down"></i>
-                </a>
             </div>
         </div>
     </header>
@@ -336,7 +413,7 @@
                         <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
                             <div class="flex items-center mb-2">
                                 <span class="text-rose-600 font-bold text-lg">2024.05.20</span>
-                                <span class="ml-4 px-2 py-1 bg-rose-100 text-rose-800 rounded-full text-xs">520</span>
                             </div>
                             <h3 class="text-xl font-semibold text-gray-800 mb-2">第一个520</h3>
                             <p class="text-gray-600">这是我们在一起的第一个520，我制作了这个相册，记录我们的点点滴滴。未来的每一天，我都想和你一起度过。</p>
@@ -563,6 +640,66 @@
                 }
             });
         });
     </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=NJU-Jet/time-album" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

                 opacity: 0;
             }
         }
+        /* 新增的轮播样式 */
+        .carousel-container {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        .carousel-slide {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transition: opacity 1.5s ease-in-out;
+            background-size: cover;
+            background-position: center;
+        }
+        .carousel-slide.active {
+            opacity: 0.3;
+        }
+        .carousel-content {
+            position: relative;
+            z-index: 10;
+        }
+        .carousel-indicators {
+            position: absolute;
+            bottom: 20px;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            z-index: 20;
+        }
+        .carousel-indicator {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.5);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .carousel-indicator.active {
+            background-color: #fff;
+            transform: scale(1.2);
+        }
     </style>
 </head>
 <body>
         </div>
     </nav>
+    <!-- 封面 - 新增轮播功能 -->
+    <header class="relative h-screen overflow-hidden">
+        <div class="carousel-container">
+            <!-- 轮播图片1 -->
+            <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1350&q=80')"></div>
+            <!-- 轮播图片2 -->
+            <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1350&q=80')"></div>
+            <!-- 轮播图片3 -->
+            <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1350&q=80')"></div>
+            <!-- 轮播图片4 -->
+            <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D3D&auto=format&fit=crop&w=1350&q=80')"></div>
+            <!-- 轮播图片5 -->
+            <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1350&q=80')"></div>
+            <!-- 轮播指示器 -->
+            <div class="carousel-indicators" id="carousel-indicators"></div>
         </div>
+        <div class="absolute inset-0 bg-gradient-to-br from-rose-100/70 to-pink-200/70">
+            <div class="absolute inset-0 opacity-20">
+                <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-pink-300 blur-xl"></div>
+                <div class="absolute top-1/3 right-1/4 w-40 h-40 rounded-full bg-rose-300 blur-xl"></div>
+                <div class="absolute bottom-1/4 right-1/3 w-28 h-28 rounded-full bg-red-300 blur-xl"></div>
+            </div>
+            <div class="carousel-content text-center h-full flex flex-col items-center justify-center px-4">
+                <h1 class="text-4xl md:text-6xl font-bold text-rose-700 mb-4 title-font">520快乐，我的爱人</h1>
+                <p class="text-xl md:text-2xl text-rose-800 mb-8">记录我们美好的每一刻</p>
+                <div class="animate-bounce">
+                    <a href="#photos" class="bg-rose-600 hover:bg-rose-700 text-white px-6 py-3 rounded-full shadow-lg transition flex items-center justify-center space-x-2 mx-auto w-max">
+                        <span>开始回忆</span>
+                        <i class="fas fa-arrow-down"></i>
+                    </a>
+                </div>
             </div>
         </div>
     </header>
                         <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
                             <div class="flex items-center mb-2">
                                 <span class="text-rose-600 font-bold text-lg">2024.05.20</span>
+                <span class="ml-4 px-2 py-1 bg-rose-100 text-rose-800 rounded-full text-xs">520</span>
                             </div>
                             <h3 class="text-xl font-semibold text-gray-800 mb-2">第一个520</h3>
                             <p class="text-gray-600">这是我们在一起的第一个520，我制作了这个相册，记录我们的点点滴滴。未来的每一天，我都想和你一起度过。</p>
                 }
             });
         });
+        // 新增的轮播功能
+        document.addEventListener('DOMContentLoaded', function() {
+            const slides = document.querySelectorAll('.carousel-slide');
+            const indicatorsContainer = document.getElementById('carousel-indicators');
+            let currentSlide = 0;
+            // 创建指示器
+            slides.forEach((slide, index) => {
+                const indicator = document.createElement('div');
+                indicator.className = 'carousel-indicator';
+                if (index === 0) indicator.classList.add('active');
+                indicator.addEventListener('click', () => {
+                    goToSlide(index);
+                });
+                indicatorsContainer.appendChild(indicator);
+            });
+            const indicators = document.querySelectorAll('.carousel-indicator');
+            // 初始化第一张幻灯片
+            slides[0].classList.add('active');
+            // 自动轮播
+            const slideInterval = setInterval(nextSlide, 5000);
+            function nextSlide() {
+                slides[currentSlide].classList.remove('active');
+                indicators[currentSlide].classList.remove('active');
+                currentSlide = (currentSlide + 1) % slides.length;
+                slides[currentSlide].classList.add('active');
+                indicators[currentSlide].classList.add('active');
+            }
+            function goToSlide(index) {
+                slides[currentSlide].classList.remove('active');
+                indicators[currentSlide].classList.remove('active');
+                currentSlide = index;
+                slides[currentSlide].classList.add('active');
+                indicators[currentSlide].classList.add('active');
+                // 重置自动轮播计时器
+                clearInterval(slideInterval);
+                setInterval(nextSlide, 5000);
+            }
+            // 鼠标悬停暂停轮播
+            const carousel = document.querySelector('.carousel-container');
+            carousel.addEventListener('mouseenter', () => {
+                clearInterval(slideInterval);
+            });
+            carousel.addEventListener('mouseleave', () => {
+                setInterval(nextSlide, 5000);
+            });
+        });
     </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=NJU-Jet/time-album" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- 马上要到520了，我想给我女朋友做一个时光相册


1	+ 马上要到520了，我想给我女朋友做一个时光相册
2	+ 我想加一个功能，主界面在匀速滑动显示照片