Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>زخرفة النصوص العربية | Just7saud</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| min-height: 100vh; | |
| } | |
| .text-shadow { | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| .decorated-text { | |
| font-size: 1.5rem; | |
| line-height: 2.5rem; | |
| text-align: center; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .copy-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .copy-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .copy-btn.copied { | |
| background-color: #10b981 ; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-pen-fancy text-3xl mr-3 text-yellow-300"></i> | |
| <h1 class="text-2xl font-bold text-shadow">زخرفة النصوص العربية</h1> | |
| </div> | |
| <div class="text-sm"> | |
| <span>جميع الحقوق محفوظة © 2023</span> | |
| <span class="font-bold text-yellow-300">Just7saud</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Hero Section --> | |
| <section class="bg-white rounded-xl shadow-lg p-6 mb-8 text-center fade-in"> | |
| <h2 class="text-3xl font-bold mb-4 text-blue-800">زخرف اسمك أو نصك العربي باحترافية</h2> | |
| <p class="text-gray-600 mb-6">أدخل النص العربي في الحقل أدناه واحصل على عشرات الزخارف الجميلة لنصك</p> | |
| <div class="relative mb-6"> | |
| <textarea id="inputText" class="w-full p-4 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-xl" rows="4" placeholder="اكتب النص الذي تريد زخرفته هنا..."></textarea> | |
| <div class="absolute bottom-3 left-3 flex space-x-2"> | |
| <button id="clearBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded-lg text-sm transition"> | |
| <i class="fas fa-trash-alt mr-1"></i> مسح | |
| </button> | |
| </div> | |
| </div> | |
| <button id="generateBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition transform hover:scale-105 shadow-lg"> | |
| <i class="fas fa-magic mr-2"></i> زخرفة النص | |
| </button> | |
| </section> | |
| <!-- Decorated Text Results --> | |
| <section id="resultsSection" class="hidden bg-white rounded-xl shadow-lg p-6 mb-8 fade-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-blue-800">نتائج الزخرفة</h3> | |
| <div class="text-sm text-gray-500"> | |
| <span>إضغط على أي زخرفة لنسخها</span> | |
| </div> | |
| </div> | |
| <div id="decoratedResults" class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Decorated texts will appear here --> | |
| </div> | |
| </section> | |
| <!-- How To Use Section --> | |
| <section class="bg-white rounded-xl shadow-lg p-6 mb-8 fade-in"> | |
| <h3 class="text-2xl font-bold text-blue-800 mb-4">كيفية استخدام الموقع</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg text-center"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-keyboard text-blue-600 text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold mb-2">اكتب النص</h4> | |
| <p class="text-gray-600 text-sm">قم بكتابة النص العربي الذي تريد زخرفته في الحقل المخصص</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg text-center"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-magic text-purple-600 text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold mb-2">انقر على زخرفة</h4> | |
| <p class="text-gray-600 text-sm">اضغط على زر الزخرفة لتحويل النص إلى أشكال زخرفية متنوعة</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-copy text-green-600 text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold mb-2">انسخ النتيجة</h4> | |
| <p class="text-gray-600 text-sm">اضغط على أي زخرفة لنسخها واستخدامها حيثما تريد</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="bg-white rounded-xl shadow-lg p-6 fade-in"> | |
| <h3 class="text-2xl font-bold text-blue-800 mb-6">مميزات موقعنا</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-star text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">زخارف متنوعة</h4> | |
| <p class="text-gray-600 text-sm">نقدم عشرات الأشكال الزخرفية المختلفة للنصوص العربية</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-bolt text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">سرعة الأداء</h4> | |
| <p class="text-gray-600 text-sm">نتائج فورية دون أي تأخير أو انتظار</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-mobile-alt text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">متوافق مع جميع الأجهزة</h4> | |
| <p class="text-gray-600 text-sm">يمكنك استخدام الموقع على الهاتف أو الكمبيوتر</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-lock text-red-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">آمن وسري</h4> | |
| <p class="text-gray-600 text-sm">لا نحفظ أي نصوص تدخلها في موقعنا</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="gradient-bg text-white py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-pen-fancy text-2xl mr-3 text-yellow-300"></i> | |
| <span class="text-xl font-bold">زخرفة النصوص العربية</span> | |
| </div> | |
| <p class="text-sm mt-2 text-gray-300">أجمل زخارف للنصوص العربية بأشكال مميزة</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-yellow-300 transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="hover:text-yellow-300 transition"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="hover:text-yellow-300 transition"> | |
| <i class="fab fa-telegram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-300"> | |
| <p>جميع الحقوق محفوظة © 2023 <span class="font-bold text-yellow-300">Just7saud</span>. لا يسمح بنسخ أو إعادة نشر أي جزء من هذا الموقع دون إذن.</p> | |
| <p class="mt-2">زوروا موقعنا: <a href="https://just7saud.com" class="text-yellow-300 hover:underline" target="_blank">just7saud.com</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Action Button --> | |
| <div class="fixed bottom-6 right-6"> | |
| <button id="scrollTopBtn" class="bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition transform hover:scale-110 hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| </div> | |
| <script> | |
| // Arabic text decorators | |
| const decorators = [ | |
| // Fancy fonts | |
| { name: "زخرفة إنجليزية", func: (text) => text.replace(/[ء-ي]/g, c => String.fromCharCode(c.charCodeAt(0)+1584)) }, | |
| { name: "زخرفة مميزة ١", func: (text) => text.replace(/[ء-ي]/g, c => String.fromCharCode(c.charCodeAt(0)+1585)) }, | |
| { name: "زخرفة مميزة ٢", func: (text) => text.replace(/[ء-ي]/g, c => String.fromCharCode(c.charCodeAt(0)+1586)) }, | |
| { name: "زخرفة مميزة ٣", func: (text) => text.replace(/[ء-ي]/g, c => String.fromCharCode(c.charCodeAt(0)+1587)) }, | |
| { name: "زخرفة مميزة ٤", func: (text) => text.replace(/[ء-ي]/g, c => String.fromCharCode(c.charCodeAt(0)+1588)) }, | |
| // Symbol decorations | |
| { name: "زخرفة بالنجوم", func: (text) => "✦ " + text.split("").join(" ✦ ") + " ✦" }, | |
| { name: "زخرفة بالقلوب", func: (text) => "❤ " + text.split("").join(" ❤ ") + " ❤" }, | |
| { name: "زخرفة بالزهور", func: (text) => "✿ " + text.split("").join(" ✿ ") + " ✿" }, | |
| // Reversed text | |
| { name: "نص معكوس", func: (text) => text.split("").reverse().join("") }, | |
| // Bold and fancy | |
| { name: "نص سميك", func: (text) => text.split("").map(c => `𝐁${c}𝐁`).join("").replace(/𝐁𝐁/g, "𝐁") }, | |
| { name: "نص مائل", func: (text) => text.split("").map(c => `𝐼${c}𝐼`).join("").replace(/𝐼𝐼/g, "𝐼") }, | |
| // Small caps | |
| { name: "حروف صغيرة", func: (text) => text.toLowerCase() }, | |
| // Alternating case | |
| { name: "حروف متناوبة", func: (text) => { | |
| let result = ""; | |
| for (let i = 0; i < text.length; i++) { | |
| result += i % 2 === 0 ? text[i].toUpperCase() : text[i].toLowerCase(); | |
| } | |
| return result; | |
| }}, | |
| // Double text | |
| { name: "نص مكرر", func: (text) => text + " " + text }, | |
| // Encircled | |
| { name: "نص داخل دوائر", func: (text) => text.split("").map(c => `ⓐ${c}ⓩ`).join("").replace(/ⓐⓩ/g, " ") }, | |
| // Squared | |
| { name: "نص داخل مربعات", func: (text) => text.split("").map(c => `🄰${c}🅉`).join("").replace(/🄰🅉/g, " ") }, | |
| // Underlined | |
| { name: "نص مسطر", func: (text) => text.split("").join("̲") + "̲" }, | |
| // Strikethrough | |
| { name: "نص مشطوب", func: (text) => text.split("").join("̶") + "̶" }, | |
| // Dotted | |
| { name: "نص منقط", func: (text) => text.split("").join("̇") + "̇" }, | |
| // Wavy | |
| { name: "نص مموج", func: (text) => text.split("").join("̰") + "̰" } | |
| ]; | |
| // DOM elements | |
| const inputText = document.getElementById('inputText'); | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const clearBtn = document.getElementById('clearBtn'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const decoratedResults = document.getElementById('decoratedResults'); | |
| const scrollTopBtn = document.getElementById('scrollTopBtn'); | |
| // Generate decorated texts | |
| generateBtn.addEventListener('click', () => { | |
| const text = inputText.value.trim(); | |
| if (!text) { | |
| alert("الرجاء إدخال نص لزخرفته"); | |
| return; | |
| } | |
| decoratedResults.innerHTML = ''; | |
| decorators.forEach((decorator, index) => { | |
| try { | |
| const decoratedText = decorator.func(text); | |
| const card = document.createElement('div'); | |
| card.className = 'bg-gray-50 hover:bg-gray-100 rounded-lg p-4 border border-gray-200 transition cursor-pointer'; | |
| card.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-medium text-blue-600">${decorator.name}</span> | |
| <button class="copy-btn bg-gray-200 hover:bg-gray-300 text-gray-700 px-2 py-1 rounded text-xs"> | |
| <i class="far fa-copy mr-1"></i> نسخ | |
| </button> | |
| </div> | |
| <div class="decorated-text" style="font-family: 'Arial', sans-serif">${decoratedText}</div> | |
| `; | |
| const copyBtn = card.querySelector('.copy-btn'); | |
| copyBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| navigator.clipboard.writeText(decoratedText).then(() => { | |
| copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> تم النسخ!'; | |
| copyBtn.classList.add('copied'); | |
| setTimeout(() => { | |
| copyBtn.innerHTML = '<i class="far fa-copy mr-1"></i> نسخ'; | |
| copyBtn.classList.remove('copied'); | |
| }, 2000); | |
| }); | |
| }); | |
| card.addEventListener('click', () => { | |
| navigator.clipboard.writeText(decoratedText).then(() => { | |
| const originalBg = card.style.backgroundColor; | |
| card.style.backgroundColor = '#e6ffec'; | |
| setTimeout(() => { | |
| card.style.backgroundColor = originalBg; | |
| }, 300); | |
| }); | |
| }); | |
| decoratedResults.appendChild(card); | |
| } catch (e) { | |
| console.error(`Error with decorator ${decorator.name}:`, e); | |
| } | |
| }); | |
| resultsSection.classList.remove('hidden'); | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| // Clear input | |
| clearBtn.addEventListener('click', () => { | |
| inputText.value = ''; | |
| inputText.focus(); | |
| }); | |
| // Scroll to top button | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| scrollTopBtn.classList.remove('hidden'); | |
| } else { | |
| scrollTopBtn.classList.add('hidden'); | |
| } | |
| }); | |
| scrollTopBtn.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Focus input on page load | |
| window.addEventListener('load', () => { | |
| inputText.focus(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Suabdudbew/3mk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |