<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WhatsApp AI Agent - Sunum</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
width: 100%;
max-width: 1400px;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.header p {
font-size: 1.2rem;
opacity: 0.95;
}
.iframe-wrapper {
position: relative;
width: 100%;
height: 800px;
background: #f5f5f5;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.footer {
background: #f8f9fa;
padding: 20px;
text-align: center;
color: #666;
border-top: 1px solid #e0e0e0;
}
.footer a {
color: #25D366;
text-decoration: none;
font-weight: 600;
}
.footer a:hover {
text-decoration: underline;
}
/* Mobil uyumluluk */
@media (max-width: 768px) {
.header h1 {
font-size: 1.8rem;
}
.header p {
font-size: 1rem;
}
.iframe-wrapper {
height: 600px;
}
body {
padding: 10px;
}
}
/* Yükleniyor animasyonu */
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #666;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #25D366;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
WhatsApp AI Agent
</h1>
<p>Akıllı Sipariş Yönetim Sistemi - İnteraktif Sunum</p>
</div>
<div class="iframe-wrapper">
<div class="loading" id="loading">
<div class="loading-spinner"></div>
<p>Sunum yükleniyor...</p>
</div>
<iframe
src="https://claude.site/public/artifacts/65a51cb1-6878-4c10-9756-a5e773880da5/embed"
title="WhatsApp AI Agent Sunumu"
allow="clipboard-write"
allowfullscreen
onload="document.getElementById('loading').style.display='none'">
</iframe>
</div>
<div class="footer">
<p>
<strong>Demo için iletişime geçin:</strong>
<a href="mailto:info@aigents.com.tr">info@aigents.com.tr</a> |
<a href="tel:+905356409017">0535 640 90 17</a>
</p>
<p style="margin-top: 10px; font-size: 0.9rem;">
© 2025 AIgents - Tüm hakları saklıdır.
</p>
</div>
</div>
</body>
</html>