Spaces:

HeshamAI
/

ujraa

Running

App Files Files Community

HeshamAI commited on Apr 23, 2025

Commit

42e0277

verified ·

1 Parent(s): 9327200

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +671 -19
prompts.txt +6 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ujraa
-emoji: 💻
-colorFrom: red
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ujraa
+emoji: 🐳
+colorFrom: green
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,671 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ujraa - 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">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6C63FF',
+                        accent: '#00C896',
+                        dark: '#0F1117',
+                        light: '#F5F7FA',
+                        lighttext: '#1E1E1E',
+                        graytext: '#3C3C3C',
+                        darktext: '#D0D0D0'
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'Poppins', 'sans-serif'],
+                        'arabic': ['Tajawal', 'Cairo', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&family=Cairo:wght@400;600;700&display=swap');
+        body {
+            background-color: #0F1117;
+            color: #D0D0D0;
+            overflow-x: hidden;
+            transition: all 0.3s ease;
+        }
+        body.light-mode {
+            background-color: #F5F7FA;
+            color: #3C3C3C;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #6C63FF 0%, #00C896 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #6C63FF 0%, #00C896 100%);
+        }
+        .hero-pattern {
+            background-image: radial-gradient(circle at 50% 50%, rgba(108, 99, 255, 0.15) 0%, transparent 70%);
+            animation: pulse 8s infinite alternate;
+        }
+        .light-mode .hero-pattern {
+            background-image: radial-gradient(circle at 50% 50%, rgba(108, 99, 255, 0.08) 0%, transparent 70%);
+        }
+        @keyframes pulse {
+            0% { opacity: 0.8; }
+            100% { opacity: 1; }
+        }
+        .input-glow:focus {
+            box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.5);
+        }
+        .light-mode .input-glow:focus {
+            box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3);
+        }
+        .btn-glow:hover {
+            box-shadow: 0 0 15px rgba(108, 99, 255, 0.5);
+            transform: translateY(-2px);
+        }
+        .light-mode .btn-glow:hover {
+            box-shadow: 0 0 15px rgba(108, 99, 255, 0.3);
+        }
+        .feature-icon {
+            transition: all 0.3s ease;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+        .feature-card:hover .feature-icon {
+            transform: scale(1.1);
+            filter: drop-shadow(0 0 8px rgba(108, 99, 255, 0.5));
+        }
+        .light-mode .feature-card:hover {
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
+        }
+        .rtl {
+            direction: rtl;
+            text-align: right;
+        }
+        .fade-in {
+            animation: fadeIn 1s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .countdown {
+            font-family: 'Inter', 'Poppins', sans-serif;
+        }
+        .countdown.rtl {
+            font-family: 'Tajawal', 'Cairo', sans-serif;
+        }
+        /* Custom Logo Styles */
+        .logo-text-en {
+            font-family: 'Poppins', sans-serif;
+            font-weight: 700;
+            font-size: 1.5rem;
+            letter-spacing: -0.5px;
+        }
+        .logo-text-ar {
+            font-family: 'Cairo', sans-serif;
+            font-weight: 700;
+            font-size: 1.5rem;
+        }
+        .logo-combined {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .logo-symbol {
+            width: 48px;
+            height: 48px;
+            background: linear-gradient(135deg, #6C63FF 0%, #00C896 100%);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
+        }
+        .light-mode .logo-symbol {
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .logo-symbol::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
+            transform: rotate(45deg);
+        }
+        .logo-inner {
+            position: relative;
+            z-index: 2;
+            color: white;
+            font-weight: bold;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .logo-inner i {
+            font-size: 18px;
+            margin-bottom: 2px;
+        }
+        .logo-inner span {
+            font-size: 8px;
+            line-height: 1;
+        }
+        /* Light mode text colors */
+        .light-mode .text-slate-300 {
+            color: #3C3C3C;
+        }
+        .light-mode .text-slate-400 {
+            color: #3C3C3C;
+        }
+        .light-mode .text-slate-500 {
+            color: #3C3C3C;
+        }
+        .light-mode .bg-dark {
+            background-color: white;
+            border-color: #e2e8f0;
+        }
+        .light-mode .border-slate-800 {
+            border-color: #e2e8f0;
+        }
+        .light-mode .bg-slate-800 {
+            background-color: #e2e8f0;
+        }
+        /* Success message */
+        .success-message {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #00C896;
+            color: white;
+            padding: 12px 24px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            z-index: 1000;
+            opacity: 0;
+            transition: all 0.3s ease;
+        }
+        .success-message.show {
+            opacity: 1;
+            top: 30px;
+        }
+        /* Ripple effect */
+        .ripple {
+            position: relative;
+            overflow: hidden;
+        }
+        .ripple-effect {
+            position: absolute;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.4);
+            transform: scale(0);
+            animation: ripple 0.6s linear;
+            pointer-events: none;
+        }
+        @keyframes ripple {
+            to {
+                transform: scale(4);
+                opacity: 0;
+            }
+        }
+        /* Countdown animation */
+        .countdown-digit {
+            display: inline-block;
+            min-width: 1.5em;
+            text-align: center;
+            animation: pulseDigit 1s infinite alternate;
+        }
+        @keyframes pulseDigit {
+            0% { transform: scale(1); }
+            100% { transform: scale(1.05); }
+        }
+        @media (max-width: 640px) {
+            .hero-text {
+                font-size: 2.5rem;
+            }
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col font-sans" id="body">
+    <!-- Navigation -->
+    <nav class="py-6 px-4 sm:px-8 lg:px-12 xl:px-16 2xl:px-24">
+        <div class="flex justify-between items-center">
+            <div class="logo-combined">
+                <div class="logo-symbol">
+                    <div class="logo-inner">
+                        <i class="fas fa-bolt"></i>
+                        <span>Ujraa</span>
+                    </div>
+                </div>
+                <div class="logo-text-en hidden" id="logoEn">Ujraa</div>
+                <div class="logo-text-ar hidden" id="logoAr">أُجرة</div>
+            </div>
+            <div class="flex items-center space-x-4 rtl:space-x-reverse">
+                <button id="themeToggle" class="p-2 rounded-full bg-slate-800 text-slate-300 hover:bg-slate-700 transition-colors">
+                    <i class="fas fa-moon" id="themeIcon"></i>
+                </button>
+                <button id="languageToggle" class="px-4 py-2 rounded-md bg-slate-800 border border-slate-700 text-sm font-medium hover:bg-slate-700 transition-colors flex items-center">
+                    <span id="currentLanguage">English</span>
+                    <i class="fas fa-exchange-alt ml-2 text-xs rtl:ml-0 rtl:mr-2"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <main class="flex-grow hero-pattern">
+        <div class="container mx-auto px-4 sm:px-8 lg:px-12 xl:px-16 2xl:px-24 py-12 sm:py-24">
+            <div class="max-w-4xl mx-auto text-center fade-in">
+                <div class="inline-flex items-center px-4 py-2 rounded-full bg-slate-800 border border-slate-700 mb-6">
+                    <span class="text-sm font-medium" id="comingSoon">Coming Soon</span>
+                    <span class="mx-2 text-slate-500">|</span>
+                    <div class="countdown flex space-x-1 rtl:space-x-reverse" id="countdown">
+                        <span class="bg-slate-800 px-2 py-1 rounded text-xs"><span class="countdown-digit" id="days">00</span>d</span>
+                        <span class="bg-slate-800 px-2 py-1 rounded text-xs"><span class="countdown-digit" id="hours">00</span>h</span>
+                        <span class="bg-slate-800 px-2 py-1 rounded text-xs"><span class="countdown-digit" id="minutes">00</span>m</span>
+                    </div>
+                </div>
+                <h1 class="hero-text text-4xl sm:text-5xl md:text-6xl font-bold leading-tight mb-6">
+                    <span class="gradient-text" id="mainHeadline">Change the way</span><br>
+                    <span id="subHeadline">you work, forever.</span>
+                </h1>
+                <p class="text-lg sm:text-xl text-slate-300 max-w-2xl mx-auto mb-12" id="heroSubtext">
+                    No more chasing. No more guessing. Something smarter is coming.
+                </p>
+                <div class="max-w-md mx-auto">
+                    <div class="flex flex-col sm:flex-row gap-3">
+                        <input
+                            type="email"
+                            placeholder="Your email address"
+                            id="emailPlaceholder"
+                            class="input-glow flex-grow px-4 py-3 rounded-md bg-slate-800 border border-slate-700 focus:outline-none focus:border-primary transition-colors"
+                        >
+                        <button class="btn-glow px-6 py-3 rounded-md gradient-bg text-white font-medium hover:opacity-90 transition-opacity ripple" id="notifyButton">
+                            Notify Me First
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Features Grid -->
+    <section class="py-16 sm:py-24 px-4 sm:px-8 lg:px-12 xl:px-16 2xl:px-24">
+        <div class="max-w-6xl mx-auto fade-in">
+            <h2 class="text-2xl sm:text-3xl font-bold mb-12 text-center" id="featuresTitle">Work Without Worry</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="feature-card bg-slate-800 p-6 rounded-xl border border-slate-700 hover:border-primary transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4 feature-icon">
+                        <i class="fas fa-bolt text-primary text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2" id="feature1Title">Instant Payments</h3>
+                    <p class="text-slate-400" id="feature1Text">Get paid instantly once work is approved.</p>
+                </div>
+                <div class="feature-card bg-slate-800 p-6 rounded-xl border border-slate-700 hover:border-primary transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4 feature-icon">
+                        <i class="fas fa-file-signature text-primary text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2" id="feature2Title">Clear Terms</h3>
+                    <p class="text-slate-400" id="feature2Text">Everything in writing, no confusion.</p>
+                </div>
+                <div class="feature-card bg-slate-800 p-6 rounded-xl border border-slate-700 hover:border-primary transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4 feature-icon">
+                        <i class="fas fa-shield-alt text-primary text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2" id="feature3Title">Secure Deals</h3>
+                    <p class="text-slate-400" id="feature3Text">Work with confidence. We protect your process.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Poll Section -->
+    <section class="py-16 sm:py-24 px-4 sm:px-8 lg:px-12 xl:px-16 2xl:px-24 bg-slate-800">
+        <div class="max-w-4xl mx-auto text-center fade-in">
+            <h2 class="text-2xl sm:text-3xl font-bold mb-4" id="pollTitle">Help shape what's next</h2>
+            <p class="text-lg text-slate-300 max-w-2xl mx-auto mb-4" id="pollText">
+                Share your voice. Get early access and launch rewards.
+            </p>
+            <button class="btn-glow px-8 py-3 rounded-md gradient-bg text-white font-medium hover:opacity-90 transition-opacity ripple" id="pollButton">
+                Join the Poll
+            </button>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 px-4 sm:px-8 lg:px-12 xl:px-16 2xl:px-24 border-t border-slate-700">
+        <div class="max-w-6xl mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center space-x-2 mb-6 md:mb-0 rtl:space-x-reverse">
+                    <div class="logo-symbol">
+                        <div class="logo-inner">
+                            <i class="fas fa-bolt"></i>
+                            <span>Ujraa</span>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="logo-text-en hidden" id="footerLogoEn">Ujraa</div>
+                        <div class="logo-text-ar hidden" id="footerLogoAr">أُجرة</div>
+                    </div>
+                </div>
+                <div class="flex space-x-6 mb-6 md:mb-0 rtl:space-x-reverse" id="socialIcons">
+                    <a href="#" class="text-slate-400 hover:text-primary transition-colors">
+                        <i class="fab fa-linkedin-in text-xl"></i>
+                    </a>
+                    <a href="#" class="text-slate-400 hover:text-primary transition-colors">
+                        <i class="fab fa-facebook-f text-xl"></i>
+                    </a>
+                    <a href="#" class="text-slate-400 hover:text-primary transition-colors">
+                        <i class="fab fa-tiktok text-xl"></i>
+                    </a>
+                    <a href="#" class="text-slate-400 hover:text-primary transition-colors">
+                        <i class="fab fa-x-twitter text-xl"></i>
+                    </a>
+                </div>
+                <div class="text-slate-400 hover:text-primary transition-colors mb-6 md:mb-0">
+                    <a href="mailto:contact@ujraa.com" id="contactEmail">contact@ujraa.com</a>
+                </div>
+            </div>
+            <div class="mt-8 pt-8 border-t border-slate-700 text-center text-sm text-slate-500">
+                <p id="privacyText">We respect your privacy. No spam.</p>
+                <p class="mt-2" id="copyrightText">© 2023 Ujraa. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <!-- Success Message -->
+    <div class="success-message" id="successMessage">
+        <i class="fas fa-check-circle"></i>
+        <span id="successText">✅ You're in!</span>
+    </div>
+    <!-- Language Content -->
+    <script>
+        const content = {
+            en: {
+                comingSoon: "Coming Soon",
+                mainHeadline: "Change the way",
+                subHeadline: "you work, forever.",
+                heroSubtext: "No more chasing. No more guessing. Something smarter is coming.",
+                emailPlaceholder: "Your email address",
+                notifyButton: "Notify Me First",
+                featuresTitle: "Work Without Worry",
+                feature1Title: "Instant Payments",
+                feature1Text: "Get paid instantly once work is approved.",
+                feature2Title: "Clear Terms",
+                feature2Text: "Everything in writing, no confusion.",
+                feature3Title: "Secure Deals",
+                feature3Text: "Work with confidence. We protect your process.",
+                pollTitle: "Help shape what's next",
+                pollText: "Share your voice. Get early access and launch rewards.",
+                pollButton: "Join the Poll",
+                privacyText: "We respect your privacy. No spam.",
+                copyrightText: "© 2023 Ujraa. All rights reserved.",
+                currentLanguage: "English",
+                logoText: "Ujraa",
+                successText: "✅ You're in!"
+            },
+            ar: {
+                comingSoon: "قريباً",
+                mainHeadline: "ابدأ طريقة جديدة",
+                subHeadline: "في شغلك… وارتاح من وجع الدماغ",
+                heroSubtext: "كفاية لف ودوران… حاجة أذكى جاية مخصوص ليك.",
+                emailPlaceholder: "بريدك الإلكتروني",
+                notifyButton: "بلغني أول واحد",
+                featuresTitle: "اشتغل من غير قلق",
+                feature1Title: "دفع فوري",
+                feature1Text: "خد فلوسك فور ما يتم الموافقة على شغلك.",
+                feature2Title: "شروط واضحة",
+                feature2Text: "كل حاجة مكتوبة، من غير أي التباس.",
+                feature3Title: "صفقات آمنة",
+                feature3Text: "اشتغل بثقة. احنا بنحمي عملية الشغل دي.",
+                pollTitle: "ساعد في تشكيل اللي جاي",
+                pollText: "رأيك مهم! شارك وخد هدية أول ما نبدأ.",
+                pollButton: "شارك في الاستطلاع",
+                privacyText: "خصوصيتك تهمنا، مفيش سبام.",
+                copyrightText: "© ٢٠٢٣ أُجرة. كل الحقوق محفوظة.",
+                currentLanguage: "العربية",
+                logoText: "أُجرة",
+                successText: "✅ أنت معانا!"
+            }
+        };
+        // Check for saved preferences
+        let currentLang = localStorage.getItem('ujraa-lang') || 'en';
+        let isDarkMode = localStorage.getItem('ujraa-theme') === 'light' ? false : true;
+        // Set launch date for countdown (30 days from now)
+        const launchDate = new Date();
+        launchDate.setDate(launchDate.getDate() + 30);
+        // Update countdown
+        function updateCountdown() {
+            const now = new Date();
+            const diff = launchDate - now;
+            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+            document.getElementById('days').textContent = days.toString().padStart(2, '0');
+            document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
+            document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
+        }
+        // Update countdown immediately and then every minute
+        updateCountdown();
+        setInterval(updateCountdown, 60000);
+        // Language toggle functionality
+        document.getElementById('languageToggle').addEventListener('click', function() {
+            currentLang = currentLang === 'en' ? 'ar' : 'en';
+            localStorage.setItem('ujraa-lang', currentLang);
+            updateContent();
+            document.body.classList.toggle('rtl');
+            document.getElementById('currentLanguage').textContent = content[currentLang].currentLanguage;
+            document.getElementById('countdown').classList.toggle('rtl');
+        });
+        // Theme toggle functionality
+        document.getElementById('themeToggle').addEventListener('click', function() {
+            isDarkMode = !isDarkMode;
+            localStorage.setItem('ujraa-theme', isDarkMode ? 'dark' : 'light');
+            if (isDarkMode) {
+                document.body.classList.add('dark-mode');
+                document.body.classList.remove('light-mode');
+                document.getElementById('themeIcon').classList.remove('fa-sun');
+                document.getElementById('themeIcon').classList.add('fa-moon');
+            } else {
+                document.body.classList.add('light-mode');
+                document.body.classList.remove('dark-mode');
+                document.getElementById('themeIcon').classList.remove('fa-moon');
+                document.getElementById('themeIcon').classList.add('fa-sun');
+            }
+        });
+        // Initialize theme
+        function initTheme() {
+            if (!isDarkMode) {
+                document.body.classList.add('light-mode');
+                document.body.classList.remove('dark-mode');
+                document.getElementById('themeIcon').classList.remove('fa-moon');
+                document.getElementById('themeIcon').classList.add('fa-sun');
+            }
+        }
+        function updateContent() {
+            for (const key in content[currentLang]) {
+                const elements = document.querySelectorAll(`[id="${key}"]`);
+                elements.forEach(el => {
+                    el.textContent = content[currentLang][key];
+                });
+            }
+            // Toggle logo visibility
+            if (currentLang === 'en') {
+                document.getElementById('logoEn').classList.remove('hidden');
+                document.getElementById('logoAr').classList.add('hidden');
+                document.getElementById('footerLogoEn').classList.remove('hidden');
+                document.getElementById('footerLogoAr').classList.add('hidden');
+            } else {
+                document.getElementById('logoEn').classList.add('hidden');
+                document.getElementById('logoAr').classList.remove('hidden');
+                document.getElementById('footerLogoEn').classList.add('hidden');
+                document.getElementById('footerLogoAr').classList.remove('hidden');
+            }
+        }
+        // Initialize content and theme
+        function initPage() {
+            updateContent();
+            initTheme();
+            // Set RTL if Arabic is selected
+            if (currentLang === 'ar') {
+                document.body.classList.add('rtl');
+                document.getElementById('countdown').classList.add('rtl');
+                document.getElementById('currentLanguage').textContent = content[currentLang].currentLanguage;
+            }
+        }
+        // Initialize page
+        initPage();
+        // Form submission handler
+        document.getElementById('notifyButton').addEventListener('click', function(e) {
+            const email = document.querySelector('input[type="email"]').value;
+            if(email && email.includes('@')) {
+                // Show success message
+                const successMessage = document.getElementById('successMessage');
+                successMessage.classList.add('show');
+                // Hide after 3 seconds
+                setTimeout(() => {
+                    successMessage.classList.remove('show');
+                }, 3000);
+                document.querySelector('input[type="email"]').value = '';
+            } else {
+                alert(currentLang === 'en' ? 'Please enter a valid email address.' : 'لو سمحت أدخل بريد إلكتروني صحيح.');
+            }
+            // Ripple effect
+            createRipple(e);
+        });
+        // Poll button handler
+        document.getElementById('pollButton').addEventListener('click', function(e) {
+            alert(currentLang === 'en' ? 'Redirecting to community poll...' : 'هنتوجه لصفحة الاستطلاع...');
+            createRipple(e);
+        });
+        // Create ripple effect
+        function createRipple(event) {
+            const button = event.currentTarget;
+            const ripple = document.createElement('span');
+            ripple.classList.add('ripple-effect');
+            const rect = button.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = event.clientX - rect.left - size / 2;
+            const y = event.clientY - rect.top - size / 2;
+            ripple.style.width = ripple.style.height = `${size}px`;
+            ripple.style.left = `${x}px`;
+            ripple.style.top = `${y}px`;
+            button.appendChild(ripple);
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        }
+        // Add ripple effect to all buttons with ripple class
+        document.querySelectorAll('.ripple').forEach(button => {
+            button.addEventListener('click', createRipple);
+        });
+        // Animation on scroll
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('fade-in');
+                }
+            });
+        }, { threshold: 0.1 });
+        document.querySelectorAll('section').forEach(section => {
+            observer.observe(section);
+        });
+    </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=HeshamAI/ujraa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+Create a clean, modern, and emotionally engaging pre-launch landing page for a new tech startup that is about to revolutionize the freelancing experience.  The design should be bold and minimal, with a dark theme and vibrant accent colors. Use placeholder for the logo, which will be automatically generated.  The platform offers solutions for freelancers who face:  Delays in payments  Unclear job terms  Lack of security in deals  Instead of stating this directly, imply these challenges and hint that the solution is coming — a new way to work, earn, and grow. Use curiosity-driven, emotionally resonant messaging like:  “Tired of chasing invoices?”  “There’s a better way to freelance.”  “Work. Earn. Done.”  “Change the way you work, forever.”  Add a bold CTA: “Stay Tuned” and an email input box with a button: “Notify Me First”.  Include the following social media icons at the bottom (with placeholder links):  LinkedIn  Facebook  TikTok  X (Twitter)  Also add a contact email placeholder like: info@ujraa.com  Make sure the page is responsive, sleek on mobile, and optimized for fast loading.
+ Final Landing Page Prompt for AI Tool (Framer AI, Durable, Mixo, etc.) Create a modern, bilingual (Arabic + English) landing page for a new tech startup called Ujraa.  The design should feel sleek, futuristic, and trustworthy, with a dark mode theme and vibrant accents (like electric blue, gold, or neon tones). Use a placeholder for Ujraa’s logo, which will be added later.  🧩 This is a pre-launch teaser website — the idea must remain mysterious. ❌ Do not mention "freelancer" or "freelancing platform" anywhere.  Instead, imply value with short, emotionally-resonant copy targeting people who:  Wait too long to get paid  Work hard but don’t feel secure  Hate messy job terms  🔤 Content must support both Arabic and English, with a language toggle (top right). Arabic should be right-to-left and visually aligned.  🎥 Include subtle motion/animation, like:  A gently glowing background  Icons that pulse on hover  Text that fades in or types in  📦 Sections to Include:  Hero Section with a short tagline and email capture box:  Tagline: “Change the way you work, forever.”  Subtext: “No more chasing. No more guessing. Something smarter is coming.”  Button: “Notify Me First” + email input  Arabic translation visible on language switch  Teaser Features Section (3 items with animated icons):  Instant Payments  Clear Terms  Secure Deals  Use short, emotional, indirect wording  Community Poll Section:  Title: “Help shape what’s next”  Text: “Share your voice. Help us build something that truly works for you.”  Button: [Join the Poll]  Mention reward: “You’ll receive exclusive launch gifts”  Footer:  Social media icons for: LinkedIn, Facebook, TikTok, X  Contact email: contact@ujraa.com  Note: “We respect your privacy. No spam — ever.”  🎯 Goal: Make visitors curious, capture their email, and guide them to the poll — all while hiding full product details.
+ Edited Prompt for Landing Page Generator Create a modern, dual-language (Arabic and English) pre-launch landing page for a startup called Ujraa (أُجرة). The platform name should be displayed as Ujraa in English and أُجرة in Arabic.  🎨 Design Requirements:  Dark theme with professional, high-tech Egyptian vibe  Use a more refined shade of blue for text — not basic light blue  Include smooth motion animations: gentle gradients, hover icon effects, slow fade-in text  Use proper RTL alignment for Arabic. The Arabic copy must feel natural and written by an Egyptian, not AI. Tone should be real, local, and warm  The logo must look professional, not like Canva or stock icons. Generate a custom logo that blends:  Technology  Smart digital payments  A hint of freelancing work culture  Egyptian-modern identity  💬 Content Style:  Do not mention "freelance platform" or any direct details about the product  Messaging should tease benefits and imply value, not explain features  Feel like you're inviting someone into an early secret  📦 Content Sections to include:  1. Hero Section: English:  Title: “Change the way you work, forever.”  Subtext: “No more chasing. No more guessing. Something smarter is coming.”  Arabic:  Title: "غيّر طريقتك في الشغل... للأبد"  Subtext: "مش لازم تجري ورا شغلك... حاجة أذكى جاية في الطريق."  Email capture form with placeholder: “Your email address” / “بريدك الإلكتروني”  Button: “Notify Me First” / “بلغني أول واحد”  Add a subtle “Coming Soon” badge + bring back the countdown timer from previous version  2. Teaser Features (3 Cards, no details): Instant Payments → Get what you earned when you need it.  Clear Terms → No more confusion from day one.  Secure Deals → Built-in trust so you focus on great work.  Use icons that animate on hover  3. Opinion Poll Section: English:  Title: Help shape what’s next  Text: Share your voice. Help us build something real. Get exclusive early gifts.  Arabic:  Title: ساعد في تشكيل حاجة ليك  Text: رأيك مهم! ساعدنا نجهز حاجة حقيقية ليك وهتاخد هدية وقت الإطلاق  Button: Join the Poll / شارك في الاستطلاع  4. Footer: Social Icons: Facebook, LinkedIn, TikTok, X — align properly in Arabic too  Contact: contact@ujraa.com  Note: “We respect your privacy. No spam — ever.” / "خصوصيتك تهمنا. مفيش سبام ولا ازعاج."  5. Language Toggle: Simple EN/AR switch top-right that flips layout completely  6. Logo Instructions: Generate a new logo that includes both:  English: Ujraa (capital U, not lowercase)  Arabic: أُجرة  Style should blend tech, Egyptian modern identity, and hint of freelance culture (icons or abstract shape welcome)  Must look like a real startup identity, not generic or amateur
+ Create a dual-language (Arabic + English) modern pre-launch landing page for a tech startup named Ujraa (أُجرة). The brand name should appear in both forms: Ujraa in English and أُجرة in Arabic.  🎨 Design Style:  Dark background with elegant Electric Blue or Royal Blue as primary accent  Sleek, minimalist layout with strong emotional appeal  Use modern Google Fonts:  English: Inter or Poppins  Arabic: Tajawal, Cairo, or Almarai  📦 Sections:  Hero Section (Bilingual):  Title (EN): “Change the way you work, forever.” Title (AR): “ابدأ طريقة جديدة في شغلك… وارتاح من وجع الدماغ.”  Subtext (EN): “No more chasing. No more guessing. Something smarter is coming.” Subtext (AR): “كفاية لف ودوران… حاجة أذكى جاية مخصوص ليك.”  Email form: Placeholder bilingual — “Your email / بريدك الإلكتروني”  Button: “Notify Me First / بلغني أول واحد”  Add countdown timer ("Coming Soon")  Teaser Features Section (No specific details):  3 cards: Instant Payment – Clear Terms – Secure Deals  Use hover animation icons  Wording should be suggestive, not explanatory  Poll Invitation Section:  Title (EN): “Help shape what’s next” Title (AR): “ساعد في تشكيل ما هو قادم”  Subtext (EN): “Share your voice. Get early access and launch rewards.” Subtext (AR): “شارك برأيك وخد هدية أول ما نبدأ.”  Button: “Join the Poll / شارك في الاستطلاع”  Footer:  Display social icons (LinkedIn, Facebook, TikTok, X) aligned in both languages  Contact email: contact@ujraa.com  Note: “We respect your privacy. No spam.” / "خصوصيتك تهمنا، مفيش سبام."  Language Toggle:  Top-right switch: Arabic ↔ English  RTL support in Arabic with mirrored layout  Custom Logo Generation:  Style: Modern, smart, and unique. No Canva-style icons.  Must reflect:  Tech & digital trust  A hint of freelance economy  Egyptian-local feel  Create dual form:  English: Ujraa  Arabic: أجرة (same icon, different text)
+✅ Theme & Visuals Add a Dark / Light Mode toggle, top-right.  Dark mode: maintain current  Light mode: background #F5F7FA, text #1E1E1E, accents #3A5AFE  Use a modern, energetic color palette for tech + youth:  Primary: #3A5AFE  Accent: #00C896  Text: #6C7A89  Update hover effects for buttons and cards with scale or bounce  🎯 User Experience Improve micro-interactions:  Email form: on submit, show “✅ You’re in!” with animation  Button ripple effect or subtle hover glow  🔠 Typography & Tone Keep fonts: Inter (EN), Tajawal (AR)  Copy tone = Real, Egyptian, youth-friendly. Not formal or robotic.  🌐 Arabic Mode Polish Make sure layout fully flips in RTL view  Align social icons, inputs, and cards perfectly for Arabic visitors
+ Create a final bilingual pre-launch landing page for the Egyptian startup Ujraa (أُجرة) with a modern, youth-focused visual identity.  This version must be ready for publishing, with proper Arabic/English layout, strong brand color scheme, working light/dark modes, and a functional email form.  🔤 Language Behavior: The site must display only one language at a time.  Language switch (top-right) toggles full content and layout direction:  Arabic: RTL, aligned right, full Arabic copy  English: LTR, aligned left  Fonts:  Arabic: Tajawal or Cairo  English: Inter or Poppins  🎨 Color Identity (youthful & modern): Primary (Brand Color):  Electric Purple: #6C63FF  Accent (Trust + Energy):  Neo Mint Green: #00C896  Dark Mode:  BG: #0F1117  Headings: #FFFFFF  Text: #D0D0D0  Light Mode:  BG: #F5F7FA  Headings: #1E1E1E  Text: #3C3C3C  All button colors should have strong contrast (e.g., white text on purple)  🪪 Logo: Add a modern icon next to the word Ujraa and its Arabic form أجرة.  Icon should reflect: smart digital economy / trust / fast payment.  It must blend with the purple + mint green color scheme.  📦 Page Sections: 1. Hero Section: Title (EN): “Change the way you work, forever.”  Title (AR): “ابدأ طريقة جديدة في شغلك… وارتاح من وجع الدماغ.”  Subtext (EN): “No more chasing. No more guessing. Something smarter is coming.”  Subtext (AR): “كفاية لف ودوران… حاجة أذكى جاية مخصوص ليك.”  Functional countdown timer (30 days from now)  Email input + button:  Placeholder: “Your email / بريدك الإلكتروني”  Button: “Notify Me First / بلغني أول واحد”  Success confirmation: “✅ You’re in!”  2. Feature Cards (with animated icons): 💸 Instant Payments → "Get paid instantly once work is approved."  📄 Clear Terms → "Everything in writing, no confusion."  🛡️ Secure Deals → "Work with confidence. We protect your process."  3. Poll Section: EN:  Title: “Help shape what’s next”  Text: “Share your voice. Get early access and launch rewards.”  AR:  Title: “ساعد في تشكيل اللي جاي”  Text: “رأيك مهم! شارك وخد هدية أول ما نبدأ.”  Button: Join the Poll / شارك في الاستطلاع  4. Footer: Contact email: contact@ujraa.com  Social icons (use correct logos):  LinkedIn  Facebook  TikTok  X (use new X logo, not Twitter bird)  Privacy message:  EN: “We respect your privacy. No spam.”  AR: “خصوصيتك تهمنا، مفيش سبام.”  💡 Micro-UX: Animate button hover (scale or glow)  Countdown glow / pulse  Language toggle must remember preference (e.g., localStorage)