प्रोग्रेस बार के साथ पेज का HTML लोड हो रहा है

14362 cvroon

संपादक में खोलें Video अपना कोड प्रकाशित करें

प्रोग्रेस बार के साथ पेज का HTML लोड हो रहा है

अनुशंसित

9 December 2025

HTML CSS लॉगिन फ़ॉर्म टेम्पलेट Deezer Aesthetic

18 August 2024

होवर और धुंधला प्रभाव वाली साइटों की गैलरी

9 July 2025

काउबॉय कार्टर एल्बम ट्रैकलिस्ट और जानकारी

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CVROON Web Tools</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* CSS Reset ve Temel Stiller */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background-color: #0f172a;
            color: #f8fafc;
            min-height: 100vh;
            overflow-x: hidden;
        }

/* LOADING EKRANI STİLLERİ */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1e293b, #0f172a);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

.loading-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }

.loading-logo {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
        }

.loader {
            width: 80px;
            height: 80px;
            position: relative;
            margin-bottom: 2rem;
        }

.loader-circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 4px solid transparent;
            border-top: 4px solid #3b82f6;
            animation: spin 1.5s linear infinite;
        }

.loader-circle:nth-child(2) {
            border-top-color: #8b5cf6;
            animation-delay: 0.1s;
            width: 85%;
            height: 85%;
            top: 7.5%;
            left: 7.5%;
        }

.loader-circle:nth-child(3) {
            border-top-color: #ec4899;
            animation-delay: 0.2s;
            width: 70%;
            height: 70%;
            top: 15%;
            left: 15%;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

.loading-text {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: #cbd5e1;
            text-align: center;
        }

.loading-text .dots {
            display: inline-block;
            width: 40px;
            text-align: left;
        }

.loading-text .dots::after {
            content: '';
            animation: dots 1.5s steps(4, end) infinite;
        }

@keyframes dots {
            0%, 20% { content: ''; }
            40% { content: '.'; }
            60% { content: '..'; }
            80%, 100% { content: '...'; }
        }

.progress-container {
            width: 300px;
            height: 8px;
            background-color: #334155;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 1rem;
        }

.progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
            border-radius: 10px;
            transition: width 0.3s ease;
        }

.percentage {
            font-size: 1.2rem;
            font-weight: 600;
            color: #60a5fa;
        }

/* ANA SAYFA STİLLERİ */
        .main-content {
            display: none;
            opacity: 0;
            transition: opacity 0.8s ease;
        }

.main-content.visible {
            display: block;
            opacity: 1;
        }

.hero-section {
            padding: 4rem 2rem;
            text-align: center;
            background: linear-gradient(135deg, #1e293b, #0f172a);
            border-bottom: 1px solid #334155;
        }

.logo {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 1rem;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-block;
        }

.tagline {
            font-size: 1.5rem;
            color: #cbd5e1;
            margin-bottom: 2rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

.features {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 2rem;
            margin-top: 3rem;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

.feature-card {
            background: rgba(30, 41, 59, 0.7);
            border-radius: 16px;
            padding: 2rem;
            width: 300px;
            text-align: center;
            border: 1px solid rgba(59, 130, 246, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        }

.feature-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: #3b82f6;
        }

.feature-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #f8fafc;
        }

.feature-desc {
            color: #94a3b8;
            line-height: 1.6;
        }

.telegram-section {
            text-align: center;
            padding: 4rem 2rem;
            background: rgba(15, 23, 42, 0.9);
        }

.telegram-title {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: #f8fafc;
        }

.telegram-desc {
            font-size: 1.2rem;
            color: #94a3b8;
            max-width: 700px;
            margin: 0 auto 3rem;
            line-height: 1.6;
        }

.telegram-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            background: linear-gradient(90deg, #0088cc, #24a1de);
            color: white;
            padding: 18px 36px;
            font-size: 1.3rem;
            font-weight: 600;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(0, 136, 204, 0.4);
            margin-top: 1rem;
        }

.telegram-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 136, 204, 0.6);
            background: linear-gradient(90deg, #24a1de, #0088cc);
        }

.telegram-button i {
            font-size: 1.8rem;
        }

.footer {
            text-align: center;
            padding: 2rem;
            color: #64748b;
            font-size: 0.9rem;
            border-top: 1px solid #334155;
            margin-top: 3rem;
        }

/* Responsive Tasarım */
        @media (max-width: 768px) {
            .loading-logo, .logo {
                font-size: 2.5rem;
            }
            
            .tagline {
                font-size: 1.2rem;
            }
            
            .feature-card {
                width: 100%;
                max-width: 350px;
            }
            
            .telegram-title {
                font-size: 2rem;
            }
            
            .telegram-button {
                padding: 15px 30px;
                font-size: 1.1rem;
            }
        }
    </style>
</head>
<body>
    
    <div class="loading-screen" id="loadingScreen">
        <div class="loading-logo">CVROON</div>
        
        <div class="loader">
            <div class="loader-circle"></div>
            <div class="loader-circle"></div>
            <div class="loader-circle"></div>
        </div>
        
        <div class="loading-text">
            Sistem Hazırlanıyor<span class="dots"></span>
        </div>
        
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        
        <div class="percentage" id="percentage">0%</div>
    </div>

<div class="main-content" id="mainContent">
        
        <section class="hero-section">
            <h1 class="logo">CVROON</h1>
            <p class="tagline">Profesyonel web araçları ve çözümlerle işinizi kolaylaştırın. Modern, hızlı ve güvenilir araçlarımızla verimliliğinizi artırın.</p>
            
            <div class="features">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3 class="feature-title">Hızlı Çözümler</h3>
                    <p class="feature-desc">Zaman kazandıran araçlarımızla işlerinizi hızla tamamlayın. Saniyeler içinde sonuç alın.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="feature-title">Güvenli ve Özel</h3>
                    <p class="feature-desc">Verileriniz gizli kalır, asla paylaşılmaz. En yüksek güvenlik standartları ile korunur.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h3 class="feature-title">Zengin Araç Seti</h3>
                    <p class="feature-desc">Farklı ihtiyaçlarınız için özel olarak geliştirilmiş çok sayıda araç tek platformda.</p>
                </div>
            </div>
        </section>

<section class="telegram-section">
            <h2 class="telegram-title">Daha Fazlası Telegram'da!</h2>
            <p class="telegram-desc">CVROON Web Tools'un tüm özelliklerine, güncellemelere ve özel araçlara Telegram kanalımızdan ulaşabilirsiniz. Yeni araçlar, ipuçları ve özel içerikler için bizi takip edin.</p>
            
            <a href="https://t.me/cvronwebtool" target="_blank" class="telegram-button">
                <i class="fab fa-telegram"></i>
                Telegram Kanalımıza Katılın
            </a>
        </section>

<footer class="footer">
            <p>© 2023 CVROON Web Tools. Tüm hakları saklıdır.</p>
            <p style="margin-top: 10px;">Modern web çözümleri için doğru adres</p>
        </footer>
    </div>

अनुशंसित

HTML CSS लॉगिन फ़ॉर्म टेम्पलेट Deezer Aesthetic

होवर और धुंधला प्रभाव वाली साइटों की गैलरी

काउबॉय कार्टर एल्बम ट्रैकलिस्ट और जानकारी

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS