Ayoub Playground
ارفع ملفاتك، عدّل الكود، وشاهد النتيجة مباشرة بأسلوب عصري.
📂 رفع HTML
⚡ تشغيل المعاينة
index.html
style.css
script.js
Live Editing
<section class="hero"> <div class="badge">✨ Ayoub Project</div> <h1>Build something beautiful.</h1> <p>هذه معاينة أولية داخل محرر Ayoub. عدّل HTML و CSS و JavaScript وشاهد النتيجة فورًا.</p> <button class="hero-btn">ابدأ الآن 🚀</button> </section>
body { margin: 0; min-height: 100vh; display: grid; place-items: center; font-family: Arial, sans-serif; background: linear-gradient(135deg, #f6f7fb, #eef3ff); } .hero { width: min(680px, calc(100% - 32px)); padding: 40px; border-radius: 28px; text-align: center; background: white; box-shadow: 0 20px 50px rgba(72, 87, 129, 0.15); } .badge { display: inline-block; margin-bottom: 14px; padding: 8px 14px; border-radius: 999px; background: #efe9ff; color: #6b4dff; font-weight: 700; } h1 { margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3.2rem); } p { margin: 0 auto 20px; max-width: 52ch; color: #556070; line-height: 1.8; } .hero-btn { border: none; padding: 14px 24px; border-radius: 14px; background: linear-gradient(135deg, #7c5cff, #4fa8ff); color: white; font-size: 1rem; cursor: pointer; }
document.querySelector('.hero-btn')?.addEventListener('click', () => { alert('Welcome to Ayoub Playground ✨'); });
Preview
معاينة فورية للمشروع الحالي
🔄 تحديث
