alrmah/codegenius-wizard
0
1<!DOCTYPE html>2<html lang="ar" dir="rtl">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>BloggerMagic - مولد أكواد بلوجر</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/js/all.min.js"></script>12 <style>13 /* Toast notification animation */14 @keyframes slideIn {15 from { transform: translateY(100px); opacity: 0; }16 to { transform: translateY(0); opacity: 1; }17 }18 19 @keyframes fadeOut {20 from { opacity: 1; }21 to { opacity: 0; }22 }23 24 .fixed {25 animation: slideIn 0.3s ease-out forwards;26 }27 28 .fixed.fade-out {29 animation: fadeOut 0.5s ease-out forwards;30 }31 32:root {33 --primary: #7c3aed;34 --primary-dark: #5b21b6;35 }36 37 .dark {38 --bg-color: #1a1a1a;39 --text-color: #f3f4f6;40 --card-bg: #2d2d2d;41 --border-color: #3d3d3d;42 }43 44 .gradient-bg {45 background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);46 }47 48 .dark body {49 background-color: var(--bg-color);50 color: var(--text-color);51 }52 53 .dark .card {54 background-color: var(--card-bg);55 border-color: var(--border-color);56 }57.nav-link:hover {58 transform: translateY(-2px);59 text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);60 }61 .card {62 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);63 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);64 border: 1px solid rgba(0, 0, 0, 0.05);65 }66 67 .dark .card {68 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);69 }70 .card:hover {71 transform: translateY(-5px);72 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);73 border-color: var(--primary);74 }75 76 .dark .card:hover {77 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);78 }79.tab-content {80 display: none;81 }82 .tab-content.active {83 display: block;84 animation: fadeIn 0.5s ease;85 }86 @keyframes fadeIn {87 from { opacity: 0; transform: translateY(10px); }88 to { opacity: 1; transform: translateY(0); }89 }90 91 .animate-pulse {92 animation: pulse 1s ease-in-out;93 }94 95 @keyframes pulse {96 0%, 100% { opacity: 1; }97 50% { opacity: 0.5; }98 }99 100 pre {101 position: relative;102 transition: all 0.3s ease;103 }104 105 pre:hover {106 transform: scale(1.01);107 }108 109 .tab-button.active {110 border-bottom-color: var(--primary) !important;111 color: var(--primary) !important;112 }113 </style>114</head>115<body class="bg-gray-50 font-sans">116 <!-- Header -->117 <header class="gradient-bg text-white shadow-lg sticky top-0 z-50">118 <div class="container mx-auto px-4 py-4">119 <div class="flex flex-col md:flex-row justify-between items-center">120 <div class="flex items-center mb-4 md:mb-0">121 <i data-feather="magic" class="w-8 h-8 mr-2"></i>122 <h1 class="text-2xl font-bold tracking-tight">CodeGenius Wizard</h1>123 </div>124 <nav class="flex items-center space-x-6 space-x-reverse">125 <a href="#buttons" class="nav-link text-white hover:text-yellow-200 transition flex items-center">126 <i data-feather="square" class="w-4 h-4 mr-1"></i> الأزرار127 </a>128 <a href="#boxes" class="nav-link text-white hover:text-yellow-200 transition flex items-center">129 <i data-feather="alert-circle" class="w-4 h-4 mr-1"></i> المربعات130 </a>131 <a href="#tables" class="nav-link text-white hover:text-yellow-200 transition flex items-center">132 <i data-feather="grid" class="w-4 h-4 mr-1"></i> الجداول133 </a>134 <button id="darkModeToggle" class="p-2 rounded-full hover:bg-white/10 transition">135 <i data-feather="moon" class="w-5 h-5"></i>136 </button>137 </nav>138 </div>139 </div>140 </header>141<!-- Main Content -->142 <main class="container mx-auto px-4 py-8">143 <!-- Intro Section -->144 <section class="mb-12 text-center">145 <h2 class="text-3xl font-bold text-gray-800 mb-4">أهلاً بك في مولد أكواد بلوجر السحري!</h2>146 <p class="text-xl text-gray-600 max-w-3xl mx-auto">147 أداة متكاملة لإنشاء عناصر ويب احترافية لمدونتك بدون الحاجة لخبرة برمجية148 </p>149 </section>150 151 <!-- Tabs Navigation -->152 <div class="flex border-b border-gray-200 mb-8" id="tabs">153 <button class="tab-button py-3 px-6 font-medium text-gray-500 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-300 transition" data-tab="buttons">154 <i data-feather="square" class="inline mr-2"></i> مولد الأزرار155 </button>156 <button class="tab-button py-3 px-6 font-medium text-gray-500 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-300 transition" data-tab="boxes">157 <i data-feather="alert-circle" class="inline mr-2"></i> مولد مربعات الملاحظات158 </button>159 <button class="tab-button py-3 px-6 font-medium text-gray-500 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-300 transition" data-tab="tables">160 <i data-feather="grid" class="inline mr-2"></i> مولد الجداول161 </button>162 </div>163 164 <!-- Button Generator Tab -->165 <div id="buttons" class="tab-content active">166 <div class="grid md:grid-cols-2 gap-8">167 <!-- Controls -->168 <div class="bg-white rounded-xl shadow-md p-6 card">169 <h3 class="text-xl font-bold text-gray-800 mb-4">تخصيص الزر</h3>170 171 <div class="space-y-4">172 <div>173 <label class="block text-gray-700 mb-2">نص الزر</label>174 <input type="text" id="buttonText" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" value="انقر هنا">175 </div>176 177 <div>178 <label class="block text-gray-700 mb-2">الرابط (URL)</label>179 <input type="text" id="buttonUrl" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" value="#">180 </div>181 182 <div class="grid grid-cols-2 gap-4">183 <div>184 <label class="block text-gray-700 mb-2">لون الخلفية</label>185 <input type="color" id="buttonBgColor" class="w-full h-10" value="#4f46e5">186 </div>187 <div>188 <label class="block text-gray-700 mb-2">لون النص</label>189 <input type="color" id="buttonTextColor" class="w-full h-10" value="#ffffff">190 </div>191 </div>192 193 <div>194 <label class="block text-gray-700 mb-2">شكل الحواف</label>195 <select id="buttonBorderRadius" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">196 <option value="rounded-none">حادة</option>197 <option value="rounded">مستديرة قليلاً</option>198 <option value="rounded-lg" selected>مستديرة</option>199 <option value="rounded-full">كاملة الاستدارة</option>200 </select>201 </div>202 203 <div class="flex items-center">204 <input type="checkbox" id="buttonShadow" class="mr-2 h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>205 <label class="text-gray-700">إضافة ظل</label>206 </div>207 208 <div class="flex items-center">209 <input type="checkbox" id="buttonIcon" class="mr-2 h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">210 <label class="text-gray-700">إضافة أيقونة</label>211 <select id="buttonIconSelect" class="ml-2 px-2 py-1 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent hidden">212 <option value="download">تحميل</option>213 <option value="eye">معاينة</option>214 <option value="heart">إعجاب</option>215 <option value="share-2">مشاركة</option>216 </select>217 </div>218 219 <button id="generateButtonCode" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition">220 توليد الكود221 </button>222 </div>223 </div>224 225 <!-- Preview & Code -->226 <div class="bg-white rounded-xl shadow-md p-6 card">227 <h3 class="text-xl font-bold text-gray-800 mb-4">معاينة الزر</h3>228 229 <div class="flex justify-center mb-8">230 <button id="buttonPreview" class="px-6 py-3 bg-indigo-600 text-white rounded-lg shadow hover:bg-indigo-700 transition">231 انقر هنا232 </button>233 </div>234 235 <div class="relative">236 <h4 class="text-lg font-medium text-gray-700 mb-2">كود HTML</h4>237 <pre id="buttonHtmlCode" class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"></pre>238 <button id="copyButtonHtml" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded text-xs">239 <i data-feather="copy" class="w-3 h-3 inline"></i> نسخ240 </button>241 </div>242 243 <div class="relative mt-4">244 <h4 class="text-lg font-medium text-gray-700 mb-2">كود CSS</h4>245 <pre id="buttonCssCode" class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"></pre>246 <button id="copyButtonCss" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded text-xs">247 <i data-feather="copy" class="w-3 h-3 inline"></i> نسخ248 </button>249 </div>250 </div>251 </div>252 </div>253 254 <!-- Boxes Generator Tab -->255 <div id="boxes" class="tab-content">256 <div class="grid md:grid-cols-2 gap-8">257 <!-- Controls -->258 <div class="bg-white rounded-xl shadow-md p-6 card">259 <h3 class="text-xl font-bold text-gray-800 mb-4">تخصيص المربع</h3>260 261 <div class="space-y-4">262 <div>263 <label class="block text-gray-700 mb-2">نوع المربع</label>264 <select id="boxType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">265 <option value="note">ملاحظة</option>266 <option value="tip">نصيحة</option>267 <option value="warning">تحذير</option>268 <option value="info">معلومة</option>269 </select>270 </div>271 272 <div>273 <label class="block text-gray-700 mb-2">العنوان</label>274 <input type="text" id="boxTitle" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" value="ملاحظة هامة">275 </div>276 277 <div>278 <label class="block text-gray-700 mb-2">المحتوى</label>279 <textarea id="boxContent" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">هذا مثال لمحتوى المربع النصي الذي يمكنك تخصيصه حسب احتياجاتك.</textarea>280 </div>281 282 <div class="flex items-center">283 <input type="checkbox" id="boxIcon" class="mr-2 h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>284 <label class="text-gray-700">إضافة أيقونة</label>285 </div>286 287 <div class="flex items-center">288 <input type="checkbox" id="boxHoverEffect" class="mr-2 h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>289 <label class="text-gray-700">تأثيرات عند التحويم</label>290 </div>291 292 <button id="generateBoxCode" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition">293 توليد الكود294 </button>295 </div>296 </div>297 298 <!-- Preview & Code -->299 <div class="bg-white rounded-xl shadow-md p-6 card">300 <h3 class="text-xl font-bold text-gray-800 mb-4">معاينة المربع</h3>301 302 <div class="mb-8">303 <div id="boxPreview" class="p-4 border-r-4 rounded-lg">304 <div class="flex items-start">305 <i id="boxPreviewIcon" class="fas fa-sticky-note mt-1 mr-2 text-lg"></i>306 <div>307 <strong id="boxPreviewTitle" class="block mb-1">ملاحظة هامة</strong>308 <p id="boxPreviewContent" class="text-sm">هذا مثال لمحتوى المربع النصي الذي يمكنك تخصيصه حسب احتياجاتك.</p>309 </div>310 </div>311 </div>312 </div>313 314 <div class="relative">315 <h4 class="text-lg font-medium text-gray-700 mb-2">كود HTML</h4>316 <pre id="boxHtmlCode" class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"></pre>317 <button id="copyBoxHtml" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded text-xs">318 <i data-feather="copy" class="w-3 h-3 inline"></i> نسخ319 </button>320 </div>321 322 <div class="relative mt-4">323 <h4 class="text-lg font-medium text-gray-700 mb-2">كود CSS</h4>324 <pre id="boxCssCode" class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"></pre>325 <button id="copyBoxCss" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded text-xs">326 <i data-feather="copy" class="w-3 h-3 inline"></i> نسخ327 </button>328 </div>329 </div>330 </div>331 </div>332 333 <!-- Tables Generator Tab -->334 <div id="tables" class="tab-content">335 <div class="bg-white rounded-xl shadow-md p-6 card">336 <h3 class="text-xl font-bold text-gray-800 mb-4">مولد الجداول الأنيقة</h3>337 338 <div class="mb-6">339 <div class="flex flex-wrap gap-4 mb-4">340 <button id="addRowBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">341 <i data-feather="plus" class="inline mr-1"></i> إضافة صف342 </button>343 <button id="addColBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">344 <i data-feather="plus" class="inline mr-1"></i> إضافة عمود345 </button>346 <button id="delRowBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded">347 <i data-feather="minus" class="inline mr-1"></i> حذف صف348 </button>349 <button id="delColBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded">350 <i data-feather="minus" class="inline mr-1"></i> حذف عمود351 </button>352 </div>353 354 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">355 <div>356 <label class="block text-gray-700 mb-2">عنوان الجدول</label>357 <input type="text" id="tableCaption" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="وصف الجدول">358 </div>359 <div class="flex items-center">360 <input type="checkbox" id="tableHeader" class="mr-2" checked>361 <label class="text-gray-700">صف العناوين</label>362 </div>363 </div>364 </div>365 366 <div class="overflow-auto mb-6">367 <table id="editableTable" class="w-full border-collapse">368 <thead>369 <tr>370 <th class="border p-2 bg-gray-100"><input type="text" class="w-full p-1 border rounded" value="العنوان 1"></th>371 <th class="border p-2 bg-gray-100"><input type="text" class="w-full p-1 border rounded" value="العنوان 2"></th>372 </tr>373 </thead>374 <tbody>375 <tr>376 <td class="border p-2"><input type="text" class="w-full p-1 border rounded" value="بيانات 1"></td>377 <td class="border p-2"><input type="text" class="w-full p-1 border rounded" value="بيانات 2"></td>378 </tr>379 <tr>380 <td class="border p-2"><input type="text" class="w-full p-1 border rounded" value="بيانات 3"></td>381 <td class="border p-2"><input type="text" class="w-full p-1 border rounded" value="بيانات 4"></td>382 </tr>383 </tbody>384 </table>385 </div>386 387 <button id="generateTableCode" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition mb-6">388 توليد كود الجدول389 </button>390 391 <div class="relative">392 <h4 class="text-lg font-medium text-gray-700 mb-2">كود HTML</h4>393 <pre id="tableHtmlCode" class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"></pre>394 <button id="copyTableHtml" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded text-xs">395 <i data-feather="copy" class="w-3 h-3 inline"></i> نسخ396 </button>397 </div>398 399 <div class="relative mt-4">400 <h4 class="text-lg font-medium text-gray-700 mb-2">كود CSS</h4>401 <pre id="tableCssCode" class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"></pre>402 <button id="copyTableCss" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded text-xs">403 <i data-feather="copy" class="w-3 h-3 inline"></i> نسخ404 </button>405 </div>406 </div>407 </div>408 </main>409 <!-- Footer -->410 <footer class="bg-gray-800 text-white py-8 border-t border-gray-700">411 <div class="container mx-auto px-4">412 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">413 <div>414 <h3 class="text-xl font-bold mb-4 flex items-center">415 <i data-feather="code" class="w-5 h-5 mr-2"></i> CodeGenius416 </h3>417 <p class="text-gray-400">أداة متكاملة لتوليد أكواد HTML و CSS بسهولة واحترافية</p>418 </div>419 <div>420 <h3 class="text-xl font-bold mb-4">روابط سريعة</h3>421 <ul class="space-y-2">422 <li><a href="#buttons" class="text-gray-400 hover:text-white transition">مولد الأزرار</a></li>423 <li><a href="#boxes" class="text-gray-400 hover:text-white transition">مولد المربعات</a></li>424 <li><a href="#tables" class="text-gray-400 hover:text-white transition">مولد الجداول</a></li>425 </ul>426 </div>427 <div>428 <h3 class="text-xl font-bold mb-4">تواصل معنا</h3>429 <div class="flex space-x-4">430 <a href="#" class="text-gray-400 hover:text-white transition">431 <i data-feather="twitter" class="w-5 h-5"></i>432 </a>433 <a href="#" class="text-gray-400 hover:text-white transition">434 <i data-feather="github" class="w-5 h-5"></i>435 </a>436 <a href="#" class="text-gray-400 hover:text-white transition">437 <i data-feather="mail" class="w-5 h-5"></i>438 </a>439 </div>440 </div>441 </div>442 <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">443 <p>© 2023 CodeGenius Wizard - جميع الحقوق محفوظة</p>444 </div>445 </div>446 </footer>447<script>448 // Tab switching449 document.querySelectorAll('.tab-button').forEach(button => {450 button.addEventListener('click', () => {451 document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('border-purple-600', 'text-purple-600'));452 button.classList.add('border-purple-600', 'text-purple-600');453 454 document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));455 document.getElementById(button.dataset.tab).classList.add('active');456 });457 });458 459 // Button Generator Logic460 document.getElementById('buttonIcon').addEventListener('change', function() {461 document.getElementById('buttonIconSelect').classList.toggle('hidden', !this.checked);462 });463 464 document.getElementById('generateButtonCode').addEventListener('click', function() {465 const text = document.getElementById('buttonText').value;466 const url = document.getElementById('buttonUrl').value;467 const bgColor = document.getElementById('buttonBgColor').value;468 const textColor = document.getElementById('buttonTextColor').value;469 const borderRadius = document.getElementById('buttonBorderRadius').value;470 const hasShadow = document.getElementById('buttonShadow').checked;471 const hasIcon = document.getElementById('buttonIcon').checked;472 const icon = document.getElementById('buttonIconSelect').value;473 474 // Update preview475 const preview = document.getElementById('buttonPreview');476 preview.textContent = text;477 preview.style.backgroundColor = bgColor;478 preview.style.color = textColor;479 preview.className = `px-6 py-3 rounded-lg transition ${borderRadius} ${hasShadow ? 'shadow' : ''}`;480 481 if (hasIcon) {482 preview.innerHTML = `<i data-feather="${icon}" class="inline mr-2"></i>${text}`;483 feather.replace();484 }485 486 // Generate HTML code487 let htmlCode = `<a href="${url}" class="inline-block px-6 py-3 ${borderRadius} ${hasShadow ? 'shadow' : ''}" style="background-color: ${bgColor}; color: ${textColor}; text-decoration: none;">`;488 if (hasIcon) {489 htmlCode += `<i data-feather="${icon}"></i> `;490 }491 htmlCode += `${text}</a>`;492 493 if (hasIcon) {494 htmlCode += '\n\n<!-- تضمين Feather Icons -->\n<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"><\/script>\n<script>feather.replace();<\/script>';495 }496 497 document.getElementById('buttonHtmlCode').textContent = htmlCode;498 499 // Generate CSS code500 const cssCode = `/* أنماط الزر */501a {502 display: inline-block;503 padding: 0.75rem 1.5rem;504 background-color: ${bgColor};505 color: ${textColor};506 text-decoration: none;507 transition: all 0.3s ease;508 ${hasShadow ? 'box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);' : ''}509 ${borderRadius === 'rounded-none' ? 'border-radius: 0;' : ''}510 ${borderRadius === 'rounded' ? 'border-radius: 0.25rem;' : ''}511 ${borderRadius === 'rounded-lg' ? 'border-radius: 0.5rem;' : ''}512 ${borderRadius === 'rounded-full' ? 'border-radius: 9999px;' : ''}513}514 515a:hover {516 opacity: 0.9;517 transform: translateY(-1px);518 ${hasShadow ? 'box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);' : ''}519}`;520 521 document.getElementById('buttonCssCode').textContent = cssCode;522 });523 524 // Box Generator Logic525 document.getElementById('generateBoxCode').addEventListener('click', function() {526 const type = document.getElementById('boxType').value;527 const title = document.getElementById('boxTitle').value;528 const content = document.getElementById('boxContent').value;529 const hasIcon = document.getElementById('boxIcon').checked;530 const hasHover = document.getElementById('boxHoverEffect').checked;531 532 // Update preview533 const preview = document.getElementById('boxPreview');534 preview.className = `p-4 border-r-4 rounded-lg ${type}-box`;535 536 if (type === 'note') {537 preview.style.borderColor = '#6f42c1';538 preview.style.backgroundColor = '#f8f3fc';539 document.getElementById('boxPreviewIcon').className = 'fas fa-sticky-note mt-1 mr-2 text-lg text-purple-600';540 } else if (type === 'tip') {541 preview.style.borderColor = '#0dcaf0';542 preview.style.backgroundColor = '#f0f9ff';543 document.getElementById('boxPreviewIcon').className = 'fas fa-lightbulb mt-1 mr-2 text-lg text-blue-400';544 } else if (type === 'warning') {545 preview.style.borderColor = '#d63384';546 preview.style.backgroundColor = '#fdf2f5';547 document.getElementById('boxPreviewIcon').className = 'fas fa-exclamation-triangle mt-1 mr-2 text-lg text-pink-600';548 } else {549 preview.style.borderColor = '#20c997';550 preview.style.backgroundColor = '#e8f7f3';551 document.getElementById('boxPreviewIcon').className = 'fas fa-info-circle mt-1 mr-2 text-lg text-teal-500';552 }553 554 document.getElementById('boxPreviewTitle').textContent = title;555 document.getElementById('boxPreviewContent').textContent = content;556 557 if (!hasIcon) {558 document.getElementById('boxPreviewIcon').style.display = 'none';559 } else {560 document.getElementById('boxPreviewIcon').style.display = 'inline-block';561 }562 563 // Generate HTML code564 let htmlCode = `<div class="blogger-box ${type}-box">\n`;565 if (hasIcon) {566 if (type === 'note') {567 htmlCode += ` <i class="fas fa-sticky-note icon"></i>\n`;568 } else if (type === 'tip') {569 htmlCode += ` <i class="fas fa-lightbulb icon"></i>\n`;570 } else if (type === 'warning') {571 htmlCode += ` <i class="fas fa-exclamation-triangle icon"></i>\n`;572 } else {573 htmlCode += ` <i class="fas fa-info-circle icon"></i>\n`;574 }575 }576 htmlCode += ` <strong>${title}:</strong> ${content}\n</div>`;577 578 document.getElementById('boxHtmlCode').textContent = htmlCode;579 580 // Generate CSS code581 let cssCode = `/* تنسيق الصناديق */582.blogger-box {583 margin: 1.5rem 0;584 padding: 1.5rem;585 border-radius: 0.5rem;586 font-size: 1rem;587 direction: rtl;588 transition: all 0.3s ease;589 position: relative;590 background-clip: padding-box;591 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);592}593 594.blogger-box i.icon {595 margin-left: 0.75rem;596 margin-right: 0.75rem;597 font-size: 1.5rem;598 vertical-align: middle;599}`;600 601 if (hasHover) {602 cssCode += `\n\n/* تأثيرات التحويم */603.blogger-box:hover {604 transform: translateY(-3px);605 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);606}607 608.blogger-box i.icon {609 transition: transform 0.3s ease;610}611 612.blogger-box:hover i.icon {613 transform: rotate(10deg) scale(1.1);614}`;615 }616 617 cssCode += `\n\n/* أنماط الصناديق */618.note-box {619 border-right: 4px solid #6f42c1;620 background-color: #f8f3fc;621 color: #562f99;622}623 624.tip-box {625 border-right: 4px solid #0dcaf0;626 background-color: #f0f9ff;627 color: #0b7bac;628}629 630.warning-box {631 border-right: 4px solid #d63384;632 background-color: #fdf2f5;633 color: #a6205f;634}635 636.info-box {637 border-right: 4px solid #20c997;638 background-color: #e8f7f3;639 color: #0d7a5d;640}`;641 642 document.getElementById('boxCssCode').textContent = cssCode;643 });644 645 // Table Generator Logic646 document.getElementById('addRowBtn').addEventListener('click', function() {647 const table = document.getElementById('editableTable');648 const tbody = table.querySelector('tbody');649 const rowCount = tbody.rows.length;650 const colCount = tbody.rows[0].cells.length;651 652 const newRow = tbody.insertRow();653 for (let i = 0; i < colCount; i++) {654 const cell = newRow.insertCell();655 cell.className = 'border p-2';656 const input = document.createElement('input');657 input.type = 'text';658 input.className = 'w-full p-1 border rounded';659 input.value = `بيانات ${rowCount + 1}.${i + 1}`;660 cell.appendChild(input);661 }662 });663 664 document.getElementById('addColBtn').addEventListener('click', function() {665 const table = document.getElementById('editableTable');666 const headerRow = table.querySelector('thead tr');667 const bodyRows = table.querySelectorAll('tbody tr');668 669 // Add header cell670 const headerCell = headerRow.insertCell();671 headerCell.className = 'border p-2 bg-gray-100';672 const headerInput = document.createElement('input');673 headerInput.type = 'text';674 headerInput.className = 'w-full p-1 border rounded';675 headerInput.value = `العنوان ${headerRow.cells.length}`;676 headerCell.appendChild(headerInput);677 678 // Add cells to each row679 bodyRows.forEach((row, index) => {680 const cell = row.insertCell();681 cell.className = 'border p-2';682 const input = document.createElement('input');683 input.type = 'text';684 input.className = 'w-full p-1 border rounded';685 input.value = `بيانات ${index + 1}.${row.cells.length}`;686 cell.appendChild(input);687 });688 });689 690 document.getElementById('delRowBtn').addEventListener('click', function() {691 const tbody = document.querySelector('#editableTable tbody');692 if (tbody.rows.length > 1) {693 tbody.deleteRow(tbody.rows.length - 1);694 }695 });696 697 document.getElementById('delColBtn').addEventListener('click', function() {698 const table = document.getElementById('editableTable');699 const headerRow = table.querySelector('thead tr');700 const bodyRows = table.querySelectorAll('tbody tr');701 702 if (headerRow.cells.length > 1) {703 headerRow.deleteCell(headerRow.cells.length - 1);704 705 bodyRows.forEach(row => {706 if (row.cells.length > 1) {707 row.deleteCell(row.cells.length - 1);708 }709 });710 }711 });712 713 document.getElementById('generateTableCode').addEventListener('click', function() {714 const table = document.getElementById('editableTable');715 const caption = document.getElementById('tableCaption').value;716 const hasHeader = document.getElementById('tableHeader').checked;717 718 let htmlCode = '<table border="1" class="w-full border-collapse">\n';719 720 if (caption) {721 htmlCode += ` <caption>${caption}</caption>\n`;722 }723 724 // Header725 if (hasHeader) {726 htmlCode += ' <thead>\n <tr>\n';727 const headerRow = table.querySelector('thead tr');728 for (let i = 0; i < headerRow.cells.length; i++) {729 const input = headerRow.cells[i].querySelector('input');730 htmlCode += ` <th class="border p-2 bg-gray-100">${input.value}</th>\n`;731 }732 htmlCode += ' </tr>\n </thead>\n';733 }734 735 // Body736 htmlCode += ' <tbody>\n';737 const bodyRows = table.querySelectorAll('tbody tr');738 bodyRows.forEach(row => {739 htmlCode += ' <tr>\n';740 for (let i = 0; i < row.cells.length; i++) {741 const input = row.cells[i].querySelector('input');742 htmlCode += ` <td class="border p-2">${input.value}</td>\n`;743 }744 htmlCode += ' </tr>\n';745 });746 htmlCode += ' </tbody>\n</table>';747 748 document.getElementById('tableHtmlCode').textContent = htmlCode;749 750 // CSS Code751 const cssCode = `/* تنسيق الجدول */752table {753 width: 100%;754 border-collapse: collapse;755 margin: 1rem 0;756 font-size: 0.9rem;757}758 759th, td {760 border: 1px solid #ddd;761 padding: 0.5rem;762 text-align: right;763}764 765th {766 background-color: #f8f9fa;767 font-weight: 500;768}769 770tr:nth-child(even) {771 background-color: #f9f9f9;772}773 774caption {775 caption-side: top;776 font-weight: bold;777 margin-bottom: 0.5rem;778}`;779 780 document.getElementById('tableCssCode').textContent = cssCode;781 });782 // Copy buttons functionality with toast notification783 document.querySelectorAll('[id^="copy"]').forEach(button => {784 button.addEventListener('click', function() {785 const codeId = this.id.replace('copy', '').toLowerCase() + 'Code';786 const codeElement = document.getElementById(codeId);787 const text = codeElement.textContent;788 789 // Create toast notification790 const toast = document.createElement('div');791 toast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';792 toast.innerHTML = '<i data-feather="check-circle" class="mr-2"></i> تم نسخ الكود بنجاح!';793 794 document.body.appendChild(toast);795 feather.replace();796 797 // Remove toast after 3 seconds798 setTimeout(() => {799 toast.remove();800 }, 3000);801 802 navigator.clipboard.writeText(text);803 });804 });805// Dark Mode Toggle806 const darkModeToggle = document.getElementById('darkModeToggle');807 const html = document.documentElement;808 809 darkModeToggle.addEventListener('click', () => {810 html.classList.toggle('dark');811 const isDark = html.classList.contains('dark');812 localStorage.setItem('darkMode', isDark);813 feather.replace();814 });815 816 // Check for saved dark mode preference817 if (localStorage.getItem('darkMode') === 'true') {818 html.classList.add('dark');819 }820 821 // Update dark mode icon822 function updateDarkModeIcon() {823 const icon = darkModeToggle.querySelector('i');824 if (html.classList.contains('dark')) {825 icon.setAttribute('data-feather', 'sun');826 } else {827 icon.setAttribute('data-feather', 'moon');828 }829 feather.replace();830 }831 832 updateDarkModeIcon();833 834 // Initialize feather icons835 feather.replace();836</script>837</body>838</html>839