add Kontext-Style website

Author: FeiSong123

Kontext-Style/index.html

@@ -23,6 +23,8 @@ <h2 class="sidebar-title">Kontext-Style</h2>
     <div class="content">
         <div id="project-info" class="project-info">
             <h1>Kontext-Style</h1>
+            <p>Kontext-Style is an open community-driven organization dedicated to artistic style transfer, LoRA adapters, and creative image generation.
+Here you'll find a curated collection of models, LoRAs, and datasets focused on bringing style diversity and next-level creativity to your AI image workflows.</p>
             <div class="links">
                 <p><a href="https://github.com/W2GenAI-Lab/Kontext-Style" target="_blank">GitHub</a></p>
                 <p><a href="https://huggingface.co/Kontext-Style" target="_blank">Hugging Face</a></p>
@@ -546,22 +548,6 @@ <h2>Contact Us</h2>
         </section>
     </div>
 
-   <!-- Modal for image enlargement -->
-<div id="modal" class="modal">
-    <span class="close">&times;</span>
-    <div class="modal-content-container">
-        <div class="modal-content" id="modal-img"></div>
-    </div>
-    <div id="caption"></div>
-    <a class="prev">&#10094;</a>
-    <a class="next">&#10095;</a>
-      
-    <div id="resolution" class="resolution"></div>
-    <div class="thumbnails">
-        <!-- Thumbnails will be generated dynamically by JavaScript -->
-    </div>
-</div>
-
     <script src="script.js"></script>
 </body>
 </html>

Kontext-Style/script.js

@@ -1,57 +1,6 @@
 // Kontext-Style main functionality
 document.addEventListener('DOMContentLoaded', function() {
-    // 模态框功能
-    const modal = document.getElementById('modal');
-    const modalImg = document.getElementById('modal-img');
-    const captionText = document.getElementById('caption');
-    const resolutionText = document.getElementById('resolution');
-    const closeBtn = document.querySelector('.close');
-    const prevBtn = document.querySelector('.prev');
-    const nextBtn = document.querySelector('.next');
-    const thumbnails = document.querySelector('.thumbnails');
-    
-    let currentImageIndex = 0;
-    let galleryImages = [];
-    
-    // 收集所有图片
-    function collectGalleryImages() {
-        galleryImages = Array.from(document.querySelectorAll('.style-image, .overview-image'));
-        generateThumbnails();
-    }
-    
-    // 生成缩略图
-    function generateThumbnails() {
-        thumbnails.innerHTML = '';
-        galleryImages.forEach((img, index) => {
-            const thumb = document.createElement('img');
-            thumb.src = img.src;
-            thumb.alt = img.alt;
-            thumb.addEventListener('click', () => {
-                currentImageIndex = index;
-                showModal(img);
-            });
-            thumbnails.appendChild(thumb);
-        });
-    }
-    
-    // 显示模态框
-    function showModal(imgElement) {
-        modal.style.display = 'block';
-        modalImg.style.backgroundImage = `url(${imgElement.src})`;
-        captionText.textContent = imgElement.alt;
-        resolutionText.textContent = '';
-        
-        // 更新缩略图状态
-        const thumbs = thumbnails.querySelectorAll('img');
-        thumbs.forEach((thumb, index) => {
-            thumb.classList.toggle('thumbnail-active', index === currentImageIndex);
-        });
-    }
-    
-    // 关闭模态框
-    function closeModal() {
-        modal.style.display = 'none';
-    }
+    // 移除了模态框功能，现在只保留图片导航
 
     // 图片导航功能
     function initImageNavigation() {
@@ -92,14 +41,6 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
             });
 
-            // 图片点击事件（模态框）
-            images.forEach((img, index) => {
-                img.addEventListener('click', () => {
-                    currentImageIndex = galleryImages.indexOf(img);
-                    showModal(img);
-                });
-            });
-            
             // 键盘导航
             display.addEventListener('keydown', (e) => {
                 if (e.key === 'ArrowLeft' && currentIndex > 0) prevBtn.click();
@@ -111,43 +52,6 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
-    // 事件监听
-    document.querySelectorAll('.style-image, .overview-image').forEach(img => {
-        img.addEventListener('click', function() {
-            currentImageIndex = galleryImages.indexOf(this);
-            showModal(this);
-        });
-    });
-    
-    closeBtn.addEventListener('click', closeModal);
-    
-    prevBtn.addEventListener('click', () => {
-        currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
-        showModal(galleryImages[currentImageIndex]);
-    });
-    
-    nextBtn.addEventListener('click', () => {
-        currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
-        showModal(galleryImages[currentImageIndex]);
-    });
-    
-    // 点击模态框背景关闭
-    modal.addEventListener('click', (e) => {
-        if (e.target === modal) {
-            closeModal();
-        }
-    });
-    
-    // 键盘导航
-    document.addEventListener('keydown', (e) => {
-        if (modal.style.display === 'block') {
-            if (e.key === 'Escape') closeModal();
-            if (e.key === 'ArrowLeft') prevBtn.click();
-            if (e.key === 'ArrowRight') nextBtn.click();
-        }
-    });
-    
     // 初始化
-    collectGalleryImages();
     initImageNavigation();
 });

Kontext-Style/styles.css

@@ -379,89 +379,6 @@ tbody tr:hover {
 }
 
 
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background-color: rgba(0, 0, 0, 0.9);
-}
-
-.modal-content-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: calc(100% - 100px); /* 留出空间给缩略图 */
-    overflow: auto;
-    position: relative;
-}
-
-.modal-content {
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    transition: transform 0.3s ease; /* 添加平滑的缩放动画 */
-    cursor: grab; /* 添加抓手光标 */
-    width: auto; /* 确保初始宽度 */
-    height: auto; /* 确保初始高度 */
-    max-width: 100%;
-    max-height: 100%;
-}
-
-.modal-content:active {
-    cursor: grabbing; /* 添加拖动光标 */
-}
-
-.close {
-    position: absolute;
-    top: 15px;
-    right: 35px;
-    color: #fff;
-    font-size: 40px;
-    font-weight: bold;
-    transition: 0.3s;
-}
-
-.close:hover,
-.close:focus {
-    color: #bbb;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.thumbnails {
-    position: fixed;
-    top: 50%;
-    right: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    max-height: 80%;
-    overflow-y: auto;
-    transform: translateY(-50%);
-    z-index: 2;
-}
-
-.thumbnails img {
-    width: 80px;
-    height: 80px;
-    object-fit: cover;
-    cursor: pointer;
-    transition: transform 0.3s ease-in-out;
-}
-
-.thumbnails img:hover {
-    transform: scale(1.1);
-}
-
-.thumbnail-active {
-    border: 2px solid #007acc;
-}
 
 
 /* Overview section styles */
@@ -480,18 +397,21 @@ tbody tr:hover {
 
 .overview-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 15px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
     padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
 }
 
 .overview-item {
     background-color: #ffffff;
-    border-radius: 8px;
+    border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
-    height: 150px;
+    aspect-ratio: 1;
+    position: relative;
 }
 
 .overview-item:hover {
@@ -504,6 +424,19 @@ tbody tr:hover {
     height: 100%;
     object-fit: cover;
     display: block;
+    transition: transform 0.3s ease;
+}
+
+.overview-item:hover .overview-image {
+    transform: scale(1.05);
+}
+
+@media (max-width: 768px) {
+    .overview-grid {
+        grid-template-columns: 1fr;
+        gap: 15px;
+        padding: 15px;
+    }
 }
 
 /* Individual styles section */