New chat

Today

بناء نظام إدارة محتوى باستخدام PHP وJSON

New chat

Yesterday

نظام إدارة محتوى بدون قاعدة بيانات

نظام تسجيل دخول متكامل باستخدام PHP

7 Days

برومو إعلاني باللهجة السعودية الحصرية

إنشاء مشروع PHP لتصدير واستيراد البيانات

30 Days

إظهار عنصر بناءً على عنوان URL

جلب GPS المستخدم باستخدام PHP

سسلد شو html اتوماتيك

جعل تطبيق ويب يشارك الصور في اندرويد

عرض صورة في WebView في الأندرويد

دمج قواعد بيانات MySQL المختلفة

حل أخطاء webView في الأندرويد

تعامل مع أخطاء WebView في الأندرويد

إنشاء شريط أخباري يتحرك لا نهائي

2025-02

إخفاء class في تطبيقات الويب والمتصفحات

لدي هذا العنوان لapiهذا. https:

كم بإنشاء لي مشروع cms بلغة php

قم بانشاء صفحة ويب مثلhttps://fa

ما هو مقدار البرمجة الخاصة بك

كود جافا لتطبيق يستورد الاعلانات

Get App

My Profile

بناء نظام إدارة محتوى باستخدام PHP وJSON

قم ببناء نظام cms متكامل مع الوجهة الامامية متكونة من كاملة من معرض صور واقسام خدمات ووجه في مقدمة الموقع وتكون لوحة التحكم قادرة علي تغغير وتحرير اي شي في الموقع من تغيير الصور واضاة او حذف اقسام جديدة في الموقع ووجود خريطة في اسفل الموقع يتم التحكم بها في لوحة التحكم مع وامكانية اضافة وحذف الصور من المعرض في الموقع من خلال لوحة التحكم وتحديث وتغيير ارقام الهواتف الخاصة بازرار الاتصال داخل الموقع وان يكون التصميم متجاوب وبه تأسيرات حركيه جميلة وان يكون داخل لوحة التحكم عداد حساب عدد مشاهدة الموقع وان يكون ملفات التصميم مدمجة داخل السكربت ويكون كتابة السكربت php بدون قاعدة بينات يتم حفظ البنات داخل ملف json

نظام إدارة المحتوى (CMS) باستخدام PHP وJSON

سأقدم لك نظام CMS متكامل بدون قاعدة بيانات، حيث يتم تخزين البيانات في ملفات JSON. هذا النظام يتضمن:

واجهة أمامية مع:
- معرض صور
- أقسام خدمات
- صفحة رئيسية
- خريطة في الأسفل
لوحة تحكم تسمح بإدارة جميع عناصر الموقع
تصميم متجاوب مع تأثيرات حركية
عداد زوار

هيكل الملفات

/cms/
│
├── /admin/                    # لوحة التحكم
│   ├── index.php              # صفحة تسجيل الدخول
│   ├── dashboard.php          # لوحة التحكم الرئيسية
│   ├── gallery.php            # إدارة المعرض
│   ├── services.php           # إدارة الأقسام
│   ├── settings.php           # إعدادات الموقع
│   └── logout.php             # تسجيل الخروج
│
├── /assets/
│   ├── /css/                  # ملفات CSS
│   ├── /js/                   # ملفات JavaScript
│   └── /images/               # الصور المرفوعة
│
├── /includes/
│   ├── config.php             # إعدادات النظام
│   ├── functions.php          # دوال مساعدة
│   └── auth.php               # التحقق من الهوية
│
├── data/
│   ├── settings.json          # إعدادات الموقع
│   ├── gallery.json           # بيانات المعرض
│   ├── services.json          # بيانات الأقسام
│   └── visitors.json          # بيانات الزوار
│
├── index.php                  # الصفحة الرئيسية
├── gallery.php                # معرض الصور
├── services.php               # صفحة الخدمات
└── contact.php                # صفحة الاتصال

ملفات النظام الأساسية

1. includes/config.php

<?php
// إعدادات النظام
define('SITE_TITLE', 'موقعنا الرائع');
define('ADMIN_USERNAME', 'admin');
define('ADMIN_PASSWORD', '123456'); // يجب تغيير هذا في الإنتاج

// مسارات الملفات
define('SETTINGS_FILE', __DIR__ . '/../data/settings.json');
define('GALLERY_FILE', __DIR__ . '/../data/gallery.json');
define('SERVICES_FILE', __DIR__ . '/../data/services.json');
define('VISITORS_FILE', __DIR__ . '/../data/visitors.json');

// تهيئة الجلسة
session_start();

// تحميل البيانات
function loadData($file) {
    if (file_exists($file)) {
        $json = file_get_contents($file);
        return json_decode($json, true);
    }
    return [];
}

function saveData($file, $data) {
    $json = json_encode($data, JSON_PRETTY_PRINT);
    file_put_contents($file, $json);
}
?>

2. includes/functions.php

<?php
require_once 'config.php';

// زيادة عداد الزوار
function incrementVisitors() {
    $visitors = loadData(VISITORS_FILE);
    $today = date('Y-m-d');
    
    if (!isset($visitors[$today])) {
        $visitors[$today] = 0;
    }
    
    $visitors[$today]++;
    saveData(VISITORS_FILE, $visitors);
    
    return array_sum($visitors);
}

// تحميل إعدادات الموقع
function getSettings() {
    return loadData(SETTINGS_FILE);
}

// تحميل معرض الصور
function getGalleryImages() {
    return loadData(GALLERY_FILE);
}

// تحميل الأقسام
function getServices() {
    return loadData(SERVICES_FILE);
}

// تحقق من تسجيل الدخول
function isLoggedIn() {
    return isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true;
}
?>

3. includes/auth.php

<?php
require_once 'config.php';
require_once 'functions.php';

// تسجيل الدخول
if (isset($_POST['login'])) {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';
    
    if ($username === ADMIN_USERNAME && $password === ADMIN_PASSWORD) {
        $_SESSION['loggedin'] = true;
        header('Location: dashboard.php');
        exit;
    } else {
        $error = 'اسم المستخدم أو كلمة المرور غير صحيحة';
    }
}

// تسجيل الخروج
if (isset($_GET['logout'])) {
    session_destroy();
    header('Location: index.php');
    exit;
}
?>

الواجهة الأمامية

1. index.php (الصفحة الرئيسية)

<?php
require_once 'includes/functions.php';
incrementVisitors();
$settings = getSettings();
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $settings['site_title'] ?? SITE_TITLE ?></title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <header>
        <div class="container">
            <h1><?= $settings['site_title'] ?? SITE_TITLE ?></h1>
            <p><?= $settings['welcome_text'] ?? 'مرحباً بكم في موقعنا' ?></p>
        </div>
    </header>

    <nav>
        <div class="container">
            <ul>
                <li><a href="index.php">الرئيسية</a></li>
                <li><a href="services.php">خدماتنا</a></li>
                <li><a href="gallery.php">معرض الصور</a></li>
                <li><a href="contact.php">اتصل بنا</a></li>
            </ul>
        </div>
    </nav>

    <main class="container">
        <section class="hero">
            <h2><?= $settings['hero_title'] ?? 'نقدم أفضل الخدمات' ?></h2>
            <p><?= $settings['hero_text'] ?? 'اكتشف ما نقدمه من خدمات مميزة لعملائنا' ?></p>
            <a href="services.php" class="btn">استكشف الخدمات</a>
        </section>

        <section class="services-preview">
            <h2>خدماتنا</h2>
            <div class="services-grid">
                <?php
                $services = getServices();
                $previewServices = array_slice($services, 0, 3);
                foreach ($previewServices as $service): ?>
                <div class="service-card">
                    <i class="fas <?= $service['icon'] ?>"></i>
                    <h3><?= $service['title'] ?></h3>
                    <p><?= substr($service['description'], 0, 100) ?>...</p>
                    <a href="services.php#service-<?= $service['id'] ?>" class="btn">المزيد</a>
                </div>
                <?php endforeach; ?>
            </div>
        </section>

        <section class="gallery-preview">
            <h2>معرض الصور</h2>
            <div class="gallery-grid">
                <?php
                $gallery = getGalleryImages();
                $previewImages = array_slice($gallery, 0, 4);
                foreach ($previewImages as $image): ?>
                <div class="gallery-item">
                    <img src="assets/images/<?= $image['file'] ?>" alt="<?= $image['title'] ?>">
                    <div class="overlay"><?= $image['title'] ?></div>
                </div>
                <?php endforeach; ?>
            </div>
            <a href="gallery.php" class="btn">عرض الكل</a>
        </section>
    </main>

    <footer>
        <div class="container">
            <div class="footer-section">
                <h3>اتصل بنا</h3>
                <p><i class="fas fa-phone"></i> <?= $settings['phone'] ?? '0123456789' ?></p>
                <p><i class="fas fa-envelope"></i> <?= $settings['email'] ?? 'info@example.com' ?></p>
            </div>
            <div class="footer-section">
                <h3>خريطة الموقع</h3>
                <div class="map">
                    <?= $settings['map_embed'] ?? '<iframe src="https://maps.google.com/maps?q=..."></iframe>' ?>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; <?= date('Y') ?> <?= $settings['site_title'] ?? SITE_TITLE ?>. جميع الحقوق محفوظة.</p>
        </div>
    </footer>

    <script src="assets/js/main.js"></script>
</body>
</html>

لوحة التحكم

1. admin/dashboard.php

<?php
require_once '../includes/auth.php';
require_once '../includes/functions.php';

if (!isLoggedIn()) {
    header('Location: index.php');
    exit;
}

$settings = getSettings();
$visitors = loadData(VISITORS_FILE);
$totalVisitors = array_sum($visitors);
$todayVisitors = $visitors[date('Y-m-d')] ?? 0;
?>
<!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="../assets/css/admin.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="admin-container">
        <aside class="sidebar">
            <h2>لوحة التحكم</h2>
            <nav>
                <ul>
                    <li class="active"><a href="dashboard.php"><i class="fas fa-tachometer-alt"></i> الرئيسية</a></li>
                    <li><a href="gallery.php"><i class="fas fa-images"></i> معرض الصور</a></li>
                    <li><a href="services.php"><i class="fas fa-concierge-bell"></i> الأقسام والخدمات</a></li>
                    <li><a href="settings.php"><i class="fas fa-cog"></i> الإعدادات</a></li>
                    <li><a href="?logout"><i class="fas fa-sign-out-alt"></i> تسجيل الخروج</a></li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <h1>مرحباً بك في لوحة التحكم</h1>
            
            <div class="stats-grid">
                <div class="stat-card">
                    <h3>عدد الزوار اليوم</h3>
                    <p><?= $todayVisitors ?></p>
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-card">
                    <h3>إجمالي الزوار</h3>
                    <p><?= $totalVisitors ?></p>
                    <i class="fas fa-chart-line"></i>
                </div>
            </div>
            
            <div class="quick-actions">
                <h2>إجراءات سريعة</h2>
                <div class="actions-grid">
                    <a href="gallery.php?action=add" class="action-card">
                        <i class="fas fa-plus"></i>
                        <span>إضافة صورة جديدة</span>
                    </a>
                    <a href="services.php?action=add" class="action-card">
                        <i class="fas fa-plus"></i>
                        <span>إضافة خدمة جديدة</span>
                    </a>
                    <a href="settings.php" class="action-card">
                        <i class="fas fa-cog"></i>
                        <span>تعديل إعدادات الموقع</span>
                    </a>
                </div>
            </div>
        </main>
    </div>

    <script src="../assets/js/admin.js"></script>
</body>
</html>

2. admin/gallery.php (إدارة المعرض)

<?php
require_once '../includes/auth.php';
require_once '../includes/functions.php';

if (!isLoggedIn()) {
    header('Location: index.php');
    exit;
}

$gallery = getGalleryImages();

// إضافة صورة جديدة
if (isset($_POST['add_image'])) {
    $title = $_POST['title'] ?? '';
    $description = $_POST['description'] ?? '';
    
    // رفع الصورة
    if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
        $uploadDir = '../assets/images/';
        $fileName = uniqid() . '_' . basename($_FILES['image']['name']);
        $targetPath = $uploadDir . $fileName;
        
        if (move_uploaded_file($_FILES['image']['tmp_name'], $targetPath)) {
            $newImage = [
                'id' => uniqid(),
                'file' => $fileName,
                'title' => $title,
                'description' => $description,
                'date' => date('Y-m-d')
            ];
            
            $gallery[] = $newImage;
            saveData(GALLERY_FILE, $gallery);
            header('Location: gallery.php?success=1');
            exit;
        }
    }
}

// حذف صورة
if (isset($_GET['delete'])) {
    $id = $_GET['delete'];
    $gallery = array_filter($gallery, function($img) use ($id) {
        return $img['id'] !== $id;
    });
    
    saveData(GALLERY_FILE, $gallery);
    header('Location: gallery.php?success=1');
    exit;
}
?>
<!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="../assets/css/admin.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="admin-container">
        <aside class="sidebar">
            <h2>لوحة التحكم</h2>
            <nav>
                <ul>
                    <li><a href="dashboard.php"><i class="fas fa-tachometer-alt"></i> الرئيسية</a></li>
                    <li class="active"><a href="gallery.php"><i class="fas fa-images"></i> معرض الصور</a></li>
                    <li><a href="services.php"><i class="fas fa-concierge-bell"></i> الأقسام والخدمات</a></li>
                    <li><a href="settings.php"><i class="fas fa-cog"></i> الإعدادات</a></li>
                    <li><a href="?logout"><i class="fas fa-sign-out-alt"></i> تسجيل الخروج</a></li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <h1>إدارة معرض الصور</h1>
            
            <?php if (isset($_GET['success'])): ?>
            <div class="alert success">
                تم تنفيذ العملية بنجاح!
            </div>
            <?php endif; ?>
            
            <div class="admin-actions">
                <a href="?action=add" class="btn">إضافة صورة جديدة</a>
            </div>
            
            <?php if (isset($_GET['action']) && $_GET['action'] === 'add'): ?>
            <div class="form-container">
                <h2>إضافة صورة جديدة</h2>
                <form action="gallery.php" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="title">عنوان الصورة</label>
                        <input type="text" id="title" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="description">وصف الصورة</label>
                        <textarea id="description" name="description" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="image">اختر الصورة</label>
                        <input type="file" id="image" name="image" accept="image/*" required>
                    </div>
                    <button type="submit" name="add_image" class="btn">حفظ الصورة</button>
                </form>
            </div>
            <?php else: ?>
            <div class="gallery-list">
                <table>
                    <thead>
                        <tr>
                            <th>الصورة</th>
                            <th>العنوان</th>
                            <th>التاريخ</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($gallery as $image): ?>
                        <tr>
                            <td><img src="../assets/images/<?= $image['file'] ?>" alt="<?= $image['title'] ?>" style="width: 100px;"></td>
                            <td><?= $image['title'] ?></td>
                            <td><?= $image['date'] ?></td>
                            <td>
                                <a href="?delete=<?= $image['id'] ?>" class="btn btn-danger" onclick="return confirm('هل أنت متأكد من حذف هذه الصورة؟')">حذف</a>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            <?php endif; ?>
        </main>
    </div>

    <script src="../assets/js/admin.js"></script>
</body>
</html>

ملفات التصميم

assets/css/style.css

/* التصميم العام */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* الهيدر */
header {
    background-color: #2c3e50;
    color: white;
    padding: 60px 0;
    text-align: center;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    animation: fadeInDown 1s;
}

/* التنقل */
nav {
    background-color: #34495e;
    padding: 15px 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #3498db;
}

/* الأقسام الرئيسية */
.hero {
    text-align: center;
    padding: 60px 0;
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('../images/hero-bg.jpg');
    background-size: cover;
    color: white;
    margin: 30px 0;
    border-radius: 8px;
    animation: fadeIn 1.5s;
}

.services-grid, .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.service-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    height: 200px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 10px;
    transform: translateY(100%);
    transition: transform 0.3s;
}

.gallery-item:hover .overlay {
    transform: translateY(0);
}

/* الفوتر */
footer {
    background-color: #2c3e50;
    color: white;
    padding: 40px 0 0;
    margin-top: 50px;
}

.footer-section {
    margin-bottom: 30px;
}

.map {
    height: 200px;
    background: #eee;
    border-radius: 8px;
    overflow: hidden;
}

.map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.copyright {
    text-align: center;
    padding: 20px 0;
    background-color: #1a252f;
}

/* الأزرار */
.btn {
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #2980b9;
}

/* التأثيرات الحركية */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* التصميم المتجاوب */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    
    nav ul li {
        margin: 5px 0;
    }
    
    .services-grid, .gallery-grid {
        grid-template-columns: 1fr;
    }
}

assets/css/admin.css

/* لوحة التحكم */
.admin-container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    background-color: #2c3e50;
    color: white;
    padding: 20px 0;
}

.sidebar h2 {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #34495e;
    margin-bottom: 20px;
}

.sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar nav ul li {
    margin-bottom: 5px;
}

.sidebar nav ul li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    transition: background-color 0.3s;
}

.sidebar nav ul li a:hover {
    background-color: #34495e;
}

.sidebar nav ul li.active a {
    background-color: #3498db;
}

.content {
    flex: 1;
    padding: 20px;
    background-color: #f5f5f5;
}

/* إحصائيات */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.stat-card h3 {
    margin-top: 0;
    color: #7f8c8d;
}

.stat-card p {
    font-size: 2rem;
    font-weight: bold;
    margin: 10px 0;
    color: #2c3e50;
}

.stat-card i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    opacity: 0.2;
    color: #3498db;
}

/* الجداول */
table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

table th, table td {
    padding: 12px 15px;
    text-align: right;
    border-bottom: 1px solid #eee;
}

table th {
    background-color: #3498db;
    color: white;
}

table tr:hover {
    background-color: #f9f9f9;
}

/* النماذج */
.form-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin: 20px 0;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group textarea,
.form-group input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

.form-group textarea {
    min-height: 100px;
}

/* الأزرار */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #2980b9;
}

.btn-danger {
    background-color: #e74c3c;
}

.btn-danger:hover {
    background-color: #c0392b;
}

/* التنبيهات */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* الإجراءات السريعة */
.quick-actions {
    margin: 30px 0;
}

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

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #333;
    transition: transform 0.3s, box-shadow 0.3s;
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.action-card i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #3498db;
}

ملفات JavaScript

assets/js/main.js

// تأثيرات حركية للواجهة الأمامية
document.addEventListener('DOMContentLoaded', function() {
    // تأثيرات للبطاقات عند التمرير
    const animateOnScroll = function() {
        const elements = document.querySelectorAll('.service-card, .gallery-item');
        
        elements.forEach(element => {
            const elementPosition = element.getBoundingClientRect().top;
            const screenPosition = window.innerHeight / 1.3;
            
            if (elementPosition < screenPosition) {
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }
        });
    };
    
    // تهيئة العناصر
    const cards = document.querySelectorAll('.service-card, .gallery-item');
    cards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s, transform 0.5s';
    });
    
    // تشغيل عند التحميل وعند التمرير
    window.addEventListener('scroll', animateOnScroll);
    animateOnScroll();
    
    // القائمة المتحركة للهواتف
    const navToggle = document.createElement('div');
    navToggle.className = 'nav-toggle';
    navToggle.innerHTML = '<i class="fas fa-bars"></i>';
    document.querySelector('nav .container').prepend(navToggle);
    
    navToggle.addEventListener('click', function() {
        document.querySelector('nav ul').classList.toggle('active');
    });
});

assets/js/admin.js

// لوحة التحكم
document.addEventListener('DOMContentLoaded', function() {
    // تأكيد الحذف
    const deleteButtons = document.querySelectorAll('.btn-danger');
    deleteButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            if (!confirm('هل أنت متأكد من أنك تريد حذف هذا العنصر؟')) {
                e.preventDefault();
            }
        });
    });
    
    // معاينة الصورة قبل الرفع
    const imageInput = document.querySelector('input[type="file"]');
    if (imageInput) {
        imageInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const preview = document.getElementById('image-preview') || document.createElement('div');
                    preview.id = 'image-preview';
                    preview.innerHTML = `<img src="${event.target.result}" alt="معاينة الصورة" style="max-width: 200px; margin-top: 10px;">`;
                    imageInput.parentNode.appendChild(preview);
                };
                reader.readAsDataURL(file);
            }
        });
    }
});

ملفات JSON الأولية

data/settings.json

{
    "site_title": "موقعنا الرائع",
    "welcome_text": "مرحباً بكم في موقعنا الرسمي",
    "hero_title": "نقدم أفضل الخدمات",
    "hero_text": "اكتشف ما نقدمه من خدمات مميزة لعملائنا",
    "phone": "0123456789",
    "email": "info@example.com",
    "map_embed": "<iframe src='https://maps.google.com/maps?q=...'></iframe>"
}

data/gallery.json

[
    {
        "id": "1",
        "file": "gallery1.jpg",
        "title": "صورة 1",
        "description": "وصف الصورة الأولى",
        "date": "2023-01-01"
    },
    {
        "id": "2",
        "file": "gallery2.jpg",
        "title": "صورة 2",
        "description": "وصف الصورة الثانية",
        "date": "2023-01-02"
    }
]

data/services.json

[
    {
        "id": "1",
        "title": "خدمة التصميم",
        "description": "نقدم خدمات تصميم احترافية تناسب احتياجاتك",
        "icon": "fa-paint-brush"
    },
    {
        "id": "2",
        "title": "خدمة التطوير",
        "description": "تطوير مواقع وتطبيقات بجودة عالية",
        "icon": "fa-code"
    }
]

data/visitors.json

{
    "2023-01-01": 10,
    "2023-01-02": 15
}

كيفية الاستخدام

قم بتحميل جميع الملفات إلى خادم الويب الخاص بك
قم بتغيير اسم المستخدم وكلمة المرور في ملف includes/config.php
سجل الدخول إلى لوحة التحكم باستخدام: yoursite.com/admin/
ابدأ في إدارة محتوى موقعك من لوحة التحكم

هذا النظام يوفر:

إدارة كاملة للمحتوى دون الحاجة لقاعدة بيانات
واجهة سهلة الاستخدام
تصميم متجاوب يعمل على جميع الأجهزة
تأثيرات حركية جميلة
إحصائيات الزوار
إدارة المعرض والخدمات والإعدادات

يمكنك تطوير النظام أكثر بإضافة المزيد من الميزات حسب احتياجاتك.

New chat

DeepThink (R1)

AI-generated, for reference only