Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>C4Group</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3b82f6', | |
| dark: '#0f172a', | |
| darker: '#020617', | |
| accent: '#7c3aed', | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #7c3aed); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-text-title { | |
| background: linear-gradient(90deg, #2563eb, #7c3aed); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| background-size: 200% auto; | |
| animation: gradient 3s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| 100% { | |
| background-position: 0% 50%; | |
| } | |
| } | |
| .glass-effect { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .hover-scale { | |
| transition: transform 0.3s ease; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.03); | |
| } | |
| .news-item::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-darker text-gray-200 min-h-screen font-sans"> | |
| <!-- Navigation --> | |
| <nav class="glass-effect fixed w-full z-50 top-0"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-xl font-bold gradient-text">C4 Group</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#home" | |
| class="text-primary hover:text-accent px-3 py-2 rounded-md text-sm font-bold transition-colors duration-300">Home</a> | |
| <a href="#publications" | |
| class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-bold transition-colors duration-300">Publications</a> | |
| <a href="#people" | |
| class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-bold transition-colors duration-300">People</a> | |
| <a href="https://whluo.github.io/assets/join_us.html" | |
| class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-bold transition-colors duration-300" target="_blank">Join | |
| Us</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none"> | |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden glass-effect"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="text-primary block px-3 py-2 rounded-md text-base font-bold">Home</a> | |
| <a href="#publications" | |
| class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-bold">Publications</a> | |
| <a href="#people" | |
| class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-bold">People</a> | |
| <a href="https://whluo.github.io/assets/join_us.html" | |
| class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-bold" target="_blank">Join Us</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-20 pb-16"> | |
| <!-- Home Section --> | |
| <section id="home" class="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-2 gradient-text-title">C4 Group</h1> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4"> | |
| <span class="text-primary">C</span>reative, | |
| <span class="text-primary">C</span>ontrollable & | |
| <span class="text-primary">C</span>ognitive | |
| <span class="text-primary">C</span>omputing Group | |
| </h2> | |
| </div> | |
| <!-- Hero Image --> | |
| <div class="relative rounded-xl overflow-hidden mb-12 hover-scale transition-all duration-500"> | |
| <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Laboratory equipment" class="w-full h-64 md:h-96 object-cover opacity-90"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-darker via-transparent to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 p-8"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-white mb-2">Innovating Tomorrow's Technology</h2> | |
| <p class="text-gray-300 max-w-2xl">Explosive innovation in creative, controllable | |
| content generation & Cognitive Advancement.</p> | |
| </div> | |
| </div> | |
| <!-- Group Introduction --> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <div class="glass-effect p-6 rounded-xl hover-scale"> | |
| <h2 class="text-2xl font-bold mb-4 text-primary">About Our Group</h2> | |
| <p class="text-gray-300 mb-4"> | |
| Founded in 2015, the Advanced Quantum Research Laboratory at [Your University] brings together | |
| interdisciplinary researchers to solve complex problems in quantum information science and | |
| nanotechnology. | |
| </p> | |
| <p class="text-gray-300 mb-4"> | |
| Our team consists of 3 faculty members, 8 postdoctoral researchers, and 15 graduate students | |
| working across multiple projects funded by NSF, DOE, and private foundations. | |
| </p> | |
| <div class="flex space-x-4 mt-6"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-accent">15+</div> | |
| <div class="text-sm text-gray-400">Research Papers</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-accent">8</div> | |
| <div class="text-sm text-gray-400">Patents</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-accent">8</div> | |
| <div class="text-sm text-gray-400">Patents</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-accent">8</div> | |
| <div class="text-sm text-gray-400">Patents</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-effect p-6 rounded-xl hover-scale"> | |
| <h2 class="text-2xl font-bold mb-4 text-primary">Research Focus</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="text-primary mr-3 mt-1"> | |
| <i class="fas fa-brain fa-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Large Models</h3> | |
| <p class="text-gray-400 text-sm">Developing and optimizing foundation models for various | |
| tasks</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary mr-3 mt-1"> | |
| <i class="fas fa-image fa-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">AIGC</h3> | |
| <p class="text-gray-400 text-sm">Image, video and 3D generation using AI</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary mr-3 mt-1"> | |
| <i class="fas fa-wrench fa-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Content Restoration</h3> | |
| <p class="text-gray-400 text-sm">Enhancing and restoring low-quality media content</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- News Section --> | |
| <div class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center gradient-text">Latest News</h2> | |
| <div class="glass-effect p-6 rounded-xl hover-scale"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="text-gray-400 text-sm w-24 flex-shrink-0">2025 June</div> | |
| <div class="text-gray-300">Our paper "Title" was accepted to Conference Name.</div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-gray-400 text-sm w-24 flex-shrink-0">2025 May</div> | |
| <div class="text-gray-300">Team member presented work at Workshop Name.</div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-gray-400 text-sm w-24 flex-shrink-0">2025 April</div> | |
| <div class="text-gray-300">New collaboration started with Industry Partner.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Publications --> | |
| <div id="publications" class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center gradient-text">Publications</h2> | |
| <div class="space-y-6"> | |
| <div class="glass-effect p-6 rounded-xl hover-scale"> | |
| <div class="text-5xl text-primary mb-4"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Paper Title 1</h3> | |
| <p class="text-gray-300 text-sm">Authors, Conference/Journal, Year</p> | |
| </div> | |
| <div class="glass-effect p-6 rounded-xl hover-scale"> | |
| <div class="text-5xl text-primary mb-4"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Paper Title 2</h3> | |
| <p class="text-gray-300 text-sm">Authors, Conference/Journal, Year</p> | |
| </div> | |
| <div class="glass-effect p-6 rounded-xl hover-scale"> | |
| <div class="text-5xl text-primary mb-4"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Paper Title 3</h3> | |
| <p class="text-gray-300 text-sm">Authors, Conference/Journal, Year</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#" | |
| class="inline-flex items-center px-6 py-3 border border-primary text-primary rounded-full hover:bg-primary hover:text-white transition-colors duration-300"> | |
| View Full Publications <i class="fas fa-book ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Photo Gallery Placeholder --> | |
| <div class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center gradient-text">Group Activities</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="rounded-xl overflow-hidden h-40 hover:scale-105 transition-transform duration-300"> | |
| <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Lab equipment" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden h-40 hover:scale-105 transition-transform duration-300"> | |
| <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="Researchers working" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden h-40 hover:scale-105 transition-transform duration-300"> | |
| <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Microscope" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden h-40 hover:scale-105 transition-transform duration-300"> | |
| <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Quantum computing" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#" | |
| class="inline-flex items-center px-6 py-3 border border-primary text-primary rounded-full hover:bg-primary hover:text-white transition-colors duration-300"> | |
| View More Activities <i class="fas fa-images ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- People Section --> | |
| <section id="people" class="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-dark/50"> | |
| <h2 class="text-3xl font-bold mb-12 text-center gradient-text">Our Group</h2> | |
| <div class="mb-16"> | |
| <h3 class="text-2xl font-semibold mb-6 text-primary border-b border-gray-700 pb-2 px-4">Group Leader</h3> | |
| <div class="flex justify-center"> | |
| <div class="glass-effect p-8 md:px-8 rounded-xl hover-scale w-full"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="flex flex-col items-center md:items-start md:w-1/4 md:pl-12"> | |
| <div | |
| class="w-32 h-32 rounded-full overflow-hidden mb-4 border-2 border-primary/30 bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user fa-3x text-gray-400"></i> | |
| </div> | |
| <h4 class="text-xl font-bold">Prof. Wenhan Luo</h4> | |
| <p class="text-gray-400 text-sm mb-4">Principal Investigator</p> | |
| <div class="flex space-x-8"> | |
| <a href="mailto:[email protected]" class="text-gray-400 hover:text-primary transition-colors duration-300" title="Email"> | |
| <i class="fas fa-envelope fa-lg"></i> | |
| </a> | |
| <a href="https://whluo.github.io" target="_blank" class="text-gray-400 hover:text-primary transition-colors duration-300" title="Homepage"> | |
| <i class="fas fa-home fa-lg"></i> | |
| </a> | |
| <a href="https://scholar.google.com.hk/citations?user=g20Q12MAAAAJ" target="_blank" class="text-gray-400 hover:text-primary transition-colors duration-300" title="Google Scholar"> | |
| <i class="fas fa-graduation-cap fa-lg"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <p class="text-gray-300 mb-4">Associate Professor at HKUST, previously at Sun Yat-sen University. Former research scientist at Tencent and Amazon, developing deep learning solutions for products like WeChat, QQ, and Tencent Video.</p> | |
| <p class="text-gray-300 mb-4">Published 100+ papers in top venues (CVPR, ICML, NeurIPS, etc.). CVPR 2019 Best Paper Finalist, 2022 ACM China Rising Star Award, Top 2% Scientist worldwide (2023-2024).</p> | |
| <p class="text-gray-300">Serves as Senior Area Editor for IEEE SPL, Associate Editor for IEEE TIP, and Area Chair for NeurIPS/ICML/IJCAI.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-16"> | |
| <h3 class="text-2xl font-semibold mb-6 text-primary border-b border-gray-700 pb-2">Postdoctoral Researchers</h3> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Tao Wang</h4> | |
| <p class="text-gray-400 text-xs text-center">Low-level Vision</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-16"> | |
| <h3 class="text-2xl font-semibold mb-6 text-primary border-b border-gray-700 pb-2">Research Postgraduate Students</h3> | |
| <div class="grid md:grid-cols-4 gap-6"> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Zhiqiang Wang</h4> | |
| <p class="text-gray-400 text-xs text-center">(2024 Fall - )</p> | |
| <p class="text-gray-400 text-xs text-center">***research area***</p> | |
| </div> | |
| </div> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Yatian Wang</h4> | |
| <p class="text-gray-400 text-xs text-center">(2025 Spring - )</p> | |
| <p class="text-gray-400 text-xs text-center">***research area***</p> | |
| </div> | |
| </div> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Gongye Liu</h4> | |
| <p class="text-gray-400 text-xs text-center">(2025 Fall - )</p> | |
| <p class="text-gray-400 text-xs text-center">***research area***</p> | |
| </div> | |
| </div> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Zixuan Ye</h4> | |
| <p class="text-gray-400 text-xs text-center">(2025 Fall - )</p> | |
| <p class="text-gray-400 text-xs text-center">Video Generation & Edit</p> | |
| </div> | |
| </div> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Haoqiang Guo</h4> | |
| <p class="text-gray-400 text-xs text-center">(2025 Fall - )</p> | |
| <p class="text-gray-400 text-xs text-center">***research area***</p> | |
| </div> | |
| </div> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Zhizhou Zhong</h4> | |
| <p class="text-gray-400 text-xs text-center">(2025 Fall - )</p> | |
| <p class="text-gray-400 text-xs text-center">Digital Human</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-16"> | |
| <h3 class="text-2xl font-semibold mb-6 text-primary border-b border-gray-700 pb-2">Research Assistant | |
| </h3> | |
| <div class="grid md:grid-cols-4 gap-6"> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Yunxin Li</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-16"> | |
| <h3 class="text-2xl font-semibold mb-6 text-primary border-b border-gray-700 pb-2">Visiting | |
| Student/Research Intern</h3> | |
| <div class="grid md:grid-cols-4 gap-6"> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Zhe Kong</h4> | |
| <p class="text-gray-400 text-xs text-center">(2023 Fall - )</p> | |
| <p class="text-gray-400 text-xs text-center">Video Generation</p> | |
| </div> | |
| </div> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Zebin He</h4> | |
| <p class="text-gray-400 text-xs text-center">(2023 Fall - )</p> | |
| <p class="text-gray-400 text-xs text-center">3D Texture Generation</p> | |
| </div> | |
| </div> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Tao Zhou</h4> | |
| <p class="text-gray-400 text-xs text-center">(2025/01 - 2025/03)</p> | |
| </div> | |
| </div> | |
| <div class="glass-effect p-4 rounded-xl hover-scale"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden mb-3 border-2 border-primary/30"> | |
| <div class="w-full h-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| <h4 class="font-semibold text-center">Zipeng Wang</h4> | |
| <p class="text-gray-400 text-xs text-center">(2025/01 - 2025/05)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| window.scrollTo({ | |
| top: target.offsetTop - 80, // Adjust for fixed header | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </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=ZebinHe/c4g-homepage-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |