Skip to content

Add initial HTML structure for DZchop website #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
djemmad1 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add initial HTML structure for DZchop website #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 104 additions & 0 deletions DZchop
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DZchop | سوق المنتجات المتنوعة والشحن السريع</title>
<script src="https://cdn.tailwindcss.com"></script>

<script>
tailwind.config = {
theme: {
extend: {
colors: {
'dz-primary': '#FF4757', // Primary Red/Coral for calls to action
'dz-secondary': '#1e293b', // Dark Slate for text and background contrast
'dz-accent': '#FFC312', // Yellow/Gold for highlights
},
fontFamily: {
sans: ['"Tajawal"', 'sans-serif'], // Keep Tajawal for Arabic, switch for LTR in JS
},
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
<style>
/* Custom Styles and Utility Overrides */
body {
font-family: 'Tajawal', sans-serif;
background-color: #f8fafc;
}

/* Apply LTR font for LTR pages */
.ltr-mode {
font-family: 'Roboto', sans-serif !important;
}

.transition-all-ease {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-gradient {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body class="text-dz-secondary">

<header class="sticky top-0 z-50 bg-white shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<a href="#" class="flex items-center space-x-2">
<span class="text-3xl font-black text-dz-primary">DZ<span class="text-dz-secondary">chop</span></span>
</a>

<div class="hidden md:flex flex-1 mx-8 max-w-2xl">
<input id="search-input-desktop" type="search" placeholder="ابحث عن منتجات، موردين، أو خدمات توصيل..."
class="w-full px-5 py-3 border-2 border-dz-accent rounded-r-lg focus:outline-none focus:ring-2 focus:ring-dz-primary transition duration-300 shadow-md">
<button id="search-button-desktop" class="bg-dz-primary text-white p-3 rounded-l-lg hover:bg-red-600 transition duration-300 flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</div>

<div class="flex items-center space-x-4 space-x-reverse">
<div class="relative group">
<button id="lang-btn" class="p-2 text-gray-600 hover:text-dz-primary transition-all-ease flex items-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.592 9.065a11.95 11.95 0 011.85 1.056l-.16.16m12.448-4.148l.16.16m-4.048-4.048a18.022 18.022 0 01-5.32 0M6 18h12M9 16v2m6-2v2m1.048-9.5A18.022 18.022 0 0017.408 9.065a11.95 11.95 0 00-1.85-1.056l.16-.16"></path></svg>
<span id="current-lang-text" class="ml-1 mr-1 text-sm font-semibold">العربية</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div id="lang-menu" class="absolute left-0 rtl:right-0 mt-2 w-32 bg-white rounded-md shadow-lg z-20 hidden group-hover:block transition duration-300 transform opacity-0 group-hover:opacity-100">
<button data-lang="ar" class="lang-option block w-full text-right px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">العربية</button>
<button data-lang="en" class="lang-option block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">English</button>
<button data-lang="fr" class="lang-option block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Français</button>
</div>
</div>

<a href="#" class="p-2 text-gray-600 hover:text-dz-primary transition-all-ease hidden sm:block" title="حسابي">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
</a>
<button id="cart-button" class="relative p-2 text-gray-600 hover:text-dz-primary transition-all-ease" title="سلة التسوق">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
<span id="cart-count" class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-dz-accent rounded-full shadow-lg">0</span>
</button>
<button id="mobile-menu-button" class="md:hidden p-2 text-gray-600 hover:text-dz-primary transition-all-ease">
<svg id="menu-icon" class="w-7 h-7 block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
<svg id="close-icon" class="w-7 h-7 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
</div>

<nav class="hidden md:block border-t border-gray-100">
<div class="flex justify-center space-x-8 space-x-reverse py-3 text-lg font-medium">
<a href="#products" class="nav-item text-dz-secondary hover:text-dz-primary transition-colors duration-200 border-b-2 border-transparent hover:border-dz-primary" data-ar="المنتجات" data-en="Products" data-fr="Produits">المنتجات</a>
<a href="#suppliers" class="nav-item text-dz-secondary hover:text-dz-primary transition-colors duration-200 border-b-2 border-transparent hover:border-dz-primary" data-ar="كن موردًا" data-en="Become a Supplier" data-fr="Devenir Fournisseur">كن موردًا</a>
<a href="#delivery" class="nav-item text-dz-secondary hover:text-dz-primary transition-colors duration-200 border-b-2 border-transparent hover:border-dz-primary" data-ar="شركاء التوصيل" data-en="Delivery Partners" data-fr="Partenaires de Livraison">شركاء التوصيل</a>
<a href="#deals" class="nav-item text-dz-secondary hover:text-dz-primary transition-colors duration-200 border-b-2 border-transparent hover:border-dz-primary" data-ar="صفقات اليوم" data-en="Daily Deals" data-fr="Offres du Jour">صفقات اليوم</a>
<