mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2025-09-14 20:07:24 +00:00
d43632a49a
Removes the `Chat Prompt.txt`, `VSCode Agent/Prompt.txt`, `Warp.dev/Prompt.txt`, and `v0 Prompts and Tools/Prompt.txt` files. These files likely contain outdated prompts or configurations that are no longer needed in the current project. Removing them helps to clean up the codebase and prevent potential confusion or conflicts.
754 lines
27 KiB
HTML
754 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Museum - Evolution of AI Assistants</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
min-height: 100vh;
|
|
color: #fff;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.museum-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.museum-header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
position: relative;
|
|
}
|
|
|
|
.museum-title {
|
|
font-size: 4rem;
|
|
margin-bottom: 10px;
|
|
background: linear-gradient(45deg, #667eea, #f093fb, #f5576c, #764ba2);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: titleGlow 3s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes titleGlow {
|
|
from { filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.5)); }
|
|
to { filter: drop-shadow(0 0 30px rgba(240, 147, 251, 0.8)); }
|
|
}
|
|
|
|
.museum-subtitle {
|
|
font-size: 1.3rem;
|
|
opacity: 0.8;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.museum-nav {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 15px 30px;
|
|
border: 2px solid #667eea;
|
|
background: transparent;
|
|
color: #667eea;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.nav-btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.nav-btn:hover {
|
|
background: #667eea;
|
|
color: white;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.exhibit-hall {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 30px;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.exhibit {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.exhibit::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #667eea, #f093fb, #f5576c);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.exhibit:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.exhibit:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.exhibit-icon {
|
|
font-size: 4rem;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
.exhibit-title {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 15px;
|
|
color: #667eea;
|
|
text-align: center;
|
|
}
|
|
|
|
.exhibit-description {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
margin-bottom: 20px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.exhibit-timeline {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.timeline-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
animation: slideInRight 0.6s ease forwards;
|
|
}
|
|
|
|
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
|
|
.timeline-item:nth-child(3) { animation-delay: 0.4s; }
|
|
.timeline-item:nth-child(4) { animation-delay: 0.6s; }
|
|
|
|
@keyframes slideInRight {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.timeline-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: #667eea;
|
|
margin-right: 15px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.timeline-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.timeline-year {
|
|
font-weight: bold;
|
|
color: #f093fb;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.timeline-text {
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.interactive-display {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
margin: 30px 0;
|
|
border: 1px solid rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.display-title {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 20px;
|
|
color: #f093fb;
|
|
text-align: center;
|
|
}
|
|
|
|
.ai-comparison {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.ai-card {
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(240, 147, 251, 0.2));
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ai-card:hover {
|
|
transform: scale(1.05);
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.ai-name {
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
color: #667eea;
|
|
}
|
|
|
|
.ai-score {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
background: linear-gradient(45deg, #667eea, #f093fb);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.ai-features {
|
|
list-style: none;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.ai-features li {
|
|
margin: 5px 0;
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.museum-gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 25px;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.gallery-item {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.gallery-item:hover {
|
|
transform: translateY(-5px);
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.gallery-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.gallery-title {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 10px;
|
|
color: #f093fb;
|
|
}
|
|
|
|
.gallery-description {
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.museum-footer {
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
padding: 30px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 1.1rem;
|
|
opacity: 0.8;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.footer-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.floating-particles {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: rgba(102, 126, 234, 0.3);
|
|
border-radius: 50%;
|
|
animation: floatParticle 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes floatParticle {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
|
|
50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; }
|
|
}
|
|
|
|
.particle:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
|
|
.particle:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; }
|
|
.particle:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 2s; }
|
|
.particle:nth-child(4) { bottom: 20%; right: 10%; animation-delay: 3s; }
|
|
.particle:nth-child(5) { top: 50%; left: 5%; animation-delay: 4s; }
|
|
.particle:nth-child(6) { top: 60%; right: 5%; animation-delay: 5s; }
|
|
|
|
@media (max-width: 768px) {
|
|
.museum-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.exhibit-hall {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.museum-nav {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-stats {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="floating-particles">
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
</div>
|
|
|
|
<div class="museum-container">
|
|
<div class="museum-header">
|
|
<h1 class="museum-title">🏛️ AI Museum</h1>
|
|
<p class="museum-subtitle">Exploring the Evolution of AI Assistants</p>
|
|
<p>Welcome to the virtual museum showcasing the fascinating journey of AI assistant evolution from 2019 to 2024</p>
|
|
</div>
|
|
|
|
<div class="museum-nav">
|
|
<button class="nav-btn" onclick="showExhibits()">🏛️ Exhibits</button>
|
|
<button class="nav-btn" onclick="showTimeline()">📅 Timeline</button>
|
|
<button class="nav-btn" onclick="showComparison()">⚖️ Comparison</button>
|
|
<button class="nav-btn" onclick="showGallery()">🖼️ Gallery</button>
|
|
</div>
|
|
|
|
<div class="exhibit-hall" id="exhibitHall">
|
|
<div class="exhibit">
|
|
<div class="exhibit-icon">🚀</div>
|
|
<h2 class="exhibit-title">The Autonomous Era</h2>
|
|
<p class="exhibit-description">
|
|
Explore the revolutionary shift from guided assistance to autonomous problem-solving.
|
|
Discover how AI assistants evolved from simple Q&A machines to sophisticated partners
|
|
capable of independent decision-making and complex task execution.
|
|
</p>
|
|
<div class="exhibit-timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2019-2021</div>
|
|
<div class="timeline-text">Basic Q&A with limited autonomy</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2022-2023</div>
|
|
<div class="timeline-text">Enhanced tool integration and context awareness</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2024</div>
|
|
<div class="timeline-text">Full autonomous execution with memory systems</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="exhibit">
|
|
<div class="exhibit-icon">🧠</div>
|
|
<h2 class="exhibit-title">Memory Revolution</h2>
|
|
<p class="exhibit-description">
|
|
Witness the transformation from stateless interactions to persistent memory systems.
|
|
Learn how AI assistants developed the ability to remember, learn, and grow across
|
|
conversations, building lasting relationships with users.
|
|
</p>
|
|
<div class="exhibit-timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2019-2021</div>
|
|
<div class="timeline-text">No memory - fresh start each session</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2022-2023</div>
|
|
<div class="timeline-text">Session-based memory and context</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2024</div>
|
|
<div class="timeline-text">Cross-session memory with natural citations</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="exhibit">
|
|
<div class="exhibit-icon">🛠️</div>
|
|
<h2 class="exhibit-title">Tool Integration Evolution</h2>
|
|
<p class="exhibit-description">
|
|
Trace the incredible expansion from basic file operations to sophisticated tool ecosystems.
|
|
From 3-5 simple tools to 20+ specialized capabilities including semantic search,
|
|
browser automation, and deployment systems.
|
|
</p>
|
|
<div class="exhibit-timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2019</div>
|
|
<div class="timeline-text">3-5 basic tools (read, write, search)</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2022-2023</div>
|
|
<div class="timeline-text">10-15 specialized tools with LSP integration</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2024</div>
|
|
<div class="timeline-text">20+ tools including browser automation and deployment</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="exhibit">
|
|
<div class="exhibit-icon">🎨</div>
|
|
<h2 class="exhibit-title">Response Format Revolution</h2>
|
|
<p class="exhibit-description">
|
|
Experience the dramatic transformation from plain text responses to rich,
|
|
interactive content. Discover how AI assistants evolved from simple text
|
|
to markdown formatting, structured tables, and mathematical expressions.
|
|
</p>
|
|
<div class="exhibit-timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2019-2021</div>
|
|
<div class="timeline-text">Plain text responses with basic formatting</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2022-2023</div>
|
|
<div class="timeline-text">Markdown formatting and structured responses</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-year">2024</div>
|
|
<div class="timeline-text">Rich content with LaTeX math and interactive elements</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="interactive-display" id="comparisonDisplay" style="display: none;">
|
|
<h2 class="display-title">AI Assistant Comparison</h2>
|
|
<div class="ai-comparison">
|
|
<div class="ai-card">
|
|
<div class="ai-name">Cursor v1.2</div>
|
|
<div class="ai-score">95/100</div>
|
|
<ul class="ai-features">
|
|
<li>⭐⭐⭐⭐⭐ Context Understanding</li>
|
|
<li>⭐⭐⭐⭐⭐ Tool Integration</li>
|
|
<li>⭐⭐⭐⭐ Memory Systems</li>
|
|
<li>⭐⭐⭐⭐⭐ Autonomy Level</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ai-card">
|
|
<div class="ai-name">Devin AI</div>
|
|
<div class="ai-score">90/100</div>
|
|
<ul class="ai-features">
|
|
<li>⭐⭐⭐⭐ Context Understanding</li>
|
|
<li>⭐⭐⭐⭐⭐ Tool Integration</li>
|
|
<li>⭐⭐⭐ Memory Systems</li>
|
|
<li>⭐⭐⭐⭐⭐ Autonomy Level</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ai-card">
|
|
<div class="ai-name">Perplexity</div>
|
|
<div class="ai-score">60/100</div>
|
|
<ul class="ai-features">
|
|
<li>⭐⭐⭐ Context Understanding</li>
|
|
<li>⭐⭐⭐ Tool Integration</li>
|
|
<li>⭐⭐ Memory Systems</li>
|
|
<li>⭐⭐ Autonomy Level</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ai-card">
|
|
<div class="ai-name">Replit</div>
|
|
<div class="ai-score">70/100</div>
|
|
<ul class="ai-features">
|
|
<li>⭐⭐⭐ Context Understanding</li>
|
|
<li>⭐⭐⭐⭐ Tool Integration</li>
|
|
<li>⭐⭐ Memory Systems</li>
|
|
<li>⭐⭐⭐ Autonomy Level</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="museum-gallery" id="galleryDisplay" style="display: none;">
|
|
<div class="gallery-item">
|
|
<div class="gallery-icon">🔍</div>
|
|
<h3 class="gallery-title">Semantic Search</h3>
|
|
<p class="gallery-description">The revolutionary shift from exact text matching to understanding-based search capabilities.</p>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<div class="gallery-icon">🌐</div>
|
|
<h3 class="gallery-title">Browser Integration</h3>
|
|
<p class="gallery-description">AI assistants gaining the ability to interact with web browsers and real-world applications.</p>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<div class="gallery-icon">🚀</div>
|
|
<h3 class="gallery-title">Deployment Automation</h3>
|
|
<p class="gallery-description">From code generation to complete deployment and production-ready solutions.</p>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<div class="gallery-icon">💾</div>
|
|
<h3 class="gallery-title">Memory Systems</h3>
|
|
<p class="gallery-description">Persistent context and learning capabilities that transform AI from tools to partners.</p>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<div class="gallery-icon">🎯</div>
|
|
<h3 class="gallery-title">Context Understanding</h3>
|
|
<p class="gallery-description">Multi-level context awareness from file-level to user-intent understanding.</p>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<div class="gallery-icon">🤖</div>
|
|
<h3 class="gallery-title">Autonomous Execution</h3>
|
|
<p class="gallery-description">The evolution from guided assistance to independent problem-solving capabilities.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="museum-footer">
|
|
<p class="footer-text">Museum Statistics</p>
|
|
<div class="footer-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-number">20+</div>
|
|
<div class="stat-label">AI Tools Analyzed</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">5</div>
|
|
<div class="stat-label">Years of Evolution</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">4</div>
|
|
<div class="stat-label">Context Levels</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">95%</div>
|
|
<div class="stat-label">Max Innovation Score</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showExhibits() {
|
|
document.getElementById('exhibitHall').style.display = 'grid';
|
|
document.getElementById('comparisonDisplay').style.display = 'none';
|
|
document.getElementById('galleryDisplay').style.display = 'none';
|
|
animateExhibits();
|
|
}
|
|
|
|
function showComparison() {
|
|
document.getElementById('exhibitHall').style.display = 'none';
|
|
document.getElementById('comparisonDisplay').style.display = 'block';
|
|
document.getElementById('galleryDisplay').style.display = 'none';
|
|
animateComparison();
|
|
}
|
|
|
|
function showGallery() {
|
|
document.getElementById('exhibitHall').style.display = 'none';
|
|
document.getElementById('comparisonDisplay').style.display = 'none';
|
|
document.getElementById('galleryDisplay').style.display = 'grid';
|
|
animateGallery();
|
|
}
|
|
|
|
function showTimeline() {
|
|
// Show exhibits with timeline focus
|
|
showExhibits();
|
|
}
|
|
|
|
function animateExhibits() {
|
|
const exhibits = document.querySelectorAll('.exhibit');
|
|
exhibits.forEach((exhibit, index) => {
|
|
exhibit.style.opacity = '0';
|
|
exhibit.style.transform = 'translateY(30px)';
|
|
setTimeout(() => {
|
|
exhibit.style.transition = 'all 0.6s ease';
|
|
exhibit.style.opacity = '1';
|
|
exhibit.style.transform = 'translateY(0)';
|
|
}, index * 200);
|
|
});
|
|
}
|
|
|
|
function animateComparison() {
|
|
const cards = document.querySelectorAll('.ai-card');
|
|
cards.forEach((card, index) => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'scale(0.8)';
|
|
setTimeout(() => {
|
|
card.style.transition = 'all 0.5s ease';
|
|
card.style.opacity = '1';
|
|
card.style.transform = 'scale(1)';
|
|
}, index * 150);
|
|
});
|
|
}
|
|
|
|
function animateGallery() {
|
|
const items = document.querySelectorAll('.gallery-item');
|
|
items.forEach((item, index) => {
|
|
item.style.opacity = '0';
|
|
item.style.transform = 'translateX(-30px)';
|
|
setTimeout(() => {
|
|
item.style.transition = 'all 0.6s ease';
|
|
item.style.opacity = '1';
|
|
item.style.transform = 'translateX(0)';
|
|
}, index * 100);
|
|
});
|
|
}
|
|
|
|
// Initialize museum
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
showExhibits();
|
|
|
|
// Add interactive effects
|
|
document.querySelectorAll('.nav-btn').forEach(btn => {
|
|
btn.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-3px) scale(1.05)';
|
|
});
|
|
|
|
btn.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0) scale(1)';
|
|
});
|
|
});
|
|
|
|
// Add particle animation
|
|
const particles = document.querySelectorAll('.particle');
|
|
particles.forEach((particle, index) => {
|
|
particle.style.animationDelay = `${index * 0.5}s`;
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |