- :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,') 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;

- }

- }

- 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;

- });

- });

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

المميزات الرئيسية

-

-

-

-

-

المنصات المدعومة

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

- # 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

- buildHtml

- baseUrl https://safqa.scroll.pub

- metaTags

- editButton /edit.html

- title صفقة - رفيق التسوق الأفضل

- style.css

- body.html

- script.js

- {

- "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

\n \n

\n\n

\n

\n

\n

صفقة

\n

رفيق التسوق الذكي لعام 2027

\n

منصة متكاملة لتحسين تجربة التسوق الإلكتروني مع أدوات متطورة لتتبع الأسعار والكوبونات

\n

\n حمل إضافة المتصفح\n حمل تطبيق الهاتف\n

\n

\n

\n

\n

\n

\n\n

\n

المميزات الرئيسية

\n

\n

\n

\n

تاريخ الأسعار

\n

تتبع تغيرات الأسعار عبر الزمن مع رسوم بيانية تفاعلية

\n

\n

\n

\n

كوبونات الخصم

\n

أكثر من 400 متجر إلكتروني مع إدخال تلقائي للكوبونات

\n

\n

\n

\n

تتبع الأسعار

\n

تنبيهات فورية عند تغير أسعار منتجاتك المفضلة

\n

\n

\n

\n\n

\n

المنصات المدعومة

\n

\n

\n

إضافات المتصفح

\n

\n Chrome\n Firefox\n Edge\n Brave\n

\n

\n

\n

تطبيقات الهاتف

\n

\n Android\n iOS\n

\n

\n

\n

\n

\n\n\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,') 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

- }

- }

-

-

-

-