<!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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--background: #EEF1E8;
--green: #687A5E;
--dark-green: #435340;
--brown: #8A6B52;
--dark-brown: #5E4938;
--light-brown: #A98C70;
--cream: #F8F3E8;
--gold: #B39A62;
--white: #FFFFFF;
--muted: #82776B;
--border: #D8D1C3;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Cairo', sans-serif;
background: var(--background);
color: var(--dark-brown);
line-height: 1.8;
}
button, input, textarea, select {
font-family: inherit;
}
button {
cursor: pointer;
}
img {
max-width: 100%;
display: block;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
/* القائمة الجانبية */
.overlay {
position: fixed;
inset: 0;
background: rgba(36, 34, 28, .45);
z-index: 99;
display: none;
}
.overlay.show {
display: block;
}
.side-menu {
position: fixed;
top: 0;
right: -320px;
width: 290px;
max-width: 85%;
height: 100%;
background: var(--cream);
z-index: 100;
padding: 25px 20px;
overflow-y: auto;
transition: right .3s ease;
box-shadow: -10px 0 30px rgba(0,0,0,.08);
}
.side-menu.open {
right: 0;
}
.close-menu {
border: none;
background: transparent;
font-size: 28px;
color: var(--dark-brown);
float: left;
}
.menu-logo {
font-family: 'Noto Kufi Arabic', sans-serif;
font-size: 25px;
font-weight: 700;
color: var(--dark-green);
margin-bottom: 5px;
}
.menu-subtitle {
color: var(--muted);
font-size: 12px;
margin-bottom: 25px;
}
.menu-heading {
color: var(--gold);
font-size: 12px;
font-weight: 700;
margin: 20px 0 8px;
}
.menu-link {
display: block;
width: 100%;
text-align: right;
padding: 11px 13px;
border: none;
background: transparent;
color: var(--dark-brown);
border-radius: 10px;
font-size: 14px;
margin-bottom: 4px;
transition: .2s;
}
.menu-link:hover {
background: #E8E9DC;
color: var(--dark-green);
}
/* رأس الموقع */
.header {
background: rgba(248, 243, 232, .97);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 50;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 78px;
gap: 15px;
}
.menu-button {
border: none;
background: var(--cream);
color: var(--dark-brown);
width: 45px;
height: 45px;
border-radius: 12px;
font-size: 24px;
}
.menu-button:hover {
background: var(--green);
color: white;
}
.logo-area {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.logo-symbol {
width: 43px;
height: 43px;
border-radius: 14px;
background: var(--dark-green);
color: var(--cream);
display: grid;
place-items: center;
font-size: 22px;
}
.logo-name {
font-family: 'Noto Kufi Arabic', sans-serif;
font-size: 22px;
color: var(--dark-green);
font-weight: 700;
line-height: 1.4;
}
.logo-subtitle {
color: var(--muted);
font-size: 10px;
}
.header-note {
color: var(--brown);
font-size: 12px;
font-weight: 600;
}
/* الصفحات */
.page {
display: none;
min-height: 70vh;
padding: 35px 0 65px;
animation: appear .3s ease;
}
.page.active {
display: block;
}
@keyframes appear {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* الصفحة الرئيسية */
.hero {
background: var(--cream);
border-radius: 25px;
padding: 45px;
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 35px;
align-items: center;
border: 1px solid var(--border);
overflow: hidden;
}
.hero-label {
display: inline-block;
color: var(--green);
background: #E8E9DC;
padding: 6px 15px;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
margin-bottom: 18px;
}
.hero h1 {
font-family: 'Noto Kufi Arabic', sans-serif;
color: var(--dark-green);
font-size: clamp(27px, 4vw, 44px);
line-height: 1.7;
margin-bottom: 18px;
}
.hero h1 span {
color: var(--brown);
}
.hero p {
color: var(--muted);
font-size: 15px;
max-width: 520px;
margin-bottom: 25px;
}
.hero-image {
height: 390px;
border-radius: 20px;
overflow: hidden;
position: relative;
background: #E8E9DC;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
}
.hero-image::after {
content: "نعطي الأشياء حياة جديدة";
position: absolute;
bottom: 18px;
right: 18px;
left: 18px;
padding: 12px;
background: rgba(248, 243, 232, .94);
color: var(--dark-green);
border-radius: 12px;
text-align: center;
font-weight: 700;
font-size: 13px;
}
.button-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.main-button, .secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
padding: 12px 22px;
font-size: 13px;
font-weight: 700;
border: none;
transition: .25s;
}
.main-button {
background: var(--dark-green);
color: white;
}
.main-button:hover {
background: var(--green);
transform: translateY(-2px);
}
.secondary-button {
background: #E8E9DC;
color: var(--dark-green);
}
.secondary-button:hover {
background: #DDE1D2;
}
.intro-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 25px;
}
.intro-card {
background: var(--cream);
padding: 24px;
border-radius: 17px;
border: 1px solid var(--border);
}
.intro-icon {
font-size: 28px;
margin-bottom: 8px;
}
.intro-card h3 {
color: var(--dark-green);
font-size: 16px;
margin-bottom: 5px;
}
.intro-card p {
color: var(--muted);
font-size: 12px;
}
/* عناوين الصفحات */
.section-heading {
margin-bottom: 25px;
}
.section-heading small {
color: var(--gold);
font-size: 12px;
font-weight: 700;
}
.section-heading h1,
.section-heading h2 {
color: var(--dark-green);
font-family: 'Noto Kufi Arabic', sans-serif;
margin-top: 5px;
}
.section-heading p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
}
/* بطاقات الأقسام */
.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.category-card {
background: var(--cream);
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--border);
cursor: pointer;
transition: .25s;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(94,73,56,.10);
}
.category-card img {
width: 100%;
height: 190px;
object-fit: cover;
}
.category-card-body {
padding: 18px;
}
.category-card h3 {
color: var(--dark-green);
font-size: 16px;
}
.category-card p {
color: var(--muted);
font-size: 12px;
margin-top: 5px;
}
/* بطاقات الأغراض */
.items-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.item-card {
background: var(--cream);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
transition: .25s;
cursor: pointer;
}
.item-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 32px rgba(94,73,56,.12);
}
.item-image {
position: relative;
height: 230px;
overflow: hidden;
background: #E8E9DC;
}
.item-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s;
}
.item-card:hover .item-image img {
transform: scale(1.04);
}
.item-label {
position: absolute;
top: 12px;
right: 12px;
background: rgba(248,243,232,.95);
color: var(--dark-green);
border-radius: 30px;
padding: 5px 11px;
font-size: 10px;
font-weight: 700;
}
.item-content {
padding: 17px;
}
.item-content h3 {
font-size: 16px;
color: var(--dark-brown);
margin-bottom: 5px;
}
.item-description {
font-size: 12px;
color: var(--muted);
min-height: 44px;
}
.item-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-top: 1px solid var(--border);
padding-top: 13px;
margin-top: 13px;
}
.item-price {
color: var(--brown);
font-weight: 800;
font-size: 16px;
}
.item-city {
color: var(--muted);
font-size: 10px;
}
.view-product {
display: block;
width: 100%;
background: var(--dark-green);
color: white;
border: none;
border-radius: 9px;
padding: 10px;
margin-top: 15px;
font-size: 12px;
font-weight: 700;
}
/* المدن */
.city-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.city-card {
position: relative;
height: 220px;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
}
.city-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: .3s;
}
.city-card:hover img {
transform: scale(1.05);
}
.city-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(transparent, rgba(35,37,27,.8));
}
.city-name {
position: absolute;
bottom: 18px;
right: 20px;
z-index: 2;
color: white;
font-family: 'Noto Kufi Arabic', sans-serif;
font-size: 23px;
font-weight: 700;
}
/* تفاصيل الغرض */
.back-button {
background: transparent;
border: 1px solid var(--border);
color: var(--dark-brown);
padding: 9px 16px;
border-radius: 10px;
margin-bottom: 22px;
font-size: 12px;
}
.back-button:hover {
background: #E8E9DC;
}
.product-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 35px;
align-items: start;
background: var(--cream);
border: 1px solid var(--border);
border-radius: 22px;
padding: 25px;
}
.product-detail-image {
width: 100%;
height: 420px;
object-fit: cover;
border-radius: 16px;
background: #E8E9DC;
}
.product-info {
padding: 10px 0;
}
.product-category {
display: inline-block;
background: #E8E9DC;
color: var(--dark-green);
padding: 5px 13px;
border-radius: 30px;
font-size: 11px;
font-weight: 700;
}
.product-info h1 {
font-family: 'Noto Kufi Arabic', sans-serif;
color: var(--dark-green);
font-size: 27px;
margin: 15px 0;
}
.product-price {
font-size: 26px;
font-weight: 800;
color: var(--brown);
margin: 18px 0;
}
.product-description {
color: var(--muted);
font-size: 14px;
margin-bottom: 18px;
}
.product-meta {
background: #F0EBDD;
padding: 14px;
border-radius: 12px;
margin: 15px 0 22px;
font-size: 12px;
color: var(--dark-brown);
}
.buy-button {
width: 100%;
padding: 14px;
font-size: 14px;
}
.demo-note {
font-size: 11px;
color: var(--muted);
margin-top: 12px;
}
/* التعليقات */
.comments-section {
background: var(--cream);
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px;
margin-top: 28px;
}
.comments-section h2 {
font-family: 'Noto Kufi Arabic', sans-serif;
color: var(--dark-green);
margin-bottom: 5px;
}
.comments-intro {
color: var(--muted);
font-size: 12px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--dark-brown);
margin-bottom: 7px;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 13px;
border: 1px solid var(--border);
background: #FFFCF5;
color: var(--dark-brown);
border-radius: 10px;
outline: none;
font-size: 13px;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--green);
}
.form-group textarea {
min-height: 110px;
resize: vertical;
}
.comment-card {
background: #FFFCF5;
border: 1px solid var(--border);
border-right: 4px solid var(--brown);
padding: 15px;
border-radius: 10px;
margin-top: 15px;
}
.comment-card h4 {
color: var(--dark-green);
font-size: 13px;
margin-bottom: 5px;
}
.comment-card p {
font-size: 12px;
color: var(--muted);
overflow-wrap: anywhere;
}
.no-comments {
color: var(--muted);
font-size: 12px;
margin-top: 20px;
}
/* النماذج */
.form-card {
max-width: 750px;
margin: auto;
padding: 30px;
background: var(--cream);
border: 1px solid var(--border);
border-radius: 20px;
}
.form-card h2 {
color: var(--dark-green);
font-family: 'Noto Kufi Arabic', sans-serif;
margin-bottom: 10px;
}
.form-intro {
color: var(--muted);
font-size: 13px;
margin-bottom: 25px;
}
.submit-button {
background: var(--dark-green);
color: white;
border: none;
border-radius: 11px;
padding: 13px 20px;
width: 100%;
font-size: 13px;
font-weight: 700;
}
.submit-button:hover {
background: var(--green);
}
.empty-message {
text-align: center;
background: var(--cream);
border: 1px dashed var(--border);
padding: 30px;
border-radius: 15px;
color: var(--muted);
grid-column: 1 / -1;
}
/* تذييل الموقع */
.footer {
background: var(--dark-green);
color: var(--cream);
padding: 30px 0;
text-align: center;
}
.footer h3 {
font-family: 'Noto Kufi Arabic', sans-serif;
margin-bottom: 5px;
}
.footer p {
font-size: 12px;
color: #E0E3D8;
}
.footer-slogan {
color: #D9C79B !important;
margin-top: 7px;
}
/* الجوال والآيباد */
@media (max-width: 850px) {
.hero {
grid-template-columns: 1fr;
padding: 30px;
}
.hero-image {
height: 320px;
}
.items-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.category-grid {
grid-template-columns: repeat(2, 1fr);
}
.product-details {
gap: 20px;
}
.product-detail-image {
height: 330px;
}
}
@media (max-width: 560px) {
.header-note {
display: none;
}
.logo-name {
font-size: 19px;
}
.hero {
padding: 23px;
}
.hero-image {
height: 260px;
}
.intro-strip {
grid-template-columns: 1fr;
}
.items-grid {
grid-template-columns: 1fr;
}
.category-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.category-card img {
height: 130px;
}
.category-card-body {
padding: 12px;
}
.category-card h3 {
font-size: 13px;
}
.category-card p {
font-size: 10px;
}
.city-grid {
grid-template-columns: 1fr;
}
.product-details {
grid-template-columns: 1fr;
padding: 16px;
}
.product-detail-image {
height: 280px;
}
.product-info h1 {
font-size: 22px;
}
.comments-section {
padding: 20px;
}
.form-card {
padding: 20px;
}
}
</style>
</head>
<body>
<!-- القائمة الجانبية -->
<div class="overlay" id="overlay" onclick="closeMenu()"></div>
<aside class="side-menu" id="sideMenu">
<button class="close-menu" onclick="closeMenu()">×</button>
<div class="menu-logo">أُلفة</div>
<p class="menu-subtitle">نعطي الأشياء حياة جديدة</p>
<div class="menu-heading">القائمة الرئيسية</div>
<button class="menu-link" onclick="showPage('home')">🏡 الصفحة الرئيسية</button>
<button class="menu-link" onclick="showPage('about')">🤎 عن أُلفة</button>
<button class="menu-link" onclick="showPage('items')">✨ جميع الأغراض</button>
<button class="menu-link" onclick="showPage('categories')">📚 جميع الأقسام</button>
<button class="menu-link" onclick="showPage('cities')">📍 جميع المدن</button>
<div class="menu-heading">تصفّحي حسب القسم</div>
<button class="menu-link" onclick="showCategory('الأغراض المنزلية')">🏠 الأغراض المنزلية</button>
<button class="menu-link" onclick="showCategory('الكتب')">📚 الكتب</button>
<button class="menu-link" onclick="showCategory('الإكسسوارات')">👜 الإكسسوارات</button>
<button class="menu-link" onclick="showCategory('الملابس')">👗 الملابس</button>
<button class="menu-link" onclick="showCategory('أغراض أخرى')">✨ أغراض أخرى</button>
<div class="menu-heading">المدن</div>
<button class="menu-link" onclick="showCity('مكة المكرمة')">مكة المكرمة</button>
<button class="menu-link" onclick="showCity('جدة')">جدة</button>
<button class="menu-link" onclick="showCity('الرياض')">الرياض</button>
<button class="menu-link" onclick="showCity('المدينة المنورة')">المدينة المنورة</button>
<div class="menu-heading">المزيد</div>
<button class="menu-link" onclick="showPage('add')">+ إضافة غرض</button>
<button class="menu-link" onclick="showPage('contact')">✉️ استمارة استفسار</button>
</aside>
<!-- رأس الموقع -->
<header class="header">
<div class="container header-inner">
<button class="menu-button" onclick="openMenu()">☰</button>
<div class="logo-area" onclick="showPage('home')">
<div class="logo-symbol">أ</div>
<div>
<div class="logo-name">أُلفة</div>
<div class="logo-subtitle">OULFA</div>
</div>
</div>
<div class="header-note">نعطي الأشياء حياة جديدة</div>
</div>
</header>
<main class="container">
<!-- الصفحة الرئيسية -->
<section class="page active" id="home">
<div class="hero">
<div class="hero-content">
<span class="hero-label">مساحة للأشياء التي تستحق فرصة جديدة</span>
<h1>
لكل غرض حكاية،<br>
<span>ولكل حكاية بداية جديدة.</span>
</h1>
<p>
أُلفة منصة تجمع بين الأشخاص الذين يرغبون في التبرع
بأغراضهم أو تبادلها أو بيعها، لتصل الأشياء التي لم نعد
نحتاجها إلى أشخاص يستطيعون الاستفادة منها.
لأن الأشياء الجميلة تستحق حياة أخرى.
</p>
<div class="button-row">
<button class="main-button" onclick="showPage('categories')">اكتشفي الأقسام</button>
<button class="secondary-button" onclick="showPage('about')">تعرّفي على أُلفة</button>
</div>
</div>
<div class="hero-image">
<img
src="https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=1000&q=85"
alt="أشخاص يتسوقون الملابس"
>
</div>
</div>
<div class="intro-strip">
<div class="intro-card">
<div class="intro-icon">🤎</div>
<h3>التبرع</h3>
<p>امنحي أغراضك فرصة جديدة ليستفيد منها شخص آخر.</p>
</div>
<div class="intro-card">
<div class="intro-icon">♻️</div>
<h3>التبادل</h3>
<p>تبادلي الأغراض مع الآخرين بطريقة بسيطة ومفيدة.</p>
</div>
<div class="intro-card">
<div class="intro-icon">✨</div>
<h3>البيع</h3>
<p>اعرضي أغراضك التي لم تعودي تحتاجينها للبيع.</p>
</div>
</div>
</section>
<!-- عن أُلفة -->
<section class="page" id="about">
<div class="section-heading">
<small>قصتنا وهدفنا</small>
<h1>عن أُلفة 🤎</h1>
<p>فكرة بسيطة، وأثر جميل يمكن أن يبدأ من غرض واحد.</p>
</div>
<div class="form-card">
<h2>ما هي منصة أُلفة؟</h2>
<p class="form-intro">
أُلفة منصة تهدف إلى إعادة الاستفادة من الأغراض التي لم يعد
أصحابها بحاجة إليها، من خلال التبرع بها أو تبادلها أو بيعها
لأشخاص آخرين.
<br><br>
نؤمن بأن بعض الأشياء قد تفقد قيمتها بالنسبة إلى شخص ما،
لكنها قد تكون ذات قيمة كبيرة بالنسبة إلى شخص آخر.
ومن هنا جاءت فكرة أُلفة؛ لنمنح الأغراض فرصة جديدة بدلًا
من إهمالها أو التخلص منها.
<br><br>
تسعى المنصة إلى نشر ثقافة إعادة الاستخدام، وتشجيع التعاون
بين أفراد المجتمع، وتقليل الهدر، والاستفادة من الموارد
المتاحة بطريقة أكثر وعيًا.
</p>
<h2>رؤيتنا</h2>
<p class="form-intro">
أن تكون أُلفة مساحة تشجّع على العطاء والتعاون والاستفادة
من الأشياء بطريقة مستدامة.
</p>
<h2>رسالتنا</h2>
<p class="form-intro">
تسهيل وصول الأغراض إلى من يحتاج إليها، وإعطاء الأشياء
حياة جديدة من خلال التبرع والتبادل والبيع.
</p>
</div>
</section>
<!-- الأقسام -->
<section class="page" id="categories">
<div class="section-heading">
<small>تصفّحي ما يناسبك</small>
<h1>أقسام أُلفة</h1>
<p>كل قسم مستقل، وعند الضغط عليه ستظهر أغراضه فقط.</p>
</div>
<div class="category-grid" id="categoryGrid"></div>
</section>
<!-- المدن -->
<section class="page" id="cities">
<div class="section-heading">
<small>أُلفة قريبة منك</small>
<h1>تصفّحي حسب المدينة</h1>
<p>اختاري مدينتك لمشاهدة الأغراض المعروضة فيها.</p>
</div>
<div class="city-grid" id="cityGrid"></div>
</section>
<!-- جميع الأغراض -->
<section class="page" id="items">
<div class="section-heading">
<small>اكتشفي المعروض</small>
<h1>جميع الأغراض</h1>
<p>اختاري الغرض الذي يعجبك واضغطي عليه لمعرفة التفاصيل.</p>
</div>
<div class="items-grid" id="allItemsGrid"></div>
</section>
<!-- نتائج القسم أو المدينة -->
<section class="page" id="results">
<button class="back-button" onclick="showPage('categories')">← العودة إلى الأقسام</button>
<div class="section-heading">
<small>أُلفة تجمعنا</small>
<h1 id="resultsTitle">الأغراض</h1>
<p id="resultsDescription">تصفّحي الأغراض المعروضة.</p>
</div>
<div class="items-grid" id="resultsGrid"></div>
</section>
<!-- تفاصيل الغرض -->
<section class="page" id="productDetail">
<button class="back-button" onclick="goBackToProducts()">← العودة إلى الأغراض</button>
<div class="product-details">
<div>
<img id="detailImage" class="product-detail-image" src="" alt="صورة الغرض">
</div>
<div class="product-info">
<span class="product-category" id="detailCategory"></span>
<h1 id="detailName"></h1>
<p class="product-description" id="detailDescription"></p>
<div class="product-price" id="detailPrice"></div>
<div class="product-meta">
<p>📍 المدينة: <strong id="detailCity"></strong></p>
<p>🏷️ نوع العرض: <strong id="detailType"></strong></p>
</div>
<button class="main-button buy-button" onclick="buyProduct()">شراء الغرض</button>
<p class="demo-note">
هذه نسخة تجريبية لمشروع أُلفة المدرسي؛ زر الشراء للعرض
التوضيحي فقط ولا ينفّذ دفعًا حقيقيًا.
</p>
</div>
</div>
<div class="comments-section">
<h2>التعليقات 🤎</h2>
<p class="comments-intro">هل أعجبك هذا الغرض؟ شاركينا رأيك أو اتركي تعليقًا.</p>
<form id="commentForm" onsubmit="addComment(event)">
<div class="form-group">
<label for="commentName">الاسم</label>
<input type="text" id="commentName" placeholder="اكتبي اسمك" required>
</div>
<div class="form-group">
<label for="commentText">التعليق</label>
<textarea id="commentText" placeholder="اكتبي تعليقك هنا..." required></textarea>
</div>
<button class="submit-button" type="submit">إضافة التعليق</button>
</form>
<div id="commentsList"></div>
</div>
</section>
<!-- إضافة غرض -->
<section class="page" id="add">
<div class="section-heading">
<small>شاركي الخير</small>
<h1>إضافة غرض جديد</h1>
<p>أضيفي غرضك ليتم عرضه في القسم المناسب.</p>
</div>
<div class="form-card">
<h2>بيانات الغرض</h2>
<p class="form-intro">
املئي البيانات التالية لإضافة غرض تجريبي إلى الموقع.
</p>
<form id="addItemForm">
<div class="form-group">
<label for="newItemName">اسم الغرض</label>
<input type="text" id="newItemName" placeholder="مثال: كتاب قصص" required>
</div>
<div class="form-group">
<label for="newItemImage">رابط صورة الغرض</label>
<input type="url" id="newItemImage" placeholder="ضعي رابط الصورة هنا" required>
</div>
<div class="form-group">
<label for="newItemDescription">وصف الغرض</label>
<textarea id="newItemDescription" placeholder="اكتبي وصفًا بسيطًا للغرض" required></textarea>
</div>
<div class="form-group">
<label for="newItemPrice">السعر بالريال</label>
<input type="number" id="newItemPrice" min="0" placeholder="مثال: 35" required>
</div>
<div class="form-group">
<label for="newItemCategory">القسم</label>
<select id="newItemCategory" required>
<option value="">اختاري القسم</option>
<option value="الأغراض المنزلية">الأغراض المنزلية</option>
<option value="الكتب">الكتب</option>
<option value="الإكسسوارات">الإكسسوارات</option>
<option value="الملابس">الملابس</option>
<option value="أغراض أخرى">أغراض أخرى</option>
</select>
</div>
<div class="form-group">
<label for="newItemCity">المدينة</label>
<select id="newItemCity" required>
<option value="">اختاري المدينة</option>
<option value="مكة المكرمة">مكة المكرمة</option>
<option value="جدة">جدة</option>
<option value="الرياض">الرياض</option>
<option value="المدينة المنورة">المدينة المنورة</option>
</select>
</div>
<div class="form-group">
<label for="newItemType">نوع العرض</label>
<select id="newItemType" required>
<option value="للبيع">للبيع</option>
<option value="للتبرع">للتبرع</option>
<option value="للتبادل">للتبادل</option>
</select>
</div>
<button class="submit-button" type="submit">إضافة الغرض</button>
</form>
</div>
</section>
<!-- استمارة الاستفسار -->
<section class="page" id="contact">
<div class="section-heading">
<small>نحن هنا لمساعدتك</small>
<h1>استمارة استفسار ✉️</h1>
<p>يسعدنا استقبال استفساراتك وملاحظاتك حول أُلفة.</p>
</div>
<div class="form-card">
<h2>كيف يمكننا مساعدتك؟</h2>
<p class="form-intro">
يمكنك كتابة استفسارك وإضافة وسيلة تواصل اختيارية.
</p>
<form id="contactForm">
<div class="form-group">
<label for="contactName">الاسم</label>
<input type="text" id="contactName" placeholder="اكتبي اسمك" required>
</div>
<div class="form-group">
<label for="contactEmail">البريد الإلكتروني (اختياري)</label>
<input type="email" id="contactEmail" placeholder="example@email.com">
</div>
<div class="form-group">
<label for="contactPhone">رقم الجوال (اختياري)</label>
<input type="tel" id="contactPhone" placeholder="رقم الجوال">
</div>
<div class="form-group">
<label for="contactMessage">الاستفسار</label>
<textarea id="contactMessage" placeholder="اكتبي استفسارك هنا..." required></textarea>
</div>
<button class="submit-button" type="submit">إرسال الاستفسار</button>
</form>
</div>
</section>
</main>
<!-- تذييل الموقع -->
<footer class="footer">
<div class="container">
<h3>أُلفة | OULFA</h3>
<p>مساحة للعطاء والتبادل والاستفادة من الأشياء.</p>
<p class="footer-slogan">نعطي الأشياء حياة جديدة 🤎</p>
</div>
</footer>
<script>
/* بيانات الأقسام */
const categories = [
{
name: "الأغراض المنزلية",
icon: "🏠",
description: "قطع منزلية وأغراض للاستخدام اليومي.",
image: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=700&q=80"
},
{
name: "الكتب",
icon: "📚",
description: "كتب يمكن أن تبدأ معها حكاية جديدة.",
image: "https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=700&q=80"
},
{
name: "الإكسسوارات",
icon: "👜",
description: "إكسسوارات وقطع صغيرة مميزة.",
image: "https://ph.pennypairs.com/cdn/shop/files/ClubPP-website.jpg?v=1745948682&width=1250"
},
{
name: "الملابس",
icon: "👗",
description: "ملابس تستحق أن يستفيد منها شخص آخر.",
image: "https://cdn.shopify.com/s/files/1/0549/5806/3713/files/wardrobe.jpg?v=1705905055"
},
{
name: "أغراض أخرى",
icon: "✨",
description: "اكتشفي المزيد من الأغراض المتنوعة.",
image: "https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?auto=format&fit=crop&w=700&q=80"
}
];
/* بيانات المدن */
const cities = [
{
name: "مكة المكرمة",
image: "https://images.unsplash.com/photo-1565552645632-d725f8bfc19a?auto=format&fit=crop&w=800&q=80"
},
{
name: "جدة",
image: "https://images.unsplash.com/photo-1578895101408-1a36b834405b?auto=format&fit=crop&w=800&q=80"
},
{
name: "الرياض",
image: "https://static.srpcdigital.com/styles/1037xauto/public/2022/10/19/1666185146681823100.jpg"
},
{
name: "المدينة المنورة",
image:"https://awsimages.detik.net.id/community/media/visual/2023/05/02/tempat-bersejarah-di-madinah-6.jpeg?w=1200"
}
];
/* الأغراض التجريبية */
let products = [
{
id: 1,
name: "طاولة جانبية أنيقة",
category: "الأغراض المنزلية",
price: 85,
city: "جدة",
type: "للبيع",
description: "طاولة جانبية بتصميم بسيط وأنيق، مناسبة لغرفة المعيشة أو غرفة النوم. بحالة جيدة وتناسب الديكورات الهادئة.",
image: "https://images.unsplash.com/photo-1499933374294-4584851497cc?auto=format&fit=crop&w=900&q=85"
},
{
id: 2,
name: "كتاب رحلة القراءة",
category: "الكتب",
price: 25,
city: "الرياض",
type: "للبيع",
description: "كتاب لمحبي القراءة واكتشاف الأفكار الجديدة. مناسب لإضافته إلى مكتبتك أو إهدائه لشخص يحب الكتب.",
image: "https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&w=900&q=85"
},
{
id: 3,
name: "حقيبة كلاسيكية",
category: "الإكسسوارات",
price: 60,
city: "مكة المكرمة",
type: "للبيع",
description: "حقيبة أنيقة بتصميم كلاسيكي، مناسبة للاستخدام اليومي ويمكن تنسيقها مع إطلالات متنوعة.",
image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?auto=format&fit=crop&w=900&q=85"
},
{
id: 4,
name: "قميص بلون هادئ",
category: "الملابس",
price: 35,
city: "المدينة المنورة",
type: "للبيع",
description: "قميص بتصميم بسيط ولون هادئ. قطعة عملية يمكن تنسيقها مع أكثر من إطلالة.",
image: "https://images.unsplash.com/photo-1598033129183-c4f50c736f10?auto=format&fit=crop&w=900&q=85"
},
{
id: 5,
name: "مزهرية ديكورية",
category: "الأغراض المنزلية",
price: 40,
city: "الرياض",
type: "للبيع",
description: "مزهرية ديكورية تضيف لمسة لطيفة إلى الطاولة أو الرف، ومناسبة للزهور الطبيعية أو الصناعية.",
image: "https://images.unsplash.com/photo-1578500494198-246f612d3b3d?auto=format&fit=crop&w=900&q=85"
},
{
id: 6,
name: "مجموعة كتب مستعملة",
category: "الكتب",
price: 0,
city: "جدة",
type: "للتبرع",
description: "مجموعة كتب بحالة جيدة، نرغب في منحها فرصة جديدة مع قارئ آخر يستمتع بها ويستفيد منها.",
image: "https://images.unsplash.com/photo-1512820790803-83ca734da794?auto=format&fit=crop&w=900&q=85"
},
{
id: 7,
name: "سوار أنيق",
category: "الإكسسوارات",
price: 20,
city: "مكة المكرمة",
type: "للبيع",
description: "سوار بسيط وأنيق يمكن ارتداؤه في المناسبات أو ضمن الإطلالات اليومية.",
image: "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=900&q=85"
},
{
id: 8,
name: "عباءة بحالة جيدة",
category: "الملابس",
price: 70,
city: "الرياض",
type: "للبيع",
description: "عباءة بتصميم أنيق وبسيط، معروضة للاستفادة منها بدلًا من تركها دون استخدام.",
image: "https://images.unsplash.com/photo-1585487000160-6ebcfceb0d03?auto=format&fit=crop&w=900&q=85"
},
{
id: 9,
name: "مصباح مكتبي",
category: "الأغراض المنزلية",
price: 45,
city: "المدينة المنورة",
type: "للبيع",
description: "مصباح مكتبي مناسب لطاولة الدراسة أو القراءة، بتصميم عملي ينسجم مع المساحات الهادئة.",
image: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=900&q=85"
},
{
id: 10,
name: "دفتر ملاحظات",
category: "أغراض أخرى",
price: 15,
city: "جدة",
type: "للبيع",
description: "دفتر ملاحظات عملي لتسجيل الأفكار وتنظيم المهام اليومية.",
image: "https://images.unsplash.com/photo-1517842645767-c639042777db?auto=format&fit=crop&w=900&q=85"
},
{
id: 11,
name: "حذاء كلاسيكي",
category: "الملابس",
price: 50,
city: "مكة المكرمة",
type: "للبيع",
description: "حذاء بتصميم كلاسيكي مناسب للاستخدام اليومي. اختاريه إذا كان يناسب احتياجك.",
image: "https://images.unsplash.com/photo-1543163521-1bf539c55dd2?auto=format&fit=crop&w=900&q=85"
},
{
id: 12,
name: "قطعة ديكور",
category: "أغراض أخرى",
price: 30,
city: "الرياض",
type: "للتبادل",
description: "قطعة ديكور بسيطة يمكن تبادلها مع غرض آخر أو استخدامها لإضافة لمسة جميلة إلى المكان.",
image: "https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?auto=format&fit=crop&w=900&q=85"
}
];
/* التعليقات: محفوظة مؤقتًا أثناء فتح الصفحة */
let comments = {};
let currentProductId = null;
let previousPage = "items";
/* فتح وإغلاق القائمة */
function openMenu() {
document.getElementById("sideMenu").classList.add("open");
document.getElementById("overlay").classList.add("show");
}
function closeMenu() {
document.getElementById("sideMenu").classList.remove("open");
document.getElementById("overlay").classList.remove("show");
}
/* التنقل بين الصفحات */
function showPage(pageId) {
document.querySelectorAll(".page").forEach(function(page) {
page.classList.remove("active");
});
const selectedPage = document.getElementById(pageId);
if (selectedPage) {
selectedPage.classList.add("active");
}
closeMenu();
window.scrollTo({ top: 0, behavior: "smooth" });
if (pageId === "items") {
renderProducts(products, "allItemsGrid");
}
if (pageId === "categories") {
renderCategories();
}
if (pageId === "cities") {
renderCities();
}
}
/* إنشاء بطاقة غرض */
function createProductCard(product) {
const card = document.createElement("article");
card.className = "item-card";
const imageArea = document.createElement("div");
imageArea.className = "item-image";
const img = document.createElement("img");
img.src = product.image;
img.alt = product.name;
img.loading = "lazy";
img.onerror = function() {
img.alt = "تعذّر تحميل الصورة";
};
const label = document.createElement("span");
label.className = "item-label";
label.textContent = product.category;
imageArea.appendChild(img);
imageArea.appendChild(label);
const content = document.createElement("div");
content.className = "item-content";
const title = document.createElement("h3");
title.textContent = product.name;
const description = document.createElement("p");
description.className = "item-description";
description.textContent = product.description;
const bottom = document.createElement("div");
bottom.className = "item-bottom";
const price = document.createElement("span");
price.className = "item-price";
price.textContent = Number(product.price) === 0 ? "مجانًا" : product.price + " ر.س";
const city = document.createElement("span");
city.className = "item-city";
city.textContent = "📍 " + product.city;
bottom.appendChild(price);
bottom.appendChild(city);
const button = document.createElement("button");
button.className = "view-product";
button.textContent = "عرض تفاصيل الغرض";
button.type = "button";
button.addEventListener("click", function(event) {
event.stopPropagation();
showProduct(product.id);
});
content.appendChild(title);
content.appendChild(description);
content.appendChild(bottom);
content.appendChild(button);
card.appendChild(imageArea);
card.appendChild(content);
card.addEventListener("click", function() {
showProduct(product.id);
});
return card;
}
/* عرض مجموعة من الأغراض */
function renderProducts(list, elementId) {
const grid = document.getElementById(elementId);
grid.replaceChildren();
if (list.length === 0) {
const empty = document.createElement("div");
empty.className = "empty-message";
empty.textContent = "لا توجد أغراض في هذا القسم حاليًا. يمكنك إضافة غرض جديد من القائمة.";
grid.appendChild(empty);
return;
}
list.forEach(function(product) {
grid.appendChild(createProductCard(product));
});
}
/* عرض الأقسام */
function renderCategories() {
const grid = document.getElementById("categoryGrid");
grid.replaceChildren();
categories.forEach(function(category) {
const card = document.createElement("div");
card.className = "category-card";
const image = document.createElement("img");
image.src = category.image;
image.alt = category.name;
image.loading = "lazy";
const body = document.createElement("div");
body.className = "category-card-body";
const title = document.createElement("h3");
title.textContent = category.icon + " " + category.name;
const description = document.createElement("p");
description.textContent = category.description;
body.appendChild(title);
body.appendChild(description);
card.appendChild(image);
card.appendChild(body);
card.addEventListener("click", function() {
showCategory(category.name);
});
grid.appendChild(card);
});
}
/* عرض المدن */
function renderCities() {
const grid = document.getElementById("cityGrid");
grid.replaceChildren();
cities.forEach(function(city) {
const card = document.createElement("div");
card.className = "city-card";
const image = document.createElement("img");
image.src = city.image;
image.alt = city.name;
image.loading = "lazy";
const title = document.createElement("div");
title.className = "city-name";
title.textContent = city.name;
card.appendChild(image);
card.appendChild(title);
card.addEventListener("click", function() {
showCity(city.name);
});
grid.appendChild(card);
});
}
/* تصفية المنتجات حسب القسم */
function showCategory(categoryName) {
previousPage = "results";
document.getElementById("resultsTitle").textContent = categoryName;
document.getElementById("resultsDescription").textContent =
"هذه الأغراض الموجودة في قسم " + categoryName + " فقط.";
const filtered = products.filter(function(product) {
return product.category === categoryName;
});
renderProducts(filtered, "resultsGrid");
showPage("results");
}
/* تصفية المنتجات حسب المدينة */
function showCity(cityName) {
previousPage = "results";
document.getElementById("resultsTitle").textContent = "أغراض " + cityName;
document.getElementById("resultsDescription").textContent =
"هذه الأغراض المعروضة في " + cityName + ".";
const filtered = products.filter(function(product) {
return product.city === cityName;
});
renderProducts(filtered, "resultsGrid");
showPage("results");
}
/* فتح صفحة تفاصيل الغرض */
function showProduct(productId) {
const product = products.find(function(item) {
return item.id === productId;
});
if (!product) {
alert("عذرًا، لم يتم العثور على الغرض.");
return;
}
currentProductId = productId;
if (!document.getElementById("results").classList.contains("active")) {
previousPage = "items";
}
document.getElementById("detailImage").src = product.image;
document.getElementById("detailImage").alt = product.name;
document.getElementById("detailCategory").textContent = product.category;
document.getElementById("detailName").textContent = product.name;
document.getElementById("detailDescription").textContent = product.description;
document.getElementById("detailPrice").textContent =
Number(product.price) === 0 ? "مجانًا" : product.price + " ر.س";
document.getElementById("detailCity").textContent = product.city;
document.getElementById("detailType").textContent = product.type;
renderComments();
showPage("productDetail");
}
/* الرجوع من تفاصيل الغرض */
function goBackToProducts() {
showPage(previousPage);
}
/* زر الشراء التجريبي */
function buyProduct() {
const product = products.find(function(item) {
return item.id === currentProductId;
});
if (!product) {
return;
}
if (product.type === "للتبرع") {
alert("هذا الغرض معروض للتبرع مجانًا 🤎\nهذه نسخة تجريبية، ولا يوجد حجز فعلي.");
} else if (product.type === "للتبادل") {
alert("هذا الغرض معروض للتبادل 🤎\nهذه نسخة تجريبية، ولا يوجد تبادل فعلي.");
} else {
alert("أعجبكِ " + product.name + " 🤎\nهذه نسخة تجريبية؛ لا توجد عملية دفع أو شراء حقيقية.");
}
}
/* إضافة تعليق */
function addComment(event) {
event.preventDefault();
if (currentProductId === null) {
return;
}
const name = document.getElementById("commentName").value.trim();
const text = document.getElementById("commentText").value.trim();
if (!name || !text) {
alert("فضلاً، اكتبي الاسم والتعليق.");
return;
}
if (!comments[currentProductId]) {
comments[currentProductId] = [];
}
comments[currentProductId].push({
name: name,
text: text
});
document.getElementById("commentForm").reset();
renderComments();
}
/* عرض تعليقات الغرض الحالي */
function renderComments() {
const list = document.getElementById("commentsList");
list.replaceChildren();
const productComments = comments[currentProductId] || [];
if (productComments.length === 0) {
const message = document.createElement("p");
message.className = "no-comments";
message.textContent = "لا توجد تعليقات حتى الآن. كوني أول من يشارك رأيه!";
list.appendChild(message);
return;
}
productComments.forEach(function(comment) {
const card = document.createElement("div");
card.className = "comment-card";
const name = document.createElement("h4");
name.textContent = comment.name;
const text = document.createElement("p");
text.textContent = comment.text;
card.appendChild(name);
card.appendChild(text);
list.appendChild(card);
});
}
/* إضافة غرض جديد */
document.getElementById("addItemForm").addEventListener("submit", function(event) {
event.preventDefault();
const newProduct = {
id: Date.now(),
name: document.getElementById("newItemName").value.trim(),
image: document.getElementById("newItemImage").value.trim(),
description: document.getElementById("newItemDescription").value.trim(),
price: Number(document.getElementById("newItemPrice").value),
category: document.getElementById("newItemCategory").value,
city: document.getElementById("newItemCity").value,
type: document.getElementById("newItemType").value
};
if (!newProduct.name || !newProduct.image || !newProduct.description) {
alert("فضلاً، أكملي بيانات الغرض.");
return;
}
products.unshift(newProduct);
this.reset();
alert("تمت إضافة الغرض إلى الموقع التجريبي بنجاح 🤎");
showCategory(newProduct.category);
});
/* استمارة الاستفسار */
document.getElementById("contactForm").addEventListener("submit", function(event) {
event.preventDefault();
alert("شكرًا لتواصلك مع أُلفة 🤎\nتم استلام الاستفسار في النموذج التجريبي فقط.");
this.reset();
});
/* تشغيل الأقسام عند فتح الموقع */
renderCategories();
renderCities();
renderProducts(products, "allItemsGrid");
</script>
</body>
</html>