web yönlendirmesini kontrol et url durum kodu denetleyicisi

Sunucu yanıtını kontrol edin

Sunucu yanıtı
NS kayıtları
Whois alanı
Yanıt başlıkları
İstek başlıkları
Ham HTML kodu
301 Moved Permanently - pmuai.com
HTTP Status: 301
User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])
Cache-Control: private
Location: https://pmuai.com:443/
Content-Length: 0
Date: Sun, 01 Jun 2025 10:38:09 GMT
Content-Type: text/html; charset=UTF-8
content-length: 45909
content-type: text/html; charset=utf-8
date: Sun, 01 Jun 2025 10:38:09 GMT
server: Google Frontend
strict-transport-security: max-age=63072000; includeSubDomains
vary: Cookie
x-cloud-trace-context: fa99b79750b8b1a5e255422b1a8cf470;o=1
via: 1.1 google
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000

HTTP Kodu 301 Kalıcı Olarak Taşındı

301 durum kodu, istenen kaynağın kalıcı olarak yeni bir URL'ye taşındığı anlamına gelir. Gelecekteki tüm istekler yeni adresi kullanmalıdır.

Kod 301 ne zaman kullanılır?

  • Bir web sitesi alan adını değiştirirken
  • URL yapılarını değiştirirken
  • SEO için yönlendirmeleri ayarlarken

Kod 301 kullanıcı için ne anlama geliyor?

Tarayıcı kullanıcıyı otomatik olarak yeni adrese yönlendirecek ve arama motorları dizinlerini güncelleyecektir.

GET / HTTP/1.1
Host: pmuai.com
Accept: */*
User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PMU Elite - AI-Powered Beauty Analysis</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=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Nayra Style System -->
    <link rel="stylesheet" href="/static/css/nayra-style.css">
    
    <!-- Feather Icons -->
    <script src="https://unpkg.com/feather-icons"></script>
    
    
<style>
    /* Modern PMU Elite Landing Page Styles */
    :root {
        --primary-gradient: linear-gradient(135deg, #d97706 0%, #ea580c 50%, #ec4899 100%);
        --amber-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        --purple-gradient: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        --pink-gradient: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    }

    body {
        background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 50%, #fde68a 100%);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    /* Floating Navigation */
    .floating-nav {
        position: fixed;
        top: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        border-radius: 50px;
        padding: 0.75rem 1.5rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .logo-container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .logo-icon {
        width: 2rem;
        height: 2rem;
        background: var(--amber-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .nav-link {
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .nav-link:hover, .nav-link.active {
        color: var(--accent-gold);
    }

    /* Hero Section */
    .hero-section {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5rem 0 2rem;
        position: relative;
        overflow: hidden;
    }

    /* Floating Elements */
    .floating-elements {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .floating-element {
        position: absolute;
        border-radius: 50%;
        opacity: 0.6;
    }

    .floating-element:nth-child(1) {
        top: 5rem;
        left: 2.5rem;
        width: 5rem;
        height: 5rem;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        animation: float-pulse 3s infinite;
    }

    .floating-element:nth-child(2) {
        top: 10rem;
        right: 5rem;
        width: 4rem;
        height: 4rem;
        background: linear-gradient(135deg, #f9a8d4 0%, #ec4899 100%);
        animation: float-bounce 2s infinite;
    }

    .floating-element:nth-child(3) {
        bottom: 10rem;
        left: 5rem;
        width: 6rem;
        height: 6rem;
        background: linear-gradient(135deg, #c084fc 0%, #8b5cf6 100%);
        animation: float-pulse 3s infinite 1s;
    }

    .floating-element:nth-child(4) {
        bottom: 5rem;
        right: 2.5rem;
        width: 3rem;
        height: 3rem;
        background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
        animation: float-bounce 2s infinite 0.5s;
    }

    @keyframes float-pulse {
        0%, 100% { transform: scale(1); opacity: 0.6; }
        50% { transform: scale(1.1); opacity: 0.8; }
    }

    @keyframes float-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }

    .hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        position: relative;
        z-index: 10;
    }

    @media (max-width: 1024px) {
        .hero-grid {
            grid-template-columns: 1fr;
            gap: 3rem;
            text-align: center;
        }
    }

    /* Hero Content */
    .hero-content {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
        color: #92400e;
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-size: 0.875rem;
        font-weight: 500;
        width: fit-content;
    }

    .hero-title {
        font-size: 4rem;
        font-weight: 700;
        line-height: 1.1;
        margin: 0;
    }

    .hero-title .gradient-text {
        background: linear-gradient(135deg, #1f2937 0%, #d97706 50%, #ea580c 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        color: var(--text-secondary);
        line-height: 1.6;
        max-width: 500px;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    @media (min-width: 640px) {
        .hero-buttons {
            flex-direction: row;
        }
    }

    .btn-primary {
        background: var(--amber-gradient);
        color: white;
        padding: 1rem 2rem;
        border: none;
        border-radius: 1rem;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 10px 25px rgba(217, 119, 6, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-decoration: none;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px rgba(217, 119, 6, 0.4);
    }

    .btn-secondary {
        background: transparent;
        color: var(--text-primary);
        padding: 1rem 2rem;
        border: 2px solid #d1d5db;
        border-radius: 1rem;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-decoration: none;
    }

    .btn-secondary:hover {
        border-color: var(--accent-gold);
        transform: translateY(-2px);
    }

    /* Stats */
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        padding-top: 2rem;
    }

    .stat-item {
        text-align: center;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .stat-label {
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

    /* Upload Card */
    .upload-card {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        border: 0;
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        padding: 2rem;
    }

    .upload-header {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .upload-zone {
        border: 2px dashed #d1d5db;
        border-radius: 1rem;
        padding: 3rem 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    .upload-zone:hover {
        border-color: var(--accent-gold);
        background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
    }

    .upload-icon {
        width: 4rem;
        height: 4rem;
        background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        color: var(--accent-gold);
        font-size: 1.5rem;
        transition: transform 0.3s ease;
    }

    .upload-zone:hover .upload-icon {
        transform: scale(1.1);
    }

    .analyzing-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 2rem;
    }

    .spinner {
        width: 5rem;
        height: 5rem;
        background: var(--amber-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: spin 2s linear infinite;
        color: white;
        font-size: 1.75rem;
        box-shadow: 0 10px 25px rgba(217, 119, 6, 0.3);
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .progress-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .progress-bar {
        width: 100%;
        height: 0.75rem;
        background: #e5e7eb;
        border-radius: 0.5rem;
        overflow: hidden;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .progress-fill {
        height: 100%;
        background: var(--amber-gradient);
        border-radius: 0.5rem;
        transition: width 0.8s ease;
        background-size: 30px 30px;
        background-image: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent);
        animation: progress-shimmer 2s linear infinite;
    }

    @keyframes progress-shimmer {
        0% { background-position: 0 0; }
        100% { background-position: 60px 0; }
    }

    .progress-text {
        text-align: center;
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 0.95rem;
    }

    .progress-stages {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
        font-size: 0.85rem;
    }

    .stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        opacity: 0.4;
        transition: opacity 0.3s ease;
    }

    .stage.active {
        opacity: 1;
        color: var(--accent-gold);
    }

    .stage.completed {
        opacity: 0.8;
        color: #10b981;
    }

    .stage-icon {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        transition: all 0.3s ease;
    }

    .stage.active .stage-icon {
        background: var(--amber-gradient);
        color: white;
    }

    .stage.completed .stage-icon {
        background: #10b981;
        color: white;
    }

    /* Services Section */
    .services-section {
        padding: 5rem 0;
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    }

    .section-header {
        text-align: center;
        margin-bottom: 4rem;
    }

    .section-badge {
        background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
        color: #7c3aed;
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 1rem;
        display: inline-block;
    }

    .section-title {
        font-size: 3rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 1rem 0;
    }

    .services-grid {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }

    @media (max-width: 1024px) {
        .services-grid {
            grid-template-columns: 1fr;
        }
    }

    .featured-service {
        background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
        border-radius: 1.5rem;
        padding: 2rem;
        transition: all 0.3s ease;
        border: 0;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .featured-service:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    }

    .service-icon {
        width: 4rem;
        height: 4rem;
        background: var(--amber-gradient);
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        transition: transform 0.3s ease;
    }

    .featured-service:hover .service-icon {
        transform: scale(1.1);
    }

    .service-cards {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .service-card {
        background: white;
        border-radius: 1.5rem;
        padding: 1.5rem;
        transition: all 0.3s ease;
        border: 0;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    }

    .service-card .service-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .service-card:nth-child(1) .service-icon {
        background: var(--purple-gradient);
    }

    .service-card:nth-child(2) .service-icon {
        background: var(--pink-gradient);
    }

    /* Technology Section */
    .tech-section {
        padding: 5rem 0;
        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
        color: white;
        position: relative;
        overflow: hidden;
    }

    .tech-section::before {
        content: '';
        position: absolute;
        top: 2.5rem;
        left: 2.5rem;
        width: 8rem;
        height: 8rem;
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(234, 88, 12, 0.2) 100%);
        border-radius: 50%;
        animation: float-pulse 3s infinite;
    }

    .tech-section::after {
        content: '';
        position: absolute;
        bottom: 2.5rem;
        right: 2.5rem;
        width: 6rem;
        height: 6rem;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
        border-radius: 50%;
        animation: float-bounce 2s infinite;
    }

    .tech-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        position: relative;
        z-index: 10;
    }

    .tech-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }

    @media (max-width: 1024px) {
        .tech-grid {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
    }

    .tech-features {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .tech-feature {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        transition: transform 0.3s ease;
    }

    .tech-feature:hover {
        transform: translateX(10px);
    }

    .tech-feature-icon {
        width: 4rem;
        height: 4rem;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    .tech-feature:hover .tech-feature-icon {
        transform: scale(1.1);
    }

    .tech-feature:nth-child(1) .tech-feature-icon {
        background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    }

    .tech-feature:nth-child(2) .tech-feature-icon {
        background: var(--purple-gradient);
    }

    .tech-feature:nth-child(3) .tech-feature-icon {
        background: var(--pink-gradient);
    }

    .tech-feature:nth-child(4) .tech-feature-icon {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .accuracy-display {
        text-align: center;
    }

    .accuracy-circle {
        width: 16rem;
        height: 16rem;
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(234, 88, 12, 0.2) 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        backdrop-filter: blur(20px);
        border: 1px solid rgba(251, 191, 36, 0.3);
        position: relative;
    }

    .accuracy-content {
        text-align: center;
    }

    .accuracy-value {
        font-size: 4rem;
        font-weight: 700;
        color: #ffffff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        margin-bottom: 0.5rem;
    }

    .accuracy-label {
        color: #d1d5db;
        font-weight: 500;
    }

    .accuracy-badge {
        position: absolute;
        padding: 0.5rem 0.75rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .accuracy-badge:nth-child(2) {
        top: -1rem;
        right: -1rem;
        background: var(--amber-gradient);
        color: white;
    }

    .accuracy-badge:nth-child(3) {
        bottom: -1rem;
        left: -1rem;
        background: var(--purple-gradient);
        color: white;
    }

    /* Hidden elements for mobile */
    @media (max-width: 768px) {
        .floating-nav .nav-links {
            display: none;
        }

        .hero-title {
            font-size: 3rem;
        }

        .section-title {
            font-size: 2rem;
        }
    }
</style>

</head>
<body>
    
    
    <!-- Flash Messages -->
    <div class="container mt-4">
        
    </div>
    
    <!-- Main Content -->
    <main class="container mt-4">
        

<nav class="floating-nav">
    <div class="logo-container">
        <div class="logo-icon">
            <i data-feather="sparkles"></i>
        </div>
        <span style="font-weight: 700; color: var(--text-primary);">
            PMU Elite AI
        </span>
    </div>
    <div class="nav-links">
        <a href="#" class="nav-link active">Home</a>
        <a href="#services" class="nav-link">Services</a>
        <a href="#technology" class="nav-link">Technology</a>
        <a href="/api-docs" class="nav-link">API</a>
        <a href="#upload-section" class="button" style="background: var(--amber-gradient); color: white; padding: 0.5rem 1rem; border-radius: 50px; text-decoration: none; font-size: 0.875rem;">
            Get Started
        </a>
    </div>
</nav>

<!-- Hero Section -->
<section class="hero-section">
    <!-- Floating Elements -->
    <div class="floating-elements">
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
    </div>

    <div class="hero-grid">
        <!-- Left Content -->
        <div class="hero-content">
            <div class="hero-badge">
                <i data-feather="sparkles" style="width: 1rem; height: 1rem;"></i>
                AI-Powered Beauty Revolution
            </div>

            <h1 class="hero-title">
                <span class="gradient-text">Precision</span><br>
                <span style="color: var(--text-primary);">Beauty</span><br>
                <span style="color: var(--text-secondary);">Analysis</span>
            </h1>

            <p class="hero-subtitle">
                Transform your natural beauty with AI-powered facial analysis and personalized permanent makeup recommendations.
            </p>

            <div class="hero-buttons">
                <a href="#upload-section" class="btn-primary">
                    <i data-feather="camera" style="width: 1.25rem; height: 1.25rem;"></i>
                    Start Analysis
                    <i data-feather="arrow-right" style="width: 1.25rem; height: 1.25rem;"></i>
                </a>
                <a href="#" class="btn-secondary">
                    <i data-feather="play" style="width: 1.25rem; height: 1.25rem;"></i>
                    Watch Demo
                </a>
            </div>

            <!-- Stats -->
            <div class="hero-stats">
                <div class="stat-item">
                    <div class="stat-value" style="color: var(--accent-gold);">99.2%</div>
                    <div class="stat-label">Accuracy</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" style="color: #8b5cf6;">50K+</div>
                    <div class="stat-label">Analyses</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" style="color: #ec4899;">4.9★</div>
                    <div class="stat-label">Rating</div>
                </div>
            </div>
        </div>

        <!-- Right Content - Interactive Upload -->
        <div id="upload-section">
            <div class="upload-card">
                <div class="upload-header">
                    <h3 style="font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem;">Upload Your Photo</h3>
                    <p style="color: var(--text-secondary);">Get instant AI analysis</p>
                </div>

                <form action="/upload" method="POST" enctype="multipart/form-data" id="uploadForm">
                    <div class="upload-zone" id="uploadZone">
                        <div id="upload-content">
                            <div class="upload-icon">
                                <i data-feather="upload-cloud"></i>
                            </div>
                            <h4 style="font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem;">Drop your image here</h4>
                            <p style="color: var(--text-secondary); margin-bottom: 1rem;">or click to browse</p>
                            <button type="button" class="button" id="browseButton" style="background: var(--amber-gradient); color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 0.75rem; font-weight: 600; cursor: pointer;">
                                Select Image
                            </button>
                        </div>

                        <div id="analyzing-content" class="analyzing-state" style="display: none;">
                            <div class="spinner">
                                <i data-feather="scan"></i>
                            </div>
                            <h4 style="font-size: 1.125rem; font-weight: 600; color: var(--text-primary);">Analyzing...</h4>

                            <div class="progress-container">
                                <div class="progress-bar">
                                    <div class="progress-fill" id="progressFill" style="width: 0%;"></div>
                                </div>
                                <p class="progress-text" id="progressText">Initializing AI analysis...</p>

                                <div class="progress-stages">
                                    <div class="stage completed" id="stage1">
                                        <div class="stage-icon">✓</div>
                                        <span>Upload</span>
                                    </div>
                                    <div class="stage active" id="stage2">
                                        <div class="stage-icon">2</div>
                                        <span>Detection</span>
                                    </div>
                                    <div class="stage" id="stage3">
                                        <div class="stage-icon">3</div>
                                        <span>Analysis</span>
                                    </div>
                                    <div class="stage" id="stage4">
                                        <div class="stage-icon">4</div>
                                        <span>Results</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="file" name="file" id="fileInput" accept="image/*" required style="display: none;">

                    <div class="preview-container mt-4" style="display: none;">
                        <img id="previewImage" class="preview-image" src="" alt="Preview" style="max-width: 100%; max-height: 300px; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);">
                        <button type="submit" id="analyzeButton" class="button mt-3 w-full" style="background: var(--amber-gradient); color: white; padding: 1rem; border: none; border-radius: 0.75rem; font-weight: 600; cursor: pointer; width: 100%; margin-top: 1rem;">
                            Analyze Features
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section id="services" class="services-section">
    <div class="section-header">
        <div class="section-badge">Your Perfect Look Awaits</div>
        <h2 class="section-title">
            Enhance Your <span style="color: var(--accent-gold);">Natural Beauty</span>
        </h2>
    </div>

    <div class="services-grid">
        <!-- Featured Service -->
        <div class="featured-service">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;">
                <div class="service-icon">
                    <i data-feather="zap"></i>
                </div>
                <div style="background: rgba(234, 88, 12, 0.2); color: #ea580c; padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600;">
                    Most Popular
                </div>
            </div>
            <h3 style="font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem;">MICROBLADING</h3>
            <p style="color: var(--text-secondary); font-size: 1.125rem; line-height: 1.6; margin-bottom: 1.5rem;">
                Achieve fuller, more defined brows with hair-like strokes that perfectly complement your facial features. Our precision technique creates natural-looking results.
            </p>
            <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem;">
                <div style="display: flex; align-items: center; gap: 0.75rem;">
                    <i data-feather="check-circle" style="width: 1.25rem; height: 1.25rem; color: #ea580c;"></i>
                    <span style="color: var(--text-primary);">Natural hair-like strokes</span>
                </div>
                <div style="display: flex; align-items: center; gap: 0.75rem;">
                    <i data-feather="check-circle" style="width: 1.25rem; height: 1.25rem; color: #ea580c;"></i>
                    <span style="color: var(--text-primary);">Lasts 12-18 months</span>
                </div>
            </div>
            <button class="button" style="background: #ea580c; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 0.75rem; font-weight: 600; cursor: pointer; width: 100%;">
                Learn More
            </button>
        </div>

        <!-- Service Cards -->
        <div class="service-cards">
            <div class="service-card">
                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                    <div class="service-icon">
                        <i data-feather="target"></i>
                    </div>
                    <div>
                        <h3 style="font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0;">OMBRÉ BROWS</h3>
                        <p style="color: var(--text-secondary); font-size: 0.875rem; margin: 0;">Soft gradient effect</p>
                    </div>
                </div>
                <p style="color: var(--text-secondary); margin-bottom: 1rem;">
                    Create depth and dimension with our signature fade technique for a polished, professional look.
                </p>
                <button class="button" style="background: transparent; color: #8b5cf6; padding: 0.75rem 1.5rem; border: 1px solid #c4b5fd; border-radius: 0.75rem; font-weight: 600; cursor: pointer; width: 100%;">
                    Explore
                </button>
            </div>

            <div class="service-card">
                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                    <div class="service-icon">
                        <i data-feather="sparkles"></i>
                    </div>
                    <div>
                        <h3 style="font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0;">LIP BLUSHING</h3>
                        <p style="color: var(--text-secondary); font-size: 0.875rem; margin: 0;">Natural enhancement</p>
                    </div>
                </div>
                <p style="color: var(--text-secondary); margin-bottom: 1rem;">
                    Enhance your lips with subtle definition and natural color that brings out your best features.
                </p>
                <button class="button" style="background: transparent; color: #ec4899; padding: 0.75rem 1.5rem; border: 1px solid #f9a8d4; border-radius: 0.75rem; font-weight: 600; cursor: pointer; width: 100%;">
                    Discover
                </button>
            </div>
        </div>
    </div>
</section>

<!-- Technology Section -->
<section id="technology" class="tech-section">
    <div class="tech-content">
        <div class="section-header">
            <div class="section-badge" style="background: rgba(251, 191, 36, 0.2); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3);">
                Advanced AI Technology
            </div>
            <h2 class="section-title" style="color: white;">
                Powered by <span style="color: #fbbf24;">Cutting-Edge AI</span>
            </h2>
            <p style="font-size: 1.25rem; color: #d1d5db; max-width: 768px; margin: 0 auto;">
                Our proprietary AI system uses state-of-the-art computer vision to deliver unparalleled accuracy in facial analysis.
            </p>
        </div>

        <div class="tech-grid">
            <div class="tech-features">
                <div class="tech-feature">
                    <div class="tech-feature-icon">
                        <i data-feather="brain"></i>
                    </div>
                    <div>
                        <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">MediaPipe Face Mesh</h3>
                        <p style="color: #d1d5db;">468 high-precision facial landmarks</p>
                    </div>
                </div>

                <div class="tech-feature">
                    <div class="tech-feature-icon">
                        <i data-feather="eye"></i>
                    </div>
                    <div>
                        <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">Semantic Segmentation</h3>
                        <p style="color: #d1d5db;">Pixel-perfect region detection</p>
                    </div>
                </div>

                <div class="tech-feature">
                    <div class="tech-feature-icon">
                        <i data-feather="palette"></i>
                    </div>
                    <div>
                        <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">Color Analysis</h3>
                        <p style="color: #d1d5db;">Advanced color space evaluation</p>
                    </div>
                </div>

                <div class="tech-feature">
                    <div class="tech-feature-icon">
                        <i data-feather="target"></i>
                    </div>
                    <div>
                        <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">Symmetry Detection</h3>
                        <p style="color: #d1d5db;">Bilateral feature comparison</p>
                    </div>
                </div>
            </div>

            <div class="accuracy-display">
                <div class="accuracy-circle">
                    <div class="accuracy-content">
                        <div class="accuracy-value">99.2%</div>
                        <div class="accuracy-label">Accuracy Rate</div>
                        <div style="display: flex; justify-content: center; margin-top: 1rem; gap: 0.25rem;">
                            <i data-feather="star" style="width: 1.25rem; height: 1.25rem; color: #fbbf24; fill: #fbbf24;"></i>
                            <i data-feather="star" style="width: 1.25rem; height: 1.25rem; color: #fbbf24; fill: #fbbf24;"></i>
                            <i data-feather="star" style="width: 1.25rem; height: 1.25rem; color: #fbbf24; fill: #fbbf24;"></i>
                            <i data-feather="star" style="width: 1.25rem; height: 1.25rem; color: #fbbf24; fill: #fbbf24;"></i>
                            <i data-feather="star" style="width: 1.25rem; height: 1.25rem; color: #fbbf24; fill: #fbbf24;"></i>
                        </div>
                    </div>
                    <div class="accuracy-badge">Industry Leading</div>
                    <div class="accuracy-badge">AI Powered</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action Section -->
<section style="padding: 5rem 0; background: var(--primary-gradient); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2);"></div>
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 10; text-align: center;">
        <h2 style="font-size: 3rem; font-weight: 700; color: white; margin-bottom: 1.5rem;">Ready to Discover Your Perfect Look?</h2>
        <p style="font-size: 1.25rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;">
            Join thousands of satisfied clients who have enhanced their natural beauty with our AI-powered analysis.
        </p>
        <div style="display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center;">
            <a href="#upload-section" class="btn-primary" style="background: white; color: var(--accent-gold); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);">
                <i data-feather="camera" style="width: 1.25rem; height: 1.25rem;"></i>
                Start Your Analysis
            </a>
            <a href="#" class="btn-secondary" style="border-color: white; color: white;">
                Book Consultation
            </a>
        </div>
    </div>
</section>

    </main>
    
    <!-- Footer -->
    <footer class="mt-6 p-5" style="background-color: var(--primary-cream);">
        <div class="container">
            <div class="flex justify-between flex-wrap">
                <div class="mb-4">
                    <h3 class="mb-2">PMU Elite</h3>
                    <p class="text-secondary">Advanced facial analysis and personalized beauty recommendations.</p>
                </div>
                <div class="mb-4">
                    <h4 class="mb-2">Links</h4>
                    <div class="flex flex-col gap-1">
                        <a href="/about">About Us</a>
                        <a href="/privacy">Privacy Policy</a>
                        <a href="/terms">Terms of Service</a>
                    </div>
                </div>
                <div class="mb-4">
                    <h4 class="mb-2">Contact</h4>
                    <div class="flex flex-col gap-1">
                        <p>[email protected]</p>
                        <p>+44 20 1234 5678</p>
                    </div>
                </div>
            </div>
            <div class="mt-4 pt-4" style="border-top: 1px solid var(--border-light);">
                <p class="text-center">&copy; 2025 PMU Elite. All rights reserved.</p>
            </div>
        </div>
    </footer>
    
    <!-- Initialize Feather Icons -->
    <script>
        feather.replace();
        
        // Handle login/signup buttons for anonymous users
        document.addEventListener('DOMContentLoaded', function() {
            const loginBtn = document.getElementById('login-btn');
            const signupBtn = document.getElementById('signup-btn');
            
            if (loginBtn) {
                loginBtn.addEventListener('click', function() {
                    // For now, just focus on the email input if visible
                    const emailInput = document.getElementById('email');
                    if (emailInput) {
                        emailInput.focus();
                    } else {
                        alert('Please complete your facial analysis first, then enter your email to save results.');
                    }
                });
            }
            
            if (signupBtn) {
                signupBtn.addEventListener('click', function() {
                    // Same behavior as login for now - streamlined flow
                    const emailInput = document.getElementById('email');
                    if (emailInput) {
                        emailInput.focus();
                    } else {
                        alert('Please complete your facial analysis first, then enter your email to save results.');
                    }
                });
            }
        });
    </script>
    
    
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Feather icons
        if (typeof feather !== 'undefined') {
            feather.replace();
        }

        const fileInput = document.getElementById('fileInput');
        const uploadZone = document.getElementById('uploadZone');
        const previewImage = document.getElementById('previewImage');
        const previewContainer = document.querySelector('.preview-container');
        const browseButton = document.getElementById('browseButton');
        const uploadContent = document.getElementById('upload-content');
        const analyzingContent = document.getElementById('analyzing-content');
        const progressFill = document.getElementById('progressFill');
        const progressText = document.getElementById('progressText');

        let isProcessing = false; // Prevent duplicate uploads
        let currentStage = 1;

        // Enhanced progress messages
        const progressMessages = [
            "Uploading your image...",
            "Detecting facial landmarks...", 
            "Analyzing facial structure...",
            "Processing beauty insights...",
            "Generating personalized recommendations...",
            "Finalizing your analysis..."
        ];

        // Handle browse button click
        browseButton.addEventListener('click', function() {
            if (!isProcessing) {
                fileInput.click();
            }
        });

        // Handle drag and drop
        uploadZone.addEventListener('dragover', function(e) {
            e.preventDefault();
            if (!isProcessing) {
                uploadZone.style.borderColor = 'var(--accent-gold)';
                uploadZone.style.background = 'linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%)';
            }
        });

        uploadZone.addEventListener('dragleave', function() {
            if (!isProcessing) {
                uploadZone.style.borderColor = '#d1d5db';
                uploadZone.style.background = '';
            }
        });

        uploadZone.addEventListener('drop', function(e) {
            e.preventDefault();
            if (!isProcessing) {
                uploadZone.style.borderColor = '#d1d5db';
                uploadZone.style.background = '';

                if (e.dataTransfer.files.length) {
                    fileInput.files = e.dataTransfer.files;
                    handleFileUpload();
                }
            }
        });

        // Handle upload zone click
        uploadZone.addEventListener('click', function() {
            if (!isProcessing && uploadContent.style.display !== 'none') {
                fileInput.click();
            }
        });

        // Handle file selection
        fileInput.addEventListener('change', function() {
            if (!isProcessing && fileInput.files && fileInput.files[0]) {
                handleFileUpload();
            }
        });

        function updateStage(stage) {
            // Update progress stages
            for (let i = 1; i <= 4; i++) {
                const stageEl = document.getElementById(`stage${i}`);
                if (stageEl) {
                    stageEl.classList.remove('active', 'completed');

                    if (i < stage) {
                        stageEl.classList.add('completed');
                        stageEl.querySelector('.stage-icon').textContent = '✓';
                    } else if (i === stage) {
                        stageEl.classList.add('active');
                        stageEl.querySelector('.stage-icon').textContent = i;
                    } else {
                        stageEl.querySelector('.stage-icon').textContent = i;
                    }
                }
            }
        }

        function handleFileUpload() {
            if (isProcessing) return;

            isProcessing = true;

            // Show preview if element exists
            if (previewImage && previewContainer) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImage.src = e.target.result;
                    previewContainer.style.display = 'block';
                };
                reader.readAsDataURL(fileInput.files[0]);
            }

            // Show analyzing state immediately
            uploadContent.style.display = 'none';
            analyzingContent.style.display = 'flex';
            uploadZone.style.cursor = 'default';

            // Start enhanced progress
            startEnhancedProgress();

            // Submit form after brief delay
            setTimeout(() => {
                document.getElementById('uploadForm').submit();
            }, 1000);
        }

        function startEnhancedProgress() {
            let progress = 5; // Start with some initial progress
            let messageIndex = 0;
            currentStage = 2; // Start at detection stage
            updateStage(currentStage);

            // Ensure progress bar starts immediately
            progressFill.style.width = progress + '%';
            if (progressText) {
                progressText.textContent = progressMessages[0];
            }

            const progressInterval = setInterval(function() {
                progress += Math.random() * 3 + 1; // Faster, more visible progress

                if (progress > 100) progress = 100;
                progressFill.style.width = progress + '%';

                // Update message and stage based on progress
                if (messageIndex < progressMessages.length - 1 && progress > (messageIndex + 1) * 15) {
                    messageIndex++;
                    if (progressText) {
                        progressText.textContent = progressMessages[messageIndex];
                    }

                    // Update stage based on progress
                    if (progress > 25 && currentStage === 2) {
                        currentStage = 3;
                        updateStage(currentStage);
                    } else if (progress > 60 && currentStage === 3) {
                        currentStage = 4;
                        updateStage(currentStage);
                    }
                }

                if (progress >= 95) {
                    clearInterval(progressInterval);
                    if (progressText) {
                        progressText.textContent = "Finalizing your results...";
                    }
                }
            }, 200); // Faster updates for smoother animation
        }

        // Handle form submission - simplified to prevent double upload
        const uploadForm = document.getElementById('uploadForm');

        uploadForm.addEventListener('submit', function(e) {
            e.preventDefault(); // Always prevent default form submission

            if (!isProcessing && fileInput.files && fileInput.files[0]) {
                handleFileUpload();
            }
        });

        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Check if we should auto-focus the upload form (for redirects)
        
    });
</script>

</body>
</html>

Alan adının whois bilgisi

Domain Name: PMUAI.COM
Registry Domain ID: 2987083551_DOMAIN_COM-VRSN
Registrar WHOIS Server: whois.squarespace.domains
Registrar URL: http://squarespace.domains
Updated Date: 2025-05-28T12:00:48Z
Creation Date: 2025-05-28T12:00:48Z
Registry Expiry Date: 2026-05-28T12:00:48Z
Registrar: Squarespace Domains LLC
Registrar IANA ID: 3827
Registrar Abuse Contact Email: [email protected]
Registrar Abuse Contact Phone: 1-646-693-5324
Domain Status: clientDeleteProhibited https://icann.org/epp#clientDeleteProhibited
Domain Status: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
Name Server: NS-CLOUD-D1.GOOGLEDOMAINS.COM
Name Server: NS-CLOUD-D2.GOOGLEDOMAINS.COM
Name Server: NS-CLOUD-D3.GOOGLEDOMAINS.COM
Name Server: NS-CLOUD-D4.GOOGLEDOMAINS.COM
DNSSEC: unsigned
URL of the ICANN Whois Inaccuracy Complaint Form: https://www.icann.org/wicf/
>>> Last update of whois database: 2025-06-01T10:37:49Z <<<
For more information on Whois status codes, please visit https://icann.org/epp
NOTICE: The expiration date displayed in this record is the date the
TERMS OF USE: You are not authorized to access or query our Whois
by the following terms of use: You agree that you may use this Data only
to: (1) allow, enable, or otherwise support the transmission of mass