commit 6ec65a5540c3ddd384ae6da9d254c800e579b3c1

Author: root <root@hub.scroll.pub> Date: 2024-12-28 16:34:05 +0000 Subject: Deleted style.css diff --git a/style.css b/style.css deleted file mode 100644 index 8d91979..0000000 --- a/style.css +++ /dev/null @@ -1,215 +0,0 @@ -:root { - --primary: #ff5f00; - --primary-dark: #e65500; - --text: #333; - --bg: #fff; - --gray: #f5f5f5; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - color: var(--text); - line-height: 1.6; -} - -.main-header { - position: fixed; - width: 100%; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(10px); - z-index: 100; - padding: 1rem 2rem; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); -} - -nav { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 1200px; - margin: 0 auto; -} - -.logo { - font-size: 2rem; - font-weight: bold; - color: var(--primary); -} - -.nav-links a { - margin-left: 2rem; - text-decoration: none; - color: var(--text); - transition: color 0.3s; -} - -.nav-links a:hover { - color: var(--primary); -} - -.cta-button { - background: var(--primary); - color: white !important; - padding: 0.5rem 1.5rem; - border-radius: 25px; - transition: background 0.3s; -} - -.cta-button:hover { - background: var(--primary-dark); -} - -.hero { - min-height: 100vh; - display: flex; - align-items: center; - padding: 6rem 2rem 2rem; - background: linear-gradient(135deg, #fff 0%, #fff8f3 100%); -} - -.hero-content { - flex: 1; - max-width: 600px; -} - -.hero h1 { - font-size: 4rem; - margin-bottom: 1rem; - color: var(--primary); -} - -.tagline { - font-size: 1.5rem; - margin-bottom: 1.5rem; -} - -.hero-desc { - font-size: 1.2rem; - margin-bottom: 2rem; -} - -.cta-group { - display: flex; - gap: 1rem; -} - -.primary-button, .secondary-button { - padding: 1rem 2rem; - border-radius: 25px; - text-decoration: none; - font-weight: bold; - transition: transform 0.3s; -} - -.primary-button { - background: var(--primary); - color: white; -} - -.secondary-button { - background: white; - color: var(--primary); - border: 2px solid var(--primary); -} - -.primary-button:hover, .secondary-button:hover { - transform: translateY(-2px); -} - -.hero-image { - flex: 1; - position: relative; -} - -.floating-ui { - width: 100%; - height: 400px; - background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="80" fill="%23ff5f00"/></svg>') no-repeat center; - animation: float 6s ease-in-out infinite; -} - -@keyframes float { - 0% { transform: translateY(0px); } - 50% { transform: translateY(-20px); } - 100% { transform: translateY(0px); } -} - -.features { - padding: 4rem 2rem; - background: var(--gray); -} - -.features h2 { - text-align: center; - margin-bottom: 3rem; -} - -.features-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; - max-width: 1200px; - margin: 0 auto; -} - -.feature-card { - background: white; - padding: 2rem; - border-radius: 15px; - box-shadow: 0 10px 30px rgba(0,0,0,0.1); - transition: transform 0.3s; -} - -.feature-card:hover { - transform: translateY(-5px); -} - -.platforms { - padding: 4rem 2rem; -} - -.platforms-container { - max-width: 1200px; - margin: 0 auto; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; -} - -footer { - background: var(--gray); - padding: 3rem 2rem; -} - -.footer-content { - max-width: 1200px; - margin: 0 auto; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 2rem; -} - -@media (max-width: 768px) { - .nav-links { - display: none; - } - - .hero { - flex-direction: column; - text-align: center; - } - - .hero h1 { - font-size: 3rem; - } - - .cta-group { - justify-content: center; - } -}

commit a78c9681c68caada7a8e553081277362a372f053

Author: root <root@hub.scroll.pub> Date: 2024-12-28 16:33:57 +0000 Subject: Deleted script.js diff --git a/script.js b/script.js deleted file mode 100644 index e5a45a9..0000000 --- a/script.js +++ /dev/null @@ -1,33 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - // Smooth scroll for anchor links - document.querySelectorAll('a[href^="#"]').forEach(anchor => { - anchor.addEventListener('click', function (e) { - e.preventDefault(); - document.querySelector(this.getAttribute('href')).scrollIntoView({ - behavior: 'smooth' - }); - }); - }); - - // Header scroll effect - let header = document.querySelector('.main-header'); - let lastScroll = 0; - - window.addEventListener('scroll', () => { - const currentScroll = window.pageYOffset; - - if (currentScroll <= 0) { - header.classList.remove('scroll-up'); - return; - } - - if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) { - header.classList.remove('scroll-up'); - header.classList.add('scroll-down'); - } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) { - header.classList.remove('scroll-down'); - header.classList.add('scroll-up'); - } - lastScroll = currentScroll; - }); -});

commit 2f90c4cd61664f948226e7541af2bfdc36e337f9

Author: root <root@hub.scroll.pub> Date: 2024-12-28 16:33:51 +0000 Subject: Deleted body.html diff --git a/body.html b/body.html deleted file mode 100644 index 0e043c8..0000000 --- a/body.html +++ /dev/null @@ -1,91 +0,0 @@ -<header class="main-header"> - <nav> - <div class="logo">صفقة</div> - <div class="nav-links"> - <a href="#features">المميزات</a> - <a href="#platforms">المنصات</a> - <a href="#about">عن صفقة</a> - <a href="#download" class="cta-button">حمل التطبيق</a> - </div> - </nav> -</header> - -<main> - <section class="hero" dir="rtl"> - <div class="hero-content"> - <h1>صفقة</h1> - <p class="tagline">رفيق التسوق الذكي لعام 2027</p> - <p class="hero-desc">منصة متكاملة لتحسين تجربة التسوق الإلكتروني مع أدوات متطورة لتتبع الأسعار والكوبونات</p> - <div class="cta-group"> - <a href="#download-extension" class="primary-button">حمل إضافة المتصفح</a> - <a href="#download-app" class="secondary-button">حمل تطبيق الهاتف</a> - </div> - </div> - <div class="hero-image"> - <div class="floating-ui"></div> - </div> - </section> - - <section id="features" class="features" dir="rtl"> - <h2>المميزات الرئيسية</h2> - <div class="features-grid"> - <div class="feature-card"> - <div class="feature-icon price-history"></div> - <h3>تاريخ الأسعار</h3> - <p>تتبع تغيرات الأسعار عبر الزمن مع رسوم بيانية تفاعلية</p> - </div> - <div class="feature-card"> - <div class="feature-icon coupons"></div> - <h3>كوبونات الخصم</h3> - <p>أكثر من 400 متجر إلكتروني مع إدخال تلقائي للكوبونات</p> - </div> - <div class="feature-card"> - <div class="feature-icon tracking"></div> - <h3>تتبع الأسعار</h3> - <p>تنبيهات فورية عند تغير أسعار منتجاتك المفضلة</p> - </div> - </div> - </section> - - <section id="platforms" class="platforms" dir="rtl"> - <h2>المنصات المدعومة</h2> - <div class="platforms-container"> - <div class="platform-group browser"> - <h3>إضافات المتصفح</h3> - <div class="platform-icons"> - <span>Chrome</span> - <span>Firefox</span> - <span>Edge</span> - <span>Brave</span> - </div> - </div> - <div class="platform-group mobile"> - <h3>تطبيقات الهاتف</h3> - <div class="platform-icons"> - <span>Android</span> - <span>iOS</span> - </div> - </div> - </div> - </section> -</main> - -<footer dir="rtl"> - <div class="footer-content"> - <div class="footer-section"> - <h4>روابط سريعة</h4> - <a href="/privacy-policy">سياسة الخصوصية</a> - <a href="/contact">اتصل بنا</a> - <a href="https://blog.joinsafqa.com">المدونة</a> - </div> - <div class="footer-section"> - <h4>تابعنا</h4> - <div class="social-links"> - <a href="https://safqa.link/u/facebook">Facebook</a> - <a href="https://safqa.link/u/twitter">Twitter</a> - <a href="https://safqa.link/u/instagram">Instagram</a> - <a href="https://safqa.link/u/telegram">Telegram</a> - </div> - </div> - </div> -</footer>

commit 1f4a2628c392eb8a999051a80382dd344ca9460a

Author: root <root@hub.scroll.pub> Date: 2024-12-28 16:33:41 +0000 Subject: Deleted index.html diff --git a/index.html b/index.html deleted file mode 100644 index 84a7a0c..0000000 --- a/index.html +++ /dev/null @@ -1,104 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>صفقة (Safqa) - رفيق التسوق الأفضل</title> - <script>/* This HTML was generated by 📜 Scroll v164.7.0. https://scroll.pub */</script> - <style>@media print {.doNotPrint {display: none !important;}}</style> - <link rel="canonical" href="https://safqa.scroll.pub/index.html"> - <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="description" content=""> - <meta name="generator" content="Scroll v164.7.0"> - <meta property="og:title" content="صفقة (Safqa) - رفيق التسوق الأفضل"> - <meta property="og:description" content=""> - <meta property="og:image" content=""> - - <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll"> - - <meta name="twitter:card" content="summary_large_image"> -</head> -<body> -<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a> -<link rel="stylesheet" type="text/css" href="style.css"> -<header> - <div class="container"> - <h1>صفقة</h1> - <p>رفيق التسوق الأفضل</p> - <nav> - <a href="#features">المميزات</a> - <a href="#platforms">المنصات</a> - <a href="#about">عن صفقة</a> - <a href="#contact">تواصل معنا</a> - </nav> - </div> -</header> - -<section id="hero"> - <div class="container"> - <h2>تسوق بذكاء، وفر بسهولة</h2> - <p>اكتشف أفضل العروض والكوبونات مع صفقة</p> - <div class="cta-buttons"> - <a href="https://safqa.link/u/chrome" class="btn">إضافة المتصفح</a> - <a href="https://safqa.link/u/android" class="btn">تطبيق الهاتف</a> - </div> - </div> -</section> - -<section id="features"> - <div class="container"> - <h2>المميزات الرئيسية</h2> - <div class="feature-grid"> - <div class="feature"> - <h3>تاريخ الأسعار</h3> - <p>تتبع تغيرات أسعار المنتجات عبر الزمن</p> - </div> - <div class="feature"> - <h3>كوبونات الخصم</h3> - <p>دعم لأكثر من 400 متجر إلكتروني</p> - </div> - <div class="feature"> - <h3>تتبع الأسعار</h3> - <p>تنبيهات عند تغيير الأسعار</p> - </div> - </div> - </div> -</section> - -<section id="platforms"> - <div class="container"> - <h2>المنصات المدعومة</h2> - <div class="platform-grid"> - <div class="platform"> - <h3>إضافة المتصفح</h3> - <ul> - <li>Google Chrome</li> - <li>Mozilla Firefox</li> - <li>Microsoft Edge</li> - <li>Brave Browser</li> - </ul> - </div> - <div class="platform"> - <h3>تطبيقات الهواتف الذكية</h3> - <ul> - <li>Android</li> - <li>iOS</li> - </ul> - </div> - </div> - </div> -</section> - -<footer> - <div class="container"> - <p>تابعنا على:</p> - <div class="social-links"> - <a href="https://safqa.link/u/facebook">Facebook</a> - <a href="https://safqa.link/u/twitter">Twitter</a> - <a href="https://safqa.link/u/instagram">Instagram</a> - <a href="https://safqa.link/u/telegram">Telegram</a> - </div> - </div> -</footer> -<script src="script.js"></script> -</body> -</html> \ No newline at end of file

commit cce71c991f828840ca6ef7bf58d8178e78ead9b3

Author: root <root@hub.scroll.pub> Date: 2024-12-28 16:33:19 +0000 Subject: Deleted readme.scroll diff --git a/readme.scroll b/readme.scroll deleted file mode 100644 index 6595a04..0000000 --- a/readme.scroll +++ /dev/null @@ -1,2 +0,0 @@ -# safqa.scroll.pub -Website generated by Claude from prompt: design landing in arabic for this website based on the content I will provide, make it stylish and look nice like it's built in 2027, # صفقة (Safqa) - رفيق التسوق الأفضل ## نظرة عامة صفقة هي منصة متكاملة لتحسين تجربة التسوق الإلكتروني، متوفرة كإضافة للمتصفح (Browser Extension) وتطبيق للهواتف الذكية (Mobile App). تهدف المنصة إلى جعل التسوق عبر الإنترنت أكثر سهولة وذكاءً من خلال مجموعة من الأدوات المتطورة. ## المنصات المدعومة ### إضافة المتصفح (Browser Extension) - Google Chrome - Mozilla Firefox - Microsoft Edge - Brave Browser ### تطبيقات الهواتف الذكية - Android - iOS ## المميزات الرئيسية ### 1. تاريخ الأسعار (Price History) #### الوظيفة - تتبع تغيرات أسعار المنتجات عبر الزمن - عرض رسم بياني تفاعلي يوضح تقلبات السعر - كشف العروض الوهمية والتخفيضات غير الحقيقية #### المواقع المدعومة 1. أمازون (Amazon) - مصر - السعودية - الإمارات 2. نون (Noon) - مصر - السعودية - الإمارات 3. جوميا (Jumia) - مصر ### 2. كوبونات الخصم (Discount Coupons) #### المميزات - دعم لأكثر من 400 متجر إلكتروني - إدخال تلقائي للكوبونات (Auto-apply) - اقتراح أفضل الكوبونات المتاحة - تحديثات مستمرة لقاعدة بيانات الكوبونات #### الدول المدعومة - مصر - السعودية - الإمارات - الكويت - الأردن - قطر - البحرين - عمان ### 3. تتبع الأسعار (Price Tracking) #### المميزات - متوفرة حصرياً في إضافة المتصفح - تتبع حتى 6 منتجات مجاناً - إمكانية زيادة عدد المنتجات المتتبعة عبر دعوة الأصدقاء #### خيارات التتبع 1. تنبيه عند أي تغيير في السعر 2. تنبيه عند انخفاض السعر عن حد معين 3. تنبيه عند ارتفاع السعر عن حد معين ## واجهات المستخدم ### إضافة المتصفح (Browser Extension) #### الشريط العلوي (TopBar) - شعار صفقة - الإعدادات (Settings) - حسابي (My Account) - المساعدة (Help) - زر الإغلاق (Close) #### المحتوى الرئيسي (Body) متغير حسب النافذة النشطة - نافذة الكوبونات - نافذة المنتج (تاريخ السعر) - نافذة المتاجر - نافذة تتبع السعر - نافذة الإعدادات - نافذة المساعدة - نافذة الحساب #### الشريط السفلي (BottomBar) - الكوبونات - المنتج - المتاجر - تتبع السعر ### تطبيق الهاتف (Mobile App) #### الشاشة الرئيسية (Home) - حقل البحث عن المتاجر - المتاجر المميزة (Featured Stores) - الأقسام (Categories) - أفضل الكوبونات (Best Coupons) #### قسم الكوبونات - قائمة المتاجر المدعومة - صفحات تفصيلية لكل متجر - خيارات المشاركة والنسخ للكوبونات #### قسم تاريخ السعر - حقل إدخال روابط المنتجات - خيار "تسوق في صفقة" (Shop on Safqa) - متصفح داخلي (Built-in Browser) #### المفضلة - قائمة المتاجر المفضلة - إدارة المتاجر المحفوظة #### الحساب - معلومات المستخدم - إعدادات الدولة - عن التطبيق - سياسة الخصوصية - إصدار التطبيق - تسجيل الخروج ## المميزات الحصرية ### إضافة المتصفح - تتبع الأسعار - الظهور التلقائي في صفحات المنتجات - إدخال تلقائي للكوبونات - واجهة متكاملة مع صفحات التسوق ### تطبيق الهاتف - ميزة "تسوق في صفقة" - متصفح داخلي مدمج - واجهة مخصصة لعرض الكوبونات - إدارة المتاجر المفضلة ## الهدف والمشكلة التي تحلها صفقة تهدف صفقة إلى تحسين تجربة التسوق الإلكتروني من خلال: 1. حماية المستهلك من العروض الوهمية 2. توفير المال عبر أفضل الكوبونات المتاحة 3. تمكين المستخدم من اتخاذ قرارات شراء أفضل 4. تبسيط عملية البحث عن أفضل الأسعار والخصومات urls: - https://safqa.link/u/chrome - https://safqa.link/u/firefox - https://safqa.link/u/android - https://safqa.link/u/ios - https://safqa.link/u/facebook - https://safqa.link/u/twitter - https://safqa.link/u/instagram - https://safqa.link/u/telegram https://joinsafqa.com/privacy-policy https://joinsafqa.com/contact https://blog.joinsafqa.com/ Brand color: #ff5f00 \ No newline at end of file

commit 0390c78c97ba48b426fe4f3ff03c51b0ecf39252

Author: root <root@hub.scroll.pub> Date: 2024-12-28 16:33:11 +0000 Subject: Deleted index.scroll diff --git a/index.scroll b/index.scroll deleted file mode 100644 index 9063530..0000000 --- a/index.scroll +++ /dev/null @@ -1,8 +0,0 @@ -buildHtml -baseUrl https://safqa.scroll.pub -metaTags -editButton /edit.html -title صفقة - رفيق التسوق الأفضل -style.css -body.html -script.js

commit 842beec91df29d00f73173a20bee0b9ba2d0c391

Author: root <root@hub.scroll.pub> Date: 2024-12-28 16:32:27 +0000 Subject: Deleted prompt.json diff --git a/prompt.json b/prompt.json deleted file mode 100644 index f87aa0c..0000000 --- a/prompt.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "msg_01CbnUeJpc9v6sytKwGbf4xB", - "type": "message", - "role": "assistant", - "model": "claude-3-5-sonnet-20241022", - "content": [ - { - "type": "text", - "text": "I'll help create a modern Arabic landing page for Safqa. For the domain, I suggest:\n\n---domain---\nsafqa.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://safqa.scroll.pub\nmetaTags\neditButton /edit.html\ntitle صفقة - رفيق التسوق الأفضل\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"main-header\">\n <nav>\n <div class=\"logo\">صفقة</div>\n <div class=\"nav-links\">\n <a href=\"#features\">المميزات</a>\n <a href=\"#platforms\">المنصات</a>\n <a href=\"#about\">عن صفقة</a>\n <a href=\"#download\" class=\"cta-button\">حمل التطبيق</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\" dir=\"rtl\">\n <div class=\"hero-content\">\n <h1>صفقة</h1>\n <p class=\"tagline\">رفيق التسوق الذكي لعام 2027</p>\n <p class=\"hero-desc\">منصة متكاملة لتحسين تجربة التسوق الإلكتروني مع أدوات متطورة لتتبع الأسعار والكوبونات</p>\n <div class=\"cta-group\">\n <a href=\"#download-extension\" class=\"primary-button\">حمل إضافة المتصفح</a>\n <a href=\"#download-app\" class=\"secondary-button\">حمل تطبيق الهاتف</a>\n </div>\n </div>\n <div class=\"hero-image\">\n <div class=\"floating-ui\"></div>\n </div>\n </section>\n\n <section id=\"features\" class=\"features\" dir=\"rtl\">\n <h2>المميزات الرئيسية</h2>\n <div class=\"features-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon price-history\"></div>\n <h3>تاريخ الأسعار</h3>\n <p>تتبع تغيرات الأسعار عبر الزمن مع رسوم بيانية تفاعلية</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon coupons\"></div>\n <h3>كوبونات الخصم</h3>\n <p>أكثر من 400 متجر إلكتروني مع إدخال تلقائي للكوبونات</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon tracking\"></div>\n <h3>تتبع الأسعار</h3>\n <p>تنبيهات فورية عند تغير أسعار منتجاتك المفضلة</p>\n </div>\n </div>\n </section>\n\n <section id=\"platforms\" class=\"platforms\" dir=\"rtl\">\n <h2>المنصات المدعومة</h2>\n <div class=\"platforms-container\">\n <div class=\"platform-group browser\">\n <h3>إضافات المتصفح</h3>\n <div class=\"platform-icons\">\n <span>Chrome</span>\n <span>Firefox</span>\n <span>Edge</span>\n <span>Brave</span>\n </div>\n </div>\n <div class=\"platform-group mobile\">\n <h3>تطبيقات الهاتف</h3>\n <div class=\"platform-icons\">\n <span>Android</span>\n <span>iOS</span>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer dir=\"rtl\">\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>روابط سريعة</h4>\n <a href=\"/privacy-policy\">سياسة الخصوصية</a>\n <a href=\"/contact\">اتصل بنا</a>\n <a href=\"https://blog.joinsafqa.com\">المدونة</a>\n </div>\n <div class=\"footer-section\">\n <h4>تابعنا</h4>\n <div class=\"social-links\">\n <a href=\"https://safqa.link/u/facebook\">Facebook</a>\n <a href=\"https://safqa.link/u/twitter\">Twitter</a>\n <a href=\"https://safqa.link/u/instagram\">Instagram</a>\n <a href=\"https://safqa.link/u/telegram\">Telegram</a>\n </div>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #ff5f00;\n --primary-dark: #e65500;\n --text: #333;\n --bg: #fff;\n --gray: #f5f5f5;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n color: var(--text);\n line-height: 1.6;\n}\n\n.main-header {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 100;\n padding: 1rem 2rem;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 2rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text);\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.cta-button {\n background: var(--primary);\n color: white !important;\n padding: 0.5rem 1.5rem;\n border-radius: 25px;\n transition: background 0.3s;\n}\n\n.cta-button:hover {\n background: var(--primary-dark);\n}\n\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n padding: 6rem 2rem 2rem;\n background: linear-gradient(135deg, #fff 0%, #fff8f3 100%);\n}\n\n.hero-content {\n flex: 1;\n max-width: 600px;\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n color: var(--primary);\n}\n\n.tagline {\n font-size: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.hero-desc {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n}\n\n.cta-group {\n display: flex;\n gap: 1rem;\n}\n\n.primary-button, .secondary-button {\n padding: 1rem 2rem;\n border-radius: 25px;\n text-decoration: none;\n font-weight: bold;\n transition: transform 0.3s;\n}\n\n.primary-button {\n background: var(--primary);\n color: white;\n}\n\n.secondary-button {\n background: white;\n color: var(--primary);\n border: 2px solid var(--primary);\n}\n\n.primary-button:hover, .secondary-button:hover {\n transform: translateY(-2px);\n}\n\n.hero-image {\n flex: 1;\n position: relative;\n}\n\n.floating-ui {\n width: 100%;\n height: 400px;\n background: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\"><circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"%23ff5f00\"/></svg>') no-repeat center;\n animation: float 6s ease-in-out infinite;\n}\n\n@keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-20px); }\n 100% { transform: translateY(0px); }\n}\n\n.features {\n padding: 4rem 2rem;\n background: var(--gray);\n}\n\n.features h2 {\n text-align: center;\n margin-bottom: 3rem;\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.feature-card {\n background: white;\n padding: 2rem;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n transition: transform 0.3s;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.platforms {\n padding: 4rem 2rem;\n}\n\n.platforms-container {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\nfooter {\n background: var(--gray);\n padding: 3rem 2rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero {\n flex-direction: column;\n text-align: center;\n }\n \n .hero h1 {\n font-size: 3rem;\n }\n \n .cta-group {\n justify-content: center;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Header scroll effect\n let header = document.querySelector('.main-header');\n let lastScroll = 0;\n\n window.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n\n if (currentScroll <= 0) {\n header.classList.remove('scroll-up');\n return;\n }\n\n if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) {\n header.classList.remove('scroll-up');\n header.classList.add('scroll-down');\n } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) {\n header.classList.remove('scroll-down');\n header.classList.add('scroll-up');\n }\n lastScroll = currentScroll;\n });\n});\n\n---end---\n\nThis design features:\n- Modern, clean aesthetic with the brand color (#ff5f00)\n- RTL (Right-to-Left) layout for Arabic content\n- Responsive design that works on all devices\n- Smooth animations and transitions\n- Floating UI elements\n- Glass-morphism effect in the header\n- Interactive features cards\n- Accessibility-friendly markup\n- SEO-optimized structure\n- Clean, semantic HTML5\n- Pure CSS animations and effects\n- Vanilla JavaScript for smooth scrolling and header effects\n\nThe design aims to feel futuristic (2027) while maintaining usability and clarity, with special attention paid to Arabic typography and RTL layout requirements." - } - ], - "stop_reason": "end_turn", - "stop_sequence": null, - "usage": { - "input_tokens": 2125, - "cache_creation_input_tokens": 0, - "cache_read_input_tokens": 0, - "output_tokens": 3253 - } -} \ No newline at end of file

commit 2d0411dacc3817f5c7a1478fe3326418d6df0f51

Author: root <root@hub.scroll.pub> Date: 2024-12-28 16:30:46 +0000 Subject: Initial commit diff --git a/.log.txt b/.log.txt new file mode 100644 index 0000000..cb41b9b --- /dev/null +++ b/.log.txt @@ -0,0 +1,3 @@ +read safqa.scroll.pub https://hub.scroll.pub/edit.html?folderName=safqa.scroll.pub 1735403427956 ::ffff:156.211.65.175 0.0 200 Chrome.132 MacOSX.10.15.7 +read safqa.scroll.pub https://hub.scroll.pub/ls.json?folderName=safqa.scroll.pub 1735403429463 ::ffff:156.211.65.175 0.0 200 Chrome.132 MacOSX.10.15.7 +read safqa.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=safqa.scroll.pub&filePath=safqa.scroll.pub%2Findex.scroll 1735403429688 ::ffff:156.211.65.175 0.0 200 Chrome.132 MacOSX.10.15.7 diff --git a/.stats.json b/.stats.json new file mode 100644 index 0000000..3c0386c --- /dev/null +++ b/.stats.json @@ -0,0 +1,21 @@ +{ + "files": [ + "body.html", + "index.scroll", + "prompt.json", + "readme.scroll", + "script.js", + "style.css" + ], + "hasSslCert": false, + "stats": { + "folder": "safqa.scroll.pub", + "folderLink": "http://safqa.scroll.pub", + "created": "2024-12-28T16:30:26.000Z", + "revised": "2024-12-28T16:30:26.000Z", + "files": 6, + "mb": 1, + "revisions": 1, + "hash": "1e70358f1f" + } +} \ No newline at end of file diff --git a/body.html b/body.html index 6b4027b..0e043c8 100644 --- a/body.html +++ b/body.html @@ -1,79 +1,91 @@ -<header> - <div class="container"> - <h1>صفقة</h1> - <p>رفيق التسوق الأفضل</p> - <nav> +<header class="main-header"> + <nav> + <div class="logo">صفقة</div> + <div class="nav-links"> <a href="#features">المميزات</a> <a href="#platforms">المنصات</a> <a href="#about">عن صفقة</a> - <a href="#contact">تواصل معنا</a> - </nav> - </div> + <a href="#download" class="cta-button">حمل التطبيق</a> + </div> + </nav> </header> -<section id="hero"> - <div class="container"> - <h2>تسوق بذكاء، وفر بسهولة</h2> - <p>اكتشف أفضل العروض والكوبونات مع صفقة</p> - <div class="cta-buttons"> - <a href="https://safqa.link/u/chrome" class="btn">إضافة المتصفح</a> - <a href="https://safqa.link/u/android" class="btn">تطبيق الهاتف</a> +<main> + <section class="hero" dir="rtl"> + <div class="hero-content"> + <h1>صفقة</h1> + <p class="tagline">رفيق التسوق الذكي لعام 2027</p> + <p class="hero-desc">منصة متكاملة لتحسين تجربة التسوق الإلكتروني مع أدوات متطورة لتتبع الأسعار والكوبونات</p> + <div class="cta-group"> + <a href="#download-extension" class="primary-button">حمل إضافة المتصفح</a> + <a href="#download-app" class="secondary-button">حمل تطبيق الهاتف</a> + </div> </div> - </div> -</section> + <div class="hero-image"> + <div class="floating-ui"></div> + </div> + </section> -<section id="features"> - <div class="container"> + <section id="features" class="features" dir="rtl"> <h2>المميزات الرئيسية</h2> - <div class="feature-grid"> - <div class="feature"> + <div class="features-grid"> + <div class="feature-card"> + <div class="feature-icon price-history"></div> <h3>تاريخ الأسعار</h3> - <p>تتبع تغيرات أسعار المنتجات عبر الزمن</p> + <p>تتبع تغيرات الأسعار عبر الزمن مع رسوم بيانية تفاعلية</p> </div> - <div class="feature"> + <div class="feature-card"> + <div class="feature-icon coupons"></div> <h3>كوبونات الخصم</h3> - <p>دعم لأكثر من 400 متجر إلكتروني</p> + <p>أكثر من 400 متجر إلكتروني مع إدخال تلقائي للكوبونات</p> </div> - <div class="feature"> + <div class="feature-card"> + <div class="feature-icon tracking"></div> <h3>تتبع الأسعار</h3> - <p>تنبيهات عند تغيير الأسعار</p> + <p>تنبيهات فورية عند تغير أسعار منتجاتك المفضلة</p> </div> </div> - </div> -</section> + </section> -<section id="platforms"> - <div class="container"> + <section id="platforms" class="platforms" dir="rtl"> <h2>المنصات المدعومة</h2> - <div class="platform-grid"> - <div class="platform"> - <h3>إضافة المتصفح</h3> - <ul> - <li>Google Chrome</li> - <li>Mozilla Firefox</li> - <li>Microsoft Edge</li> - <li>Brave Browser</li> - </ul> + <div class="platforms-container"> + <div class="platform-group browser"> + <h3>إضافات المتصفح</h3> + <div class="platform-icons"> + <span>Chrome</span> + <span>Firefox</span> + <span>Edge</span> + <span>Brave</span> + </div> </div> - <div class="platform"> - <h3>تطبيقات الهواتف الذكية</h3> - <ul> - <li>Android</li> - <li>iOS</li> - </ul> + <div class="platform-group mobile"> + <h3>تطبيقات الهاتف</h3> + <div class="platform-icons"> + <span>Android</span> + <span>iOS</span> + </div> </div> </div> - </div> -</section> + </section> +</main> -<footer> - <div class="container"> - <p>تابعنا على:</p> - <div class="social-links"> - <a href="https://safqa.link/u/facebook">Facebook</a> - <a href="https://safqa.link/u/twitter">Twitter</a> - <a href="https://safqa.link/u/instagram">Instagram</a> - <a href="https://safqa.link/u/telegram">Telegram</a> +<footer dir="rtl"> + <div class="footer-content"> + <div class="footer-section"> + <h4>روابط سريعة</h4> + <a href="/privacy-policy">سياسة الخصوصية</a> + <a href="/contact">اتصل بنا</a> + <a href="https://blog.joinsafqa.com">المدونة</a> + </div> + <div class="footer-section"> + <h4>تابعنا</h4> + <div class="social-links"> + <a href="https://safqa.link/u/facebook">Facebook</a> + <a href="https://safqa.link/u/twitter">Twitter</a> + <a href="https://safqa.link/u/instagram">Instagram</a> + <a href="https://safqa.link/u/telegram">Telegram</a> + </div> </div> </div> -</footer> \ No newline at end of file +</footer> diff --git a/index.html b/index.html new file mode 100644 index 0000000..84a7a0c --- /dev/null +++ b/index.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>صفقة (Safqa) - رفيق التسوق الأفضل</title> + <script>/* This HTML was generated by 📜 Scroll v164.7.0. https://scroll.pub */</script> + <style>@media print {.doNotPrint {display: none !important;}}</style> + <link rel="canonical" href="https://safqa.scroll.pub/index.html"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="description" content=""> + <meta name="generator" content="Scroll v164.7.0"> + <meta property="og:title" content="صفقة (Safqa) - رفيق التسوق الأفضل"> + <meta property="og:description" content=""> + <meta property="og:image" content=""> + + <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll"> + + <meta name="twitter:card" content="summary_large_image"> +</head> +<body> +<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a> +<link rel="stylesheet" type="text/css" href="style.css"> +<header> + <div class="container"> + <h1>صفقة</h1> + <p>رفيق التسوق الأفضل</p> + <nav> + <a href="#features">المميزات</a> + <a href="#platforms">المنصات</a> + <a href="#about">عن صفقة</a> + <a href="#contact">تواصل معنا</a> + </nav> + </div> +</header> + +<section id="hero"> + <div class="container"> + <h2>تسوق بذكاء، وفر بسهولة</h2> + <p>اكتشف أفضل العروض والكوبونات مع صفقة</p> + <div class="cta-buttons"> + <a href="https://safqa.link/u/chrome" class="btn">إضافة المتصفح</a> + <a href="https://safqa.link/u/android" class="btn">تطبيق الهاتف</a> + </div> + </div> +</section> + +<section id="features"> + <div class="container"> + <h2>المميزات الرئيسية</h2> + <div class="feature-grid"> + <div class="feature"> + <h3>تاريخ الأسعار</h3> + <p>تتبع تغيرات أسعار المنتجات عبر الزمن</p> + </div> + <div class="feature"> + <h3>كوبونات الخصم</h3> + <p>دعم لأكثر من 400 متجر إلكتروني</p> + </div> + <div class="feature"> + <h3>تتبع الأسعار</h3> + <p>تنبيهات عند تغيير الأسعار</p> + </div> + </div> + </div> +</section> + +<section id="platforms"> + <div class="container"> + <h2>المنصات المدعومة</h2> + <div class="platform-grid"> + <div class="platform"> + <h3>إضافة المتصفح</h3> + <ul> + <li>Google Chrome</li> + <li>Mozilla Firefox</li> + <li>Microsoft Edge</li> + <li>Brave Browser</li> + </ul> + </div> + <div class="platform"> + <h3>تطبيقات الهواتف الذكية</h3> + <ul> + <li>Android</li> + <li>iOS</li> + </ul> + </div> + </div> + </div> +</section> + +<footer> + <div class="container"> + <p>تابعنا على:</p> + <div class="social-links"> + <a href="https://safqa.link/u/facebook">Facebook</a> + <a href="https://safqa.link/u/twitter">Twitter</a> + <a href="https://safqa.link/u/instagram">Instagram</a> + <a href="https://safqa.link/u/telegram">Telegram</a> + </div> + </div> +</footer> +<script src="script.js"></script> +</body> +</html> \ No newline at end of file diff --git a/index.scroll b/index.scroll index 96582e3..9063530 100644 --- a/index.scroll +++ b/index.scroll @@ -2,7 +2,7 @@ buildHtml baseUrl https://safqa.scroll.pub metaTags editButton /edit.html -title صفقة (Safqa) - رفيق التسوق الأفضل +title صفقة - رفيق التسوق الأفضل style.css body.html -script.js \ No newline at end of file +script.js diff --git a/prompt.json b/prompt.json index 3d7161e..f87aa0c 100644 --- a/prompt.json +++ b/prompt.json @@ -1,25 +1,20 @@ { - "id": "f24c9abb-3818-46e8-b6eb-063687a89952", - "object": "chat.completion", - "created": 1735403401, - "model": "deepseek-chat", - "choices": [ + "id": "msg_01CbnUeJpc9v6sytKwGbf4xB", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ { - "index": 0, - "message": { - "role": "assistant", - "content": "---domain---\nsafqa.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://safqa.scroll.pub\nmetaTags\neditButton /edit.html\ntitle صفقة (Safqa) - رفيق التسوق الأفضل\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <div class=\"container\">\n <h1>صفقة</h1>\n <p>رفيق التسوق الأفضل</p>\n <nav>\n <a href=\"#features\">المميزات</a>\n <a href=\"#platforms\">المنصات</a>\n <a href=\"#about\">عن صفقة</a>\n <a href=\"#contact\">تواصل معنا</a>\n </nav>\n </div>\n</header>\n\n<section id=\"hero\">\n <div class=\"container\">\n <h2>تسوق بذكاء، وفر بسهولة</h2>\n <p>اكتشف أفضل العروض والكوبونات مع صفقة</p>\n <div class=\"cta-buttons\">\n <a href=\"https://safqa.link/u/chrome\" class=\"btn\">إضافة المتصفح</a>\n <a href=\"https://safqa.link/u/android\" class=\"btn\">تطبيق الهاتف</a>\n </div>\n </div>\n</section>\n\n<section id=\"features\">\n <div class=\"container\">\n <h2>المميزات الرئيسية</h2>\n <div class=\"feature-grid\">\n <div class=\"feature\">\n <h3>تاريخ الأسعار</h3>\n <p>تتبع تغيرات أسعار المنتجات عبر الزمن</p>\n </div>\n <div class=\"feature\">\n <h3>كوبونات الخصم</h3>\n <p>دعم لأكثر من 400 متجر إلكتروني</p>\n </div>\n <div class=\"feature\">\n <h3>تتبع الأسعار</h3>\n <p>تنبيهات عند تغيير الأسعار</p>\n </div>\n </div>\n </div>\n</section>\n\n<section id=\"platforms\">\n <div class=\"container\">\n <h2>المنصات المدعومة</h2>\n <div class=\"platform-grid\">\n <div class=\"platform\">\n <h3>إضافة المتصفح</h3>\n <ul>\n <li>Google Chrome</li>\n <li>Mozilla Firefox</li>\n <li>Microsoft Edge</li>\n <li>Brave Browser</li>\n </ul>\n </div>\n <div class=\"platform\">\n <h3>تطبيقات الهواتف الذكية</h3>\n <ul>\n <li>Android</li>\n <li>iOS</li>\n </ul>\n </div>\n </div>\n </div>\n</section>\n\n<footer>\n <div class=\"container\">\n <p>تابعنا على:</p>\n <div class=\"social-links\">\n <a href=\"https://safqa.link/u/facebook\">Facebook</a>\n <a href=\"https://safqa.link/u/twitter\">Twitter</a>\n <a href=\"https://safqa.link/u/instagram\">Instagram</a>\n <a href=\"https://safqa.link/u/telegram\">Telegram</a>\n </div>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #ff5f00;\n --secondary-color: #333;\n --background-color: #f5f5f5;\n --text-color: #333;\n --light-text-color: #666;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 0;\n color: var(--text-color);\n background-color: var(--background-color);\n line-height: 1.6;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 20px 0;\n text-align: center;\n}\n\nheader h1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\nheader p {\n margin: 5px 0 0;\n font-size: 1.2rem;\n}\n\nnav {\n margin-top: 20px;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n margin: 0 15px;\n font-size: 1.1rem;\n}\n\nnav a:hover {\n text-decoration: underline;\n}\n\n#hero {\n background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-bg.jpg');\n background-size: cover;\n background-position: center;\n color: white;\n padding: 100px 0;\n text-align: center;\n}\n\n#hero h2 {\n font-size: 2.5rem;\n margin-bottom: 20px;\n}\n\n#hero p {\n font-size: 1.2rem;\n margin-bottom: 30px;\n}\n\n.cta-buttons {\n display: flex;\n justify-content: center;\n gap: 20px;\n}\n\n.btn {\n background-color: var(--primary-color);\n color: white;\n padding: 10px 20px;\n text-decoration: none;\n border-radius: 5px;\n font-size: 1.1rem;\n transition: background-color 0.3s;\n}\n\n.btn:hover {\n background-color: #e65100;\n}\n\nsection {\n padding: 60px 0;\n}\n\nh2 {\n text-align: center;\n margin-bottom: 40px;\n font-size: 2rem;\n color: var(--primary-color);\n}\n\n.feature-grid, .platform-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n}\n\n.feature, .platform {\n background: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n text-align: center;\n}\n\n.feature h3, .platform h3 {\n color: var(--primary-color);\n margin-bottom: 15px;\n}\n\nfooter {\n background-color: var(--secondary-color);\n color: white;\n padding: 30px 0;\n text-align: center;\n}\n\n.social-links {\n margin-top: 20px;\n}\n\n.social-links a {\n color: white;\n text-decoration: none;\n margin: 0 10px;\n font-size: 1.1rem;\n}\n\n.social-links a:hover {\n text-decoration: underline;\n}\n\n@media (max-width: 768px) {\n header h1 {\n font-size: 2rem;\n }\n\n #hero h2 {\n font-size: 2rem;\n }\n\n .cta-buttons {\n flex-direction: column;\n align-items: center;\n }\n\n .btn {\n width: 100%;\n max-width: 300px;\n margin-bottom: 10px;\n }\n}\n---script.js---\n// Smooth scrolling for anchor links\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n});\n\n// Add active class to current section in navigation\nconst sections = document.querySelectorAll('section');\nconst navLinks = document.querySelectorAll('nav a');\n\nwindow.addEventListener('scroll', () => {\n let current = '';\n \n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n const sectionHeight = section.clientHeight;\n if (pageYOffset >= sectionTop - sectionHeight / 3) {\n current = section.getAttribute('id');\n }\n });\n\n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').includes(current)) {\n link.classList.add('active');\n }\n });\n});\n---end---" - }, - "logprobs": null, - "finish_reason": "stop" + "type": "text", + "text": "I'll help create a modern Arabic landing page for Safqa. For the domain, I suggest:\n\n---domain---\nsafqa.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://safqa.scroll.pub\nmetaTags\neditButton /edit.html\ntitle صفقة - رفيق التسوق الأفضل\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"main-header\">\n <nav>\n <div class=\"logo\">صفقة</div>\n <div class=\"nav-links\">\n <a href=\"#features\">المميزات</a>\n <a href=\"#platforms\">المنصات</a>\n <a href=\"#about\">عن صفقة</a>\n <a href=\"#download\" class=\"cta-button\">حمل التطبيق</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\" dir=\"rtl\">\n <div class=\"hero-content\">\n <h1>صفقة</h1>\n <p class=\"tagline\">رفيق التسوق الذكي لعام 2027</p>\n <p class=\"hero-desc\">منصة متكاملة لتحسين تجربة التسوق الإلكتروني مع أدوات متطورة لتتبع الأسعار والكوبونات</p>\n <div class=\"cta-group\">\n <a href=\"#download-extension\" class=\"primary-button\">حمل إضافة المتصفح</a>\n <a href=\"#download-app\" class=\"secondary-button\">حمل تطبيق الهاتف</a>\n </div>\n </div>\n <div class=\"hero-image\">\n <div class=\"floating-ui\"></div>\n </div>\n </section>\n\n <section id=\"features\" class=\"features\" dir=\"rtl\">\n <h2>المميزات الرئيسية</h2>\n <div class=\"features-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon price-history\"></div>\n <h3>تاريخ الأسعار</h3>\n <p>تتبع تغيرات الأسعار عبر الزمن مع رسوم بيانية تفاعلية</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon coupons\"></div>\n <h3>كوبونات الخصم</h3>\n <p>أكثر من 400 متجر إلكتروني مع إدخال تلقائي للكوبونات</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon tracking\"></div>\n <h3>تتبع الأسعار</h3>\n <p>تنبيهات فورية عند تغير أسعار منتجاتك المفضلة</p>\n </div>\n </div>\n </section>\n\n <section id=\"platforms\" class=\"platforms\" dir=\"rtl\">\n <h2>المنصات المدعومة</h2>\n <div class=\"platforms-container\">\n <div class=\"platform-group browser\">\n <h3>إضافات المتصفح</h3>\n <div class=\"platform-icons\">\n <span>Chrome</span>\n <span>Firefox</span>\n <span>Edge</span>\n <span>Brave</span>\n </div>\n </div>\n <div class=\"platform-group mobile\">\n <h3>تطبيقات الهاتف</h3>\n <div class=\"platform-icons\">\n <span>Android</span>\n <span>iOS</span>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer dir=\"rtl\">\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>روابط سريعة</h4>\n <a href=\"/privacy-policy\">سياسة الخصوصية</a>\n <a href=\"/contact\">اتصل بنا</a>\n <a href=\"https://blog.joinsafqa.com\">المدونة</a>\n </div>\n <div class=\"footer-section\">\n <h4>تابعنا</h4>\n <div class=\"social-links\">\n <a href=\"https://safqa.link/u/facebook\">Facebook</a>\n <a href=\"https://safqa.link/u/twitter\">Twitter</a>\n <a href=\"https://safqa.link/u/instagram\">Instagram</a>\n <a href=\"https://safqa.link/u/telegram\">Telegram</a>\n </div>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #ff5f00;\n --primary-dark: #e65500;\n --text: #333;\n --bg: #fff;\n --gray: #f5f5f5;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n color: var(--text);\n line-height: 1.6;\n}\n\n.main-header {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 100;\n padding: 1rem 2rem;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 2rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text);\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.cta-button {\n background: var(--primary);\n color: white !important;\n padding: 0.5rem 1.5rem;\n border-radius: 25px;\n transition: background 0.3s;\n}\n\n.cta-button:hover {\n background: var(--primary-dark);\n}\n\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n padding: 6rem 2rem 2rem;\n background: linear-gradient(135deg, #fff 0%, #fff8f3 100%);\n}\n\n.hero-content {\n flex: 1;\n max-width: 600px;\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n color: var(--primary);\n}\n\n.tagline {\n font-size: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.hero-desc {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n}\n\n.cta-group {\n display: flex;\n gap: 1rem;\n}\n\n.primary-button, .secondary-button {\n padding: 1rem 2rem;\n border-radius: 25px;\n text-decoration: none;\n font-weight: bold;\n transition: transform 0.3s;\n}\n\n.primary-button {\n background: var(--primary);\n color: white;\n}\n\n.secondary-button {\n background: white;\n color: var(--primary);\n border: 2px solid var(--primary);\n}\n\n.primary-button:hover, .secondary-button:hover {\n transform: translateY(-2px);\n}\n\n.hero-image {\n flex: 1;\n position: relative;\n}\n\n.floating-ui {\n width: 100%;\n height: 400px;\n background: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\"><circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"%23ff5f00\"/></svg>') no-repeat center;\n animation: float 6s ease-in-out infinite;\n}\n\n@keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-20px); }\n 100% { transform: translateY(0px); }\n}\n\n.features {\n padding: 4rem 2rem;\n background: var(--gray);\n}\n\n.features h2 {\n text-align: center;\n margin-bottom: 3rem;\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.feature-card {\n background: white;\n padding: 2rem;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n transition: transform 0.3s;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.platforms {\n padding: 4rem 2rem;\n}\n\n.platforms-container {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\nfooter {\n background: var(--gray);\n padding: 3rem 2rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero {\n flex-direction: column;\n text-align: center;\n }\n \n .hero h1 {\n font-size: 3rem;\n }\n \n .cta-group {\n justify-content: center;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Header scroll effect\n let header = document.querySelector('.main-header');\n let lastScroll = 0;\n\n window.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n\n if (currentScroll <= 0) {\n header.classList.remove('scroll-up');\n return;\n }\n\n if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) {\n header.classList.remove('scroll-up');\n header.classList.add('scroll-down');\n } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) {\n header.classList.remove('scroll-down');\n header.classList.add('scroll-up');\n }\n lastScroll = currentScroll;\n });\n});\n\n---end---\n\nThis design features:\n- Modern, clean aesthetic with the brand color (#ff5f00)\n- RTL (Right-to-Left) layout for Arabic content\n- Responsive design that works on all devices\n- Smooth animations and transitions\n- Floating UI elements\n- Glass-morphism effect in the header\n- Interactive features cards\n- Accessibility-friendly markup\n- SEO-optimized structure\n- Clean, semantic HTML5\n- Pure CSS animations and effects\n- Vanilla JavaScript for smooth scrolling and header effects\n\nThe design aims to feel futuristic (2027) while maintaining usability and clarity, with special attention paid to Arabic typography and RTL layout requirements." } ], + "stop_reason": "end_turn", + "stop_sequence": null, "usage": { - "prompt_tokens": 1478, - "completion_tokens": 1859, - "total_tokens": 3337, - "prompt_cache_hit_tokens": 0, - "prompt_cache_miss_tokens": 1478 - }, - "system_fingerprint": "fp_f1afce2943" + "input_tokens": 2125, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3253 + } } \ No newline at end of file diff --git a/readme.scroll b/readme.scroll index 7ff4e13..6595a04 100644 --- a/readme.scroll +++ b/readme.scroll @@ -1,2 +1,2 @@ # safqa.scroll.pub -Website generated by DeepSeek from prompt: design landing in arabic for this website based on the content I will provide, make it stylish and look nice like it's built in 2027, # صفقة (Safqa) - رفيق التسوق الأفضل ## نظرة عامة صفقة هي منصة متكاملة لتحسين تجربة التسوق الإلكتروني، متوفرة كإضافة للمتصفح (Browser Extension) وتطبيق للهواتف الذكية (Mobile App). تهدف المنصة إلى جعل التسوق عبر الإنترنت أكثر سهولة وذكاءً من خلال مجموعة من الأدوات المتطورة. ## المنصات المدعومة ### إضافة المتصفح (Browser Extension) - Google Chrome - Mozilla Firefox - Microsoft Edge - Brave Browser ### تطبيقات الهواتف الذكية - Android - iOS ## المميزات الرئيسية ### 1. تاريخ الأسعار (Price History) #### الوظيفة - تتبع تغيرات أسعار المنتجات عبر الزمن - عرض رسم بياني تفاعلي يوضح تقلبات السعر - كشف العروض الوهمية والتخفيضات غير الحقيقية #### المواقع المدعومة 1. أمازون (Amazon) - مصر - السعودية - الإمارات 2. نون (Noon) - مصر - السعودية - الإمارات 3. جوميا (Jumia) - مصر ### 2. كوبونات الخصم (Discount Coupons) #### المميزات - دعم لأكثر من 400 متجر إلكتروني - إدخال تلقائي للكوبونات (Auto-apply) - اقتراح أفضل الكوبونات المتاحة - تحديثات مستمرة لقاعدة بيانات الكوبونات #### الدول المدعومة - مصر - السعودية - الإمارات - الكويت - الأردن - قطر - البحرين - عمان ### 3. تتبع الأسعار (Price Tracking) #### المميزات - متوفرة حصرياً في إضافة المتصفح - تتبع حتى 6 منتجات مجاناً - إمكانية زيادة عدد المنتجات المتتبعة عبر دعوة الأصدقاء #### خيارات التتبع 1. تنبيه عند أي تغيير في السعر 2. تنبيه عند انخفاض السعر عن حد معين 3. تنبيه عند ارتفاع السعر عن حد معين ## واجهات المستخدم ### إضافة المتصفح (Browser Extension) #### الشريط العلوي (TopBar) - شعار صفقة - الإعدادات (Settings) - حسابي (My Account) - المساعدة (Help) - زر الإغلاق (Close) #### المحتوى الرئيسي (Body) متغير حسب النافذة النشطة - نافذة الكوبونات - نافذة المنتج (تاريخ السعر) - نافذة المتاجر - نافذة تتبع السعر - نافذة الإعدادات - نافذة المساعدة - نافذة الحساب #### الشريط السفلي (BottomBar) - الكوبونات - المنتج - المتاجر - تتبع السعر ### تطبيق الهاتف (Mobile App) #### الشاشة الرئيسية (Home) - حقل البحث عن المتاجر - المتاجر المميزة (Featured Stores) - الأقسام (Categories) - أفضل الكوبونات (Best Coupons) #### قسم الكوبونات - قائمة المتاجر المدعومة - صفحات تفصيلية لكل متجر - خيارات المشاركة والنسخ للكوبونات #### قسم تاريخ السعر - حقل إدخال روابط المنتجات - خيار "تسوق في صفقة" (Shop on Safqa) - متصفح داخلي (Built-in Browser) #### المفضلة - قائمة المتاجر المفضلة - إدارة المتاجر المحفوظة #### الحساب - معلومات المستخدم - إعدادات الدولة - عن التطبيق - سياسة الخصوصية - إصدار التطبيق - تسجيل الخروج ## المميزات الحصرية ### إضافة المتصفح - تتبع الأسعار - الظهور التلقائي في صفحات المنتجات - إدخال تلقائي للكوبونات - واجهة متكاملة مع صفحات التسوق ### تطبيق الهاتف - ميزة "تسوق في صفقة" - متصفح داخلي مدمج - واجهة مخصصة لعرض الكوبونات - إدارة المتاجر المفضلة ## الهدف والمشكلة التي تحلها صفقة تهدف صفقة إلى تحسين تجربة التسوق الإلكتروني من خلال: 1. حماية المستهلك من العروض الوهمية 2. توفير المال عبر أفضل الكوبونات المتاحة 3. تمكين المستخدم من اتخاذ قرارات شراء أفضل 4. تبسيط عملية البحث عن أفضل الأسعار والخصومات urls: - https://safqa.link/u/chrome - https://safqa.link/u/firefox - https://safqa.link/u/android - https://safqa.link/u/ios - https://safqa.link/u/facebook - https://safqa.link/u/twitter - https://safqa.link/u/instagram - https://safqa.link/u/telegram https://joinsafqa.com/privacy-policy https://joinsafqa.com/contact https://blog.joinsafqa.com/ Brand color: #ff5f00 \ No newline at end of file +Website generated by Claude from prompt: design landing in arabic for this website based on the content I will provide, make it stylish and look nice like it's built in 2027, # صفقة (Safqa) - رفيق التسوق الأفضل ## نظرة عامة صفقة هي منصة متكاملة لتحسين تجربة التسوق الإلكتروني، متوفرة كإضافة للمتصفح (Browser Extension) وتطبيق للهواتف الذكية (Mobile App). تهدف المنصة إلى جعل التسوق عبر الإنترنت أكثر سهولة وذكاءً من خلال مجموعة من الأدوات المتطورة. ## المنصات المدعومة ### إضافة المتصفح (Browser Extension) - Google Chrome - Mozilla Firefox - Microsoft Edge - Brave Browser ### تطبيقات الهواتف الذكية - Android - iOS ## المميزات الرئيسية ### 1. تاريخ الأسعار (Price History) #### الوظيفة - تتبع تغيرات أسعار المنتجات عبر الزمن - عرض رسم بياني تفاعلي يوضح تقلبات السعر - كشف العروض الوهمية والتخفيضات غير الحقيقية #### المواقع المدعومة 1. أمازون (Amazon) - مصر - السعودية - الإمارات 2. نون (Noon) - مصر - السعودية - الإمارات 3. جوميا (Jumia) - مصر ### 2. كوبونات الخصم (Discount Coupons) #### المميزات - دعم لأكثر من 400 متجر إلكتروني - إدخال تلقائي للكوبونات (Auto-apply) - اقتراح أفضل الكوبونات المتاحة - تحديثات مستمرة لقاعدة بيانات الكوبونات #### الدول المدعومة - مصر - السعودية - الإمارات - الكويت - الأردن - قطر - البحرين - عمان ### 3. تتبع الأسعار (Price Tracking) #### المميزات - متوفرة حصرياً في إضافة المتصفح - تتبع حتى 6 منتجات مجاناً - إمكانية زيادة عدد المنتجات المتتبعة عبر دعوة الأصدقاء #### خيارات التتبع 1. تنبيه عند أي تغيير في السعر 2. تنبيه عند انخفاض السعر عن حد معين 3. تنبيه عند ارتفاع السعر عن حد معين ## واجهات المستخدم ### إضافة المتصفح (Browser Extension) #### الشريط العلوي (TopBar) - شعار صفقة - الإعدادات (Settings) - حسابي (My Account) - المساعدة (Help) - زر الإغلاق (Close) #### المحتوى الرئيسي (Body) متغير حسب النافذة النشطة - نافذة الكوبونات - نافذة المنتج (تاريخ السعر) - نافذة المتاجر - نافذة تتبع السعر - نافذة الإعدادات - نافذة المساعدة - نافذة الحساب #### الشريط السفلي (BottomBar) - الكوبونات - المنتج - المتاجر - تتبع السعر ### تطبيق الهاتف (Mobile App) #### الشاشة الرئيسية (Home) - حقل البحث عن المتاجر - المتاجر المميزة (Featured Stores) - الأقسام (Categories) - أفضل الكوبونات (Best Coupons) #### قسم الكوبونات - قائمة المتاجر المدعومة - صفحات تفصيلية لكل متجر - خيارات المشاركة والنسخ للكوبونات #### قسم تاريخ السعر - حقل إدخال روابط المنتجات - خيار "تسوق في صفقة" (Shop on Safqa) - متصفح داخلي (Built-in Browser) #### المفضلة - قائمة المتاجر المفضلة - إدارة المتاجر المحفوظة #### الحساب - معلومات المستخدم - إعدادات الدولة - عن التطبيق - سياسة الخصوصية - إصدار التطبيق - تسجيل الخروج ## المميزات الحصرية ### إضافة المتصفح - تتبع الأسعار - الظهور التلقائي في صفحات المنتجات - إدخال تلقائي للكوبونات - واجهة متكاملة مع صفحات التسوق ### تطبيق الهاتف - ميزة "تسوق في صفقة" - متصفح داخلي مدمج - واجهة مخصصة لعرض الكوبونات - إدارة المتاجر المفضلة ## الهدف والمشكلة التي تحلها صفقة تهدف صفقة إلى تحسين تجربة التسوق الإلكتروني من خلال: 1. حماية المستهلك من العروض الوهمية 2. توفير المال عبر أفضل الكوبونات المتاحة 3. تمكين المستخدم من اتخاذ قرارات شراء أفضل 4. تبسيط عملية البحث عن أفضل الأسعار والخصومات urls: - https://safqa.link/u/chrome - https://safqa.link/u/firefox - https://safqa.link/u/android - https://safqa.link/u/ios - https://safqa.link/u/facebook - https://safqa.link/u/twitter - https://safqa.link/u/instagram - https://safqa.link/u/telegram https://joinsafqa.com/privacy-policy https://joinsafqa.com/contact https://blog.joinsafqa.com/ Brand color: #ff5f00 \ No newline at end of file diff --git a/script.js b/script.js index d9bb610..e5a45a9 100644 --- a/script.js +++ b/script.js @@ -1,32 +1,33 @@ -// Smooth scrolling for anchor links -document.querySelectorAll('a[href^="#"]').forEach(anchor => { - anchor.addEventListener('click', function (e) { - e.preventDefault(); - document.querySelector(this.getAttribute('href')).scrollIntoView({ - behavior: 'smooth' +document.addEventListener('DOMContentLoaded', () => { + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); }); }); -}); -// Add active class to current section in navigation -const sections = document.querySelectorAll('section'); -const navLinks = document.querySelectorAll('nav a'); + // Header scroll effect + let header = document.querySelector('.main-header'); + let lastScroll = 0; + + window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; -window.addEventListener('scroll', () => { - let current = ''; - - sections.forEach(section => { - const sectionTop = section.offsetTop; - const sectionHeight = section.clientHeight; - if (pageYOffset >= sectionTop - sectionHeight / 3) { - current = section.getAttribute('id'); + if (currentScroll <= 0) { + header.classList.remove('scroll-up'); + return; } - }); - navLinks.forEach(link => { - link.classList.remove('active'); - if (link.getAttribute('href').includes(current)) { - link.classList.add('active'); + if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) { + header.classList.remove('scroll-up'); + header.classList.add('scroll-down'); + } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) { + header.classList.remove('scroll-down'); + header.classList.add('scroll-up'); } + lastScroll = currentScroll; }); -}); \ No newline at end of file +}); diff --git a/style.css b/style.css index 65b2163..8d91979 100644 --- a/style.css +++ b/style.css @@ -1,166 +1,215 @@ :root { - --primary-color: #ff5f00; - --secondary-color: #333; - --background-color: #f5f5f5; - --text-color: #333; - --light-text-color: #666; + --primary: #ff5f00; + --primary-dark: #e65500; + --text: #333; + --bg: #fff; + --gray: #f5f5f5; } -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +* { margin: 0; padding: 0; - color: var(--text-color); - background-color: var(--background-color); + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + color: var(--text); line-height: 1.6; } -.container { +.main-header { + position: fixed; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + z-index: 100; + padding: 1rem 2rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; max-width: 1200px; margin: 0 auto; - padding: 0 20px; } -header { - background-color: var(--primary-color); - color: white; - padding: 20px 0; - text-align: center; +.logo { + font-size: 2rem; + font-weight: bold; + color: var(--primary); } -header h1 { - margin: 0; - font-size: 2.5rem; +.nav-links a { + margin-left: 2rem; + text-decoration: none; + color: var(--text); + transition: color 0.3s; } -header p { - margin: 5px 0 0; - font-size: 1.2rem; +.nav-links a:hover { + color: var(--primary); } -nav { - margin-top: 20px; +.cta-button { + background: var(--primary); + color: white !important; + padding: 0.5rem 1.5rem; + border-radius: 25px; + transition: background 0.3s; } -nav a { - color: white; - text-decoration: none; - margin: 0 15px; - font-size: 1.1rem; +.cta-button:hover { + background: var(--primary-dark); } -nav a:hover { - text-decoration: underline; +.hero { + min-height: 100vh; + display: flex; + align-items: center; + padding: 6rem 2rem 2rem; + background: linear-gradient(135deg, #fff 0%, #fff8f3 100%); } -#hero { - background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-bg.jpg'); - background-size: cover; - background-position: center; - color: white; - padding: 100px 0; - text-align: center; +.hero-content { + flex: 1; + max-width: 600px; +} + +.hero h1 { + font-size: 4rem; + margin-bottom: 1rem; + color: var(--primary); } -#hero h2 { - font-size: 2.5rem; - margin-bottom: 20px; +.tagline { + font-size: 1.5rem; + margin-bottom: 1.5rem; } -#hero p { +.hero-desc { font-size: 1.2rem; - margin-bottom: 30px; + margin-bottom: 2rem; } -.cta-buttons { +.cta-group { display: flex; - justify-content: center; - gap: 20px; + gap: 1rem; } -.btn { - background-color: var(--primary-color); - color: white; - padding: 10px 20px; +.primary-button, .secondary-button { + padding: 1rem 2rem; + border-radius: 25px; text-decoration: none; - border-radius: 5px; - font-size: 1.1rem; - transition: background-color 0.3s; + font-weight: bold; + transition: transform 0.3s; +} + +.primary-button { + background: var(--primary); + color: white; +} + +.secondary-button { + background: white; + color: var(--primary); + border: 2px solid var(--primary); } -.btn:hover { - background-color: #e65100; +.primary-button:hover, .secondary-button:hover { + transform: translateY(-2px); } -section { - padding: 60px 0; +.hero-image { + flex: 1; + position: relative; } -h2 { +.floating-ui { + width: 100%; + height: 400px; + background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="80" fill="%23ff5f00"/></svg>') no-repeat center; + animation: float 6s ease-in-out infinite; +} + +@keyframes float { + 0% { transform: translateY(0px); } + 50% { transform: translateY(-20px); } + 100% { transform: translateY(0px); } +} + +.features { + padding: 4rem 2rem; + background: var(--gray); +} + +.features h2 { text-align: center; - margin-bottom: 40px; - font-size: 2rem; - color: var(--primary-color); + margin-bottom: 3rem; } -.feature-grid, .platform-grid { +.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 30px; + gap: 2rem; + max-width: 1200px; + margin: 0 auto; } -.feature, .platform { +.feature-card { background: white; - padding: 20px; - border-radius: 10px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - text-align: center; + padding: 2rem; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); + transition: transform 0.3s; } -.feature h3, .platform h3 { - color: var(--primary-color); - margin-bottom: 15px; +.feature-card:hover { + transform: translateY(-5px); } -footer { - background-color: var(--secondary-color); - color: white; - padding: 30px 0; - text-align: center; +.platforms { + padding: 4rem 2rem; } -.social-links { - margin-top: 20px; +.platforms-container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; } -.social-links a { - color: white; - text-decoration: none; - margin: 0 10px; - font-size: 1.1rem; +footer { + background: var(--gray); + padding: 3rem 2rem; } -.social-links a:hover { - text-decoration: underline; +.footer-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; } @media (max-width: 768px) { - header h1 { - font-size: 2rem; - } - - #hero h2 { - font-size: 2rem; + .nav-links { + display: none; } - - .cta-buttons { + + .hero { flex-direction: column; - align-items: center; + text-align: center; } - - .btn { - width: 100%; - max-width: 300px; - margin-bottom: 10px; + + .hero h1 { + font-size: 3rem; + } + + .cta-group { + justify-content: center; } -} \ No newline at end of file +}

commit 1e70358f1f07ee76ddc2d141f2b523d997499505

Author: root <root@hub.scroll.pub> Date: 2024-12-28 16:30:26 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..6b4027b --- /dev/null +++ b/body.html @@ -0,0 +1,79 @@ +<header> + <div class="container"> + <h1>صفقة</h1> + <p>رفيق التسوق الأفضل</p> + <nav> + <a href="#features">المميزات</a> + <a href="#platforms">المنصات</a> + <a href="#about">عن صفقة</a> + <a href="#contact">تواصل معنا</a> + </nav> + </div> +</header> + +<section id="hero"> + <div class="container"> + <h2>تسوق بذكاء، وفر بسهولة</h2> + <p>اكتشف أفضل العروض والكوبونات مع صفقة</p> + <div class="cta-buttons"> + <a href="https://safqa.link/u/chrome" class="btn">إضافة المتصفح</a> + <a href="https://safqa.link/u/android" class="btn">تطبيق الهاتف</a> + </div> + </div> +</section> + +<section id="features"> + <div class="container"> + <h2>المميزات الرئيسية</h2> + <div class="feature-grid"> + <div class="feature"> + <h3>تاريخ الأسعار</h3> + <p>تتبع تغيرات أسعار المنتجات عبر الزمن</p> + </div> + <div class="feature"> + <h3>كوبونات الخصم</h3> + <p>دعم لأكثر من 400 متجر إلكتروني</p> + </div> + <div class="feature"> + <h3>تتبع الأسعار</h3> + <p>تنبيهات عند تغيير الأسعار</p> + </div> + </div> + </div> +</section> + +<section id="platforms"> + <div class="container"> + <h2>المنصات المدعومة</h2> + <div class="platform-grid"> + <div class="platform"> + <h3>إضافة المتصفح</h3> + <ul> + <li>Google Chrome</li> + <li>Mozilla Firefox</li> + <li>Microsoft Edge</li> + <li>Brave Browser</li> + </ul> + </div> + <div class="platform"> + <h3>تطبيقات الهواتف الذكية</h3> + <ul> + <li>Android</li> + <li>iOS</li> + </ul> + </div> + </div> + </div> +</section> + +<footer> + <div class="container"> + <p>تابعنا على:</p> + <div class="social-links"> + <a href="https://safqa.link/u/facebook">Facebook</a> + <a href="https://safqa.link/u/twitter">Twitter</a> + <a href="https://safqa.link/u/instagram">Instagram</a> + <a href="https://safqa.link/u/telegram">Telegram</a> + </div> + </div> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..96582e3 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://safqa.scroll.pub +metaTags +editButton /edit.html +title صفقة (Safqa) - رفيق التسوق الأفضل +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..3d7161e --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "f24c9abb-3818-46e8-b6eb-063687a89952", + "object": "chat.completion", + "created": 1735403401, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nsafqa.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://safqa.scroll.pub\nmetaTags\neditButton /edit.html\ntitle صفقة (Safqa) - رفيق التسوق الأفضل\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <div class=\"container\">\n <h1>صفقة</h1>\n <p>رفيق التسوق الأفضل</p>\n <nav>\n <a href=\"#features\">المميزات</a>\n <a href=\"#platforms\">المنصات</a>\n <a href=\"#about\">عن صفقة</a>\n <a href=\"#contact\">تواصل معنا</a>\n </nav>\n </div>\n</header>\n\n<section id=\"hero\">\n <div class=\"container\">\n <h2>تسوق بذكاء، وفر بسهولة</h2>\n <p>اكتشف أفضل العروض والكوبونات مع صفقة</p>\n <div class=\"cta-buttons\">\n <a href=\"https://safqa.link/u/chrome\" class=\"btn\">إضافة المتصفح</a>\n <a href=\"https://safqa.link/u/android\" class=\"btn\">تطبيق الهاتف</a>\n </div>\n </div>\n</section>\n\n<section id=\"features\">\n <div class=\"container\">\n <h2>المميزات الرئيسية</h2>\n <div class=\"feature-grid\">\n <div class=\"feature\">\n <h3>تاريخ الأسعار</h3>\n <p>تتبع تغيرات أسعار المنتجات عبر الزمن</p>\n </div>\n <div class=\"feature\">\n <h3>كوبونات الخصم</h3>\n <p>دعم لأكثر من 400 متجر إلكتروني</p>\n </div>\n <div class=\"feature\">\n <h3>تتبع الأسعار</h3>\n <p>تنبيهات عند تغيير الأسعار</p>\n </div>\n </div>\n </div>\n</section>\n\n<section id=\"platforms\">\n <div class=\"container\">\n <h2>المنصات المدعومة</h2>\n <div class=\"platform-grid\">\n <div class=\"platform\">\n <h3>إضافة المتصفح</h3>\n <ul>\n <li>Google Chrome</li>\n <li>Mozilla Firefox</li>\n <li>Microsoft Edge</li>\n <li>Brave Browser</li>\n </ul>\n </div>\n <div class=\"platform\">\n <h3>تطبيقات الهواتف الذكية</h3>\n <ul>\n <li>Android</li>\n <li>iOS</li>\n </ul>\n </div>\n </div>\n </div>\n</section>\n\n<footer>\n <div class=\"container\">\n <p>تابعنا على:</p>\n <div class=\"social-links\">\n <a href=\"https://safqa.link/u/facebook\">Facebook</a>\n <a href=\"https://safqa.link/u/twitter\">Twitter</a>\n <a href=\"https://safqa.link/u/instagram\">Instagram</a>\n <a href=\"https://safqa.link/u/telegram\">Telegram</a>\n </div>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #ff5f00;\n --secondary-color: #333;\n --background-color: #f5f5f5;\n --text-color: #333;\n --light-text-color: #666;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 0;\n color: var(--text-color);\n background-color: var(--background-color);\n line-height: 1.6;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 20px 0;\n text-align: center;\n}\n\nheader h1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\nheader p {\n margin: 5px 0 0;\n font-size: 1.2rem;\n}\n\nnav {\n margin-top: 20px;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n margin: 0 15px;\n font-size: 1.1rem;\n}\n\nnav a:hover {\n text-decoration: underline;\n}\n\n#hero {\n background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-bg.jpg');\n background-size: cover;\n background-position: center;\n color: white;\n padding: 100px 0;\n text-align: center;\n}\n\n#hero h2 {\n font-size: 2.5rem;\n margin-bottom: 20px;\n}\n\n#hero p {\n font-size: 1.2rem;\n margin-bottom: 30px;\n}\n\n.cta-buttons {\n display: flex;\n justify-content: center;\n gap: 20px;\n}\n\n.btn {\n background-color: var(--primary-color);\n color: white;\n padding: 10px 20px;\n text-decoration: none;\n border-radius: 5px;\n font-size: 1.1rem;\n transition: background-color 0.3s;\n}\n\n.btn:hover {\n background-color: #e65100;\n}\n\nsection {\n padding: 60px 0;\n}\n\nh2 {\n text-align: center;\n margin-bottom: 40px;\n font-size: 2rem;\n color: var(--primary-color);\n}\n\n.feature-grid, .platform-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n}\n\n.feature, .platform {\n background: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n text-align: center;\n}\n\n.feature h3, .platform h3 {\n color: var(--primary-color);\n margin-bottom: 15px;\n}\n\nfooter {\n background-color: var(--secondary-color);\n color: white;\n padding: 30px 0;\n text-align: center;\n}\n\n.social-links {\n margin-top: 20px;\n}\n\n.social-links a {\n color: white;\n text-decoration: none;\n margin: 0 10px;\n font-size: 1.1rem;\n}\n\n.social-links a:hover {\n text-decoration: underline;\n}\n\n@media (max-width: 768px) {\n header h1 {\n font-size: 2rem;\n }\n\n #hero h2 {\n font-size: 2rem;\n }\n\n .cta-buttons {\n flex-direction: column;\n align-items: center;\n }\n\n .btn {\n width: 100%;\n max-width: 300px;\n margin-bottom: 10px;\n }\n}\n---script.js---\n// Smooth scrolling for anchor links\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n});\n\n// Add active class to current section in navigation\nconst sections = document.querySelectorAll('section');\nconst navLinks = document.querySelectorAll('nav a');\n\nwindow.addEventListener('scroll', () => {\n let current = '';\n \n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n const sectionHeight = section.clientHeight;\n if (pageYOffset >= sectionTop - sectionHeight / 3) {\n current = section.getAttribute('id');\n }\n });\n\n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').includes(current)) {\n link.classList.add('active');\n }\n });\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 1478, + "completion_tokens": 1859, + "total_tokens": 3337, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 1478 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..7ff4e13 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# safqa.scroll.pub +Website generated by DeepSeek from prompt: design landing in arabic for this website based on the content I will provide, make it stylish and look nice like it's built in 2027, # صفقة (Safqa) - رفيق التسوق الأفضل ## نظرة عامة صفقة هي منصة متكاملة لتحسين تجربة التسوق الإلكتروني، متوفرة كإضافة للمتصفح (Browser Extension) وتطبيق للهواتف الذكية (Mobile App). تهدف المنصة إلى جعل التسوق عبر الإنترنت أكثر سهولة وذكاءً من خلال مجموعة من الأدوات المتطورة. ## المنصات المدعومة ### إضافة المتصفح (Browser Extension) - Google Chrome - Mozilla Firefox - Microsoft Edge - Brave Browser ### تطبيقات الهواتف الذكية - Android - iOS ## المميزات الرئيسية ### 1. تاريخ الأسعار (Price History) #### الوظيفة - تتبع تغيرات أسعار المنتجات عبر الزمن - عرض رسم بياني تفاعلي يوضح تقلبات السعر - كشف العروض الوهمية والتخفيضات غير الحقيقية #### المواقع المدعومة 1. أمازون (Amazon) - مصر - السعودية - الإمارات 2. نون (Noon) - مصر - السعودية - الإمارات 3. جوميا (Jumia) - مصر ### 2. كوبونات الخصم (Discount Coupons) #### المميزات - دعم لأكثر من 400 متجر إلكتروني - إدخال تلقائي للكوبونات (Auto-apply) - اقتراح أفضل الكوبونات المتاحة - تحديثات مستمرة لقاعدة بيانات الكوبونات #### الدول المدعومة - مصر - السعودية - الإمارات - الكويت - الأردن - قطر - البحرين - عمان ### 3. تتبع الأسعار (Price Tracking) #### المميزات - متوفرة حصرياً في إضافة المتصفح - تتبع حتى 6 منتجات مجاناً - إمكانية زيادة عدد المنتجات المتتبعة عبر دعوة الأصدقاء #### خيارات التتبع 1. تنبيه عند أي تغيير في السعر 2. تنبيه عند انخفاض السعر عن حد معين 3. تنبيه عند ارتفاع السعر عن حد معين ## واجهات المستخدم ### إضافة المتصفح (Browser Extension) #### الشريط العلوي (TopBar) - شعار صفقة - الإعدادات (Settings) - حسابي (My Account) - المساعدة (Help) - زر الإغلاق (Close) #### المحتوى الرئيسي (Body) متغير حسب النافذة النشطة - نافذة الكوبونات - نافذة المنتج (تاريخ السعر) - نافذة المتاجر - نافذة تتبع السعر - نافذة الإعدادات - نافذة المساعدة - نافذة الحساب #### الشريط السفلي (BottomBar) - الكوبونات - المنتج - المتاجر - تتبع السعر ### تطبيق الهاتف (Mobile App) #### الشاشة الرئيسية (Home) - حقل البحث عن المتاجر - المتاجر المميزة (Featured Stores) - الأقسام (Categories) - أفضل الكوبونات (Best Coupons) #### قسم الكوبونات - قائمة المتاجر المدعومة - صفحات تفصيلية لكل متجر - خيارات المشاركة والنسخ للكوبونات #### قسم تاريخ السعر - حقل إدخال روابط المنتجات - خيار "تسوق في صفقة" (Shop on Safqa) - متصفح داخلي (Built-in Browser) #### المفضلة - قائمة المتاجر المفضلة - إدارة المتاجر المحفوظة #### الحساب - معلومات المستخدم - إعدادات الدولة - عن التطبيق - سياسة الخصوصية - إصدار التطبيق - تسجيل الخروج ## المميزات الحصرية ### إضافة المتصفح - تتبع الأسعار - الظهور التلقائي في صفحات المنتجات - إدخال تلقائي للكوبونات - واجهة متكاملة مع صفحات التسوق ### تطبيق الهاتف - ميزة "تسوق في صفقة" - متصفح داخلي مدمج - واجهة مخصصة لعرض الكوبونات - إدارة المتاجر المفضلة ## الهدف والمشكلة التي تحلها صفقة تهدف صفقة إلى تحسين تجربة التسوق الإلكتروني من خلال: 1. حماية المستهلك من العروض الوهمية 2. توفير المال عبر أفضل الكوبونات المتاحة 3. تمكين المستخدم من اتخاذ قرارات شراء أفضل 4. تبسيط عملية البحث عن أفضل الأسعار والخصومات urls: - https://safqa.link/u/chrome - https://safqa.link/u/firefox - https://safqa.link/u/android - https://safqa.link/u/ios - https://safqa.link/u/facebook - https://safqa.link/u/twitter - https://safqa.link/u/instagram - https://safqa.link/u/telegram https://joinsafqa.com/privacy-policy https://joinsafqa.com/contact https://blog.joinsafqa.com/ Brand color: #ff5f00 \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..d9bb610 --- /dev/null +++ b/script.js @@ -0,0 +1,32 @@ +// Smooth scrolling for anchor links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); + +// Add active class to current section in navigation +const sections = document.querySelectorAll('section'); +const navLinks = document.querySelectorAll('nav a'); + +window.addEventListener('scroll', () => { + let current = ''; + + sections.forEach(section => { + const sectionTop = section.offsetTop; + const sectionHeight = section.clientHeight; + if (pageYOffset >= sectionTop - sectionHeight / 3) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href').includes(current)) { + link.classList.add('active'); + } + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..65b2163 --- /dev/null +++ b/style.css @@ -0,0 +1,166 @@ +:root { + --primary-color: #ff5f00; + --secondary-color: #333; + --background-color: #f5f5f5; + --text-color: #333; + --light-text-color: #666; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + padding: 0; + color: var(--text-color); + background-color: var(--background-color); + line-height: 1.6; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +header { + background-color: var(--primary-color); + color: white; + padding: 20px 0; + text-align: center; +} + +header h1 { + margin: 0; + font-size: 2.5rem; +} + +header p { + margin: 5px 0 0; + font-size: 1.2rem; +} + +nav { + margin-top: 20px; +} + +nav a { + color: white; + text-decoration: none; + margin: 0 15px; + font-size: 1.1rem; +} + +nav a:hover { + text-decoration: underline; +} + +#hero { + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-bg.jpg'); + background-size: cover; + background-position: center; + color: white; + padding: 100px 0; + text-align: center; +} + +#hero h2 { + font-size: 2.5rem; + margin-bottom: 20px; +} + +#hero p { + font-size: 1.2rem; + margin-bottom: 30px; +} + +.cta-buttons { + display: flex; + justify-content: center; + gap: 20px; +} + +.btn { + background-color: var(--primary-color); + color: white; + padding: 10px 20px; + text-decoration: none; + border-radius: 5px; + font-size: 1.1rem; + transition: background-color 0.3s; +} + +.btn:hover { + background-color: #e65100; +} + +section { + padding: 60px 0; +} + +h2 { + text-align: center; + margin-bottom: 40px; + font-size: 2rem; + color: var(--primary-color); +} + +.feature-grid, .platform-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; +} + +.feature, .platform { + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + text-align: center; +} + +.feature h3, .platform h3 { + color: var(--primary-color); + margin-bottom: 15px; +} + +footer { + background-color: var(--secondary-color); + color: white; + padding: 30px 0; + text-align: center; +} + +.social-links { + margin-top: 20px; +} + +.social-links a { + color: white; + text-decoration: none; + margin: 0 10px; + font-size: 1.1rem; +} + +.social-links a:hover { + text-decoration: underline; +} + +@media (max-width: 768px) { + header h1 { + font-size: 2rem; + } + + #hero h2 { + font-size: 2rem; + } + + .cta-buttons { + flex-direction: column; + align-items: center; + } + + .btn { + width: 100%; + max-width: 300px; + margin-bottom: 10px; + } +} \ No newline at end of file