Scribd
Upload
7 views25 pages

HTML Website1

The document is an HTML template for a website dedicated to the production and marketing of healthy and marine salt in Yemen. It includes various sections such as a header, side menu, news slider, and product showcase, all styled with CSS for a responsive design. The site aims to provide information about salt products and features a user-friendly interface for navigation.

Uploaded by

hafodalrubai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views25 pages

HTML Website1

The document is an HTML template for a website dedicated to the production and marketing of healthy and marine salt in Yemen. It includes various sections such as a header, side menu, news slider, and product showcase, all styled with CSS for a responsive design. The site aims to provide information about salt products and features a user-friendly interface for navigation.

Uploaded by

hafodalrubai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

<!

DOCTYPE html>

<html lang="ar" dir="rtl">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<meta name="keywords"
content="‫ معمل ملح‬,‫ ملح بحري‬,‫ ملح صحي‬,‫ملح صافي‬,yemen
salt,sanaa slat,
,,‫ملح طعام‬,salt table,slat in yemen,safi salt,salt, ‫منتجات‬
‫ملح‬,
, ‫ملح‬,‫ملح سواحلي‬,‫ملح الحديدة‬,‫ملح اليمن‬, ‫ملح في اليمن‬
‫مصنع ملح في‬,‫ملح جعالة‬,‫ملح مكسرات‬,‫ملح سكري‬,‫ملح صخري‬,‫حجري‬
‫ملح نقي‬,‫ملح اكياس‬,‫ملح محبب‬,‫ملح شوايل‬,‫ملح ابو كيلو‬,‫صنعاء‬,
,,‫ ملح ناعم‬,‫ ملح طبيعي‬,‫معامل الصافي‬,‫ملح الصليف‬,‫ملح في صنعاء‬
‫>"ملح خشن‬

<title>‫<معامل الصافي إلنتاج وتسويق الملح‬/title>


<style>
html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background-color: white;
color: white;
overflow-x: hidden;
}

.news {
overflow: hidden;
direction: ltr;
background: white;
/* border-top: 2px solid #0077b6;*/
/* border-bottom: 2px solid #0077b6;*/
height: 300px;
position: relative;
gap: 0;
padding: 0;
padding-top: 0;
margin-bottom: 0;
}
.news-slider {
display: flex;
width: 960vw; /* 12 80 × ‫صورة‬vw */
animation: slide 20s linear infinite;
margin: 0;
padding: 0;
gap: 0;
margin-top: 0;
margin-bottom: 0;
}

.news-slider img {
width: 35vw;
height: 300px;
flex-shrink: 0;
object-fit: contain;
object-position: center top; /* ‫محاذاة الصورة من‬
‫* األعلى‬/
margin: 0;
padding: 0;
border: none;
gap: 0;
margin-bottom: 0;
margin-top: 0;
/* box-sizing: border-box;*/
background: white; /* ‫* تعبئة الفراغات باللون األبيض‬/
}

@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.news-label {
display: inline-block; /* ‫لجعل الخلفية على قد‬
‫* النص فقط‬/
background-color: #003f3f; /* ‫* لون الخلفية‬/
color: white; /* ‫* لون النص‬/
padding: 10px 20px; /* ‫* المسافة حول النص‬/
border-radius: 10px; /* ‫* الزوايا الدائرية‬/
border: 2px solid #007a7a; /* ‫* الحدود‬/
font-size: 22px;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* ‫* ظل بسيط‬/
transition: all 0.3s ease;
margin-top: 0;
margin-bottom: 0;
}

.header {
background-color: white;
/* margin-bottom: 0;*/
display: flex;
position: relative;
justify-content: center; /* ‫* يوّسط المحتوى‬/
align-items: center;
padding: 10px 20px;
/*position: relative;*/
/* z-index: 10;*/
color: black;
width: 100%;
box-sizing: border-box;
margin-bottom: 0;
margin-top: 0;
}

.header h1 {
font-size: 24px;
margin: 0;
text-align: center;
color: black;
width: 100%;
padding: 0 50px;
/* transform: translateX(-35%);*/
margin-bottom: 0;
margin-top: 0;
}

.menu-toggle {
cursor: pointer;
width: 30px;
height: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1000;
padding: 10px;
position: absolute;
right: 20px;

top: 50%;
transform: translateY(-50%);
background: none;
border: none;

.menu-toggle span {
height: 3px;
background: black;
border-radius: 2px;
transition: 0.3s;
}

.side-menu {
position: fixed;
top: 0;
right: 0 !important;
left: auto !important;
width: 250px;
height: 100%;
background-color: #0077b6;
padding: 60px 20px 20px;
box-shadow: -4px 0 12px rgba(0,0,0,0.5);
transform: translateX(100%);
transition: transform 0.4s ease;
z-index: 1001;
}

.side-menu.active {
transform: translateX(0);
}

.side-menu a {
display: block;
color: white;
text-decoration: none;
margin: 20px 0;
font-size: 20px;
border-bottom: 1px solid rgba(255,255,255,0.3);
padding-bottom: 5px;

.close-btn {
position: absolute;
top: 15px;
left: 15px;
background: none;
border: 2px solid white;
color: white;
padding: 5px 10px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
}

.safi-icon {
text-align: center;
padding: 30px 0;
background-color: white;
}

.safi-icon img {
width: 120px;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
background-color: white;
padding: 5px;
}

.safi-icon img:hover {
transform: scale(1.05);
}

.safi-icon hr {
margin-top: 20px;
border: none;
height: 2px;
background-color: #007a7a;
width: 60%;
margin-left: auto;
margin-right: auto;
}

.intro {
padding: 60px 20px;
text-align: center;
background-color: white;
color: black;
border-top: 4px solid #007a7a;
margin-top: 0;
}

.intro h2 {
margin-top: 0;
font-size: 30px;
}

.intro p {
font-size: 18px;
line-height: 1.8;
}

.products, #features {
background-color: #004b4b;
padding: 40px 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px,
1fr));
gap: 20px;
}

.product {
background-color: #006666;
padding: 15px;
border-radius: 10px;
text-align: center;
}

.product img {
width: 100%;
border-radius: 8px;
}

.product h3 {
margin: 10px 0 5px;
}
.footered {
background-color: #004b4b;

padding: 40px 20px;

display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px,
1fr));
gap: 20px;
}

.footers {
background-color: #006666;
padding: 15px;
border-radius: 10px;
text-align: center;

@media (max-width: 768px) {


.header {
padding: 10px 15px;
}

.header h1 {
font-size: 20px;
padding: 0 40px;

/* width: calc(100% - 80px);*/

.menu-toggle {
right: 15px
width: 25;
height
padding: 8px;
}
.news-label {
top: 10px;
right: 10px;
padding: 6px 15px;
}

.news-label h2 {
font-size: 18px;
}
.intro h2 {
font-size: 24px;
}

.intro p {
font-size: 16px;
}

.product h3 {
font-size: 16px;
}

.product p {
font-size: 15px;
}

.features-list {
direction: rtl;
text-align: right;
list-style-position: inside;
padding-right: 20px;
}

.side-menu {
width: 80%;
}

.news-ticker {
height: 60px;
}

.news-track img {
height: 80px;
}
}
@media (min-width: 769px) {
.menu-toggle {
left: auto !important;
right: 20px !important;
}

.header h1 {
margin-right: 0;
}
}

@media (max-width: 480px) {


.product p {
font-size: 14px;
}

.footer {
font-size: 14px;
}
}

ul {
text-align: right;
direction: rtl;
padding-right: 20px; /* ‫* لضبط الهوامش إذا لزم األمر‬/
}

.comments-section {
margin-top: 30px;
direction: rtl;
text-align: right;
}

.comment {
background-color: #ffffff;
border: 2px solid black;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.comment p:first-child {
margin-bottom: 8px;
font-weight: bold;
color: #000;
text-align: right;
display: flex;
align-items: center;
gap: 8px;
}
#message {
direction: rtl;
border: 1px solid #d6e9c6;
animation: fadeInOut 5s ease-in-out;
}

@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(-10px); }
10% { opacity: 1; transform: translateY(0); }
90% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}
/* ‫* تنسيقات األيقونة الجديدة‬/
.user-icon {
width: 32px;
height: 32px;
background: #0077b6;
border-radius: 50%;
display: inline-block;
position: relative;
margin-left: 8px;
vertical-align: middle;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.user-icon::before {
content: "";
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: white;
top: 6px;
left: 50%;
transform: translateX(-50%);
}

.user-icon::after {
content: "";
position: absolute;
width: 20px;
height: 10px;
border-radius: 0 0 10px 10px;
background: white;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
} /* ‫ يمكن تغييره‬- ‫* اللون األساسي‬/
.comment:nth-child(odd) .user-icon {
background: #0077b6; /* ‫* أزرق‬/
}

.comment:nth-child(even) .user-icon {
background: #28a745; /* ‫* أخضر‬/
}
.user-icon {
transition: transform 0.3s ease;
}

.user-icon:hover {
transform: scale(1.1) rotate(8deg);
cursor: pointer;
}

.comment-form {
background-color: #f1f1f1;
padding: 25px;
margin: 40px auto 0;
border-radius: 10px;
max-width: 600px;
direction: rtl;
text-align: right;
border: 2px solid #007a7a;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.comment-form h3 {
margin-bottom: 15px;
color: #003f3f;
}

.comment-form label {
display: block;
margin-top: 10px;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}

.comment-form input,
.comment-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-family: inherit;
font-size: 16px;
box-sizing: border-box;
}
.comment-form button {
margin-top: 15px;
padding: 10px 20px;
background-color: #007a7a;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

.comment-form button:hover {
background-color: #005f5f;
}

.divider {
box-shadow: none;
border: none;
border-top: 2px solid #444;
margin: 20px 0;
}
.footers h3 {
font-size: 14px;
font-weight: bold;
margin: 10px 0 5px;
}
.footers p {
font-size: 11px;

</style>

</head>
<body>

<div class="safi-icon">
<img src="src/safi-icon.png" alt=
"‫>"معامل الصافي إلنتاج وتسويق الملح الصحي والملح البحري‬

</div>
<div class="header">

<h1>‫<معامل الصافي إلنتاج وتسويق الملح الصحي والملح البحري‬/h1>

<div class="menu-toggle" onclick="toggleMenu()">


<span></span>
<span></span>
<span></span>
</div>
</div>
<hr class="divider">

<div class="side-menu" id="sideMenu">


<button class="close-btn"
onclick="toggleMenu()">X</button>
<a href="products.html" target="_blank">
‫المنتجات‬
🧂
</a>
<a href="#featureslist">‫<مميزاتنا‬/a>
<a href="#contact">
‫تواصل معنا‬
📞
</a>
</div>

<p class="news-label">
‫شريط االخبار‬
</p>
<div class="news">

<div class="news-slider">
<img src="src/salt-safi-news0.png" alt="0 ‫ "خبر‬/>
<img src="src/salt-safi-news1.jpg" alt="1 ‫ "خبر‬/>
<img src="src/salt-safi-news12.jpg" alt="2 ‫ "خبر‬/>
<img src="src/salt-safi-news13.jpg" alt="3 ‫ "خبر‬/>
<img src="src/salt-safi-news16.png" alt="7 ‫ "خبر‬/>
<img src="src/salt-safi-news11.jpg" alt="4 ‫ "خبر‬/>
<img src="src/salt-safi-news14.jpg" alt="5 ‫ "خبر‬/>
<img src="src/salt-safi-news15.png" alt="6 ‫ "خبر‬/>
<img src="src/salt-safi-news17.png" alt="8 ‫ "خبر‬/>

<img src="src/salt-safi-news1.jpg" alt="1 ‫ "خبر‬/>


‫‪<img‬‬ ‫"‪src="src/salt-safi-news12.jpg‬‬ ‫‪alt="2‬‬ ‫"خبر‬ ‫>‪/‬‬
‫‪<img‬‬ ‫"‪src="src/salt-safi-news13.jpg‬‬ ‫‪alt="3‬‬ ‫"خبر‬ ‫>‪/‬‬
‫‪<img‬‬ ‫"‪src="src/salt-safi-news11.jpg‬‬ ‫‪alt="4‬‬ ‫"خبر‬ ‫>‪/‬‬
‫‪<img‬‬ ‫"‪src="src/salt-safi-news14.jpg‬‬ ‫‪alt="5‬‬ ‫"خبر‬ ‫>‪/‬‬
‫‪<img‬‬ ‫"‪src="src/salt-safi-news15.png‬‬ ‫‪alt="6‬‬ ‫"خبر‬ ‫>‪/‬‬
‫>‪</div‬‬
‫>‪</div‬‬

‫>"‪<div class="intro" id="intro‬‬


‫>";‪<h3 style="color: black‬‬

‫ملح صافي – الجودة التي تستحقها‬

‫>‪</h3‬‬
‫>";‪<p style="text-align: right‬‬
‫>‪</strong‬ملح صافي >‪<strong‬‬
‫هو الخيار األمثل لكل من يبحث عن ملح طبيعي وصحي‪ .‬يتم‬
‫‪،‬استخراج ملحنا من جبال الصليف في محافظة الحديدة‬
‫حيث يتم جمعه بعناية‪ ،‬ومن ثم نقله إلى معملنا في صنعاء‬
‫ًق‬
‫لبدء عمليات التكسير والفصل‪ ،‬واإلضافات الصحية‪ ،‬والطحن وف ا ألعلى‬
‫>‪.</p‬معايير الجودة‬

‫‪<p‬‬
‫>‬
‫نقدم لكم‬
‫>‪<strong‬‬
‫>‪</strong‬ملح صافي‬
‫من أفضل مصادر الملح في العالم‪ ،‬ويشمل مجموعتنا عدة أنواع‬
‫‪:‬تناسب كل احتياجاتك‬

‫>‪</p‬‬
‫;‪<p style="color: #0077b6‬‬
‫>"‬
‫>‪<u‬‬
‫لمشاهدة قائمة منتجاتنا‬
‫)الكتالوج(‬

‫>"‪<a href="products.html" target="_blank‬‬


‫>‪<b‬‬
‫اضغط هنا‬
‫>‪</b‬‬
‫>‪</a‬‬
‫>‪</u‬‬
‫>‪</p‬‬

‫>‪<p‬‬
‫نحن في‬
‫>‪<strong‬‬
‫>‪</strong‬معامل صافي‬
‫نحرص على أن نوفر لك الملح األنسب لكل استخدام‪ ،‬مما يضمن لك‬
‫‪.‬تجربة مميزة وصحية في كل مرة‬
‫>‪</p‬‬

‫";‪<h3 style="text-align: right; color: #0077b6‬‬


‫> "‪id="featureslist‬‬
‫‪ :‬مميزاتنا التي تميزنا عن الجميع‬
‫>‪</h3‬‬
‫;‪<ul style="list-style-type: square; text-align: right‬‬
‫>";‪direction: rtl; padding-right: 20px‬‬
‫>";‪<li><span style="color: black; text-align: right‬‬
‫>‪<strong‬‬
‫ملح صافي‬
‫>‪</strong‬‬
‫يحتوي‬
‫الذي يعزز الصحة ويحمي من أمراض >‪</span‬على اليود الطبيعي‬
‫>‪.</li‬الغدة الدرقية‬
‫>";‪<li><span style="color: black‬‬
‫>‪<strong‬‬
‫يساعد‬
‫>‪</strong‬‬
‫في توازن‬
‫مما يحسن مستوى الطاقة ‪</span>،‬نسبة األمالح في الدم‬
‫>‪.</li‬والتركيز‬
‫>";‪<li><span style="color: black‬‬
‫>‪<strong‬‬
‫تحسين وظائف المخ‬
‫>‪</strong‬‬
‫>‪</span‬‬
‫حيث يساعد في زيادة التركيز واالنتباه طوال ‪:‬‬
‫>‪.</li‬اليوم‬
‫>";‪<li><span style="color: black‬‬
‫>‪<strong‬‬
‫منتج‬
‫‪100%‬‬
‫طبيعي‬
‫>‪</strong‬‬
‫‪</span>:‬‬
‫>‪.</li‬خالي من المواد الكيميائية الضارة‬
‫نوفر لك مجموعة واسعة من أنواع الملح‪ ،‬بما في ذلك >‪<li‬‬
‫الملح البحري‪ ،‬الصخري‪ ،‬المطحون‪ ،‬الصناعي‪ ،‬والسكري ‪ ،‬والبودرة ‪،‬‬
‫>‪.</li‬وملح األفران‪ ،‬مع أحجام عبوات متعددة لتناسب جميع احتياجاتك‬

‫>‪<li‬‬
‫>‪<strong‬‬
‫تتوفر خدمة التوصيل السريع‬
‫‪.‬إلى جميع األماكن في اليمن‬
‫>‪</strong‬‬
‫>‪</li‬‬
‫>‪</ul‬‬

‫لماذا تختار >";‪<h3 style="text-align: right; color: #0077b6‬‬


‫>‪</h3‬ملح صافي؟‬
‫>"‪<ul class="features-list‬‬
‫خالي من أي مواد ‪%</strong>:‬منتج طبيعي ‪<li><strong>100‬‬
‫>‪.</li‬إضافية غير طبيعية‬
‫من الطهي اليومي ‪</strong>:‬مناسب لكل األطعمة>‪<li><strong‬‬
‫إلى االستخدامات الخاصة مثل الخبز واألفران والمطاعم والمصانع‬
‫>‪.</li‬والشركات‬
‫كل ملح صافي ‪</strong>:‬صحة وعافية في كل حبة>‪<li><strong‬‬
‫>‪.</li‬هو ضمان لجودة عالية ورعاية صحية‬
‫شراكات قوية مع اكبر المطاعم والمصانع >‪<li><strong‬‬
‫يقدم أفضل مستوى من ‪ </strong>:‬والمعامل والمخابز اآللية في اليمن‬
‫>‪.</li‬الجودة في جميع أنحاء اليمن‬
‫>‪</ul‬‬

‫>‪ --‬التعليقات الجديدة ‪ -‬سيتم إضافتها بعد هذا القسم ‪<!--‬‬

‫>‪ --‬لتنسيق التعليقات ‪<!-- CSS‬‬

‫>‪</h3‬ملح صافي ‪ ...‬اختيارك المثالي>‪<h3‬‬

‫>‪<p‬‬

‫إذا كنت تبحث عن ملح طبيعي‬

‫يعزز صحة عائلتك ويضفي‬


‫‪،‬نكهة لذيذة على طعامك‬
‫>‪<strong‬‬
‫ملح صافي‬

‫>‪</strong‬‬
‫!هو الخيار األمثل‪ .‬اختره اآلن واختبر الفرق في كل حبة‬
‫>‪</p‬‬
‫>"‪<div class="footered" id="footeral‬‬
‫>"‪<div class="footers" id="contact‬‬
‫>‪<hr‬‬
‫>‪: <br‬تواصل معنا عبر االتصال 📞>‪<h3‬‬
‫>"‪<a href="tel:+967773731004‬‬
‫اضغط هنا لالتصال المباشر‬
‫>‪</a‬‬
‫>‪</h3‬‬

‫>‪<h3‬‬
‫التالية‬ ‫‪:‬أو مراسلتنا على أحد االرقام‬
‫>‪</h3‬‬
‫>‪<p‬‬
‫‪004 731‬‬ ‫‪773 967+‬‬
‫>‪<br‬‬
‫‪854 470‬‬ ‫‪771 967+‬‬
‫>‪<br‬‬
‫‪506 094‬‬ ‫‪770 967+‬‬
‫>‪</p‬‬

‫>‪<h3‬‬
‫>‪:<br‬أو لمراسلتنا عبر واتساب‬
‫>"‪<a href="https://wa.me/96774376‬‬
‫اضغط هنا للذهاب مباشرة‬
‫>‪</a‬‬
‫>‪</h3‬‬

‫>‪<h3‬‬
‫‪:‬البريد االلكتروني �‬
‫>‪</h3‬‬
‫‪<p class="email-text" style="font-size: 16px; font-weight:‬‬
‫>";‪bold‬‬
‫‪[email protected]‬‬
‫>‪</p‬‬
‫>‪</div‬‬

‫;‪<p style="color: white‬‬


‫>‪</p‬ملح صافي ‪ ...‬اختيارك المثالي>";‪font-weight: bold‬‬
‫>‪</div‬‬

‫>‪ --‬عرض التعليقات ‪<!--‬‬

‫>‪ --‬صندوق إضافة تعليق ‪<!--‬‬


‫>‪ --‬داخل قسم صندوق إضافة تعليق ‪<!--‬‬
‫>"‪<div class="comment-form‬‬
‫>‪</h3‬أضف تعليقك>‪<h3‬‬
‫>"‪<form id="commentForm‬‬
<label for="name">‫االسم‬:</label>
<input type="text" id="name" name="name" required />

<label for="comment">‫التعليق‬:</label>
<textarea id="comment" name="comment" rows="4"
required></textarea>

<button type="submit">‫<إرسال التعليق‬/button>


</form>
<div id="message" style="display:none; margin-top:15px;
padding:10px; background:#dff0d8; color:#3c763d; border-
radius:5px; text-align:center;">
‫ شكرًا لتفاعلك‬.‫!تم إرسال تعليقك إلى مدير النظام للمراجعة‬
</div>
</div>

<!-- ‫ عرض التعليقات‬-->


<h3>‫تعليقات العمالء‬:</h3>
<!-- ‫ داخل قسم التعليقات‬-->
<div class="comments-section">
<div class="comment">
<p><span class="user-icon"></span>‫<مشير الشمهاني‬/p>
<p>
‫ ويستحق التجربة‬، ‫بصراحة المنتج ممتاز‬
</p>
</div>
</div>

<div class="comments-section">

<div class="comment">

<p><span class="user-icon"></span> ‫مصطفى عبدالرؤوف‬


‫<الصلوي‬/p>
<p>
‫ أحسنتم‬، ‫درجة الملوحة فيه حلوة ومناسبة‬
</p>
</div>
</div>

<div class="comments-section">
<div class="comment">
<p><span class="user-icon"></span>‫<محمد عبده غالب‬/p>
<p>
‫بالتوفيق‬
</p>
</div>
</div>

<div class="comments-section">
<div class="comment">
<p><span class="user-icon"></span>‫<حمادة الصلوي‬/p>
<p>
‫افضل حاجة عندكم خدمة التوصيل‬
</p>
</div>
</div>

<div class="comments-section">

<div class="comment">
<p><span class="user-icon"></span>‫< عبدالله غاوي‬/p>
<p>
‫ شكرا لكم‬،‫المعاملة ممتازة‬
</p>
</div>
</div>
</div>
<!--
<script>
document.addEventListener('DOMContentLoaded', () => {
const sliderContainer =
document.getElementById('sliderContainer');
const slides = sliderContainer.querySelectorAll('.slide');
const slideCount = slides.length;
let currentIndex = 0;
let intervalId;

// ‫اضبط عرض الحاوية بناًء على عدد الشرائح‬


sliderContainer.style.width = `${slideCount * 100}%`;

// ‫ دالة لالنتقال إلى شريحة برقم‬index


function goToSlide(index) {
currentIndex = (index + slideCount) % slideCount;
sliderContainer.style.transform = `translateX(-$
{currentIndex * (100 / slideCount)}%)`;
}

// ‫تشغيل التمرير التلقائي‬


function startAutoSlide() {
clearInterval(intervalId);
intervalId = setInterval(() => goToSlide(currentIndex +
1), 3000);
}

// ‫تعليمات األزرار‬
document.querySelector('.arrow-
left').addEventListener('click', () => {
goToSlide(currentIndex - 1);
startAutoSlide();
});
document.querySelector('.arrow-
right').addEventListener('click', () => {
goToSlide(currentIndex + 1);
startAutoSlide();
});

// ‫بدء التشغيل‬
goToSlide(0);
startAutoSlide();

// ‫ نبقي الشريحة نفسها‬،‫إذا غّيرنا حجم الشاشة‬


window.addEventListener('resize', () =>
goToSlide(currentIndex));
});
</script>
-->

<!-- CSS ‫ لتنسيق مربع كل تعليق‬-->


<script>

// ========== ‫========== تعامل مع التعليقات‬


document.getElementById('commentForm').addEventListener('submit',
function(e) {
e.preventDefault();
document.getElementById('message').style.display = 'block';
this.reset();
setTimeout(() =>
document.getElementById('message').style.display = 'none', 5000);
});

</script>
<!--
<script>
let currentSlide = 0;
let slideInterval;
const slides = document.querySelectorAll('.slide');
const sliderContainer =
document.getElementById('sliderContainer');
function updateSlider() {
sliderContainer.style.transform = `translateX(-${currentSlide
* 100}%)`;
}
function changeSlide(direction) {
currentSlide += direction;
if (currentSlide < 0) currentSlide = slides.length - 1;
if (currentSlide >= slides.length) currentSlide = 0;
updateSlider();
}

function startSlider() {
clearInterval(slideInterval);
slideInterval = setInterval(() => {
changeSlide(1);
}, 3000);
}

// ‫تهيئة عند تحميل الصفحة‬


document.addEventListener('DOMContentLoaded', () => {
updateSlider();
startSlider();
});

// ‫إعادة تشغيل المؤقت عند النقر على األسهم‬


document.querySelectorAll('.slider-arrow').forEach(arrow => {
arrow.addEventListener('click', () => {
clearInterval(slideInterval);
startSlider();
});
});

// ‫تحديث العرض عند تغيير حجم الشاشة‬


window.addEventListener('resize', updateSlider);
</script>-->
<script>
// ========== ‫========== إدارة القائمة الجانبية‬
function toggleMenu() {
const menu = document.getElementById('sideMenu');
menu.classList.toggle('active');
// ‫منع ظهور القائمة عند النقر على زر اإلغالق‬
document.querySelector('.close-
btn').addEventListener('click', () => {
menu.classList.remove('active');
});
}
// ========== ‫========== منع التمرير التلقائي‬
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
window.scrollTo(0, 0);

</script>
<script>
// ‫إظهار أو إخفاء القائمة الجانبية‬
function toggleMenu() {
const sideMenu = document.getElementById('sideMenu');
sideMenu.classList.toggle('active');
}

// ‫إغالق القائمة عند النقر خارجها‬


document.addEventListener('click', function (event) {
const sideMenu = document.getElementById('sideMenu');
const toggleBtn = document.querySelector('.menu-toggle');

// ‫تحقق إذا النقر تم خارج القائمة وزر القائمة‬


if (!sideMenu.contains(event.target) && !
toggleBtn.contains(event.target)) {
sideMenu.classList.remove('active');
}
});
</script>

<!-- <script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
const sliderContainer =
document.getElementById('sliderContainer');

function showSlide(index) {
// ‫تأكد أن الشريحة دائمًا ضمن النطاق الصحيح‬
currentSlide = (index + totalSlides) % totalSlides;
const offset = -currentSlide * 100;
sliderContainer.style.transform = `translateX(${offset}%)`;
}

function changeSlide(direction) {
showSlide(currentSlide + direction);
}

// ‫ ثواٍن‬3 ‫التمرير التلقائي كل‬


setInterval(() => {
changeSlide(1);
}, 3000);

// ‫عرض الشريحة األولى عند التحميل‬


document.addEventListener('DOMContentLoaded', () => {
showSlide(0);
});
</script>
<!-- ‫ قبل‬،‫< في أسفل الصفحة‬/body> -->
<!-- <script>
document.addEventListener('DOMContentLoaded', () => {
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
const sliderContainer =
document.getElementById('sliderContainer');
let currentSlide = 0;
let slideInterval;

function showSlide(index) {
currentSlide = (index + totalSlides) % totalSlides;
sliderContainer.style.transform = `translateX(-$
{currentSlide * 100}%)`;
}

function changeSlide(direction) {
showSlide(currentSlide + direction);
}

function startSlider() {
clearInterval(slideInterval);
slideInterval = setInterval(() => changeSlide(1), 3000);
}

// ‫تهيئة الظهور والتشغيل‬


showSlide(0);
startSlider();

// ‫إعادة تشغيل المؤقت عند النقر على األسهم‬


document.querySelectorAll('.slider-arrow').forEach(arrow => {
arrow.addEventListener('click', () => {
changeSlide( arrow.classList.contains('arrow-left') ?
-1 : 1 );
startSlider();
});
});

// ‫تحديث العرض عند تغيير حجم الشاشة‬


window.addEventListener('resize', () =>
showSlide(currentSlide));
});
</script>-->

<!-- ‫ قبل‬،‫< أسفل الصفحة‬/body>


<script>
const sliderContainer = document.querySelector('.slider-
container');
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let currentIndex = 0;
let interval;

function showSlide(index) {
sliderContainer.style.transform = `translateX(-${100 * index}
%)`;

function startAutoSlide() {
interval = setInterval(() => { currentIndex = (currentIndex+1)%
totalSlides;
showSlide(currentIndex);
},3000);

}
function stopAutoSlide() {
clearInterval(interval);
}
document.getElementById('nextBtn').addEventListener('click', ()
=>
{ stopAutoSlide();
currentIndex = (currentIndex+1)%totalSlides;
showSlide(currentIndex);
startAutoSlide();
});

document.getElementById('prevBtn').addEventListener('click', ()
=>
{ stopAutoSlide();
currentIndex = (currentIndex-1+totalSlides)%totalSlides;
showSlide(currentIndex);
startAutoSlide();
});

startAutoSlide();
</script>

-->

</body>
</html>

You might also like