Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Shanghai Jiao Tong University | 上海交通大学</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Roboto', 'Noto Sans SC', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .chinese-font { | |
| font-family: 'Noto Sans SC', sans-serif; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://www.sjtu.edu.cn/resource/upload/202009/10/2020091017213465029.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 90vh; | |
| } | |
| .counter-item { | |
| transition: all 0.3s ease; | |
| } | |
| .counter-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .campus-card { | |
| transition: all 0.3s ease; | |
| background-size: cover; | |
| background-position: center; | |
| height: 300px; | |
| } | |
| .campus-card:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .timeline-item:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| bottom: -20px; | |
| width: 2px; | |
| height: 20px; | |
| background-color: #3b82f6; | |
| transform: translateX(-50%); | |
| } | |
| .floating-btn { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-blue-900 text-white shadow-lg fixed w-full z-50"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://www.sjtu.edu.cn/resource/upload/202009/10/2020091017213465029.jpg" alt="SJTU Logo" class="h-12"> | |
| <div> | |
| <h1 class="text-xl font-bold">SJTU</h1> | |
| <p class="text-xs chinese-font">上海交通大学</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#about" class="hover:text-blue-300 transition">About</a> | |
| <a href="#history" class="hover:text-blue-300 transition">History</a> | |
| <a href="#campuses" class="hover:text-blue-300 transition">Campuses</a> | |
| <a href="#academics" class="hover:text-blue-300 transition">Academics</a> | |
| <a href="#admission" class="hover:text-blue-300 transition">Admission</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-btn" class="text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-blue-800 mt-2 py-2 rounded-lg"> | |
| <a href="#about" class="block px-4 py-2 hover:bg-blue-700">About</a> | |
| <a href="#history" class="block px-4 py-2 hover:bg-blue-700">History</a> | |
| <a href="#campuses" class="block px-4 py-2 hover:bg-blue-700">Campuses</a> | |
| <a href="#academics" class="block px-4 py-2 hover:bg-blue-700">Academics</a> | |
| <a href="#admission" class="block px-4 py-2 hover:bg-blue-700">Admission</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero flex items-center justify-center text-white pt-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-4 chinese-font">上海交通大学</h1> | |
| <h2 class="text-3xl md:text-4xl font-semibold mb-6">Shanghai Jiao Tong University</h2> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">A world-renowned research university with a history spanning three centuries</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#admission" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-semibold transition">Apply Now</a> | |
| <a href="#about" class="bg-white hover:bg-gray-100 text-blue-900 px-8 py-3 rounded-full font-semibold transition">Learn More</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quick Facts --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-blue-900">University at a Glance</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> | |
| <div class="counter-item bg-blue-50 p-6 rounded-xl text-center"> | |
| <div class="text-5xl font-bold text-blue-700 mb-2" id="students-counter">0</div> | |
| <h3 class="text-xl font-semibold">Students</h3> | |
| <p class="text-gray-600">Undergraduate & Graduate</p> | |
| </div> | |
| <div class="counter-item bg-blue-50 p-6 rounded-xl text-center"> | |
| <div class="text-5xl font-bold text-blue-700 mb-2" id="faculty-counter">0</div> | |
| <h3 class="text-xl font-semibold">Faculty</h3> | |
| <p class="text-gray-600">Professors & Researchers</p> | |
| </div> | |
| <div class="counter-item bg-blue-50 p-6 rounded-xl text-center"> | |
| <div class="text-5xl font-bold text-blue-700 mb-2" id="programs-counter">0</div> | |
| <h3 class="text-xl font-semibold">Programs</h3> | |
| <p class="text-gray-600">Across 9 Major Disciplines</p> | |
| </div> | |
| <div class="counter-item bg-blue-50 p-6 rounded-xl text-center"> | |
| <div class="text-5xl font-bold text-blue-700 mb-2" id="ranking-counter">0</div> | |
| <h3 class="text-xl font-semibold">Global Ranking</h3> | |
| <p class="text-gray-600">Top 50 Worldwide</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2"> | |
| <img src="https://www.sjtu.edu.cn/resource/upload/202009/10/2020091017213465029.jpg" alt="SJTU Campus" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6 text-blue-900">About Shanghai Jiao Tong University</h2> | |
| <p class="text-gray-700 mb-4">Founded in 1896, Shanghai Jiao Tong University (SJTU) is one of China's oldest and most prestigious universities. As a leading research institution, SJTU is committed to nurturing high-quality talents, conducting cutting-edge research, and contributing to national development and social progress.</p> | |
| <p class="text-gray-700 mb-6">The university has developed into a comprehensive, research-intensive, and internationalized top university in China, with a strong commitment to innovation and entrepreneurship.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="bg-blue-100 px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-graduation-cap text-blue-700 mr-2"></i> | |
| <span>34 Schools</span> | |
| </div> | |
| <div class="bg-blue-100 px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-flask text-blue-700 mr-2"></i> | |
| <span>13 National Labs</span> | |
| </div> | |
| <div class="bg-blue-100 px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-globe text-blue-700 mr-2"></i> | |
| <span>200+ Partner Universities</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- History Timeline --> | |
| <section id="history" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-16 text-blue-900">Our Proud History</h2> | |
| <div class="relative"> | |
| <div class="border-l-2 border-blue-500 absolute h-full left-1/2 transform -translate-x-1/2"></div> | |
| <!-- Timeline Items --> | |
| <div class="mb-8"> | |
| <div class="timeline-item flex flex-col md:flex-row items-center relative"> | |
| <div class="md:w-1/2 md:pr-12 mb-4 md:mb-0 md:text-right"> | |
| <h3 class="text-2xl font-bold text-blue-900">1896</h3> | |
| <p class="text-gray-700">Founded as Nanyang Public School in Shanghai</p> | |
| </div> | |
| <div class="hidden md:block w-12 h-12 rounded-full bg-blue-500 border-4 border-white absolute left-1/2 transform -translate-x-1/2"></div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow"> | |
| <p>The university was established under the name Nanyang Public School by an imperial edict issued by the Guangxu Emperor, with Sheng Xuanhuai as the founder.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="timeline-item flex flex-col md:flex-row-reverse items-center relative"> | |
| <div class="md:w-1/2 md:pl-12 mb-4 md:mb-0"> | |
| <h3 class="text-2xl font-bold text-blue-900">1921</h3> | |
| <p class="text-gray-700">Renamed as Chiao Tung University</p> | |
| </div> | |
| <div class="hidden md:block w-12 h-12 rounded-full bg-blue-500 border-4 border-white absolute left-1/2 transform -translate-x-1/2"></div> | |
| <div class="md:w-1/2 md:pr-12"> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow"> | |
| <p>The university was renamed Chiao Tung University (Jiao Tong University) to reflect its growing reputation in engineering and transportation sciences.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="timeline-item flex flex-col md:flex-row items-center relative"> | |
| <div class="md:w-1/2 md:pr-12 mb-4 md:mb-0 md:text-right"> | |
| <h3 class="text-2xl font-bold text-blue-900">1956</h3> | |
| <p class="text-gray-700">Major relocation to Xi'an</p> | |
| </div> | |
| <div class="hidden md:block w-12 h-12 rounded-full bg-blue-500 border-4 border-white absolute left-1/2 transform -translate-x-1/2"></div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow"> | |
| <p>In response to the national strategy, a significant portion of the university was relocated to Xi'an, forming what is now Xi'an Jiaotong University.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="timeline-item flex flex-col md:flex-row-reverse items-center relative"> | |
| <div class="md:w-1/2 md:pl-12 mb-4 md:mb-0"> | |
| <h3 class="text-2xl font-bold text-blue-900">1999</h3> | |
| <p class="text-gray-700">Merger with Shanghai Second Medical University</p> | |
| </div> | |
| <div class="hidden md:block w-12 h-12 rounded-full bg-blue-500 border-4 border-white absolute left-1/2 transform -translate-x-1/2"></div> | |
| <div class="md:w-1/2 md:pr-12"> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow"> | |
| <p>The merger with Shanghai Second Medical University significantly strengthened SJTU's medical programs and research capabilities.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="timeline-item flex flex-col md:flex-row items-center relative"> | |
| <div class="md:w-1/2 md:pr-12 mb-4 md:mb-0 md:text-right"> | |
| <h3 class="text-2xl font-bold text-blue-900">Present</h3> | |
| <p class="text-gray-700">Global Research University</p> | |
| </div> | |
| <div class="hidden md:block w-12 h-12 rounded-full bg-blue-500 border-4 border-white absolute left-1/2 transform -translate-x-1/2"></div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow"> | |
| <p>Today, SJTU is consistently ranked among the top universities in China and the world, with particular strengths in engineering, medicine, and business.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Campuses Section --> | |
| <section id="campuses" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-blue-900">Our Campuses</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="campus-card rounded-xl shadow-lg relative overflow-hidden" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://www.sjtu.edu.cn/resource/upload/202009/10/2020091017213465029.jpg')"> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 text-white"> | |
| <h3 class="text-2xl font-bold">Xuhui Campus</h3> | |
| <p>The historic main campus located in downtown Shanghai</p> | |
| </div> | |
| </div> | |
| <div class="campus-card rounded-xl shadow-lg relative overflow-hidden" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://www.sjtu.edu.cn/resource/upload/202009/10/2020091017213465029.jpg')"> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 text-white"> | |
| <h3 class="text-2xl font-bold">Minhang Campus</h3> | |
| <p>The modern main campus with state-of-the-art facilities</p> | |
| </div> | |
| </div> | |
| <div class="campus-card rounded-xl shadow-lg relative overflow-hidden" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://www.sjtu.edu.cn/resource/upload/202009/10/2020091017213465029.jpg')"> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 text-white"> | |
| <h3 class="text-2xl font-bold">Luwan Campus</h3> | |
| <p>Home to the School of Medicine and affiliated hospitals</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Academics Section --> | |
| <section id="academics" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-blue-900">Academic Excellence</h2> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-semibold mb-4 text-blue-800">Top-Ranked Disciplines</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-cogs text-blue-700"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Engineering & Technology</h4> | |
| <p class="text-gray-600">Ranked among the top 20 globally in various engineering disciplines</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-heartbeat text-blue-700"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Clinical Medicine</h4> | |
| <p class="text-gray-600">World-class medical education and research facilities</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-chart-line text-blue-700"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Business & Economics</h4> | |
| <p class="text-gray-600">ACSB, EQUIS, and AMBA accredited Antai College</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-atom text-blue-700"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Natural Sciences</h4> | |
| <p class="text-gray-600">Strong programs in physics, chemistry, and life sciences</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-semibold mb-4 text-blue-800">International Programs</h3> | |
| <div class="bg-blue-50 p-6 rounded-xl"> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg mb-2">English-Taught Programs</h4> | |
| <p class="text-gray-700">Over 50 undergraduate and graduate programs taught entirely in English</p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg mb-2">Joint Degrees</h4> | |
| <p class="text-gray-700">Partnerships with top universities worldwide offering dual degree programs</p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg mb-2">Exchange Programs</h4> | |
| <p class="text-gray-700">Study abroad opportunities with 200+ partner institutions</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-2">Summer Schools</h4> | |
| <p class="text-gray-700">Short-term programs focusing on Chinese language, culture, and specialized topics</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Admission Section --> | |
| <section id="admission" class="py-16 bg-blue-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Join Our Community</h2> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-semibold mb-4">Admission Process</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">1. Explore Programs</h4> | |
| <p class="text-blue-200">Browse our undergraduate, graduate, and research programs</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">2. Prepare Documents</h4> | |
| <p class="text-blue-200">Transcripts, recommendation letters, personal statement, etc.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-laptop"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">3. Online Application</h4> | |
| <p class="text-blue-200">Submit your application through our portal</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">4. Receive Decision</h4> | |
| <p class="text-blue-200">Admission results typically announced within 8-12 weeks</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white p-8 rounded-xl text-gray-800"> | |
| <h3 class="text-2xl font-semibold mb-6 text-blue-900">Request Information</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="name">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="email">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="program">Program of Interest</label> | |
| <select id="program" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Undergraduate Programs</option> | |
| <option>Graduate Programs</option> | |
| <option>MBA Programs</option> | |
| <option>PhD Programs</option> | |
| <option>Exchange Programs</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2" for="message">Questions</label> | |
| <textarea id="message" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-700 hover:bg-blue-800 text-white py-3 px-4 rounded-lg font-semibold transition">Submit Request</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-blue-900">What Our Students Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Li Wei</h4> | |
| <p class="text-gray-600 text-sm">Computer Science, Class of 2022</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"The research opportunities at SJTU are incredible. I've had the chance to work on cutting-edge AI projects with professors who are leaders in their fields."</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Zhang Min</h4> | |
| <p class="text-gray-600 text-sm">Mechanical Engineering, PhD Candidate</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"The facilities here are world-class. As an engineering student, having access to such advanced labs and equipment has been invaluable for my research."</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Maria Gonzalez</h4> | |
| <p class="text-gray-600 text-sm">International Business, Exchange Student</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"Coming to SJTU as an exchange student was the best decision I made. The international community here is vibrant, and I've learned so much about Chinese culture and business practices."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Shanghai Jiao Tong University</h3> | |
| <p class="mb-4 text-gray-400">One of China's oldest and most prestigious universities, committed to excellence in education and research.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weixin"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white">About SJTU</a></li> | |
| <li><a href="#academics" class="text-gray-400 hover:text-white">Academics</a></li> | |
| <li><a href="#admission" class="text-gray-400 hover:text-white">Admission</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Research</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Contact Us</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3"></i> | |
| <span>800 Dongchuan Road, Shanghai, China</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3"></i> | |
| <span>+86-21-54740000</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| <span>admission@sjtu.edu.cn</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Newsletter</h3> | |
| <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full"> | |
| <button type="submit" class="bg-blue-700 hover:bg-blue-800 px-4 py-2 rounded-r-lg"><i class="fas fa-paper-plane"></i></button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Shanghai Jiao Tong University. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-700 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <!-- Floating Chat Button --> | |
| <div class="fixed bottom-8 left-8 floating-btn"> | |
| <button class="bg-green-600 text-white p-4 rounded-full shadow-lg hover:bg-green-700 transition"> | |
| <i class="fas fa-comment-dots text-xl"></i> | |
| </button> | |
| </div> | |
| <script> | |
| // Mobile Menu Toggle | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Counter Animation | |
| function animateCounter(element, target, duration = 2000) { | |
| const start = 0; | |
| const increment = target / (duration / 16); | |
| let current = start; | |
| const timer = setInterval(() => { | |
| current += increment; | |
| if (current >= target) { | |
| clearInterval(timer); | |
| current = target; | |
| } | |
| element.textContent = Math.floor(current).toLocaleString(); | |
| }, 16); | |
| } | |
| // Initialize counters when they come into view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const counterId = entry.target.id; | |
| let targetValue; | |
| switch(counterId) { | |
| case 'students-counter': | |
| targetValue = 45000; | |
| break; | |
| case 'faculty-counter': | |
| targetValue = 3500; | |
| break; | |
| case 'programs-counter': | |
| targetValue = 70; | |
| break; | |
| case 'ranking-counter': | |
| targetValue = 47; | |
| break; | |
| default: | |
| targetValue = 0; | |
| } | |
| animateCounter(entry.target, targetValue); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| // Observe all counter elements | |
| document.querySelectorAll('[id$="-counter"]').forEach(counter => { | |
| observer.observe(counter); | |
| }); | |
| // Back to Top Button | |
| const backToTopBtn = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopBtn.classList.remove('opacity-0', 'invisible'); | |
| backToTopBtn.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopBtn.classList.remove('opacity-100', 'visible'); | |
| backToTopBtn.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopBtn.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </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=rookieSJTU/try-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |