<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine's Day Websites - AI Collection</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Kanit:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Kanit', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
position: relative;
overflow-x: hidden;
}
/* Floating hearts background */
.hearts-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.heart-float {
position: absolute;
font-size: 20px;
color: rgba(255, 255, 255, 0.15);
animation: floatUp 15s linear infinite;
}
@keyframes floatUp {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
header {
text-align: center;
padding: 40px 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
margin-bottom: 40px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
h1 {
font-family: 'Dancing Script', cursive;
font-size: 4rem;
color: #fff;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 15px;
animation: pulse 2s infinite alternate;
}
@keyframes pulse {
0% {
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
100% {
text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.5);
}
}
.subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.95);
font-weight: 300;
margin-bottom: 10px;
}
.prompt-box {
background: rgba(255, 255, 255, 0.15);
padding: 15px 25px;
border-radius: 10px;
display: inline-block;
margin-top: 15px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.prompt-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 5px;
}
.prompt-text {
font-family: 'Courier New', monospace;
font-size: 1.1rem;
color: #fff;
font-weight: 600;
}
.info-section {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px;
margin-bottom: 40px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.info-section h2 {
color: #fff;
font-size: 1.8rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.info-section p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.8;
font-size: 1.1rem;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
position: relative;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.card-header {
background: linear-gradient(135deg, #ff6b9d, #c06c84);
padding: 30px;
text-align: center;
position: relative;
overflow: hidden;
}
.card-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
animation: sparkle 20s linear infinite;
}
@keyframes sparkle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ai-icon {
font-size: 3rem;
color: #fff;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.card-title {
font-size: 2rem;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
position: relative;
z-index: 1;
}
.ai-name {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
position: relative;
z-index: 1;
}
.card-body {
padding: 25px;
}
.card-description {
color: #555;
line-height: 1.6;
margin-bottom: 20px;
font-size: 0.95rem;
}
.features {
list-style: none;
margin-bottom: 20px;
}
.features li {
padding: 8px 0;
color: #666;
display: flex;
align-items: center;
gap: 10px;
}
.features li i {
color: #ff6b9d;
font-size: 1.1rem;
}
.btn-view {
display: block;
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #ff6b9d, #c06c84);
color: #fff;
text-decoration: none;
text-align: center;
border-radius: 10px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
}
.btn-view:hover {
background: linear-gradient(135deg, #ff5a8d, #b05c74);
box-shadow: 0 6px 20px rgba(255, 107, 157, 0.4);
transform: translateY(-2px);
}
.btn-view i {
margin-left: 8px;
}
footer {
text-align: center;
padding: 30px;
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.author-info {
font-size: 1.1rem;
margin-bottom: 10px;
}
.author-link {
color: #fff;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
padding: 5px 10px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
}
.author-link:hover {
background: rgba(255, 255, 255, 0.2);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
.gallery {
grid-template-columns: 1fr;
}
.subtitle {
font-size: 1.1rem;
}
.prompt-text {
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<!-- Floating hearts background -->
<div class="hearts-bg" id="heartsBg"></div>
<div class="container">
<header>
<h1><i class="fas fa-heart"></i> Valentine's Day Websites <i class="fas fa-heart"></i></h1>
<p class="subtitle">คอลเลคชันเว็บไซต์วาเลนไทน์ที่สร้างโดย AI จากค่ายต่างๆ</p>
<div class="prompt-box">
<div class="prompt-label">💡 Prompt ที่ใช้:</div>
<div class="prompt-text">"create beautiful website for valentine day with full animation"</div>
</div>
</header>
<div class="info-section">
<h2><i class="fas fa-info-circle"></i> เกี่ยวกับโปรเจ็ค</h2>
<p>
โปรเจ็คนี้เป็นการทดลองสร้างเว็บไซต์วาเลนไทน์ด้วย AI จากหลายค่าย โดยใช้ prompt เดียวกัน
เพื่อเปรียบเทียบความสามารถในการออกแบบและพัฒนาเว็บไซต์ของแต่ละ AI
แต่ละเวอร์ชันมีสไตล์และแนวทางการออกแบบที่แตกต่างกันไป สะท้อนให้เห็นถึงความหลากหลายของ AI ในปัจจุบัน
</p>
</div>
<div class="gallery">
<!-- Claude Card -->
<div class="card">
<div class="card-header">
<div class="ai-icon"><i class="fas fa-robot"></i></div>
<h3 class="card-title">Claude</h3>
<p class="ai-name">Anthropic's AI</p>
</div>
<div class="card-body">
<p class="card-description">
เว็บไซต์วาเลนไทน์ที่สร้างโดย Claude AI มีความโดดเด่นในด้านการออกแบบที่สวยงามและใส่ใจในรายละเอียด
</p>
<ul class="features">
<li><i class="fas fa-check-circle"></i> แอนิเมชันที่ลื่นไหล</li>
<li><i class="fas fa-check-circle"></i> ดีไซน์ที่ทันสมัย</li>
<li><i class="fas fa-check-circle"></i> โค้ดที่เป็นระเบียบ</li>
</ul>
<a href="claude/index.html" class="btn-view" target="_blank">
ดูตัวอย่าง <i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
<!-- DeepSeek Card -->
<div class="card">
<div class="card-header">
<div class="ai-icon"><i class="fas fa-brain"></i></div>
<h3 class="card-title">DeepSeek</h3>
<p class="ai-name">DeepSeek AI</p>
</div>
<div class="card-body">
<p class="card-description">
เว็บไซต์จาก DeepSeek AI มีความโดดเด่นในด้านฟีเจอร์ที่ครบครันและการใช้งานที่ง่าย
</p>
<ul class="features">
<li><i class="fas fa-check-circle"></i> ฟีเจอร์ครบครัน</li>
<li><i class="fas fa-check-circle"></i> Interactive Elements</li>
<li><i class="fas fa-check-circle"></i> Countdown Timer</li>
</ul>
<a href="deepseek/index.html" class="btn-view" target="_blank">
ดูตัวอย่าง <i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
<!-- Gemini Card -->
<div class="card">
<div class="card-header">
<div class="ai-icon"><i class="fas fa-gem"></i></div>
<h3 class="card-title">Gemini</h3>
<p class="ai-name">Google's AI</p>
</div>
<div class="card-body">
<p class="card-description">
เว็บไซต์จาก Gemini AI มีความโดดเด่นในด้านความคิดสร้างสรรค์และการใช้เทคโนโลยีที่ทันสมัย
</p>
<ul class="features">
<li><i class="fas fa-check-circle"></i> ดีไซน์สร้างสรรค์</li>
<li><i class="fas fa-check-circle"></i> เทคโนโลยีทันสมัย</li>
<li><i class="fas fa-check-circle"></i> ประสบการณ์ที่ดี</li>
</ul>
<a href="gemini/index.html" class="btn-view" target="_blank">
ดูตัวอย่าง <i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
<!-- GLM Card -->
<div class="card">
<div class="card-header">
<div class="ai-icon"><i class="fas fa-star"></i></div>
<h3 class="card-title">GLM</h3>
<p class="ai-name">GLM AI</p>
</div>
<div class="card-body">
<p class="card-description">
เว็บไซต์จาก GLM AI มีความโดดเด่นในด้านความเรียบง่ายและการใช้งานที่ตรงประเด็น
</p>
<ul class="features">
<li><i class="fas fa-check-circle"></i> ดีไซน์เรียบง่าย</li>
<li><i class="fas fa-check-circle"></i> ใช้งานง่าย</li>
<li><i class="fas fa-check-circle"></i> โหลดเร็ว</li>
</ul>
<a href="glm/index.html" class="btn-view" target="_blank">
ดูตัวอย่าง <i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
</div>
<footer>
<p class="author-info">
<i class="fas fa-code"></i> พัฒนาโดย <strong>Goragod Wiriya</strong>
</p>
<p>
<a href="https://code.goragod.com" class="author-link" target="_blank">
<i class="fas fa-globe"></i> code.goragod.com
</a>
</p>
<p style="margin-top: 15px; font-size: 0.9rem; opacity: 0.8;">
💖 Made with Love and AI | Valentine's Day 2026
</p>
</footer>
</div>
<script>
// Create floating hearts
function createFloatingHearts() {
const container = document.getElementById('heartsBg');
const heartCount = 20;
for (let i = 0; i < heartCount; i++) {
const heart = document.createElement('div');
heart.classList.add('heart-float');
heart.innerHTML = '<i class="fas fa-heart"></i>';
// Random position and animation
const leftPos = Math.random() * 100;
const delay = Math.random() * 15;
const duration = 10 + Math.random() * 10;
const size = 15 + Math.random() * 25;
heart.style.left = `${leftPos}%`;
heart.style.animationDelay = `${delay}s`;
heart.style.animationDuration = `${duration}s`;
heart.style.fontSize = `${size}px`;
container.appendChild(heart);
}
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
createFloatingHearts();
// Add fade-in animation to cards
const cards = document.querySelectorAll('.card');
cards.forEach((card, index) => {
card.style.opacity = '0';
card.style.animation = `fadeIn 0.6s ${0.2 + index * 0.1}s forwards`;
});
});
// Add fadeIn animation
const style = document.createElement('style');
style.textContent = `
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
`;
document.head.appendChild(style);
</script>
</body>
</html>