Act as the best coder ever and transform the attached site into a comic book-inspired masterpiece, reminiscent of the graphics and mechanics of the game XIII. Pay close attention to detail and precision in design to create a visually stunning and captivating website. Incorporate comic book elements such as bold colors, dynamic layouts, and unique typography to bring the site to life. Ensure that the site functions seamlessly and is user-friendly while maintaining the comic book theme throughout. Your coding skills will be crucial in bringing this vision to reality, making the site stand out and impress visitors with its fantastic design.: <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<link rel="icon" href="C:\Users\nodyl\Downloads\getimg_ai_img-DVehzK3jViHpQI7C3RWbh-removebg.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>خطة المذاكرة</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap');

{
--color-primary: #47277b;
--color-secondary: #f7bc3a;
--color-accent: #8c5d36;
--color-dark: #4a33a7;
--color-light: #cdc7ed;
--color-background: #fbfbfd;
--color-text: #2a2856;
--color-success: #4CAF50;
--color-danger: #F44336;
--color-warning: #FFC107;
--color-info: #2196F3;
}

{ margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
/* تحسينات المؤشر المخصص */
.custom-cursor {
width: 20px;
height: 20px;
border: 2px solid var(--color-secondary);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: all 0.1s ease;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
}

.custom-cursor-dot {
width: 4px;
height: 4px;
background-color: var(--color-secondary);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: all 0.05s ease-out;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
}

.custom-cursor.hover {
transform: translate(-50%, -50%) scale(1.5);
background-color: rgba(247, 188, 58, 0.2);
border-color: rgba(247, 188, 58, 0.5);
backdrop-filter: blur(2px);
}

.custom-cursor.active {
transform: translate(-50%, -50%) scale(0.75);
background-color: rgba(247, 188, 58, 0.3);
}

.custom-cursor.text {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(247, 188, 58, 0.1);
border-width: 1px;
backdrop-filter: blur(1px);
}

/* تحسين تأثير الحركة عند التحويم */
.custom-cursor, .custom-cursor-dot {
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
body {
font-family: 'Cairo', sans-serif;
background: linear-gradient(135deg, var(--color-background), var(--color-light));
color: var(--color-text);
line-height: 1.6;
overflow-x: hidden;
min-height: 100vh;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

header {
background-color: rgba(71, 39, 123, 0.9);
padding: 20px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-secondary);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0, 1.21);
text-shadow: 0 0 10px rgba(247, 188, 58, 0.3);
}

.logo:hover {
transform: scale(1.05);
text-shadow: 0 0 20px rgba(247, 188, 58, 0.5);
}

.nav-links {
display: flex;
list-style: none;
}

.nav-links li {
margin-right: 20px;
}

.nav-links a {
color: var(--color-light);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
padding: 5px 0;
}

.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-secondary);
transition: width 0.3s ease;
}

.nav-links a:hover {
color: var(--color-secondary);
}

.nav-links a:hover::after {
width: 100%;
}

.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, var(--color-primary), var(--color-dark));
position: relative;
overflow: hidden;
}

.hero-content {
text-align: center;
color: var(--color-background);
z-index: 1;
padding: 20px;
/* تمت إزالة الخصائص التالية:
border-radius: 15px;
backdrop-filter: blur(5px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
}

.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
animation: fadeInUp 1s ease-out;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.hero p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto 30px;
animation: fadeInUp 1s ease-out 0.5s;
line-height: 1.8;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.cta-button {
display: inline-block;
background: linear-gradient(45deg, var(--color-secondary), #ffd700);
color: var(--color-text);
padding: 15px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
animation: fadeInUp 1s ease-out 1s;
box-shadow: 0 4px 15px rgba(247, 188, 58, 0.3);
}

.cta-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 6px 20px rgba(247, 188, 58, 0.4);
}
.study-plan-section {
padding: 100px 0;
position: relative;
}

.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 50px;
color: var(--color-primary);
position: relative;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title .edit-icon {
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

.section-title:hover .edit-icon {
opacity: 1;
transform: translateY(-50%) scale(1.1);
}

.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
}

.timeline::after {
content: '';
position: absolute;
width: 6px;
background: #5d489b;
top: 0;
bottom: 0;
right: 50%;
margin-right: -3px;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.timeline-item {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
animation: float 5s ease-in-out infinite;
perspective: 1000px;
}

.timeline-item:nth-child(odd) {
animation-delay: 2.5s;
}

.left {
right: 0;
}

.right {
right: 50%;
}

.timeline-item::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background: #604aa0;
border: 4px solid #8d7ebd;
top: 15px;
border-radius: 50%;
z-index: 1;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.timeline-item:hover::after {
transform: scale(1.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.right::after {
left: -16px;
}

.timeline-content {
padding: 20px 30px;
/* تعديل الخلفية للسماح بتغير اللون */
background: ${cardData.color || 'linear-gradient(145deg, #ffffff, #f0f0f0)'};
position: relative;
border-radius: 15px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1),
-5px -5px 15px rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
overflow: hidden;
transform-style: preserve-3d;
}

.timeline-content:hover {
transform: translateY(-5px) rotateX(2deg) rotateY(2deg);
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.15),
-8px -8px 20px rgba(255, 255, 255, 0.8);
}

#particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}

.particle {
position: absolute;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
pointer-events: none;
animation: float 4s infinite;
}

.timeline-icon {
position: absolute;
width: 50px;
height: 50px;
background: linear-gradient(145deg, var(--color-secondary), var(--color-accent));
top: 15px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text);
font-size: 1.5rem;
z-index: 2;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2),
-2px -2px 5px rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}

.timeline-icon:hover {
transform: rotate(360deg) scale(1.1);
}
.left .timeline-icon {
right: -25px;
}

.right .timeline-icon {
left: -25px;
}

.timeline-content .edit-icon,
.timeline-content .complete-icon,
.timeline-content .delete-icon,
.timeline-content .timer-icon,
.timeline-content .color-icon {
opacity: 0;
transition: all 0.3s ease;
cursor: pointer;
margin-left: 10px;
position: absolute;
top: 10px;
color: var(--color-primary);
font-size: 1.2rem;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.timeline-content:hover .edit-icon,
.timeline-content:hover .complete-icon,
.timeline-content:hover .delete-icon,
.timeline-content:hover .timer-icon,
.timeline-content:hover .color-icon {
opacity: 1;
transform: translateY(0) scale(1);
}

.timeline-content .edit-icon {
left: 10px;
transform: translateY(-10px);
transition-delay: 0s;
}
.timeline-content .complete-icon {
left: 40px;
transform: translateY(-10px);
transition-delay: 0.05s;
}
.timeline-content .delete-icon {
left: 70px;
transform: translateY(-10px);
transition-delay: 0.1s;
}
.timeline-content .timer-icon {
left: 100px;
transform: translateY(-10px);
transition-delay: 0.15s;
}
.timeline-content .color-icon {
left: 130px;
transform: translateY(-10px);
transition-delay: 0.2s;
}

.timeline-content .edit-icon:hover,
.timeline-content .complete-icon:hover,
.timeline-content .delete-icon:hover,
.timeline-content .timer-icon:hover,
.timeline-content .color-icon:hover {
transform: scale(1.2);
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
background: linear-gradient(145deg, var(--color-secondary), var(--color-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.timer-display {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(var(--color-primary-rgb), 0.1);
padding: 5px 10px;
border-radius: 15px;
font-size: 0.9rem;
color: var(--color-primary);
backdrop-filter: blur(4px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.timer-display:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@keyframes fadeOut {
0% {
opacity: 1;
transform: scale(1) rotate(0);
}
100% {
opacity: 0;
transform: scale(0.8) rotate(10deg);
}
}

.timeline-content.completed {
animation: fadeOut 0.8s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

.timeline-content.new-card {
animation: pulse 0.5s ease-in-out 3;
}

.add-card-button {
width: 60px;
height: 60px;
background: linear-gradient(145deg, var(--color-primary), var(--color-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-light);
font-size: 24px;
cursor: pointer;
margin: 30px auto;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.add-card-button:hover {
transform: scale(1.1) rotate(180deg);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@media screen and (max-width: 600px) {
.timeline::after {
right: 31px;
}

.timeline-item {
width: 100%;
padding-right: 70px;
padding-left: 25px;
}

.timeline-item::before {
right: 60px;
border: medium solid var(--color-light);
border-width: 10px 10px 10px 0;
border-color: transparent var(--color-light) transparent transparent;
}

.left::after, .right::after {
right: 15px;
}

.right {
right: 0%;
}

.timeline-icon {
right: 5px !important;
left: auto !important;
}
}
</style>
</head>
<body>
<div class="custom-cursor"></div>
<div class="custom-cursor-dot"></div>

<header>
<nav class="container">
<a href="#" class="logo">المسار</a>
<ul class="nav-links">
<li><a href="#home">الرئيسية</a></li>
<li><a href="#study-plan">خطة المذاكرة</a></li>
</ul>
</nav>
</header>

<main>
<section id="home" class="hero">
<div id="particles"></div>
<div class="hero-content">
<h1>خطة المذاكرة</h1>
<p>قال صلى الله عليه وسلم " إذا دعا أحدكم فلا يقل اللهم إن شئت فأعطني ولكن ليعزم المسألة وليعظم الرغبة " فإن الله لا يتعاظمه شيء أعطاه يعني لما تطلب من ربنا تطلب بمنتهى الثقة والقوة ولا يهمك لأن ما فيش حاجة كبيرة عليه ولا تقف قدام قدرته سبحانه وتعالى مهما كان اللي نفسك فيه ومهما كان اللي انت واقع فيه اطلب بقلب جامد انت بتطلب من الملك سبحانه وتعالى الذي بيده ملكوت السماوات والأرض وخزائن السماوات والأرض إذا أراد شيئًا فإنما يقول له كن فيكون.</p>
<a href="#study-plan" class="cta-button">ابدأ الآن</a>
</div>
</section>

<section id="study-plan" class="study-plan-section">
<div class="container">
<h2 class="section-title">
مذاكرة اليوم
<i class="fas fa-edit edit-icon" onclick="editTitle(this)"></i>
</h2>
<div class="timeline">
<!-- البطاقات ستضاف هنا ديناميكيًا -->
</div>
<div class="add-card-button" onclick="addNewCard()">
<i class="fas fa-plus"></i>
</div>
</div>
</section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<script>
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 50;

for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
particle.style.left = ${Math.random() * 100}%;
particle.style.top = ${Math.random() * 100}%;
particle.style.width = ${Math.random() * 5 + 1}px;
particle.style.height = particle.style.width;
particle.style.animationDuration = ${Math.random() * 2 + 2}s;
particle.style.animationDelay = ${Math.random() * 2}s;
particlesContainer.appendChild(particle);
}
}

function customCursor() {
const cursor = document.querySelector('.custom-cursor');
const cursorDot = document.querySelector('.custom-cursor-dot');

document.addEventListener('mousemove', e => {
gsap.to(cursor, { duration: 0.23, left: e.clientX, top: e.clientY });
gsap.to(cursorDot, { duration: 0.1, left: e.clientX, top: e.clientY });
});

const hoverElements = document.querySelectorAll('a, button, .timeline-content');
hoverElements.forEach(element => {
element.addEventListener('mouseenter', () => {
cursor.classList.add('hover');
});
element.addEventListener('mouseleave', () => {
cursor.classList.remove('hover');
});
});

document.addEventListener('mousedown', () => {
cursor.classList.add('active');
});
document.addEventListener('mouseup', () => {
cursor.classList.remove('active');
});

document.addEventListener('selectstart', () => {
cursor.classList.add('text');
});
document.addEventListener('selectionchange', () => {
if (window.getSelection().toString().length === 0) {
cursor.classList.remove('text');
} else {
cursor.classList.add('text');
}
});
}

function revealOnScroll() {
const elements = document.querySelectorAll('.timeline-item');
elements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const elementVisible = 150;
if (elementTop < window.innerHeight - elementVisible) {
element.classList.add('fadeInUp');
}
});
}

function editTitle(icon) {
const title = icon.parentElement;
const newTitle = prompt('أدخل العنوان الجديد:', title.childNodes0.nodeValue.trim());
if (newTitle) {
title.childNodes0.nodeValue = newTitle + ' ';
localStorage.setItem('mainTitle', newTitle);
}
}

function editCard(icon) {
const card = icon.closest('.timeline-content');
const timeElement = card.querySelector('h3');
const contentElement = card.querySelector('p');

const newTime = prompt('أدخل الوقت الجديد:', timeElement.textContent);
if (newTime) {
timeElement.textContent = newTime;
}

const newContent = prompt('أدخل المحتوى الجديد:', contentElement.textContent);
if (newContent) {
contentElement.textContent = newContent;
}

const link = prompt('أدخل رابط المحاضرة (اتركه فارغًا إذا لم يكن هناك رابط):');
if (link) {
card.dataset.link = link;
card.style.cursor = 'pointer';
card.addEventListener('click', function(e) {
if (e.target !== icon) {
window.open(this.dataset.link, '_blank');
}
});
} else {
delete card.dataset.link;
card.style.cursor = 'default';
// إزالة الـ event listener بطريقة صحيحة
card.replaceWith(card.cloneNode(true));
}

saveCardData();
}

function completeCard(icon) {
const card = icon.closest('.timeline-content');
card.classList.add('completed');
playCompletionSound();

setTimeout(() => {
card.closest('.timeline-item').remove();
updateTimelineOrder();
saveCardData();
}, 1000);
}

function deleteCard(icon) {
if (confirm('هل أنت متأكد من حذف هذه البطاقة؟')) {
const card = icon.closest('.timeline-content');
if (card.countdown) {
clearInterval(card.countdown);
}
card.closest('.timeline-item').remove();
updateTimelineOrder();
saveCardData();
}
}

function setTimer(icon) {
const card = icon.closest('.timeline-content');
const timerDisplay = card.querySelector('.timer-display');
let minutes = prompt('أدخل عدد الدقائق للتايمر:');

if (minutes && !isNaN(minutes)) {
let seconds = minutes * 60;
timerDisplay.style.display = 'block';

if (card.countdown) {
clearInterval(card.countdown);
}

function updateTimerDisplay() {
const minutesLeft = Math.floor(seconds / 60);
const secondsLeft = seconds % 60;
timerDisplay.textContent = ${minutesLeft}:${secondsLeft < 10 ? '0' : ''}${secondsLeft};
}

updateTimerDisplay();

card.countdown = setInterval(() => {
if (seconds === 0) {
clearInterval(card.countdown);
playAlarmSound();
alert('انتهى الوقت!');
} else {
seconds--;
updateTimerDisplay();
}
}, 1000);

timerDisplay.onclick = () => {
clearInterval(card.countdown);
setTimer(icon);
};

saveCardData();
}
}

function changeColor(icon) {
const card = icon.closest('.timeline-content');
const color = prompt('أدخل لون البطاقة (مثل #ff0000 أو red):');
if (color) {
card.style.backgroundColor = color;
saveCardData();
}
}

function saveCardData() {
const cards = document.querySelectorAll('.timeline-content');
const cardData = Array.from(cards).map(card => ({
time: card.querySelector('h3').textContent,
content: card.querySelector('p').textContent,
link: card.dataset.link || '',
completed: card.classList.contains('completed'),
timer: card.querySelector('.timer-display').textContent,
color: card.style.backgroundColor
}));
localStorage.setItem('cardData', JSON.stringify(cardData));
}

function loadSavedData() {
const savedTitle = localStorage.getItem('mainTitle');
if (savedTitle) {
document.querySelector('.section-title').childNodes0.nodeValue = savedTitle + ' ';
}

const savedCardData = JSON.parse(localStorage.getItem('cardData'));
if (savedCardData) {
const timeline = document.querySelector('.timeline');
timeline.innerHTML = '';
savedCardData.forEach((cardData, index) => {
const newCard = createCard(cardData, index % 2 === 0 ? 'left' : 'right');
const content = newCard.querySelector('.timeline-content');
if (cardData.completed) {
content.classList.add('completed');
}
if (cardData.timer) {
const timerDisplay = content.querySelector('.timer-display');
timerDisplay.textContent = cardData.timer;
timerDisplay.style.display = 'block';
}
if (cardData.color) {
content.style.backgroundColor = cardData.color;
}
timeline.appendChild(newCard);
});
}
}

function addNewCard() {
const timeline = document.querySelector('.timeline');
const newCard = createCard({
time: 'وقت جديد',
content: 'محتوى جديد',
link: ''
}, timeline.children.length % 2 === 0 ? 'left' : 'right');
newCard.classList.add('new-card');
timeline.appendChild(newCard);
setTimeout(() => newCard.classList.remove('new-card'), 1500);
saveCardData();
revealOnScroll();
}

function createCard(cardData, position) {
const card = document.createElement('div');
card.className = timeline-item ${position};
card.innerHTML =                 <div class="timeline-icon"><i class="fas fa-book"></i></div>                 <div class="timeline-content" style="background-color: ${cardData.color || ''}">                     <i class="fas fa-edit edit-icon" onclick="editCard(this)"></i>                     <i class="fas fa-check complete-icon" onclick="completeCard(this)"></i>                     <i class="fas fa-trash delete-icon" onclick="deleteCard(this)"></i>                     <i class="fas fa-clock timer-icon" onclick="setTimer(this)"></i>                     <i class="fas fa-palette color-icon" onclick="changeColor(this)"></i>                     <h3>${cardData.time}</h3>                     <p>${cardData.content}</p>                     <div class="timer-display" style="display: none;"></div>                 </div>            ;
if (cardData.link) {
const content = card.querySelector('.timeline-content');
content.dataset.link = cardData.link;
content.style.cursor = 'pointer';
content.addEventListener('click', function(e) {
if (e.target !== this.querySelector('.edit-icon')) {
window.open(this.dataset.link, '_blank');
}
});
}
return card;
}

function updateTimelineOrder() {
const timeline = document.querySelector('.timeline');
const items = timeline.querySelectorAll('.timeline-item');
items.forEach((item, index) => {
item.className = timeline-item ${index % 2 === 0 ? 'left' : 'right'};
});
}

function playCompletionSound() {
const audio = new Audio('https://www.soundjay.com/buttons/sounds/button-3.mp3');
audio.play();
}

function playAlarmSound() {
const audio = new Audio('https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3');
audio.play();
}

function initSortable() {
const timeline = document.querySelector('.timeline');
new Sortable(timeline, {
animation: 150,
onEnd: function() {
updateTimelineOrder();
saveCardData();
}
});
}

window.addEventListener('load', () => {
createParticles();
loadSavedData();
revealOnScroll();
initSortable();
customCursor();
});

window.addEventListener('scroll', revealOnScroll);
</script>
</body>
</html>