shibam/index.html at main · Scorpions-software/shibam · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!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="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <h1>شبام عبر العصور </h1>
            </div>
            <button class="menu-toggle">
                <i class="fas fa-bars"></i>
            </button>
            <ul class="nav-links">
                <li><a href="#home" class="active">الرئيسية</a></li>
                <li><a href="#historical-sites">المعالم التاريخية</a></li>
                <li><a href="#services">خدماتنا الثقافية</a></li> <!-- رابط إلى خدماتنا الثقافية -->
                <li><a href="#">من نحن</a></li>
                <li><a href="#">اتصل بنا</a></li>
            </ul>
            <button class="cta-btn">ابحث عن اختيارك</button>
        </nav>
    </header>

    <main>
        <section class="hero" id="home">
            <div class="hero-content">
                <h1>اكتشف سحر شبام الحضاري</h1>
                <p>نوفر لك معلومات شاملة عن تاريخ شبام ومعالمها الفريدة، بأسلوب مبسط وتجربة ممتعة.</p>
                <div class="search-box">
                    <div class="search-row">
                        <div class="search-item">
                            <label>ماذا تريد أن تعرف؟</label>
                            <select>
                                <option>تاريخ شبام</option>
                                <option>الهندسة المعمارية</option>
                                <option>أشهر المعالم</option>
                                <option>الحياة الاجتماعية</option>
                            </select>
                        </div>
                        <div class="search-item">
                            <label>الفترة الزمنية</label>
                            <select>
                                <option>قبل الإسلام</option>
                                <option>العصور الإسلامية</option>
                                <option>القرن العشرين</option>
                                <option>الوقت الحاضر</option>
                            </select>
                        </div>
                        <div class="search-item">
                            <label>نوع المعلومات</label>
                            <select>
                                <option>نصية</option>
                                <option>صور</option>
                                <option>مقاطع فيديو</option>
                                <option>وثائق تاريخية</option>
                            </select>
                        </div>
                        <button class="search-btn">ابحث الآن</button>
                    </div>
                </div>
        </section>

        <!-- قسم المعالم التاريخية -->
        <section class="featured" id="historical-sites">
            <div class="section-header">
                <h2>معالم شبام المميزة</h2>
                <p>استكشف أبرز معالم شبام التاريخية والهندسية الفريدة التي تروي حكاية حضارة عريقة.</p>
            </div>
            <div class="property-grid">
                <div class="property-card">
                    <div class="property-image property-image-1">
                        <span class="property-tag">تاريخي</span>
                    </div>
                    <div class="property-details">
                        <h3>ناطحات السحاب الطينية</h3>
                        <div class="location"><i class="fas fa-map-marker-alt"></i> قلب مدينة شبام</div>
                        <div class="price">عمرها أكثر من 500 عام</div>
                        <div class="property-features">
                            <span><i class="fas fa-building"></i> ارتفاع حتى 8 طوابق</span>
                            <span><i class="fas fa-landmark"></i> مبنية من الطين التقليدي</span>
                            <span><i class="fas fa-ruler-combined"></i> تصميم هندسي عبقري</span>
                        </div>
                        <button class="details-btn">اكتشف المزيد</button>
                    </div>
                </div>

                <div class="property-card">
                    <div class="property-image-2 property-image">
                        <span class="property-tag">مميز</span>
                    </div>
                    <div class="property-details">
                        <h3>أسوار المدينة القديمة</h3>
                        <div class="location"><i class="fas fa-map-marker-alt"></i> محيط شبام التاريخية</div>
                        <div class="price">تحصين لحماية المدينة</div>
                        <div class="property-features">
                            <span><i class="fas fa-shield-alt"></i> جدران سميكة</span>
                            <span><i class="fas fa-history"></i> شُيدت منذ قرون</span>
                            <span><i class="fas fa-landmark"></i> رمزية دفاعية عظيمة</span>
                        </div>
                        <button class="details-btn">اكتشف المزيد</button>
                    </div>
                </div>

                <div class="property-card">
                    <div class="property-image-3 property-image">
                        <span class="property-tag">ثقافي</span>
                    </div>
                    <div class="property-details">
                        <h3>الأسواق الشعبية بشبام</h3>
                        <div class="location"><i class="fas fa-map-marker-alt"></i> الأسواق القديمة</div>
                        <div class="price">أصالة وتراث حي</div>
                        <div class="property-features">
                            <span><i class="fas fa-store"></i> منتجات محلية</span>
                            <span><i class="fas fa-handshake"></i> تواصل اجتماعي</span>
                            <span><i class="fas fa-globe"></i> وجهة ثقافية للزوار</span>
                        </div>
                        <button class="details-btn">اكتشف المزيد</button>
                    </div>
                </div>
            </div>
            <div class="view-all">
                <button class="view-all-btn">استعرض كل معالم شبام</button>
            </div>
        </section>

        <!-- قسم خدماتنا الثقافية -->
        <section class="services" id="services">
            <div class="section-header">
                <h2>خدماتنا الثقافية</h2>
                <p>نقدم لك تجربة متكاملة لاكتشاف تاريخ شبام وتراثها العريق</p>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-map"></i>
                    </div>
                    <h3>جولات تعريفية</h3>
                    <p>نظم رحلات لاستكشاف معالم شبام مع مرشدين متخصصين.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-camera"></i>
                    </div>
                    <h3>توثيق وتصوير</h3>
                    <p>خدمة تصوير محترفة للمعالم والمناظر التاريخية الخلابة.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-book"></i>
                    </div>
                    <h3>موسوعات ومراجع</h3>
                    <p>نوفر لك مصادر معرفية موثوقة حول تاريخ وتراث المدينة.</p>
                </div>
            </div>
        </section>

    </main>

    <footer>
        <div class="footer-container">
            <div class="footer-column">
                <h3>شبام حضرموت</h3>
                <p>نحن رواد تقديم المعلومات الثقافية والتاريخية عن مدينة شبام حضرموت. نسعى دائماً لإظهار جمال وتراث المدينة للعالم.</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="footer-column">
                <h3>روابط سريعة</h3>
                <ul>
                    <li><a href="#">الرئيسية</a></li>
                    <li><a href="#">المعالم التاريخية</a></li>
                    <li><a href="#">خدماتنا الثقافية</a></li>
                    <li><a href="#">من نحن</a></li>
                    <li><a href="#">اتصل بنا</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>اتصل بنا</h3>
                <ul class="contact-info">
                    <li><i class="fas fa-map-marker-alt"></i> شبام، حضرموت، اليمن</li>
                    <li><i class="fas fa-phone"></i> +967 776 502 742</li>
                    <li><i class="fas fa-envelope"></i> Ibr776502742@gmail.com</li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>النشرة البريدية</h3>
                <p>اشترك ليصلك أحدث المعلومات والعروض الثقافية عن مدينة شبام.</p>
                <div class="newsletter">
                    <input type="email" placeholder="البريد الإلكتروني">
                    <button>تسجيل</button>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>جميع الحقوق محفوظة &copy; 2025 شبام حضرموت</p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const menuToggle = document.querySelector('.menu-toggle');
            const navLinks = document.querySelector('.nav-links');
            const ctaBtn = document.querySelector('.cta-btn');

            // إضافة تأثير القائمة المنبثقة عند الضغط على الزر
            if (menuToggle) {
                menuToggle.addEventListener('click', function() {
                    navLinks.classList.toggle('active');
                    ctaBtn.classList.toggle('active');
                });
            }

            // إظهار رسالة الترحيب عند تحميل الصفحة
            alert("مرحباً بك في موقع شبام عبر العصور! نتمنى لك تجربة ممتعة.");

            // إضافة التمرير السلس للأزرار
            const links = document.querySelectorAll('.nav-links a');
            links.forEach(link => {
                link.addEventListener('click', function(event) {
                    // منع الرابط من الانتقال الفوري
                    event.preventDefault();

                    // الحصول على المعرّف الخاص بالقسم الذي نريد الانتقال إليه
                    const targetId = link.getAttribute('href').substring(1);
                    const targetSection = document.getElementById(targetId);

                    // التمرير السلس إلى القسم المحدد
                    window.scrollTo({
                        top: targetSection.offsetTop,
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>