Hugging Face's logo

Spaces:
xtechnology
/
comming-soon
Running

App Files Community
comming-soon
File size: 8,652 Bytes 
51987f2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mintaş Temizlik Ürünleri - Coming Soon</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <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=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'soft-blue': '#e6f0ff',
                        'primary-blue': '#3a86ff',
                        'light-blue': '#a7c7ff',
                        'dark-blue': '#1d3557'
                    },
                    fontFamily: {
                        'sans': ['Poppins', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style>
        .bubble {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(2px);
            animation: float 8s infinite ease-in-out;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) translateX(0); }
            25% { transform: translateY(-20px) translateX(10px); }
            50% { transform: translateY(-40px) translateX(-10px); }
            75% { transform: translateY(-20px) translateX(-15px); }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.9; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
        }
        
        .wave svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 100px;
        }
        
        .wave .shape-fill {
            fill: #FFFFFF;
        }
    </style>
</head>
<body class="bg-gradient-to-b from-soft-blue to-white min-h-screen flex flex-col overflow-x-hidden">
    <!-- Decorative bubbles -->
    <div class="bubble w-12 h-12 top-1/4 left-1/4"></div>
    <div class="bubble w-8 h-8 top-1/3 right-1/4 animation-delay-2000"></div>
    <div class="bubble w-16 h-16 bottom-1/4 left-1/3 animation-delay-4000"></div>
    <div class="bubble w-10 h-10 top-1/2 right-1/3 animation-delay-6000"></div>
    
    <main class="flex-grow flex flex-col items-center justify-center px-4 py-12 relative z-10">
        <div class="max-w-2xl w-full text-center">
            <!-- Logo -->
            <div class="mb-8">
                <div class="bg-white rounded-full p-4 shadow-lg inline-flex items-center justify-center">
                    <div class="bg-primary-blue rounded-full p-5">
                        <i class="fas fa-spray-can text-white text-4xl"></i>
                    </div>
                </div>
            </div>
            
            <!-- Main Content -->
            <h1 class="text-4xl md:text-5xl font-light text-dark-blue mb-6">
                We're <span class="font-semibold">Upgrading</span> Our Website
            </h1>
            
            <div class="bg-white rounded-2xl shadow-lg p-6 mb-8 max-w-md mx-auto">
                <p class="text-lg md:text-xl text-gray-600 leading-relaxed">
                    We are upgrading our website to serve you better.
                </p>
            </div>
            
            <div class="flex justify-center space-x-4 mb-12">
                <div class="w-3 h-3 rounded-full bg-light-blue animate-pulse"></div>
                <div class="w-3 h-3 rounded-full bg-primary-blue animate-pulse animation-delay-500"></div>
                <div class="w-3 h-3 rounded-full bg-light-blue animate-pulse animation-delay-1000"></div>
            </div>
            
            <!-- Cleaning Products Banner -->
            <div class="relative w-full max-w-md mx-auto mb-12">
                <div class="bg-white rounded-xl shadow-lg p-4">
                    <div class="flex items-center justify-center space-x-4">
                        <div class="bg-primary-blue bg-opacity-10 p-3 rounded-lg">
                            <i class="fas fa-spray-can text-primary-blue text-2xl"></i>
                        </div>
                        <div class="text-left">
                            <h3 class="font-medium text-dark-blue">Premium Cleaning Products</h3>
                            <p class="text-sm text-gray-600">Eco-friendly & effective solutions</p>
                        </div>
                    </div>
                </div>
                <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2">
                    <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg pulse">
                        <i class="fas fa-broom text-primary-blue text-xl"></i>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- Wave Divider -->
    <div class="wave">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
            <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
            <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
        </svg>
    </div>
    
    <!-- Footer -->
    <footer class="bg-white py-6 text-center">
        <div class="container mx-auto px-4">
            <h2 class="text-xl font-semibold text-dark-blue mb-2">Mintaş Temizlik Ürünleri</h2>
            <p class="text-gray-600">&copy; 2023 All Rights Reserved</p>
        </div>
    </footer>
    
    <script>
        // Create dynamic bubbles
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.body;
            const bubbleCount = 12;
            
            for (let i = 0; i < bubbleCount; i++) {
                const bubble = document.createElement('div');
                bubble.classList.add('bubble');
                
                // Random size between 20px and 80px
                const size = Math.floor(Math.random() * 60) + 20;
                bubble.style.width = `${size}px`;
                bubble.style.height = `${size}px`;
                
                // Random position
                const top = Math.floor(Math.random() * 100);
                const left = Math.floor(Math.random() * 100);
                bubble.style.top = `${top}%`;
                bubble.style.left = `${left}%`;
                
                // Random animation delay
                const delay = Math.floor(Math.random() * 8000);
                bubble.style.animationDelay = `${delay}ms`;
                
                container.appendChild(bubble);
            }
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=xtechnology/comming-soon" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>