<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎄 AI Christmas Landing Page Showcase</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-dark: #0a1628;
--bg-card: rgba(255, 255, 255, 0.03);
--border: rgba(255, 255, 255, 0.08);
--gold: #ffd700;
--red: #e74c3c;
--green: #27ae60;
--blue: #3498db;
--purple: #9b59b6;
--pink: #e91e63;
--text: #f0f0f0;
--text-muted: rgba(255, 255, 255, 0.6);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', 'Noto Sans Thai', sans-serif;
background: linear-gradient(135deg, var(--bg-dark) 0%, #1a2a4a 50%, #0d1f3c 100%);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}
/* Snow Animation */
.snowfall {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.snowflake {
position: absolute;
top: -10px;
color: white;
opacity: 0.8;
font-size: 12px;
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
}
}
/* Header */
header {
position: relative;
z-index: 10;
text-align: center;
padding: 80px 20px 40px;
}
.badge {
display: inline-block;
background: linear-gradient(135deg, var(--red), var(--pink));
padding: 8px 20px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
h1 {
font-family: 'Dancing Script', cursive;
font-size: 4rem;
color: var(--gold);
text-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
margin-bottom: 10px;
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { text-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
to { text-shadow: 0 0 40px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.3); }
}
.subtitle {
font-size: 1.3rem;
color: var(--text-muted);
max-width: 700px;
margin: 0 auto 30px;
line-height: 1.8;
}
/* Prompt Box */
.prompt-box {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 25px 30px;
max-width: 900px;
margin: 0 auto 60px;
backdrop-filter: blur(10px);
position: relative;
z-index: 10;
}
.prompt-label {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--green), #2ecc71);
padding: 6px 14px;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 15px;
}
.prompt-text {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text);
font-style: italic;
border-left: 3px solid var(--gold);
padding-left: 20px;
}
/* Grid */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px 80px;
position: relative;
z-index: 10;
}
.section-title {
text-align: center;
font-size: 2rem;
margin-bottom: 40px;
color: var(--text);
}
.section-title span {
color: var(--gold);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
/* Cards */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
padding: 30px;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--card-accent, var(--gold));
opacity: 0;
transition: opacity 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
0 0 40px var(--card-glow, rgba(255, 215, 0, 0.1));
}
.card:hover::before {
opacity: 1;
}
.card-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin: 0 auto 20px;
background: var(--card-bg, linear-gradient(135deg, #667eea, #764ba2));
box-shadow: 0 10px 30px var(--card-shadow, rgba(102, 126, 234, 0.3));
}
.card h3 {
font-size: 1.5rem;
margin-bottom: 8px;
color: var(--text);
}
.card .company {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 15px;
}
.card p {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 20px;
}
.card .features {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 25px;
}
.card .feature-tag {
background: rgba(255, 255, 255, 0.08);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.75rem;
color: var(--text-muted);
}
.card .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 30px;
background: var(--card-accent, linear-gradient(135deg, var(--gold), #ffb347));
color: var(--bg-dark);
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: 0 5px 20px var(--card-shadow, rgba(255, 215, 0, 0.3));
}
.card .btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px var(--card-shadow, rgba(255, 215, 0, 0.4));
}
/* Card Colors */
.card.claude {
--card-accent: linear-gradient(135deg, #d97706, #f59e0b);
--card-bg: linear-gradient(135deg, #d97706, #f59e0b);
--card-shadow: rgba(217, 119, 6, 0.3);
--card-glow: rgba(217, 119, 6, 0.15);
}
.card.gemini {
--card-accent: linear-gradient(135deg, #4285f4, #34a853);
--card-bg: linear-gradient(135deg, #4285f4, #34a853);
--card-shadow: rgba(66, 133, 244, 0.3);
--card-glow: rgba(66, 133, 244, 0.15);
}
.card.glm {
--card-accent: linear-gradient(135deg, #6366f1, #8b5cf6);
--card-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
--card-shadow: rgba(99, 102, 241, 0.3);
--card-glow: rgba(99, 102, 241, 0.15);
}
.card.gpt {
--card-accent: linear-gradient(135deg, #10a37f, #1a7f64);
--card-bg: linear-gradient(135deg, #10a37f, #1a7f64);
--card-shadow: rgba(16, 163, 127, 0.3);
--card-glow: rgba(16, 163, 127, 0.15);
}
.card.grok {
--card-accent: linear-gradient(135deg, #1da1f2, #0d8bd9);
--card-bg: linear-gradient(135deg, #1da1f2, #0d8bd9);
--card-shadow: rgba(29, 161, 242, 0.3);
--card-glow: rgba(29, 161, 242, 0.15);
}
/* Footer */
footer {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
font-size: 0.9rem;
position: relative;
z-index: 10;
border-top: 1px solid var(--border);
}
footer a {
color: var(--gold);
text-decoration: none;
}
/* Responsive */
@media (max-width: 768px) {
h1 {
font-size: 2.8rem;
}
.subtitle {
font-size: 1.1rem;
}
.prompt-text {
font-size: 1rem;
}
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Snowfall -->
<div class="snowfall" id="snowfall"></div>
<!-- Header -->
<header>
<div class="badge">🎄 AI Design Showcase</div>
<h1>Christmas Landing Pages</h1>
<p class="subtitle">
โปรเจ็คเปรียบเทียบ Landing Page สำหรับเทศกาลคริสต์มาสและปีใหม่<br>
ที่ออกแบบโดย AI จากค่ายต่างๆ ด้วย Prompt เดียวกัน
</p>
</header>
<!-- Prompt Box -->
<div class="prompt-box">
<div class="prompt-label">
<span>💬</span> PROMPT
</div>
<p class="prompt-text">
"Create a beautiful, modern Christmas and New Year landing page with animations HTML + Javascript google font"
</p>
</div>
<!-- Main Content -->
<main class="container">
<h2 class="section-title">🤖 เลือกดูผลงาน <span>AI</span> แต่ละค่าย</h2>
<div class="grid">
<!-- Claude -->
<div class="card claude">
<div class="card-icon">🧡</div>
<h3>Claude</h3>
<p class="company">by Anthropic</p>
<p>ดีไซน์สวยงาม ใช้ Dancing Script font พร้อมเอฟเฟกต์หิมะตกและ glow animation</p>
<div class="features">
<span class="feature-tag">Dancing Script</span>
<span class="feature-tag">CSS Animations</span>
<span class="feature-tag">Snowfall</span>
</div>
<a href="claude/" class="btn">
<span>👁️</span> ดูตัวอย่าง
</a>
</div>
<!-- Gemini -->
<div class="card gemini">
<div class="card-icon">💎</div>
<h3>Gemini</h3>
<p class="company">by Google DeepMind</p>
<p>ใช้ GSAP และ ScrollTrigger สำหรับ animation พร้อม Canvas snow effect</p>
<div class="features">
<span class="feature-tag">GSAP</span>
<span class="feature-tag">Canvas</span>
<span class="feature-tag">Glassmorphism</span>
</div>
<a href="gemini/" class="btn">
<span>👁️</span> ดูตัวอย่าง
</a>
</div>
<!-- GLM -->
<div class="card glm">
<div class="card-icon">🔮</div>
<h3>GLM</h3>
<p class="company">by Zhipu AI</p>
<p>Full-featured design มี Music Player, Newsletter, Gallery และ Countdown</p>
<div class="features">
<span class="feature-tag">Music Player</span>
<span class="feature-tag">Newsletter</span>
<span class="feature-tag">Gallery</span>
</div>
<a href="glm/" class="btn">
<span>👁️</span> ดูตัวอย่าง
</a>
</div>
<!-- GPT -->
<div class="card gpt">
<div class="card-icon">🤖</div>
<h3>GPT</h3>
<p class="company">by OpenAI</p>
<p>Modern card design พร้อม Web Audio API สำหรับ cheer sound และ ornament animations</p>
<div class="features">
<span class="feature-tag">Web Audio</span>
<span class="feature-tag">Share API</span>
<span class="feature-tag">Class-based JS</span>
</div>
<a href="gpt/" class="btn">
<span>👁️</span> ดูตัวอย่าง
</a>
</div>
<!-- Grok -->
<div class="card grok">
<div class="card-icon">⚡</div>
<h3>Grok</h3>
<p class="company">by xAI</p>
<p>Minimalist design มี Christmas tree, ornaments และ firework celebration effect</p>
<div class="features">
<span class="feature-tag">CSS Tree</span>
<span class="feature-tag">Fireworks</span>
<span class="feature-tag">Minimal</span>
</div>
<a href="grok/" class="btn">
<span>👁️</span> ดูตัวอย่าง
</a>
</div>
</div>
</main>
<!-- Footer -->
<footer>
<p>
🎄 <strong>AI Christmas Landing Page Showcase</strong> 🎅<br>
Made with ❤️ for the Holiday Season 2024-2025<br>
<a href="https://github.com" target="_blank">View on GitHub</a>
</p>
</footer>
<script>
// Snowfall Animation
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.innerHTML = '❄';
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.animationDuration = Math.random() * 3 + 4 + 's';
snowflake.style.opacity = Math.random() * 0.6 + 0.4;
snowflake.style.fontSize = Math.random() * 10 + 8 + 'px';
document.getElementById('snowfall').appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 7000);
}
// Create initial snowflakes
for (let i = 0; i < 20; i++) {
setTimeout(createSnowflake, i * 200);
}
// Continue creating snowflakes
setInterval(createSnowflake, 300);
// Card hover effect with tilt
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (y - centerY) / 20;
const rotateY = (centerX - x) / 20;
card.style.transform = `translateY(-10px) perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0) perspective(1000px) rotateX(0) rotateY(0)';
});
});
</script>
</body>
</html>