Hugging Face's logo

Spaces:
asranko45
/
taxsasboker
Running

App Files Community
taxsasboker / index.html
asranko45's picture
asranko45
Add 2 files
9178863 verified
raw
history blame contribute delete
65.2 kB
 <!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>
<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');
:root {
--neon-pink: #ff2d75;
--neon-blue: #0ff0fc;
--neon-purple: #bc13fe;
--neon-green: #00ff41;
--neon-yellow: #fff01f;
}
body {
font-family: 'Tajawal', sans-serif;
background-color: #0a0a0a;
color: white;
min-height: 100vh;
overflow-x: hidden;
}
.neon-text {
text-shadow: 0 0 5px var(--neon-pink),
0 0 10px var(--neon-pink),
0 0 20px var(--neon-pink);
animation: flicker 1.5s infinite alternate;
}
.neon-border {
box-shadow: 0 0 5px var(--neon-blue),
0 0 10px var(--neon-blue),
0 0 20px var(--neon-blue);
border: 1px solid var(--neon-blue);
animation: border-flicker 2s infinite alternate;
}
.neon-card {
transition: all 0.3s ease;
box-shadow: 0 0 10px rgba(188, 19, 254, 0.3);
}
.neon-card:hover {
transform: translateY(-5px);
box-shadow: 0 0 15px var(--neon-purple),
0 0 25px var(--neon-purple);
}
.neon-btn {
position: relative;
overflow: hidden;
transition: all 0.3s;
z-index: 1;
}
.neon-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: all 0.5s;
z-index: -1;
}
.neon-btn:hover::before {
left: 100%;
}
.neon-btn-pink {
background-color: var(--neon-pink);
color: white;
box-shadow: 0 0 5px var(--neon-pink),
0 0 10px var(--neon-pink);
}
.neon-btn-blue {
background-color: var(--neon-blue);
color: #0a0a0a;
box-shadow: 0 0 5px var(--neon-blue),
0 0 10px var(--neon-blue);
}
.neon-btn-purple {
background-color: var(--neon-purple);
color: white;
box-shadow: 0 0 5px var(--neon-purple),
0 0 10px var(--neon-purple);
}
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
animation: twinkle var(--duration) infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow: 0 0 5px var(--neon-pink),
0 0 10px var(--neon-pink),
0 0 20px var(--neon-pink);
}
20%, 24%, 55% {
text-shadow: none;
}
}
@keyframes border-flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
box-shadow: 0 0 5px var(--neon-blue),
0 0 10px var(--neon-blue),
0 0 20px var(--neon-blue);
border-color: var(--neon-blue);
}
20%, 24%, 55% {
box-shadow: none;
border-color: transparent;
}
}
.artwork-container {
position: relative;
overflow: hidden;
}
.artwork-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.artwork-container:hover .artwork-overlay {
opacity: 1;
}
.watermark {
position: absolute;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="0" y="50%" font-family="Arial" font-size="20" fill="rgba(255,255,255,0.1)" transform="rotate(-45, 100, 100)">معرض الفنون النيوني</text></svg>') repeat;
pointer-events: none;
z-index: 1;
}
.protected {
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.admin-panel {
background: rgba(10, 10, 10, 0.95);
border-left: 2px solid var(--neon-green);
box-shadow: -5px 0 15px rgba(0, 255, 65, 0.3);
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(0, 255, 65, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0); }
}
</style>
</head>
<body>
<!-- النجوم الخلفية -->
<div class="stars" id="stars"></div>
<!-- لوحة الإدارة (تظهر فقط للمسؤول) -->
<div id="admin-panel" class="admin-panel fixed top-0 right-0 h-full w-64 z-50 transform translate-x-full transition-transform duration-300 hidden">
<div class="p-4">
<h3 class="text-xl font-bold mb-4 text-center" style="color: var(--neon-green);">لوحة التحكم</h3>
<div class="mb-4">
<h4 class="font-semibold mb-2">إدارة الأعمال</h4>
<button class="neon-btn neon-btn-green w-full mb-2 py-2 rounded" onclick="showAddArtworkModal()">
<i class="fas fa-plus mr-2"></i>إضافة عمل جديد
</button>
<button class="neon-btn neon-btn-purple w-full mb-2 py-2 rounded" onclick="showEditArtworks()">
<i class="fas fa-edit mr-2"></i>تعديل الأعمال
</button>
</div>
<div class="mb-4">
<h4 class="font-semibold mb-2">إدارة المشتركين</h4>
<button class="neon-btn neon-btn-blue w-full mb-2 py-2 rounded" onclick="showSubscribersList()">
<i class="fas fa-users mr-2"></i>عرض المشتركين
</button>
</div>
<div class="mb-4">
<h4 class="font-semibold mb-2">المعاملات</h4>
<button class="neon-btn neon-btn-pink w-full mb-2 py-2 rounded" onclick="showTransactions()">
<i class="fas fa-receipt mr-2"></i>سجل المبيعات
</button>
</div>
<button class="neon-btn neon-btn-pink w-full mt-4 py-2 rounded" onclick="logoutAdmin()">
<i class="fas fa-sign-out-alt mr-2"></i>تسجيل الخروج
</button>
</div>
</div>
<!-- زر فتح لوحة الإدارة -->
<button id="admin-toggle" class="fixed top-4 right-4 z-50 bg-black text-white p-3 rounded-full shadow-lg hidden" onclick="toggleAdminPanel()">
<i class="fas fa-cog"></i>
</button>
<!-- شريط التنقل -->
<nav class="neon-border bg-black bg-opacity-80 p-4 sticky top-0 z-40">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-palette text-2xl mr-2" style="color: var(--neon-pink);"></i>
<h1 class="neon-text text-2xl font-bold">معرض الفنون النيوني</h1>
</div>
<div class="hidden md:flex space-x-4 space-x-reverse">
<a href="#gallery" class="neon-btn neon-btn-blue px-4 py-2 rounded-full">المعرض</a>
<a href="#about" class="neon-btn neon-btn-purple px-4 py-2 rounded-full">عن الفنان</a>
<a href="#contact" class="neon-btn neon-btn-pink px-4 py-2 rounded-full">تواصل معنا</a>
</div>
<button class="md:hidden text-white" onclick="toggleMobileMenu()">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<!-- قائمة الجوال -->
<div id="mobile-menu" class="hidden md:hidden mt-4 space-y-2">
<a href="#gallery" class="block neon-btn neon-btn-blue w-full py-2 rounded-full text-center">المعرض</a>
<a href="#about" class="block neon-btn neon-btn-purple w-full py-2 rounded-full text-center">عن الفنان</a>
<a href="#contact" class="block neon-btn neon-btn-pink w-full py-2 rounded-full text-center">تواصل معنا</a>
</div>
</nav>
<!-- قسم البطل -->
<section class="relative h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-black opacity-50"></div>
<video autoplay muted loop class="absolute w-full h-full object-cover z-0">
<source src="https://assets.mixkit.co/videos/preview/mixkit-neon-lights-abstract-background-1588-large.mp4" type="video/mp4">
</video>
<div class="container mx-auto px-4 z-10 text-center">
<h1 class="neon-text text-4xl md:text-6xl font-bold mb-6">أعمالي الفنية في عالم نيوني</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">اكتشف مجموعة الأعمال الفنية الحصرية المعروضة للبيع في بيئة تفاعلية فريدة</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#gallery" class="neon-btn neon-btn-pink px-8 py-3 rounded-full text-lg font-semibold">
<i class="fas fa-eye mr-2"></i>استكشف المعرض
</a>
<button onclick="showSubscribeModal()" class="neon-btn neon-btn-blue px-8 py-3 rounded-full text-lg font-semibold">
<i class="fas fa-envelope mr-2"></i>اشترك في النشرة
</a>
</div>
</div>
<div class="absolute bottom-10 left-0 right-0 text-center">
<a href="#gallery" class="inline-block animate-bounce">
<i class="fas fa-chevron-down text-3xl" style="color: var(--neon-blue);"></i>
</a>
</div>
</section>
<!-- قسم المعرض -->
<section id="gallery" class="py-16 bg-black bg-opacity-90">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="neon-text text-3xl md:text-4xl font-bold mb-4">معرض الأعمال الفنية</h2>
<p class="text-xl max-w-2xl mx-auto">تصفح مجموعة الأعمال الفنية الحصرية المعروضة للبيع. اضغط على أي عمل لمعرفة التفاصيل وشرائه.</p>
</div>
<!-- فلاتر المعرض -->
<div class="flex flex-wrap justify-center gap-4 mb-8">
<button class="neon-btn neon-btn-blue px-4 py-2 rounded-full filter-btn active" data-filter="all">الكل</button>
<button class="neon-btn neon-btn-purple px-4 py-2 rounded-full filter-btn" data-filter="painting">لوحات</button>
<button class="neon-btn neon-btn-pink px-4 py-2 rounded-full filter-btn" data-filter="digital">رقمية</button>
<button class="neon-btn neon-btn-green px-4 py-2 rounded-full filter-btn" data-filter="sculpture">منحوتات</button>
<button class="neon-btn neon-btn-yellow px-4 py-2 rounded-full filter-btn" data-filter="sold">مباعة</button>
</div>
<!-- أعمال المعرض -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8" id="artworks-grid">
<!-- سيتم إضافة الأعمال ديناميكياً هنا -->
</div>
</div>
</section>
<!-- قسم عن الفنان -->
<section id="about" class="py-16 bg-gradient-to-b from-black to-gray-900">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-1/2">
<div class="neon-border rounded-lg overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
alt="الفنان"
class="w-full h-auto">
<div class="watermark protected"></div>
</div>
</div>
<div class="lg:w-1/2">
<h2 class="neon-text text-3xl md:text-4xl font-bold mb-6">عن الفنان</h2>
<p class="text-lg mb-4">
مرحباً، أنا فنان تشكيلي متخصص في الفنون الرقمية والنيونية. أعمل في هذا المجال منذ أكثر من 10 سنوات، وقد شاركت أعمالي في العديد من المعارض المحلية والدولية.
</p>
<p class="text-lg mb-4">
يتميز أسلوبي الفني بمزج التقنيات الرقمية مع العناصر النيونية لخلق تجربة بصرية فريدة. أعمالي مستوحاة من الفضاء والطبيعة والتكنولوجيا الحديثة.
</p>
<p class="text-lg mb-6">
يمكنك اقتناء أي من أعمالي الفنية المعروضة هنا، كما يمكنك التواصل معي لطلب أعمال خاصة حسب رغبتك.
</p>
<div class="flex flex-wrap gap-4">
<button onclick="showCommissionModal()" class="neon-btn neon-btn-pink px-6 py-3 rounded-full font-semibold">
<i class="fas fa-paint-brush mr-2"></i>اطلب عملاً خاصاً
</button>
<button onclick="showSubscribeModal()" class="neon-btn neon-btn-blue px-6 py-3 rounded-full font-semibold">
<i class="fas fa-envelope mr-2"></i>اشترك في النشرة
</button>
</div>
</div>
</div>
</div>
</section>
<!-- قسم التواصل -->
<section id="contact" class="py-16 bg-black bg-opacity-90">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="neon-text text-3xl md:text-4xl font-bold mb-4">تواصل معنا</h2>
<p class="text-xl max-w-2xl mx-auto">للاستفسارات أو طلبات الأعمال الخاصة، لا تتردد في مراسلتنا</p>
</div>
<div class="max-w-3xl mx-auto">
<form id="contact-form" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="name" class="block mb-2 font-medium">الاسم الكامل</label>
<input type="text" id="name" name="name" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="email" class="block mb-2 font-medium">البريد الإلكتروني</label>
<input type="email" id="email" name="email" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div class="md:col-span-2">
<label for="subject" class="block mb-2 font-medium">الموضوع</label>
<input type="text" id="subject" name="subject" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div class="md:col-span-2">
<label for="message" class="block mb-2 font-medium">الرسالة</label>
<textarea id="message" name="message" rows="5" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
</div>
<div class="md:col-span-2 text-center">
<button type="submit" class="neon-btn neon-btn-pink px-8 py-3 rounded-full text-lg font-semibold">
<i class="fas fa-paper-plane mr-2"></i>إرسال الرسالة
</button>
</div>
</form>
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
<div class="p-6 neon-card rounded-lg">
<div class="text-4xl mb-4" style="color: var(--neon-pink);">
<i class="fas fa-envelope"></i>
</div>
<h3 class="text-xl font-semibold mb-2">البريد الإلكتروني</h3>
<p>[email protected]</p>
</div>
<div class="p-6 neon-card rounded-lg">
<div class="text-4xl mb-4" style="color: var(--neon-blue);">
<i class="fas fa-phone-alt"></i>
</div>
<h3 class="text-xl font-semibold mb-2">الهاتف</h3>
<p>+966 50 123 4567</p>
</div>
<div class="p-6 neon-card rounded-lg">
<div class="text-4xl mb-4" style="color: var(--neon-purple);">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3 class="text-xl font-semibold mb-2">المكان</h3>
<p>الرياض، المملكة العربية السعودية</p>
</div>
</div>
</div>
</div>
</section>
<!-- تذييل الصفحة -->
<footer class="bg-black py-8 border-t border-gray-800">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<div class="flex items-center">
<i class="fas fa-palette text-2xl mr-2" style="color: var(--neon-pink);"></i>
<h2 class="neon-text text-xl font-bold">معرض الفنون النيوني</h2>
</div>
<p class="mt-2 text-gray-400">© 2023 جميع الحقوق محفوظة</p>
</div>
<div class="flex space-x-6 space-x-reverse">
<a href="#" class="text-2xl hover:text-pink-500 transition" style="color: var(--neon-blue);">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-2xl hover:text-pink-500 transition" style="color: var(--neon-purple);">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-2xl hover:text-pink-500 transition" style="color: var(--neon-green);">
<i class="fab fa-behance"></i>
</a>
<a href="#" class="text-2xl hover:text-pink-500 transition" style="color: var(--neon-yellow);">
<i class="fab fa-pinterest"></i>
</a>
</div>
</div>
</div>
</footer>
<!-- نافذة الاشتراك -->
<div id="subscribe-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
<div class="bg-gray-900 rounded-xl p-8 max-w-md w-full relative neon-border">
<button onclick="hideModal('subscribe-modal')" class="absolute top-4 left-4 text-gray-400 hover:text-white">
<i class="fas fa-times text-xl"></i>
</button>
<h3 class="neon-text text-2xl font-bold mb-4 text-center">اشترك في نشرتنا</h3>
<p class="mb-6 text-center">احصل على آخر التحديثات والعروض الخاصة على أعمالنا الفنية</p>
<form id="subscribe-form" class="space-y-4">
<div>
<label for="sub-name" class="block mb-2">الاسم الكامل</label>
<input type="text" id="sub-name" name="name" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="sub-email" class="block mb-2">البريد الإلكتروني</label>
<input type="email" id="sub-email" name="email" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div class="pt-2">
<button type="submit" class="neon-btn neon-btn-pink w-full py-3 rounded-full font-semibold">
<i class="fas fa-paper-plane mr-2"></i>اشترك الآن
</button>
</div>
</form>
</div>
</div>
<!-- نافذة تفاصيل العمل الفني -->
<div id="artwork-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
<div class="bg-gray-900 rounded-xl p-8 max-w-4xl w-full relative neon-border overflow-y-auto" style="max-height: 90vh;">
<button onclick="hideModal('artwork-modal')" class="absolute top-4 left-4 text-gray-400 hover:text-white">
<i class="fas fa-times text-xl"></i>
</button>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="relative">
<img id="artwork-modal-img" src="" alt="العمل الفني" class="w-full h-auto rounded-lg">
<div class="watermark protected"></div>
</div>
<div>
<h3 id="artwork-modal-title" class="neon-text text-2xl font-bold mb-2"></h3>
<p id="artwork-modal-artist" class="text-gray-400 mb-4"></p>
<div class="flex items-center mb-4">
<div class="bg-gray-800 px-3 py-1 rounded-full text-sm mr-2" id="artwork-modal-category"></div>
<div class="bg-gray-800 px-3 py-1 rounded-full text-sm" id="artwork-modal-status"></div>
</div>
<p id="artwork-modal-description" class="mb-6"></p>
<div class="space-y-4 mb-6">
<div>
<span class="block text-gray-400">التاريخ</span>
<span id="artwork-modal-date" class="font-medium"></span>
</div>
<div>
<span class="block text-gray-400">الأبعاد</span>
<span id="artwork-modal-dimensions" class="font-medium"></span>
</div>
<div>
<span class="block text-gray-400">المواد المستخدمة</span>
<span id="artwork-modal-materials" class="font-medium"></span>
</div>
</div>
<div class="flex items-center justify-between border-t border-gray-800 pt-4">
<div>
<span class="block text-gray-400">السعر</span>
<span id="artwork-modal-price" class="text-2xl font-bold" style="color: var(--neon-green);"></span>
</div>
<button id="artwork-buy-btn" class="neon-btn neon-btn-pink px-6 py-3 rounded-full font-semibold">
<i class="fas fa-shopping-cart mr-2"></i>شراء العمل
</button>
</div>
</div>
</div>
</div>
</div>
<!-- نافذة الدفع -->
<div id="payment-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
<div class="bg-gray-900 rounded-xl p-8 max-w-md w-full relative neon-border">
<button onclick="hideModal('payment-modal')" class="absolute top-4 left-4 text-gray-400 hover:text-white">
<i class="fas fa-times text-xl"></i>
</button>
<h3 class="neon-text text-2xl font-bold mb-6 text-center">إتمام عملية الشراء</h3>
<div class="mb-6 p-4 bg-gray-800 rounded-lg">
<div class="flex justify-between mb-2">
<span class="text-gray-400">العمل الفني:</span>
<span id="payment-artwork-title" class="font-medium"></span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">المبلغ:</span>
<span id="payment-artwork-price" class="font-bold" style="color: var(--neon-green);"></span>
</div>
</div>
<form id="payment-form" class="space-y-4">
<div>
<label for="card-name" class="block mb-2">اسم صاحب البطاقة</label>
<input type="text" id="card-name" name="card-name" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="card-number" class="block mb-2">رقم البطاقة</label>
<input type="text" id="card-number" name="card-number" placeholder="1234 5678 9012 3456" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="card-expiry" class="block mb-2">تاريخ الانتهاء</label>
<input type="text" id="card-expiry" name="card-expiry" placeholder="MM/YY" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="card-cvc" class="block mb-2">رمز الأمان (CVC)</label>
<input type="text" id="card-cvc" name="card-cvc" placeholder="123" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
</div>
<div class="pt-4">
<button type="submit" class="neon-btn neon-btn-green w-full py-3 rounded-full font-semibold">
<i class="fas fa-lock mr-2"></i>دفع آمن
</button>
</div>
</form>
</div>
</div>
<!-- نافذة التحميل (تظهر بعد الدفع) -->
<div id="download-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
<div class="bg-gray-900 rounded-xl p-8 max-w-md w-full relative neon-border text-center">
<div class="text-6xl mb-4" style="color: var(--neon-green);">
<i class="fas fa-check-circle"></i>
</div>
<h3 class="neon-text text-2xl font-bold mb-2">شكراً لشرائك!</h3>
<p class="mb-6">تمت عملية الدفع بنجاح. يمكنك الآن تحميل العمل الفني بجودة عالية.</p>
<div class="mb-6 p-4 bg-gray-800 rounded-lg">
<div class="flex justify-between mb-2">
<span class="text-gray-400">العمل الفني:</span>
<span id="download-artwork-title" class="font-medium"></span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">رقم الطلب:</span>
<span id="download-order-id" class="font-medium">#NEON-2023-001</span>
</div>
</div>
<button id="download-btn" class="neon-btn neon-btn-blue w-full py-3 rounded-full font-semibold mb-4">
<i class="fas fa-download mr-2"></i>تحميل العمل
</button>
<button onclick="hideModal('download-modal')" class="text-gray-400 hover:text-white">
العودة إلى المعرض
</button>
</div>
</div>
<!-- نافذة طلب عمل خاص -->
<div id="commission-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
<div class="bg-gray-900 rounded-xl p-8 max-w-md w-full relative neon-border">
<button onclick="hideModal('commission-modal')" class="absolute top-4 left-4 text-gray-400 hover:text-white">
<i class="fas fa-times text-xl"></i>
</button>
<h3 class="neon-text text-2xl font-bold mb-6 text-center">طلب عمل فني خاص</h3>
<form id="commission-form" class="space-y-4">
<div>
<label for="commission-name" class="block mb-2">الاسم الكامل</label>
<input type="text" id="commission-name" name="name" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="commission-email" class="block mb-2">البريد الإلكتروني</label>
<input type="email" id="commission-email" name="email" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="commission-type" class="block mb-2">نوع العمل المطلوب</label>
<select id="commission-type" name="type" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
<option value="">اختر نوع العمل...</option>
<option value="painting">لوحة زيتية</option>
<option value="digital">عمل رقمي</option>
<option value="portrait">بورتريه</option>
<option value="abstract">عمل تجريدي</option>
<option value="other">أخرى</option>
</select>
</div>
<div>
<label for="commission-size" class="block mb-2">الحجم المطلوب</label>
<input type="text" id="commission-size" name="size" placeholder="مثال: 50x70 سم"
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="commission-description" class="block mb-2">وصف العمل المطلوب</label>
<textarea id="commission-description" name="description" rows="4" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
</div>
<div>
<label for="commission-budget" class="block mb-2">الميزانية المتوقعة</label>
<input type="text" id="commission-budget" name="budget"
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="commission-deadline" class="block mb-2">الموعد النهائي (اختياري)</label>
<input type="date" id="commission-deadline" name="deadline"
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div class="pt-2">
<button type="submit" class="neon-btn neon-btn-pink w-full py-3 rounded-full font-semibold">
<i class="fas fa-paper-plane mr-2"></i>إرسال الطلب
</button>
</div>
</form>
</div>
</div>
<!-- نافذة إضافة عمل جديد (للمسؤول) -->
<div id="add-artwork-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
<div class="bg-gray-900 rounded-xl p-8 max-w-2xl w-full relative neon-border overflow-y-auto" style="max-height: 90vh;">
<button onclick="hideModal('add-artwork-modal')" class="absolute top-4 left-4 text-gray-400 hover:text-white">
<i class="fas fa-times text-xl"></i>
</button>
<h3 class="neon-text text-2xl font-bold mb-6 text-center">إضافة عمل فني جديد</h3>
<form id="add-artwork-form" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="artwork-title" class="block mb-2">عنوان العمل</label>
<input type="text" id="artwork-title" name="title" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="artwork-category" class="block mb-2">التصنيف</label>
<select id="artwork-category" name="category" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
<option value="">اختر تصنيف...</option>
<option value="painting">لوحة</option>
<option value="digital">رقمي</option>
<option value="sculpture">منحوتة</option>
<option value="photography">تصوير</option>
</select>
</div>
<div>
<label for="artwork-price" class="block mb-2">السعر (دولار)</label>
<input type="number" id="artwork-price" name="price" min="0" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="artwork-status" class="block mb-2">الحالة</label>
<select id="artwork-status" name="status" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
<option value="available">متاح</option>
<option value="sold">مباع</option>
<option value="reserved">محجوز</option>
</select>
</div>
<div>
<label for="artwork-date" class="block mb-2">تاريخ الإنشاء</label>
<input type="date" id="artwork-date" name="date" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="artwork-dimensions" class="block mb-2">الأبعاد</label>
<input type="text" id="artwork-dimensions" name="dimensions" placeholder="مثال: 50x70 سم"
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div class="md:col-span-2">
<label for="artwork-materials" class="block mb-2">المواد المستخدمة</label>
<input type="text" id="artwork-materials" name="materials" placeholder="مثال: زيت على قماش، ألوان أكريليك"
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div class="md:col-span-2">
<label for="artwork-description" class="block mb-2">وصف العمل</label>
<textarea id="artwork-description" name="description" rows="4" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
</div>
<div class="md:col-span-2">
<label for="artwork-image" class="block mb-2">صورة العمل</label>
<div class="border-2 border-dashed border-gray-700 rounded-lg p-8 text-center">
<div id="artwork-image-preview" class="mb-4 hidden">
<img id="artwork-preview-img" src="#" alt="معاينة الصورة" class="max-h-48 mx-auto">
</div>
<label for="artwork-image-upload" class="cursor-pointer">
<div class="flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-3xl mb-2" style="color: var(--neon-blue);"></i>
<p class="mb-2">انقر لرفع صورة العمل</p>
<p class="text-sm text-gray-400">JPG, PNG أو GIF (الحجم الأقصى 5MB)</p>
</div>
<input type="file" id="artwork-image-upload" name="image" accept="image/*" class="hidden" required>
</label>
</div>
</div>
</div>
<div class="pt-4">
<button type="submit" class="neon-btn neon-btn-green w-full py-3 rounded-full font-semibold">
<i class="fas fa-plus mr-2"></i>إضافة العمل
</button>
</div>
</form>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// إنشاء النجوم الخلفية
createStars();
// بيانات الأعمال الفنية (في تطبيق حقيقي، هذه البيانات تأتي من قاعدة بيانات)
const artworks = [
{
id: 1,
title: "الكون النيوني",
artist: "فنان معرض الفنون النيوني",
category: "digital",
status: "available",
description: "عمل رقمي يجمع بين عناصر الكون والأنوار النيونية في تكوين فريد.",
date: "2023-05-15",
dimensions: "60x90 سم",
materials: "طباعة فنية عالية الجودة على قماش",
price: 1200,
image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
},
{
id: 2,
title: "مدينة المستقبل",
artist: "فنان معرض الفنون النيوني",
category: "painting",
status: "available",
description: "لوحة زيتية تصور مدينة المستقبل بأضواء نيونية ساحرة.",
date: "2023-03-22",
dimensions: "80x120 سم",
materials: "زيت على قماش",
price: 2500,
image: "https://images.unsplash.com/photo-1499781350541-7783f6c6a0c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80"
},
{
id: 3,
title: "الانعكاسات",
artist: "فنان معرض الفنون النيوني",
category: "digital",
status: "sold",
description: "عمل فني رقمي يصور انعكاسات الأضواء النيونية على الأسطح المائية.",
date: "2023-01-10",
dimensions: "50x50 سم",
materials: "طبعة فنية محدودة",
price: 800,
image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
},
{
id: 4,
title: "التموجات اللونية",
artist: "فنان معرض الفنون النيوني",
category: "painting",
status: "available",
description: "لوحة تجريدية تعبر عن تموجات الألوان النيونية في الفضاء.",
date: "2022-11-30",
dimensions: "70x70 سم",
materials: "ألوان أكريليك على قماش",
price: 1800,
image: "https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
},
{
id: 5,
title: "الانزياح الكوني",
artist: "فنان معرض الفنون النيوني",
category: "sculpture",
status: "available",
description: "منحوتة ثلاثية الأبعاد تجمع بين الخشب والإضاءة النيونية.",
date: "2023-02-18",
dimensions: "40x40x60 سم",
materials: "خشب، أنابيب نيون، معادن",
price: 3500,
image: "https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
},
{
id: 6,
title: "أطياف الضوء",
artist: "فنان معرض الفنون النيوني",
category: "digital",
status: "available",
description: "عمل فني رقمي يصور أطياف الضوء النيوني في الظلام.",
date: "2023-04-05",
dimensions: "60x80 سم",
materials: "طباعة فنية على ورق أرشفي",
price: 950,
image: "https://images.unsplash.com/photo-1517999144091-3d9dca6d1e43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1527&q=80"
}
];
// عرض الأعمال الفنية في الشبكة
displayArtworks(artworks);
// إعداد مستمعي الأحداث
setupEventListeners();
// محاكاة تسجيل دخول المسؤول (في تطبيق حقيقي، هذا يكون عبر نظام تسجيل دخول آمن)
simulateAdminLogin();
});
// إنشاء النجوم الخلفية
function createStars() {
const starsContainer = document.getElementById('stars');
const starsCount = 200;
for (let i = 0; i < starsCount; i++) {
const star = document.createElement('div');
star.className = 'star';
// أحجام عشوائية للنجوم
const size = Math.random() * 3;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
// مواقع عشوائية
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
// فترات وميض عشوائية
star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);
starsContainer.appendChild(star);
}
}
// عرض الأعمال الفنية في الشبكة
function displayArtworks(artworks) {
const grid = document.getElementById('artworks-grid');
grid.innerHTML = '';
artworks.forEach(artwork => {
const artworkElement = document.createElement('div');
artworkElement.className = 'neon-card rounded-lg overflow-hidden artwork-container';
artworkElement.dataset.category = artwork.category;
artworkElement.dataset.status = artwork.status;
artworkElement.innerHTML = `
<div class="relative h-64 overflow-hidden">
<img src="${artwork.image}" alt="${artwork.title}" class="w-full h-full object-cover">
<div class="watermark protected"></div>
</div>
<div class="p-4">
<h3 class="text-xl font-semibold mb-1">${artwork.title}</h3>
<p class="text-gray-400 mb-2">${artwork.artist}</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold" style="color: var(--neon-green);">${artwork.price} دولار</span>
<button class="text-sm px-3 py-1 rounded-full ${artwork.status === 'available' ? 'bg-green-900 text-green-300' : 'bg-red-900 text-red-300'}">
${artwork.status === 'available' ? 'متاح' : 'مباع'}
</button>
</div>
</div>
<div class="artwork-overlay">
<button class="neon-btn neon-btn-pink px-4 py-2 rounded-full mb-2 view-artwork-btn" data-id="${artwork.id}">
<i class="fas fa-eye mr-2"></i>عرض التفاصيل
</button>
${artwork.status === 'available' ?
`<button class="neon-btn neon-btn-blue px-4 py-2 rounded-full buy-artwork-btn" data-id="${artwork.id}">
<i class="fas fa-shopping-cart mr-2"></i>شراء العمل
</button>` : ''}
</div>
`;
grid.appendChild(artworkElement);
});
// إضافة مستمعي الأحداث للأزرار الجديدة
document.querySelectorAll('.view-artwork-btn').forEach(btn => {
btn.addEventListener('click', function() {
const artworkId = parseInt(this.dataset.id);
showArtworkDetails(artworkId);
});
});
document.querySelectorAll('.buy-artwork-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const artworkId = parseInt(this.dataset.id);
initiatePurchase(artworkId);
});
});
}
// إعداد مستمعي الأحداث
function setupEventListeners() {
// تصفية الأعمال حسب التصنيف
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
const filter = this.dataset.filter;
filterArtworks(filter);
});
});
// نموذج الاتصال
document.getElementById('contact-form').addEventListener('submit', function(e) {
e.preventDefault();
alert('تم إرسال رسالتك بنجاح. سنتواصل معك قريباً.');
this.reset();
});
// نموذج الاشتراك
document.getElementById('subscribe-form').addEventListener('submit', function(e) {
e.preventDefault();
alert('شكراً لاشتراكك في نشرتنا البريدية!');
hideModal('subscribe-modal');
this.reset();
});
// نموذج الدفع
document.getElementById('payment-form').addEventListener('submit', function(e) {
e.preventDefault();
completePurchase();
});
// نموذج طلب عمل خاص
document.getElementById('commission-form').addEventListener('submit', function(e) {
e.preventDefault();
alert('تم استلام طلبك للعمل الخاص بنجاح. سنتواصل معك قريباً لتأكيد التفاصيل.');
hideModal('commission-modal');
this.reset();
});
// زر التحميل
document.getElementById('download-btn').addEventListener('click', function() {
alert('سيبدأ تحميل العمل الفني الآن. شكراً لثقتك بنا!');
hideModal('download-modal');
});
// معاينة صورة العمل عند الرفع
document.getElementById('artwork-image-upload').addEventListener('change', function(e) {
const preview = document.getElementById('artwork-image-preview');
const previewImg = document.getElementById('artwork-preview-img');
if (this.files && this.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
previewImg.src = e.target.result;
preview.classList.remove('hidden');
}
reader.readAsDataURL(this.files[0]);
}
});
// نموذج إضافة عمل جديد
document.getElementById('add-artwork-form').addEventListener('submit', function(e) {
e.preventDefault();
alert('تمت إضافة العمل الفني الجديد بنجاح.');
hideModal('add-artwork-modal');
this.reset();
document.getElementById('artwork-image-preview').classList.add('hidden');
});
}
// تصفية الأعمال حسب التصنيف
function filterArtworks(filter) {
const artworks = document.querySelectorAll('.neon-card');
artworks.forEach(artwork => {
const matchesFilter = filter === 'all' ||
artwork.dataset.category === filter ||
artwork.dataset.status === filter;
if (matchesFilter) {
artwork.style.display = 'block';
} else {
artwork.style.display = 'none';
}
});
}
// عرض تفاصيل العمل الفني
function showArtworkDetails(artworkId) {
// في تطبيق حقيقي، هذه البيانات تأتي من قاعدة بيانات
const artwork = {
id: 1,
title: "الكون النيوني",
artist: "فنان معرض الفنون النيوني",
category: "digital",
status: "available",
description: "عمل رقمي يجمع بين عناصر الكون والأنوار النيونية في تكوين فريد. هذا العمل هو جزء من سلسلة 'أضواء الفضاء' التي تستكشف العلاقة بين الضوء والفراغ الكوني.",
date: "15 مايو 2023",
dimensions: "60x90 سم",
materials: "طباعة فنية عالية الجودة على قماش",
price: 1200,
image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
};
document.getElementById('artwork-modal-img').src = artwork.image;
document.getElementById('artwork-modal-title').textContent = artwork.title;
document.getElementById('artwork-modal-artist').textContent = artwork.artist;
document.getElementById('artwork-modal-description').textContent = artwork.description;
document.getElementById('artwork-modal-date').textContent = artwork.date;
document.getElementById('artwork-modal-dimensions').textContent = artwork.dimensions;
document.getElementById('artwork-modal-materials').textContent = artwork.materials;
document.getElementById('artwork-modal-price').textContent = `${artwork.price} دولار`;
// تصنيف العمل
const categoryMap = {
'painting': 'لوحة',
'digital': 'رقمي',
'sculpture': 'منحوتة'
};
document.getElementById('artwork-modal-category').textContent = categoryMap[artwork.category] || artwork.category;
// حالة العمل
const statusMap = {
'available': 'متاح',
'sold': 'مباع',
'reserved': 'محجوز'
};
const statusElement = document.getElementById('artwork-modal-status');
statusElement.textContent = statusMap[artwork.status] || artwork.status;
statusElement.className = artwork.status === 'available' ? 'bg-green-900 text-green-300 px-3 py-1 rounded-full text-sm' : 'bg-red-900 text-red-300 px-3 py-1 rounded-full text-sm';
// إخفاء زر الشراء إذا كان العمل غير متاح
const buyBtn = document.getElementById('artwork-buy-btn');
if (artwork.status !== 'available') {
buyBtn.style.display = 'none';
} else {
buyBtn.style.display = 'block';
buyBtn.onclick = function() {
initiatePurchase(artwork.id);
};
}
showModal('artwork-modal');
}
// بدء عملية الشراء
function initiatePurchase(artworkId) {
// في تطبيق حقيقي، هذه البيانات تأتي من قاعدة بيانات
const artwork = {
id: 1,
title: "الكون النيوني",
price: 1200
};
document.getElementById('payment-artwork-title').textContent = artwork.title;
document.getElementById('payment-artwork-price').textContent = `${artwork.price} دولار`;
hideModal('artwork-modal');
showModal('payment-modal');
}
// إتمام عملية الشراء
function completePurchase() {
const artworkTitle = document.getElementById('payment-artwork-title').textContent;
const artworkPrice = document.getElementById('payment-artwork-price').textContent;
document.getElementById('download-artwork-title').textContent = artworkTitle;
hideModal('payment-modal');
showModal('download-modal');
// في تطبيق حقيقي، هنا يتم إرسال بيانات الدفع إلى بوابة الدفع
}
// عرض نافذة الاشتراك
function showSubscribeModal() {
showModal('subscribe-modal');
}
// عرض نافذة طلب عمل خاص
function showCommissionModal() {
showModal('commission-modal');
}
// عرض نافذة إضافة عمل جديد (للمسؤول)
function showAddArtworkModal() {
showModal('add-artwork-modal');
}
// عرض نافذة
function showModal(modalId) {
document.getElementById(modalId).classList.remove('hidden');
}
// إخفاء نافذة
function hideModal(modalId) {
document.getElementById(modalId).classList.add('hidden');
}
// تبديل قائمة الجوال
function toggleMobileMenu() {
document.getElementById('mobile-menu').classList.toggle('hidden');
}
// محاكاة تسجيل دخول المسؤول
function simulateAdminLogin() {
// في تطبيق حقيقي، هذا يكون عبر نظام تسجيل دخول آمن
const isAdmin = true; // تغيير إلى false لإخفاء لوحة التحكم
if (isAdmin) {
document.getElementById('admin-toggle').classList.remove('hidden');
}
}
// تبديل لوحة التحكم
function toggleAdminPanel() {
const panel = document.getElementById('admin-panel');
panel.classList.toggle('translate-x-full');
panel.classList.toggle('hidden');
const btn = document.getElementById('admin-toggle');
btn.classList.toggle('pulse');
}
// تسجيل خروج المسؤول
function logoutAdmin() {
document.getElementById('admin-panel').classList.add('translate-x-full');
document.getElementById('admin-toggle').classList.remove('pulse');
setTimeout(() => {
document.getElementById('admin-panel').classList.add('hidden');
}, 300);
}
// عرض قائمة الأعمال للتعديل (للمسؤول)
function showEditArtworks() {
alert('هذه الصفحة تعرض قائمة كاملة بالأعمال الفنية مع خيارات التعديل والحذف.');
}
// عرض قائمة المشتركين (للمسؤول)
function showSubscribersList() {
alert('هذه الصفحة تعرض قائمة بالمشتركين في النشرة البريدية.');
}
// عرض سجل المبيعات (للمسؤول)
function showTransactions() {
alert('هذه الصفحة تعرض سجل كامل لعمليات الشراء والمعاملات المالية.');
}
</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=asranko45/taxsasboker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>