<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>أُلفة | نعطي الأشياء حياة جديدة</title>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--background: #EEF1E8;
--light-green: #DDE5D7;
--green: #687A5E;
--dark-green: #435340;
--brown: #8A6B52;
--dark-brown: #5E4938;
--light-brown: #A98C70;
--cream: #F8F3E8;
--gold: #B39A62;
--text: #4F463D;
--border: #D8D1C3;
--white: #FFFFFF;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
body {
font-family: 'Cairo', sans-serif;
background: var(--background);
color: var(--text);
line-height: 1.8;
}
a {
text-decoration: none;
color: inherit;
}
button, input, select, textarea {
font-family: inherit;
}
button {
cursor: pointer;
}
header {
background: var(--cream);
padding: 14px 5%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 1000;
}
.logo {
color: var(--dark-green);
font-size: 29px;
font-weight: 800;
white-space: nowrap;
}
.logo span {
color: var(--brown);
}
.menu-toggle {
display: block;
border: none;
background: var(--light-green);
color: var(--dark-green);
border-radius: 10px;
font-size: 27px;
width: 45px;
height: 43px;
line-height: 1;
flex-shrink: 0;
}
.nav-links {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.nav-links a {
font-size: 13px;
font-weight: 700;
color: var(--dark-green);
transition: 0.2s;
}
.nav-links a:hover {
color: var(--brown);
}
.hero {
padding: 55px 7%;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 35px;
background: var(--light-green);
}
.hero h1 {
font-size: clamp(30px, 5vw, 47px);
line-height: 1.5;
color: var(--dark-green);
margin-bottom: 15px;
}
.hero h1 span {
color: var(--brown);
}
.hero p {
margin-bottom: 25px;
max-width: 540px;
}
.hero img {
width: 100%;
height: 350px;
object-fit: cover;
border-radius: 25px;
box-shadow: 0 8px 25px #43534020;
}
.btn {
display: inline-block;
padding: 11px 23px;
border: none;
border-radius: 10px;
background: var(--dark-green);
color: var(--white);
font-weight: 700;
margin: 4px;
transition: 0.2s;
}
.btn:hover {
background: var(--brown);
transform: translateY(-2px);
}
.btn-light {
background: var(--cream);
color: var(--dark-green);
border: 1px solid var(--border);
}
section {
padding: 55px 7%;
scroll-margin-top: 100px;
}
.section-title {
text-align: center;
margin-bottom: 30px;
}
.section-title h2 {
color: var(--dark-green);
font-size: 29px;
margin-bottom: 8px;
}
.section-title p {
color: var(--brown);
}
.features, .categories, .cities, .products, .gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 20px;
}
.feature-card, .category-card, .city-card, .product-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 17px;
overflow: hidden;
transition: 0.2s;
}
.feature-card {
text-align: center;
padding: 25px 18px;
}
.feature-card:hover, .category-card:hover,
.city-card:hover, .product-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px #43534015;
}
.feature-icon {
font-size: 35px;
margin-bottom: 10px;
}
.feature-card h3, .category-card h3,
.city-card h3, .product-card h3 {
color: var(--dark-green);
margin: 8px 0;
}
.about-box {
max-width: 900px;
margin: auto;
background: var(--cream);
padding: 30px;
border-radius: 20px;
border-right: 5px solid var(--green);
}
.about-box p {
margin-bottom: 12px;
}
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
}
.step {
background: var(--cream);
padding: 22px;
border-radius: 15px;
text-align: center;
}
.step-number {
width: 42px;
height: 42px;
background: var(--green);
color: white;
border-radius: 50%;
display: inline-grid;
place-items: center;
margin-bottom: 10px;
font-weight: 800;
}
.category-card img {
width: 100%;
height: 170px;
object-fit: cover;
}
.category-card .card-content {
padding: 15px;
}
.city-card {
text-align: center;
padding: 22px;
background: var(--cream);
}
.city-card span {
font-size: 32px;
}
.filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 25px;
}
.filter-btn {
padding: 9px 18px;
border: 1px solid var(--green);
background: var(--cream);
color: var(--dark-green);
border-radius: 20px;
}
.filter-btn.active {
background: var(--dark-green);
color: white;
}
.product-card img {
width: 100%;
height: 190px;
object-fit: cover;
}
.product-content {
padding: 15px;
}
.badge {
display: inline-block;
background: var(--light-green);
color: var(--dark-green);
padding: 3px 10px;
border-radius: 15px;
font-size: 12px;
margin-bottom: 5px;
}
.price {
color: var(--brown);
font-weight: 800;
margin: 7px 0;
}
.product-actions {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.product-actions .btn {
padding: 7px 12px;
font-size: 12px;
}
.empty-message {
text-align: center;
padding: 20px;
grid-column: 1 / -1;
}
.form-box {
max-width: 700px;
margin: auto;
background: var(--cream);
padding: 25px;
border-radius: 20px;
border: 1px solid var(--border);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.form-group {
margin-bottom: 15px;
}
.form-group.full {
grid-column: 1 / -1;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 700;
color: var(--dark-green);
}
input, select, textarea {
width: 100%;
padding: 11px;
border: 1px solid var(--border);
border-radius: 9px;
background: white;
color: var(--text);
}
textarea {
min-height: 100px;
resize: vertical;
}
.gallery img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 15px;
border: 3px solid var(--cream);
}
.cta {
background: var(--dark-green);
color: white;
text-align: center;
padding: 40px 7%;
}
.cta h2 {
margin-bottom: 10px;
}
.cta .btn {
background: var(--cream);
color: var(--dark-green);
margin-top: 15px;
}
footer {
background: var(--dark-brown);
color: var(--cream);
text-align: center;
padding: 25px 7%;
}
footer p {
font-size: 13px;
margin: 5px 0;
}
.notice {
display: none;
padding: 12px;
background: var(--light-green);
color: var(--dark-green);
border-radius: 10px;
margin-top: 12px;
}
.notice.show {
display: block;
}
@media (max-width: 800px) {
header {
gap: 10px;
}
.logo {
font-size: 25px;
}
.menu-toggle {
order: 2;
margin-right: auto;
}
.nav-links {
display: none;
order: 3;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--cream);
border-top: 1px solid var(--border);
padding-top: 8px;
}
.nav-links.open {
display: flex;
}
.nav-links a {
padding: 9px 5px;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.hero {
grid-template-columns: 1fr;
padding: 35px 6%;
}
.hero img {
height: 260px;
}
section {
padding: 40px 6%;
}
}
@media (min-width: 801px) {
.menu-toggle {
order: 2;
}
.nav-links {
order: 3;
}
}
@media (max-width: 500px) {
.form-grid {
grid-template-columns: 1fr;
}
.form-group.full {
grid-column: auto;
}
.section-title h2 {
font-size: 25px;
}
}
</style>
</head>
<body>
<header>
<a href="#home" class="logo">أُلفة <span>🌿</span></a>
<button class="menu-toggle" id="menuToggle"
aria-label="فتح القائمة" aria-expanded="false"
onclick="toggleMenu()">☰</button>
<nav class="nav-links" id="navLinks">
<a href="#home" onclick="closeMenu()">الرئيسية</a>
<a href="#about" onclick="closeMenu()">عن أُلفة</a>
<a href="#categories" onclick="closeMenu()">الأقسام</a>
<a href="#cities" onclick="closeMenu()">المدن</a>
<a href="#products" onclick="closeMenu()">الأغراض</a>
<a href="#gallery" onclick="closeMenu()">معرض الصور</a>
<a href="#add-item" onclick="closeMenu()">أضف غرضك</a>
<a href="#inquiry" onclick="closeMenu()">استفسار</a>
<a href="#login" onclick="closeMenu()">تسجيل الدخول</a>
</nav>
</header>
<main>
<section class="hero" id="home">
<div>
<h1>أشياؤك القديمة، <span>بداية جديدة</span></h1>
<p>
في أُلفة نؤمن أن لكل غرض حكاية، وأن ما لم تعودي بحاجة إليه
قد يكون شيئًا ثمينًا لشخص آخر. تبرعي بأغراضك أو تبادليها
أو اعرضيها للبيع، وساهمي معنا في صنع فرق جميل.
</p>
<a href="#products" class="btn">اكتشفي الأغراض</a>
<a href="#add-item" class="btn btn-light">أضيفي غرضك</a>
</div>
<!-- صورة المقدمة الجديدة -->
<img
src="https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?auto=format&fit=crop&w=1100&q=85"
alt="أغراض منزلية مرتبة بعناية">
</section>
<section>
<div class="section-title">
<h2>لماذا أُلفة؟</h2>
<p>فكرة بسيطة تصنع أثرًا جميلًا</p>
</div>
<div class="features">
<div class="feature-card">
<div class="feature-icon">💚</div>
<h3>العطاء</h3>
<p>امنحي أغراضك فرصة جديدة ليستفيد منها الآخرون.</p>
</div>
<div class="feature-card">
<div class="feature-icon">♻️</div>
<h3>إعادة الاستخدام</h3>
<p>نساعد على تقليل الهدر والاستفادة من الأشياء الموجودة لدينا.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🤝</div>
<h3>التبادل</h3>
<p>بادلي غرضًا لا تحتاجينه بغرض آخر يناسب احتياجك.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌱</div>
<h3>الاستفادة</h3>
<p>نمنح الأغراض قيمة وفرصة للاستمرار بدلًا من إهمالها.</p>
</div>
</div>
</section>
<section id="about">
<div class="section-title">
<h2>عن أُلفة</h2>
<p>نعطي الأشياء حياة جديدة</p>
</div>
<div class="about-box">
<p>
أُلفة منصة تهدف إلى تشجيع إعادة استخدام الأغراض والاستفادة منها
بدلًا من التخلص منها. تتيح الفكرة للأشخاص عرض الأشياء التي
لم يعودوا بحاجة إليها، سواء للتبرع بها أو تبادلها أو بيعها.
</p>
<p>
نسعى إلى نشر ثقافة العطاء والتعاون، وتسهيل وصول الأغراض
المناسبة إلى الأشخاص الذين يحتاجون إليها، بطريقة منظمة
وبسيطة تراعي احتياجات المجتمع.
</p>
<p>
<strong>رؤيتنا:</strong> مجتمع أكثر تعاونًا ووعيًا بقيمة الأشياء.
</p>
<p>
<strong>رسالتنا:</strong> منح الأغراض فرصة جديدة وتحويل الفائض
إلى منفعة للآخرين.
</p>
</div>
</section>
<section>
<div class="section-title">
<h2>كيف تعمل أُلفة؟</h2>
<p>خطوات بسيطة للمشاركة</p>
</div>
<div class="steps">
<div class="step">
<div class="step-number">١</div>
<h3>اختاري غرضك</h3>
<p>حددي الغرض الذي ترغبين في عرضه.</p>
</div>
<div class="step">
<div class="step-number">٢</div>
<h3>أضيفي التفاصيل</h3>
<p>اكتبي اسم الغرض ووصفه ومدينتك وطريقة الاستفادة منه.</p>
</div>
<div class="step">
<div class="step-number">٣</div>
<h3>اعرضي الغرض</h3>
<p>أرسلي الطلب ليظهر ضمن الأغراض المعروضة في الموقع.</p>
</div>
<div class="step">
<div class="step-number">٤</div>
<h3>ابدئي حياة جديدة</h3>
<p>امنحي غرضك فرصة ليستفيد منه شخص آخر.</p>
</div>
</div>
</section>
<section id="categories">
<div class="section-title">
<h2>أقسام الأغراض</h2>
<p>اختاري القسم الذي يناسب غرضك</p>
</div>
<div class="categories">
<div class="category-card">
<img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=700&q=80" alt="أثاث منزلي">
<div class="card-content">
<h3>الأغراض المنزلية</h3>
<p>قطع وأغراض يمكن أن يستفيد منها منزل آخر.</p>
<a href="#products" class="btn">تصفحي الأغراض</a>
</div>
</div>
<div class="category-card">
<img src="https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=700&q=80" alt="كتب">
<div class="card-content">
<h3>الكتب</h3>
<p>كتب تستحق أن يقرأها شخص آخر.</p>
<a href="#products" class="btn">تصفحي الأغراض</a>
</div>
</div>
<div class="category-card">
<img src="https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=700&q=80" alt="إكسسوارات">
<div class="card-content">
<h3>الإكسسوارات</h3>
<p>إكسسوارات وأغراض صغيرة بحالة جيدة.</p>
<a href="#products" class="btn">تصفحي الأغراض</a>
</div>
</div>
<div class="category-card">
<img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=700&q=80" alt="ملابس">
<div class="card-content">
<h3>الملابس</h3>
<p>ملابس يمكن إعادة استخدامها والاستفادة منها.</p>
<a href="#products" class="btn">تصفحي الأغراض</a>
</div>
</div>
<div class="category-card">
<img src="https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?auto=format&fit=crop&w=700&q=80" alt="أغراض متنوعة">
<div class="card-content">
<h3>أغراض أخرى</h3>
<p>أغراض متنوعة قد يحتاج إليها الآخرون.</p>
<a href="#products" class="btn">تصفحي الأغراض</a>
</div>
</div>
</div>
</section>
<section id="cities">
<div class="section-title">
<h2>المدن المتاحة</h2>
<p>أُلفة تجمعنا بالقرب من بعضنا</p>
</div>
<div class="cities">
<div class="city-card">
<span>🕋</span>
<h3>مكة المكرمة</h3>
</div>
<div class="city-card">
<span>🌊</span>
<h3>جدة</h3>
</div>
<div class="city-card">
<span>🏙️</span>
<h3>الرياض</h3>
</div>
<div class="city-card">
<span>🌴</span>
<h3>المدينة المنورة</h3>
</div>
</div>
</section>
<section id="products">
<div class="section-title">
<h2>الأغراض المعروضة</h2>
<p>تصفحي الأغراض واختاري ما يناسبك</p>
</div>
<div class="filters">
<button class="filter-btn active" onclick="filterType('الكل', this)">الكل</button>
<button class="filter-btn" onclick="filterType('تبرع', this)">للتبرع</button>
<button class="filter-btn" onclick="filterType('تبادل', this)">للتبادل</button>
<button class="filter-btn" onclick="filterType('بيع', this)">للبيع</button>
</div>
<div class="products" id="productsContainer"></div>
</section>
<section id="add-item">
<div class="section-title">
<h2>طلبات إضافة غرض</h2>
<p>شاركي غرضك وساعدي في منحه حياة جديدة</p>
</div>
<div class="form-box">
<form id="addItemForm">
<div class="form-grid">
<div class="form-group">
<label for="itemName">اسم الغرض *</label>
<input id="itemName" required placeholder="مثال: كتاب قصص">
</div>
<div class="form-group">
<label for="itemCategory">القسم *</label>
<select id="itemCategory" required>
<option value="">اختاري القسم</option>
<option>الأغراض المنزلية</option>
<option>الكتب</option>
<option>الإكسسوارات</option>
<option>الملابس</option>
<option>أغراض أخرى</option>
</select>
</div>
<div class="form-group">
<label for="itemType">طريقة العرض *</label>
<select id="itemType" required>
<option value="">اختاري الطريقة</option>
<option value="تبرع">تبرع</option>
<option value="تبادل">تبادل</option>
<option value="بيع">بيع</option>
</select>
</div>
<div class="form-group">
<label for="itemCity">المدينة *</label>
<select id="itemCity" required>
<option value="">اختاري المدينة</option>
<option>مكة المكرمة</option>
<option>جدة</option>
<option>الرياض</option>
<option>المدينة المنورة</option>
</select>
</div>
<div class="form-group">
<label for="itemPrice">السعر (للبيع فقط)</label>
<input id="itemPrice" type="number" min="0" placeholder="السعر بالريال">
</div>
<div class="form-group">
<label for="itemImage">صورة الغرض</label>
<input id="itemImage" type="file" accept="image/*">
</div>
<div class="form-group full">
<label for="itemDescription">وصف الغرض *</label>
<textarea id="itemDescription" required placeholder="اكتبي وصفًا بسيطًا للغرض وحالته"></textarea>
</div>
<div class="form-group">
<label for="itemOwner">الاسم (اختياري)</label>
<input id="itemOwner" placeholder="اسمك">
</div>
<div class="form-group">
<label for="itemContact">رقم التواصل أو البريد (اختياري)</label>
<input id="itemContact" placeholder="وسيلة التواصل">
</div>
</div>
<button type="submit" class="btn">إضافة الغرض</button>
<div class="notice" id="addNotice"></div>
</form>
</div>
</section>
<section id="gallery">
<div class="section-title">
<h2>معرض الصور</h2>
<p>أفكار بسيطة لإعادة الاستخدام والعطاء</p>
</div>
<div class="gallery">
<img src="https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?auto=format&fit=crop&w=700&q=80" alt="أغراض منزلية">
<img src="https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=700&q=80" alt="مكتبة كتب">
<img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=700&q=80" alt="أثاث">
<img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=700&q=80" alt="ملابس">
</div>
</section>
<section id="inquiry">
<div class="section-title">
<h2>استمارة استفسار</h2>
<p>يسعدنا استقبال استفساراتك واقتراحاتك</p>
</div>
<div class="form-box">
<form id="inquiryForm">
<div class="form-group">
<label for="inquiryName">الاسم</label>
<input id="inquiryName" required placeholder="اكتبي اسمك">
</div>
<div class="form-group">
<label for="inquiryContact">رقم الهاتف أو البريد الإلكتروني (اختياري)</label>
<input id="inquiryContact" placeholder="وسيلة التواصل">
</div>
<div class="form-group">
<label for="inquirySubject">موضوع الاستفسار</label>
<select id="inquirySubject" required>
<option value="">اختاري الموضوع</option>
<option>استفسار عن غرض</option>
<option>طريقة التبرع</option>
<option>طريقة التبادل</option>
<option>طريقة البيع</option>
<option>اقتراح للموقع</option>
<option>موضوع آخر</option>
</select>
</div>
<div class="form-group">
<label for="inquiryMessage">رسالتك</label>
<textarea id="inquiryMessage" required placeholder="اكتبي استفسارك هنا"></textarea>
</div>
<button type="submit" class="btn">إرسال الاستفسار</button>
<div class="notice" id="inquiryNotice"></div>
</form>
</div>
</section>
<section id="login">
<div class="section-title">
<h2>تسجيل الدخول</h2>
<p>نموذج تجريبي للتعريف بشكل صفحة الدخول</p>
</div>
<div class="form-box">
<form id="loginForm">
<div class="form-group">
<label for="loginName">اسم المستخدم</label>
<input id="loginName" required placeholder="اكتبي اسم المستخدم">
</div>
<div class="form-group">
<label for="loginPassword">كلمة المرور</label>
<input id="loginPassword" type="password" required placeholder="اكتبي كلمة المرور">
</div>
<button type="submit" class="btn">دخول تجريبي</button>
<div class="notice" id="loginNotice"></div>
</form>
</div>
</section>
<section class="cta">
<h2>غرضك قد يصنع فرقًا في حياة شخص آخر 💚</h2>
<p>شاركي معنا، فالأشياء الصغيرة قد تصنع أثرًا كبيرًا.</p>
<a href="#add-item" class="btn">ابدئي بإضافة غرضك</a>
</section>
</main>
<footer>
<h2>أُلفة 🌿</h2>
<p>نعطي الأشياء حياة جديدة</p>
<p>منصة تجريبية للتبرع بالأغراض وتبادلها وبيعها.</p>
<p>© 2026 أُلفة - جميع الحقوق محفوظة</p>
</footer>
<script>
function toggleMenu() {
const nav = document.getElementById("navLinks");
const button = document.getElementById("menuToggle");
const isOpen = nav.classList.toggle("open");
button.setAttribute("aria-expanded", isOpen);
}
function closeMenu() {
const nav = document.getElementById("navLinks");
const button = document.getElementById("menuToggle");
nav.classList.remove("open");
button.setAttribute("aria-expanded", "false");
}
const defaultProducts = [
{
name: "كتاب للقراءة",
category: "الكتب",
type: "تبرع",
city: "جدة",
price: 0,
description: "كتاب بحالة جيدة يبحث عن قارئ جديد.",
image: "https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=700&q=80"
},
{
name: "قطعة ديكور",
category: "الأغراض المنزلية",
type: "تبادل",
city: "الرياض",
price: 0,
description: "قطعة ديكور جميلة يمكن تبادلها بغرض آخر.",
image: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=700&q=80"
},
{
name: "إكسسوار",
category: "الإكسسوارات",
type: "بيع",
city: "مكة المكرمة",
price: 20,
description: "إكسسوار بحالة جيدة.",
image: "https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=700&q=80"
}
];
let products = [...defaultProducts];
let currentType = "الكل";
function renderProducts() {
const container = document.getElementById("productsContainer");
const filtered = currentType === "الكل"
? products
: products.filter(product => product.type === currentType);
container.innerHTML = "";
if (filtered.length === 0) {
container.innerHTML =
'<p class="empty-message">لا توجد أغراض في هذا القسم حاليًا.</p>';
return;
}
filtered.forEach(product => {
const card = document.createElement("article");
card.className = "product-card";
const image = document.createElement("img");
image.src = product.image;
image.alt = product.name;
const content = document.createElement("div");
content.className = "product-content";
const badge = document.createElement("span");
badge.className = "badge";
badge.textContent = product.type;
const title = document.createElement("h3");
title.textContent = product.name;
const description = document.createElement("p");
description.textContent = product.description;
const city = document.createElement("p");
city.textContent = "📍 " + product.city;
content.append(badge, title, description, city);
if (product.type === "بيع") {
const price = document.createElement("p");
price.className = "price";
price.textContent = "السعر: " + (product.price || 0) + " ريال";
content.appendChild(price);
}
card.append(image, content);
container.appendChild(card);
});
}
function filterType(type, button) {
currentType = type;
document.querySelectorAll(".filter-btn").forEach(btn => {
btn.classList.remove("active");
});
button.classList.add("active");
renderProducts();
}
function showNotice(id, message) {
const notice = document.getElementById(id);
notice.textContent = message;
notice.classList.add("show");
}
document.getElementById("addItemForm").addEventListener("submit", function(event) {
event.preventDefault();
const name = document.getElementById("itemName").value.trim();
const category = document.getElementById("itemCategory").value;
const type = document.getElementById("itemType").value;
const city = document.getElementById("itemCity").value;
const price = Number(document.getElementById("itemPrice").value) || 0;
const description = document.getElementById("itemDescription").value.trim();
const imageInput = document.getElementById("itemImage");
const file = imageInput.files[0];
const newProduct = {
name,
category,
type,
city,
price,
description,
image: "https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?auto=format&fit=crop&w=700&q=80"
};
function finishAdding() {
products.unshift(newProduct);
currentType = "الكل";
document.querySelectorAll(".filter-btn").forEach(btn => {
btn.classList.toggle("active", btn.textContent.trim() === "الكل");
});
renderProducts();
document.getElementById("addItemForm").reset();
showNotice("addNotice", "تمت إضافة الغرض إلى قائمة الأغراض المعروضة في هذه الصفحة التجريبية.");
document.getElementById("products").scrollIntoView({ behavior: "smooth" });
}
if (file) {
const reader = new FileReader();
reader.onload = function() {
newProduct.image = reader.result;
finishAdding();
};
reader.readAsDataURL(file);
} else {
finishAdding();
}
});
document.getElementById("inquiryForm").addEventListener("submit", function(event) {
event.preventDefault();
showNotice(
"inquiryNotice",
"شكرًا لك! تم تسجيل الاستفسار بشكل تجريبي داخل الصفحة. لا يتم إرساله إلى بريد إلكتروني."
);
this.reset();
});
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault();
showNotice(
"loginNotice",
"تم تسجيل الدخول بشكل تجريبي فقط. هذه الصفحة لا تنشئ حسابًا حقيقيًا."
);
});
renderProducts();
</script>
</body>
</html>