سیستمی پەیوەندیی ماڵپەڕ
پڕۆژەیەکی تەواو و سەربەخۆ
پێشەکی
ئەم پڕۆژەیە سیستمێکی تەواوی پەیوەندیکردنە بۆ ماڵپەڕەکان، کە بە PHP، SQLite، AJAX و JavaScript دروست کراوە. ئامانجی ئەوەیە کە کاربەران بە ئاسانی نامە بنێرن بۆ بەڕێوەبەری ماڵپەڕ و بەڕێوەبەریش بتوانێت هەموو نامەکان ببینێت و بەڕێوەیان ببات.
ئەم پڕۆژەیە سیستمێکی تەواوی پەیوەندیکردنە بۆ ماڵپەڕەکان، کە بە PHP، SQLite، AJAX و JavaScript دروست کراوە. ئامانجی ئەوەیە کە کاربەران بە ئاسانی نامە بنێرن بۆ بەڕێوەبەری ماڵپەڕ و بەڕێوەبەریش بتوانێت هەموو نامەکان ببینێت و بەڕێوەیان ببات.
تایبەتمەندییەکان
١. فۆرمی جوان و ڕازاوەفۆرمی پەیوەندیکردن بە شێوەی شیشەیی (Glassmorphism) ڕازاوەتەوە، لەگەڵ پاشبنەمایەکی ڕەنگاوڕەنگ و جووڵاو. کاربەر بە ئاسانی دەتوانێت ناو، ئیمەیل، بابەت و نامەی خۆی بنووسێت.
٢. کەپچای سادە
بۆ ڕێگری لە سپام، کەپچایەکی سادەی ژمارەیی زیاد کراوە (وەک 14 + 3 = ?) کە کاربەر دەبێت وەڵامی بنووسێت.
٣. پشکنینی دووبارە
فۆرمەکە لە هەردوو لایەن پشکنین دەکرێت:
- لای کاربەر (JavaScript): پشکنینی خێرا بەبێ ڕیفرێشکردنی پەڕە
- لای سێرڤەر (PHP): پشکنینی دووبارە بۆ هێمنایەتی
هەموو نامەکان بە شێوەی خۆکار لە داتابەیسێکی SQLite هەڵدەگیرێن. هیچ ڕێکخستنێکی داتابەیسێکی قورس پێویست ناکات — فایلەکە بەخۆی دروست دەبێت.
٥. پەڕەی بەڕێوەبەر
بەڕێوەبەر دەتوانێت هەموو نامەکان لە خشتەیەکی جواندا ببینێت، بگەڕێت بە ناو نامەکاندا و وردەکاریی هەر نامەیەک بە مۆداڵ ببینێت.
٦. تەواو سەربەخۆ
پڕۆژەکە هیچ پێویستی بە کتێبخانەی دەرەکی نییە؛ نە فۆنتی Google، نە Font Awesome، نە هیچ CDN. هەموو ئایکۆنەکان بە SVGی ناوخۆیی دروست کراون، بۆیە بارکردنەکە زۆر خێرایە.
٧. گونجاو بۆ هەموو ئامێرەکان
دیزاینەکە بە شێوەیەکی خۆکار خۆی لەگەڵ قەبارەی شاشە دەگونجێنێت، لە مۆبایل، تەبلێت و کۆمپیوتەر بە یەکسانی کار دەکات.
پێکهاتەی پڕۆژە
contact/
├── index.php → فۆرمی کاربەر
├── messages.php → پەڕەی بەڕێوەبەر
├── css/
│ ├── style.css → شێوازی فۆرم
│ └── messages.css → شێوازی پەڕەی بەڕێوەبەر
├── js/
│ └── script.js → سکریپتی فۆرم
├── api/
│ ├── db.php → گرێدانی داتابەیس
│ └── send_message.php → پرۆسێسکردنی نامە
└── data/
└── messages.db → داتابەیسی SQLite (سەربەخۆ سازدەبێت)
├── index.php → فۆرمی کاربەر
├── messages.php → پەڕەی بەڕێوەبەر
├── css/
│ ├── style.css → شێوازی فۆرم
│ └── messages.css → شێوازی پەڕەی بەڕێوەبەر
├── js/
│ └── script.js → سکریپتی فۆرم
├── api/
│ ├── db.php → گرێدانی داتابەیس
│ └── send_message.php → پرۆسێسکردنی نامە
└── data/
└── messages.db → داتابەیسی SQLite (سەربەخۆ سازدەبێت)
هێمنایەتی
بەکارهێنانی PDO Prepared Statements بۆ ڕێگری لە SQL Injectionخاوێنکردنەوەی هەموو داتاکان بە htmlspecialchars() بۆ ڕێگری لە XSS
کەپچای سادە بۆ ڕێگری لە سپام
پشکنینی جۆر و قەبارەی فایلەکان
چۆنیەتی بەکارهێنان
فایلەکان دابنێ لە فۆڵدەرێک بە ناوی contactدڵنیابە لەوەی کە PHP و SQLite لە سێرڤەرەکەتدا چالاکە (لە زۆربەی هەرە زۆری سێرڤەرەکان کێشەیان نییە)
بڕۆ بۆ contact/index.php بۆ بینینی فۆرم
بڕۆ بۆ contact/messages.php بۆ بینینی نامەکان (تەنها بۆ بەڕێوەبەر)
تێبینی: چونکە بۆ خوێندنەوە و نۆۆسین لە داتابێس، لە PDO کەڵک وەرگیراوە، زۆر بە سانایی دەتوانن هەر بەم دەستوورانە داتا بێسی MySQLـش بەکار بێنن.
کۆتایی
ئەم پڕۆژەیە نموونەیەکی تەواوە بۆ سیستمی پەیوەندیکردن کە دەتوانرێت بە ئاسانی لە هەر ماڵپەڕێکدا بەکاربهێنرێت. کۆدەکان پاک، ڕێکوپێک و بە کوردی کۆمێنتکراون، بۆیە دەستکاریکردن و پەرەپێدانیان زۆر ئاسانە.فایلەکانی پڕۆژە
فایلی فۆرمی کاربەر (index.php)
<?php
session_start();
// دروستکردنی کەپچای ژمارەیی
$num1 = rand(5, 20);
$num2 = rand(1, 15);
$_SESSION['captcha_answer'] = $num1 + $num2;
$_SESSION['captcha_question'] = "$num1 + $num2";
?>
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>پەیوەندیکردن بە ئێمە</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- پاشبنەمای ڕازاوە -->
<div class="background">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
</div>
<!-- کۆنتەینەری فۆرم -->
<div class="contact-container">
<div class="contact-form-wrapper">
<div class="form-header">
<div class="header-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
</div>
<h2>نامەمان بۆ بنێرە</h2>
<p>هەر پرسیارێک یان پێشنیارێکت هەیە، لێرە بنووسە</p>
</div>
<form id="contactForm">
<!-- ناو -->
<div class="form-group">
<label for="name">ناوی تەواو <span class="required">*</span></label>
<div class="input-wrapper">
<svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<input type="text" id="name" name="name" placeholder="ناوی خۆت بنووسە" required>
</div>
<span class="error-message" id="nameError"></span>
</div>
<!-- ئیمەیل -->
<div class="form-group">
<label for="email">ئیمەیل <span class="required">*</span></label>
<div class="input-wrapper">
<svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<input type="email" id="email" name="email" placeholder="example@email.com" required>
</div>
<span class="error-message" id="emailError"></span>
</div>
<!-- بابەت -->
<div class="form-group">
<label for="subject">بابەت <span class="required">*</span></label>
<div class="input-wrapper">
<svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
<select id="subject" name="subject" required>
<option value="">بابەتێک هەڵبژێرە</option>
<option value="پرسیار">پرسیار</option>
<option value="پێشنیار">پێشنیار</option>
<option value="کێشە">کێشە</option>
<option value="هەماهەنگی">هەماهەنگی</option>
<option value="زانیاری">داوای زانیاری</option>
</select>
</div>
<span class="error-message" id="subjectError"></span>
</div>
<!-- نامە -->
<div class="form-group">
<label for="message">نامە <span class="required">*</span></label>
<div class="input-wrapper textarea-wrapper">
<svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
<textarea id="message" name="message" rows="4" placeholder="نامەکەت لێرە بنووسە..." required></textarea>
</div>
<div class="char-counter">
<span id="charCount">0</span> / 500 پیت
</div>
<span class="error-message" id="messageError"></span>
</div>
<!-- کەپچا -->
<div class="form-group">
<label for="captcha">پشکنینی مرۆڤ <span class="required">*</span></label>
<div class="captcha-wrapper">
<div class="captcha-question">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
<span><?= $_SESSION['captcha_question'] ?> = ?</span>
</div>
<div class="input-wrapper captcha-input">
<svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<input type="number" id="captcha" name="captcha" placeholder="وەڵام" required>
</div>
</div>
<span class="error-message" id="captchaError"></span>
</div>
<!-- دوگمەی ناردن -->
<button type="submit" class="submit-btn" id="submitBtn">
<span class="btn-text">ناردنی نامە</span>
<span class="btn-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</span>
<span class="btn-loader">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;animation:spin 1s linear infinite;"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
</span>
</button>
</form>
</div>
</div>
<!-- پەیامی سەرکەوتن -->
<div class="toast" id="toast">
<div class="toast-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:20px;height:20px;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div class="toast-message" id="toastMessage"></div>
</div>
<script src="js/script.js"></script>
</body>
</html>
فایلی پەڕەی بەڕێوەبەر (messages.php)
<?php
require_once __DIR__ . '/api/db.php';
$stmt = $pdo->query("SELECT * FROM messages ORDER BY created_at DESC");
$messages = $stmt->fetchAll();
$total = count($messages);
// ئاماری ڕێکەوتەکان
$today = 0;
foreach ($messages as $m) { if (date('Y-m-d', strtotime($m['created_at'])) === date('Y-m-d')) $today++; }
?>
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نامە نێردراوەکان</title>
<link rel="stylesheet" href="css/messages.css">
</head>
<body>
<div class="container">
<!-- سەرەتای پەڕە -->
<div class="page-header">
<div class="header-title">
<div class="header-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-6l-2 3h-4l-2-3H2"></path><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
</div>
<div>
<h1>نامە نێردراوەکان</h1>
<p>لیستی هەموو نامەکانی فۆرمی پەیوەندیکردن</p>
</div>
</div>
</div>
<!-- کارتی ئامار -->
<div class="stats">
<div class="stat-card">
<div class="stat-icon purple">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</div>
<div class="stat-info">
<h3><?= $total ?></h3>
<p>کۆی نامەکان</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon green">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</div>
<div class="stat-info">
<h3><?= $today ?></h3>
<p>نامەی ئەمڕۆ</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon orange">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
</div>
<div class="stat-info">
<h3 style="font-size:15px;"><?= $messages ? htmlspecialchars($messages[0]['name']) : '-' ?></h3>
<p>دوایین نێرەر</p>
</div>
</div>
</div>
<!-- خشتەی نامەکان -->
<div class="table-wrapper">
<div class="table-header">
<h2>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
لیستی نامەکان
</h2>
<div class="search-box">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input type="text" id="searchInput" placeholder="گەڕان...">
</div>
</div>
<?php if ($total > 0): ?>
<div style="overflow-x:auto;">
<table id="messagesTable">
<thead>
<tr>
<th>ناو</th>
<th>ئیمەیل</th>
<th>بابەت</th>
<th>نامە</th>
<th>ڕێکەوت</th>
<th>IP</th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($messages as $msg): ?>
<tr>
<td class="msg-name"><?= htmlspecialchars($msg['name']) ?></td>
<td class="msg-email"><?= htmlspecialchars($msg['email']) ?></td>
<td>
<span class="subject-badge subject-<?= htmlspecialchars($msg['subject']) ?>">
<?= htmlspecialchars($msg['subject']) ?>
</span>
</td>
<td class="msg-text" title="<?= htmlspecialchars($msg['message']) ?>">
<?= htmlspecialchars(mb_substr($msg['message'], 0, 40)) ?>
<?= mb_strlen($msg['message']) > 40 ? '...' : '' ?>
</td>
<td class="msg-date"><?= date('Y-m-d H:i', strtotime($msg['created_at'])) ?></td>
<td class="msg-ip"><?= htmlspecialchars($msg['ip_address'] ?? '-') ?></td>
<td>
<button class="btn-view" onclick='showMessage(<?= json_encode($msg, JSON_UNESCAPED_UNICODE) ?>)'>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php else: ?>
<div class="empty-state">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-6l-2 3h-4l-2-3H2"></path><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
<h3>هیچ نامەیەک نەدۆزرایەوە</h3>
<p>هێشتا هیچ کەسێک نامەی نەناردووە</p>
</div>
<?php endif; ?>
</div>
</div>
<!-- مۆداڵی بینینی نامە -->
<div class="modal-overlay" id="modalOverlay">
<div class="modal">
<div class="modal-header">
<h3>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
وردەکاری نامە
</h3>
<button class="modal-close" onclick="closeModal()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<div class="modal-body">
<div class="modal-row">
<div class="modal-label">ناو</div>
<div class="modal-value" id="modalName"></div>
</div>
<div class="modal-row">
<div class="modal-label">ئیمەیل</div>
<div class="modal-value" id="modalEmail" style="direction:ltr;text-align:right;"></div>
</div>
<div class="modal-row">
<div class="modal-label">بابەت</div>
<div class="modal-value" id="modalSubject"></div>
</div>
<div class="modal-row">
<div class="modal-label">نامە</div>
<div class="modal-value message-box" id="modalMessage"></div>
</div>
<div class="modal-row">
<div class="modal-label">ڕێکەوت</div>
<div class="modal-value" id="modalDate"></div>
</div>
<div class="modal-row">
<div class="modal-label">IP</div>
<div class="modal-value" id="modalIp" style="font-family:monospace;direction:ltr;text-align:right;"></div>
</div>
</div>
</div>
</div>
<script>
function showMessage(msg) {
document.getElementById('modalName').textContent = msg.name;
document.getElementById('modalEmail').textContent = msg.email;
document.getElementById('modalSubject').textContent = msg.subject;
document.getElementById('modalMessage').textContent = msg.message;
document.getElementById('modalDate').textContent = msg.created_at;
document.getElementById('modalIp').textContent = msg.ip_address || 'نەزانراو';
document.getElementById('modalOverlay').classList.add('show');
}
function closeModal() { document.getElementById('modalOverlay').classList.remove('show'); }
document.getElementById('modalOverlay').addEventListener('click', function(e) { if (e.target === this) closeModal(); });
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeModal(); });
document.getElementById('searchInput')?.addEventListener('input', function() {
const query = this.value.toLowerCase();
const rows = document.querySelectorAll('#messagesTable tbody tr');
rows.forEach(row => { const text = row.textContent.toLowerCase(); row.style.display = text.includes(query) ? '' : 'none'; });
});
</script>
</body>
</html>
فایلی شێوازی فۆرم (css/style.css)
/* ============================================ ڕێکخستنی سەرەتا ============================================ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Tahoma,'Segoe UI',Arial,sans-serif;background:#0f172a;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow-x:hidden;direction:rtl}
/* ============================================ پاشبنەمای ڕازاوە ============================================ */
.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden}
.shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.5;animation:float 8s ease-in-out infinite}
.shape-1{width:400px;height:400px;background:#6366f1;top:-100px;right:-100px}
.shape-2{width:350px;height:350px;background:#ec4899;bottom:-100px;left:-100px;animation-delay:2s}
.shape-3{width:300px;height:300px;background:#06b6d4;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:4s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.1)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* ============================================ کۆنتەینەری فۆرم ============================================ */
.contact-container{max-width:480px;width:100%;background:rgba(30,41,59,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);animation:slideUp 0.6s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
/* ============================================ سەرەتای فۆرم ============================================ */
.contact-form-wrapper{padding:30px;color:#e2e8f0}
.form-header{text-align:center;margin-bottom:25px}
.header-icon{width:55px;height:55px;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:16px;display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-bottom:15px;box-shadow:0 10px 25px rgba(99,102,241,0.4)}
.header-icon svg{width:24px;height:24px}
.form-header h2{font-size:22px;font-weight:700;color:#fff;margin-bottom:6px}
.form-header p{font-size:13px;color:#94a3b8}
/* ============================================ خشتەکان ============================================ */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:13px;font-weight:500;color:#cbd5e1;margin-bottom:6px}
.required{color:#ef4444}
.input-wrapper{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;right:14px;color:#64748b;width:16px;height:16px;pointer-events:none;transition:color 0.3s ease;z-index:1}
.input-wrapper input,.input-wrapper select,.input-wrapper textarea{width:100%;padding:11px 40px 11px 14px;background:rgba(15,23,42,0.6);border:1px solid #334155;border-radius:10px;color:#f1f5f9;font-family:inherit;font-size:14px;outline:none;transition:border-color 0.2s ease,box-shadow 0.2s ease}
.input-wrapper input:focus,.input-wrapper select:focus,.input-wrapper textarea:focus{border-color:#6366f1;background:rgba(15,23,42,0.9);box-shadow:0 0 0 3px rgba(99,102,241,0.15)}
.input-wrapper input:focus ~ .input-icon,.input-wrapper select:focus ~ .input-icon,.input-wrapper textarea:focus ~ .input-icon{color:#6366f1}
.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:#475569}
.textarea-wrapper{align-items:flex-start}
.textarea-wrapper .input-icon{top:14px}
.input-wrapper textarea{resize:vertical;min-height:90px;padding-top:11px}
.char-counter{text-align:left;font-size:12px;color:#64748b;margin-top:5px;direction:ltr}
.char-counter.warning{color:#f59e0b}
.char-counter.danger{color:#ef4444}
.error-message{display:block;color:#ef4444;font-size:12px;margin-top:5px;min-height:14px}
.input-wrapper.error input,.input-wrapper.error select,.input-wrapper.error textarea{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.15)}
/* ============================================ کەپچا ============================================ */
.captcha-wrapper{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.captcha-question{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;padding:11px 16px;border-radius:10px;font-size:15px;font-weight:600;direction:ltr;white-space:nowrap;box-shadow:0 4px 12px rgba(99,102,241,0.3)}
.captcha-input{width:100%}
.captcha-input input{padding-right:40px}
/* ============================================ دوگمەی ناردن ============================================ */
.submit-btn{width:100%;padding:13px 20px;background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);border:none;border-radius:10px;color:#fff;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform 0.2s ease,box-shadow 0.2s ease;margin-top:10px}
.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px rgba(99,102,241,0.4)}
.submit-btn:active:not(:disabled){transform:translateY(0)}
.submit-btn:disabled{opacity:0.7;cursor:not-allowed}
.btn-loader{display:none}
.submit-btn.loading .btn-text,.submit-btn.loading .btn-icon{display:none}
.submit-btn.loading .btn-loader{display:inline-block}
/* ============================================ پەیامی سەرکەوتن ============================================ */
.toast{position:fixed;top:30px;left:50%;transform:translateX(-50%) translateY(-100px);background:#10b981;color:#fff;padding:14px 22px;border-radius:12px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;box-shadow:0 10px 30px rgba(16,185,129,0.4);opacity:0;transition:all 0.4s ease;z-index:9999}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.error{background:#ef4444;box-shadow:0 10px 30px rgba(239,68,68,0.4)}
/* ============================================ وەڵامدانەوە ============================================ */
@media (max-width:520px){body{padding:15px}.contact-form-wrapper{padding:22px 18px}.form-header h2{font-size:19px}.captcha-wrapper{grid-template-columns:1fr}}
فایلی شێوازی پەڕەی بەڕێوەبەر (css/messages.css)
/* ============================================ ڕێکخستنی سەرەتا ============================================ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Tahoma,'Segoe UI',Arial,sans-serif;background:#0f172a;min-height:100vh;padding:30px 20px;color:#e2e8f0;direction:rtl}
.container{max-width:1200px;margin:0 auto}
/* ============================================ سەرەتای پەڕە ============================================ */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;flex-wrap:wrap;gap:15px}
.header-title{display:flex;align-items:center;gap:15px}
.header-icon{width:50px;height:50px;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 20px rgba(99,102,241,0.4)}
.header-icon svg{width:22px;height:22px}
.header-title h1{font-size:24px;font-weight:700;color:#fff}
.header-title p{font-size:13px;color:#94a3b8;margin-top:3px}
/* ============================================ کارتی ئامار ============================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:25px}
.stat-card{background:rgba(30,41,59,0.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.05);border-radius:16px;padding:20px;display:flex;align-items:center;gap:15px;transition:transform 0.25s ease}
.stat-card:hover{transform:translateY(-3px)}
.stat-icon{width:45px;height:45px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.stat-icon svg{width:20px;height:20px}
.stat-icon.purple{background:linear-gradient(135deg,#6366f1,#4f46e5)}
.stat-icon.green{background:linear-gradient(135deg,#10b981,#059669)}
.stat-icon.orange{background:linear-gradient(135deg,#f59e0b,#d97706)}
.stat-info h3{font-size:22px;font-weight:700;color:#fff}
.stat-info p{font-size:12px;color:#94a3b8;margin-top:2px}
/* ============================================ خشتە ============================================ */
.table-wrapper{background:rgba(30,41,59,0.7);backdrop-filter:blur(20px);border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,0.05);box-shadow:0 20px 50px rgba(0,0,0,0.4)}
.table-header{padding:18px 22px;background:rgba(15,23,42,0.5);border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.table-header h2{font-size:16px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}
.search-box{position:relative;display:flex;align-items:center}
.search-box svg{position:absolute;right:12px;color:#64748b;width:14px;height:14px}
.search-box input{padding:9px 36px 9px 14px;background:rgba(15,23,42,0.7);border:1px solid #334155;border-radius:10px;color:#f1f5f9;font-family:inherit;font-size:13px;outline:none;width:220px;transition:border-color 0.2s ease,box-shadow 0.2s ease}
.search-box input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.15)}
table{width:100%;border-collapse:collapse}
thead{background:rgba(15,23,42,0.7)}
th{padding:14px 16px;text-align:right;font-size:13px;font-weight:600;color:#94a3b8;border-bottom:1px solid rgba(255,255,255,0.05);white-space:nowrap}
td{padding:14px 16px;font-size:13px;color:#cbd5e1;border-bottom:1px solid rgba(255,255,255,0.03);vertical-align:middle}
tbody tr{transition:background 0.2s ease}
tbody tr:hover{background:rgba(99,102,241,0.05)}
.subject-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;white-space:nowrap}
.subject-پرسیار{background:rgba(99,102,241,0.2);color:#a5b4fc}
.subject-پێشنیار{background:rgba(16,185,129,0.2);color:#6ee7b7}
.subject-کێشە{background:rgba(239,68,68,0.2);color:#fca5a5}
.subject-هەماهەنگی{background:rgba(245,158,11,0.2);color:#fcd34d}
.subject-زانیاری{background:rgba(6,182,212,0.2);color:#67e8f9}
.msg-name{font-weight:600;color:#fff}
.msg-email{color:#94a3b8;font-size:12px;direction:ltr;text-align:right}
.msg-text{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#94a3b8;cursor:help}
.msg-date{font-size:12px;color:#64748b;white-space:nowrap;direction:ltr;text-align:right}
.msg-ip{font-size:11px;color:#64748b;font-family:monospace;direction:ltr;text-align:right}
.btn-view{width:32px;height:32px;background:rgba(99,102,241,0.15);color:#a5b4fc;border:1px solid rgba(99,102,241,0.3);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform 0.2s ease,background 0.2s ease}
.btn-view svg{width:15px;height:15px}
.btn-view:hover{background:rgba(99,102,241,0.3);transform:scale(1.1)}
.empty-state{text-align:center;padding:60px 20px;color:#64748b}
.empty-state svg{width:60px;height:60px;color:#334155;margin-bottom:15px}
.empty-state h3{font-size:17px;color:#94a3b8;margin-bottom:6px}
.empty-state p{font-size:13px}
/* ============================================ مۆداڵ ============================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:fadeIn 0.25s ease}
.modal-overlay.show{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:#1e293b;border-radius:18px;max-width:550px;width:100%;max-height:85vh;overflow-y:auto;border:1px solid rgba(255,255,255,0.1);animation:slideUp 0.3s ease;box-shadow:0 25px 60px rgba(0,0,0,0.6)}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{padding:20px 25px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;display:flex;align-items:center;justify-content:space-between}
.modal-header h3{font-size:17px;display:flex;align-items:center;gap:10px}
.modal-close{background:rgba(255,255,255,0.15);border:none;color:#fff;width:32px;height:32px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background 0.2s}
.modal-close:hover{background:rgba(255,255,255,0.3)}
.modal-body{padding:25px}
.modal-row{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.05)}
.modal-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.modal-label{font-size:12px;color:#94a3b8;margin-bottom:6px}
.modal-value{font-size:14px;color:#f1f5f9;line-height:1.7;word-wrap:break-word}
.modal-value.message-box{background:rgba(15,23,42,0.5);padding:14px;border-radius:10px;border-right:3px solid #6366f1}
/* ============================================ وەڵامدانەوە ============================================ */
@media (max-width:768px){.table-wrapper{overflow-x:auto}table{min-width:700px}.search-box input{width:160px}}
فایلی سکریپتی فۆرم (js/script.js)
// ============================================
// ١. دۆزینەوەی ئێلێمێنتەکان
// ============================================
const form = document.getElementById('contactForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const subjectInput = document.getElementById('subject');
const messageInput = document.getElementById('message');
const captchaInput = document.getElementById('captcha');
const charCount = document.getElementById('charCount');
const submitBtn = document.getElementById('submitBtn');
// ============================================
// ٢. نیشاندەری پیتەکان
// ============================================
messageInput.addEventListener('input', function () {
const count = this.value.length;
charCount.textContent = count;
const counter = charCount.parentElement;
counter.classList.remove('warning', 'danger');
if (count > 450) {
counter.classList.add('danger');
} else if (count > 350) {
counter.classList.add('warning');
}
});
// ============================================
// ٣. پشکنینی ئیمەیل
// ============================================
function isValidEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
// ============================================
// ٤. پیشاندانی هەڵە
// ============================================
function showError(input, message) {
const wrapper = input.closest('.input-wrapper');
const errorSpan = document.getElementById(input.id + 'Error');
if (wrapper) wrapper.classList.add('error');
if (errorSpan) errorSpan.textContent = message;
}
function clearError(input) {
const wrapper = input.closest('.input-wrapper');
const errorSpan = document.getElementById(input.id + 'Error');
if (wrapper) wrapper.classList.remove('error');
if (errorSpan) errorSpan.textContent = '';
}
// ============================================
// ٥. پاککردنەوەی هەڵەکان لە کاتی نووسین
// ============================================
[nameInput, emailInput, subjectInput, messageInput, captchaInput].forEach(input => {
input.addEventListener('input', () => clearError(input));
input.addEventListener('change', () => clearError(input));
});
// ============================================
// ٦. پشکنینی فۆرم
// ============================================
function validateForm() {
let isValid = true;
if (nameInput.value.trim().length < 3) {
showError(nameInput, 'ناو دەبێت لانیکەم ٣ پیت بێت');
isValid = false;
}
if (!isValidEmail(emailInput.value.trim())) {
showError(emailInput, 'تکایە ئیمەیلێکی دروست بنووسە');
isValid = false;
}
if (subjectInput.value === '') {
showError(subjectInput, 'تکایە بابەتێک هەڵبژێرە');
isValid = false;
}
const messageLength = messageInput.value.trim().length;
if (messageLength < 10) {
showError(messageInput, 'نامە دەبێت لانیکەم ١٠ پیت بێت');
isValid = false;
} else if (messageLength > 500) {
showError(messageInput, 'نامە نابێت لە ٥٠٠ پیت زیاتر بێت');
isValid = false;
}
if (captchaInput.value.trim() === '') {
showError(captchaInput, 'تکایە وەڵامی کەپچا بنووسە');
isValid = false;
}
return isValid;
}
// ============================================
// ٧. ناردنی فۆرم بە AJAX
// ============================================
form.addEventListener('submit', function (e) {
e.preventDefault();
if (!validateForm()) {
const firstError = document.querySelector('.input-wrapper.error');
if (firstError) {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
const input = firstError.querySelector('input, select, textarea');
if (input) input.focus();
}
return;
}
submitBtn.classList.add('loading');
submitBtn.disabled = true;
const formData = new FormData(form);
fetch('api/send_message.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
showToast(data.message, 'success');
form.reset();
charCount.textContent = '0';
clearAllErrors();
// نوێکردنەوەی کەپچا دوای ٢ چرکە
setTimeout(() => window.location.reload(), 2000);
} else {
showToast(data.message || 'هەڵەیەک ڕوویدا', 'error');
if (data.errors) {
Object.keys(data.errors).forEach(field => {
const input = document.getElementById(field);
if (input) showError(input, data.errors[field]);
});
}
}
})
.catch(error => {
console.error('هەڵا:', error);
showToast('هەڵەیەک لە پەیوەندیکردن ڕوویدا', 'error');
})
.finally(() => {
submitBtn.classList.remove('loading');
submitBtn.disabled = false;
});
});
// ============================================
// ٨. پاککردنەوەی هەموو هەڵەکان
// ============================================
function clearAllErrors() {
document.querySelectorAll('.input-wrapper.error').forEach(w => w.classList.remove('error'));
document.querySelectorAll('.error-message').forEach(s => s.textContent = '');
}
// ============================================
// ٩. پیشاندانی پەیام
// ============================================
function showToast(message, type = 'success') {
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
const toastIcon = toast.querySelector('.toast-icon');
toastMessage.textContent = message;
if (type === 'error') {
toast.classList.add('error');
toastIcon.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:20px;height:20px;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>';
} else {
toast.classList.remove('error');
toastIcon.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:20px;height:20px;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>';
}
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 4000);
}
فایلی گرێدانی داتابەیس (api/db.php)
<?php
$db_dir = __DIR__ . '/../data';
$db_file = $db_dir . '/messages.db';
if (!is_dir($db_dir)) { mkdir($db_dir, 0755, true); }
try {
$pdo = new PDO('sqlite:' . $db_file);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
$pdo->exec("
CREATE TABLE IF NOT EXISTS messages (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
email TEXT NOT NULL,
subject TEXT NOT NULL,
message TEXT NOT NULL,
ip_address TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)
");
} catch (PDOException $e) { die(json_encode([ 'success' => false, 'message' => 'هەڵە لە گرێدانی داتابەیس: ' . $e->getMessage() ])); }
فایلی پرۆسێسکردنی نامە (api/send_message.php)
<?php
session_start();
header('Content-Type: application/json; charset=utf-8');
require_once __DIR__ . '/db.php';
if ($_SERVER['REQUEST_METHOD'] !== 'POST') { echo json_encode(['success' => false, 'message' => 'داواکاری نادروستە']); exit; }
$name = isset($_POST['name']) ? trim($_POST['name']) : '';
$email = isset($_POST['email']) ? trim($_POST['email']) : '';
$subject = isset($_POST['subject']) ? trim($_POST['subject']) : '';
$message = isset($_POST['message']) ? trim($_POST['message']) : '';
$captcha = isset($_POST['captcha']) ? intval($_POST['captcha']) : 0;
$errors = [];
if (mb_strlen($name) < 3) { $errors['name'] = 'ناو دەبێت لانیکەم ٣ پیت بێت'; }
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $errors['email'] = 'تکایە ئیمەیلێکی دروست بنووسە'; }
$valid_subjects = ['پرسیار', 'پێشنیار', 'کێشە', 'هاواهەنگی', 'زانیاری'];
if (!in_array($subject, $valid_subjects)) { $errors['subject'] = 'تکایە بابەتێکی دروست هەڵبژێرە'; }
$messageLength = mb_strlen($message);
if ($messageLength < 10) { $errors['message'] = 'نامە دەبێت لانیکەم ١٠ پیت بێت'; }
elseif ($messageLength > 500) { $errors['message'] = 'نامە نابێت لە ٥٠٠ پیت زیاتر بێت'; }
if (!isset($_SESSION['captcha_answer']) || $captcha !== $_SESSION['captcha_answer']) { $errors['captcha'] = 'وەڵامی کەپچا هەڵەیە'; }
if (!empty($errors)) { echo json_encode([ 'success' => false, 'message' => 'تکایە هەڵەکان ڕاست بکەوە', 'errors' => $errors ]); exit; }
try {
$ip_address = $_SERVER['REMOTE_ADDR'] ?? 'نەزانراو';
$sql = "INSERT INTO messages (name, email, subject, message, ip_address) VALUES (:name, :email, :subject, :message, :ip)";
$stmt = $pdo->prepare($sql);
$stmt->execute([ ':name' => $name, ':email' => $email, ':subject' => $subject, ':message' => $message, ':ip' => $ip_address ]);
unset($_SESSION['captcha_answer'], $_SESSION['captcha_question']);
echo json_encode([ 'success' => true, 'message' => 'نامەکەت بە سەرکەوتوویی نێردرا. سوپاس بۆ پەیوەندیکردنت!' ]);
} catch (PDOException $e) { echo json_encode([ 'success' => false, 'message' => 'هەڵە لە هەڵگرتنی نامە: ' . $e->getMessage() ]); }
بە هیوای سەرکەوتنتان!
بە هیوای سەرکەوتنتان!
بارکردنی سەرنجەکان...