Projects Gallery Page - Copy this Html, Tailwind Component to your project
<html-lang="ar">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>عرض-مشاريع-المدرسة</title>-<link-rel="icon"-href="assets/images/Screenshot_2024-12-31_151151-removebg-preview.png"-type="image/png">-<style>-:root-{---primary-color:-#064b86;---secondary-color:-#818cf8;---background-color:-#f9fafb;---text-color:-#1f2937;-/*-Add-background-image-*/-/*-Replace-with-your-image-path-*/-background-size:-cover;-/*-Ensures-the-image-covers-the-entire-page-*/-background-position:-center;-/*-Centers-the-background-image-*/-background-repeat:-no-repeat;-/*-Prevents-the-image-from-repeating-*/-}-img:fullscreen-{-object-fit:-contain;-width:-100%;-height:-100%;-}-body-{-font-family:-system-ui,--apple-system,-sans-serif;-margin:-0;-padding:-0;-background-color:-var(--background-color);-color:-var(--text-color);-overflow-y:auto;-/*-Ensure-scrolling-is-enabled-*/-height:-100vh;-box-sizing:-border-box;-overflow-y:-scroll;-/*-Allow-scrolling-*/-}-.image-container-{-display:-flex;-width:-100%;-height:-100%;-position:-relative;-overflow:-hidden;-}-.slide-{-position:-absolute;-top:-0;-left:-100%;-width:-100%;-height:-100%;-object-fit:-cover;-transition:-all-0.5s-ease-in-out;-opacity:-0;-}-.slide.active-{-left:-0;-opacity:-1;-}-.footer-{-overflow-y:auto;-background-color:-#1f2937;-color:-white;-text-align:-center;-padding:-1rem;-position:-fixed;-bottom:-0;-width:-100%;-height:-5%;-box-shadow:-0--2px-2px-rgba(0,0,0,0.1);-}-.credits-{-overflow-y:auto;-display:-flex;-justify-content:-center;-align-items:-center;-gap:-2rem;-}-.navbar-{-overflow-y:auto;-background-color:-white;-padding:-1rem-2rem;-box-shadow:-0-1px-3px-rgba(0,-0,-0,-0.1);-display:-flex;-justify-content:-space-between;-align-items:-center;-}-.logo-img-{-width:-100px;-height:-100px;-transition:-transform-0.3s-ease;-}-.logo-img:hover-{-transform:-scale(1.05);-}-.nav-links-{-display:-flex;-gap:-2rem;-margin-right:-2rem;-}-.nav-link-{-color:-var(--text-color);-text-decoration:-none;-padding:-0.5rem-1rem;-border-radius:-0.375rem;-transition:-all-0.3s-ease;-}-.nav-link:hover,-.nav-link.active-{-background-color:-var(--background-color);-color:-var(--primary-color);-transform:-translateY(-2px);-}-.page-{-overflow-y:auto;-display:-block;-max-height:-calc(100vh---100px);-display:-none;-opacity:-0;-transform:-translateY(20px);-transition:-all-0.5s-ease;-padding:-2rem;-max-width:-1200px;-margin:-0-auto;-filter:-blur(7px);-}-.page.active-{-display:-block;-opacity:-1;-transform:-translateY(0);-filter:-blur(0);-}-.projects-grid-{-display:-grid;-grid-template-columns:-repeat(auto-fit,-minmax(300px,-1fr));-gap:-2rem;-}-@keyframes-fadeInUp-{-to-{-opacity:-1;-transform:-translateY(0);-}-}-.project-card-{-background-color:-white;-border-radius:-0.5rem;-overflow:-auto;-box-shadow:-0-1px-3px-rgba(0,-0,-0,-0.1);-transition:-transform-0.2s;-}-.project-card:hover-{-transform:-translateY(-4px);-}-.project-image-{-overflow-y:-auto;-width:-100%;-height:-200px;-object-fit:-cover;-transition:-transform-0.3s-ease;-}-.project-card:hover-.project-image-{-transform:-scale(1.05);-}-#projectModal-{-overflow-y:-auto;-position:-fixed;-top:-0;-left:-0;-width:-100%;-height:-100%;-background:-rgba(0,-0,-0,-0.7);-display:-flex;-justify-content:-center;-align-items:-center;-opacity:-0;-visibility:-hidden;-transition:-all-0.3s-ease;-}-#projectModal.show-{-opacity:-1;-visibility:-visible;-}-.modal-content-{-background-color:-white;-padding:-2rem;-border-radius:-0.5rem;-width:-90%;-max-width:-600px;-transform:-scale(0.7)-translateY(20px);-opacity:-0;-transition:-all-0.3s-ease;-}-#projectModal.show-.modal-content-{-transform:-scale(1)-translateY(0);-opacity:-1;-}-#modalImage-{-width:-100%;-height:-auto;-}-.admin-btn,-#postProjectBtn,-#adminLoginBtn-{-background-color:-var(--primary-color);-color:-white;-border:-none;-padding:-0.5rem-1rem;-border-radius:-0.375rem;-cursor:-pointer;-transition:-background-color-0.2s;-}-.admin-btn:hover,-#postProjectBtn:hover,-#adminLoginBtn:hover-{-background-color:-var(--secondary-color);-}-/*-Modal-styles-*/-.modal-{-display:-none;-position:-fixed;-top:-0;-left:-0;-width:-100%;-height:-100%;-background-color:-rgba(0,-0,-0,-0.5);-}-.modal-content-{-background-color:-white;-padding:-2rem;-border-radius:-0.5rem;-width:-90%;-max-width:-500px;-margin:-4rem-auto;-}-.close-{-float:-right;-cursor:-pointer;-font-size:-1.5rem;-}-form-{-display:-flex;-flex-direction:-column;-gap:-1rem;-}-input,-textarea-{-padding:-0.5rem;-border:-1px-solid-#d1d5db;-border-radius:-0.375rem;-font-size:-1rem;-}-.submit-btn-{-background-color:-var(--primary-color);-color:-white;-border:-none;-padding:-0.75rem;-border-radius:-0.375rem;-cursor:-pointer;-font-size:-1rem;-}-.submit-btn:hover-{-background-color:-var(--secondary-color);-}-/*-Home-page-styles-*/-.hero-{-text-align:-center;-padding:-2rem-1rem;-/*-Reduced-padding-*/-background:-linear-gradient(to-right,-#104464,-#4f46e5);-color:-white;-margin-bottom:-1rem;-/*-Adjusted-margin-*/-}-.hero-h1-{-font-size:-3rem;-margin-bottom:-1rem;-}-.hero-p-{-font-size:-1.25rem;-max-width:-600px;-margin:-0-auto;-}-.features-{-display:-grid;-grid-template-columns:-repeat(auto-fit,-minmax(250px,-1fr));-gap:-2rem;-margin-top:-3rem;-}-.feature-card-{-background:-white;-padding:-2rem;-border-radius:-0.5rem;-text-align:-center;-}-/*-Projects-page-styles-*/-.projects-container-{-margin-top:-2rem;-/*-Adjust-margin-to-reduce-space-*/-padding:-1rem;-/*-Add-some-padding-for-a-neat-layout-*/-display:-flex;-flex-direction:-column;-align-items:-center;-justify-content:-flex-start;-/*-Align-the-grid-at-the-top-*/-}-.projects-grid-{-display:-grid;-grid-template-columns:-repeat(auto-fit,-minmax(300px,-1fr));-gap:-2rem;-width:-100%;-/*-Ensure-it-spans-the-container-width-*/-max-width:-1200px;-/*-Optional:-set-a-max-width-for-consistent-alignment-*/-margin:-0-auto;-/*-Center-align-the-grid-*/-}-.projects-grid-{-display:-grid;-grid-template-columns:-repeat(auto-fit,-minmax(300px,-1fr));-gap:-2rem;-opacity:-0;-transform:-translateY(20px);-animation:-fadeInUp-0.5s-ease-forwards;-}-.project-card-{-background-color:-white;-border-radius:-0.5rem;-overflow:-hidden;-box-shadow:-0-1px-3px-rgba(0,-0,-0,-0.1);-transition:-all-0.3s-ease;-cursor:-pointer;-}-.project-card:hover-{-transform:-translateY(-4px)-scale(1.02);-box-shadow:-0-8px-16px-rgba(0,-0,-0,-0.1);-}-.project-content-{-padding:-1.5rem;-}-.project-title-{-font-size:-1.25rem;-font-weight:-bold;-margin:-0-0-0.5rem-0;-}-.project-info-{-color:-#6b7280;-font-size:-0.875rem;-}-.project-description-{-margin-top:-1rem;-line-height:-1.5;-}-.contact-form-{-max-width:-500px;-margin:-0-auto;-background:-white;-padding:-2rem;-border-radius:-0.5rem;-box-shadow:-0-1px-3px-rgba(0,-0,-0,-0.1);-}-</style>-</head>-<body>-<nav-class="navbar">-<div-class="logo"><img-src="assets/images/alhayah.jpg"-width="100"-height="100"-alt=""></div>-<div-class="nav-links">-<a-href="#"-class="nav-link-active"-onclick="showPage('home')">الرئيسية</a>-<a-href="#"-class="nav-link"-onclick="showPage('projects')">المشاريع</a>-<a-href="#"-class="nav-link"-onclick="showPage('contact')">اتصل-بنا</a>-</div>-<!---<button-id="postProjectBtn"-onclick="openPostProjectModal()">نشر-مشروع-جديد</button>-->-<button-id="translateBtn"-class="nav-link">ترجمة</button>-</nav>-<!---Home-Page--->-<div-id="home"-class="page-active">-<div-class="hero">-<h1>مرحبا-بك-في-مشاريع-مدارس-الحياة</h1>-<p>اكتشف-المشاريع-الرائعة-التي-أنشأها-طلابنا-الموهوبون</p>-</div>-<div-class="features">-<div-class="feature-card">-<h3>التفوق-الإبداعي</h3>-<p>عرض-مشاريع-مبتكرة-من-مختلف-التخصصات</p>-</div>-<div-class="feature-card">-<h3>تسليط-الضوء-على-الطلاب</h3>-<p>الاحتفال-بإنجازات-طلابنا-الموهوبين</p>-</div>-</div>-</div>-<!---Projects-Page--->-<div-id="projects"-class="page">-<h2>المشاريع</h2>-<div-class="projects-grid"-id="projectsGrid">-<!---Project-cards-will-go-here-dynamically--->-</div>-</div>-<!---Contact-Page--->-<div-id="contact"-class="page">-<h2>اتصل-بنا</h2>-<div-class="contact-info">-<p>لديك-استفسار؟-لا-تتردد-في-الاتصال-بنا.</p>-</div>-<div-class="contact-form">-<form-id="contactForm">-<input-type="text"-name="name"-placeholder="اسمك"-required>-<input-type="email"-name="email"-placeholder="بريدك-الإلكتروني"-required>-<textarea-name="message"-placeholder="رسالتك"-required></textarea>-<button-type="submit"-class="submit-btn">إرسال</button>-</form>-</div>-</div>-<!---Post-New-Project-Modal--->-<div-id="postProjectModal"-class="modal">-<div-class="modal-content">-<form-class="add-project-form"-id="addProjectForm">-<input-type="text"-id="projectTitle"-placeholder="عنوان-المشروع"-required>-<input-type="text"-id="projectStudent"-placeholder="اسم-الطالب"-required>-<input-type="text"-id="projectGrade"-placeholder="الصف"-required>-<textarea-id="projectDescription"-placeholder="وصف-المشروع"-required></textarea>-<input-type="file"-id="projectImage"-accept="image/*"-required>-<button-type="submit"-class="submit-btn">نشر-المشروع</button>-</form>-</div>-</div>-<!---Login-Modal-for-Admin--->-<div-id="loginModal"-class="modal">-<div-class="modal-content">-<span-class="close"-onclick="closeLoginModal()">×</span>-<h2>تسجيل-دخول-المسؤول</h2>-<form-id="loginForm">-<input-type="email"-id="adminEmail"-placeholder="البريد-الإلكتروني"-required>-<input-type="password"-id="adminPassword"-placeholder="كلمة-المرور"-required>-<button-type="submit"-class="submit-btn">تسجيل-الدخول</button>-</form>-</div>-</div>-<div-id="projectModal"-style="display:none;">-<div-class="modal-content">-<img-id="modalImage"-src=""-alt="Project-Image"-onclick="openFullscreen(this)">-<h3-id="modalTitle"></h3>-<p-id="modalStudent"></p>-<p-id="modalGrade"></p>-<p-id="modalDescription"></p>-</div>-</div>-<script>-const-projectsData-=-[-{-title:-"مشروع-التراث-الاصيل",-student:-"عبدالهادي-الحربي",-grade:-"الاول-ثانوي",-description:-"",-image:-"assets/images/121672f7-13a9-4262-b768-45da3d8923b5.jpg"-},-{-/*project-z*/-title:-"الرسم-",-student:-"محمد-عثمان-الدريس",-grade:-"الثالث-ثانوي",-description:"dqwdwqdwq",-image:-"assets/images/220482d8-ba84-43fe-a65a-730371da087e.jpg",-image:-"assets/images/220482d8-ba84-43fe-a65a-730371da087e.jpg"-},-];-document.addEventListener("DOMContentLoaded",-()-=>-{-const-modal-=-document.getElementById("projectModal");-const-modalContent-=-modal.querySelector(".modal-content");-const-imageContainer-=-modal.querySelector(".image-container");-const-prevButton-=-document.getElementById("prevButton");-const-nextButton-=-document.getElementById("nextButton");-let-currentProject-=-null;-let-currentIndex-=-0;-//-Open-modal-and-load-project-data-function-openModal(projectIndex)-{-currentProject-=-projectsData[projectIndex];-currentIndex-=-0;-loadImages();-modal.style.display-=-"flex";-}-//-Close-modal-modal.addEventListener("click",-(e)-=>-{-if-(e.target-===-modal)-modal.style.display-=-"none";-});-//-Load-images-into-the-container-function-loadImages()-{-imageContainer.innerHTML-=-"";-currentProject.images.forEach((src,-index)-=>-{-const-img-=-document.createElement("img");-img.src-=-src;-img.className-=-"slide";-if-(index-===-currentIndex)-img.classList.add("active");-imageContainer.appendChild(img);-});-}-//-Navigate-to-the-next-image-nextButton.addEventListener("click",-()-=>-{-currentIndex-=-(currentIndex-+-1)-%-currentProject.images.length;-updateSlides();-});-//-Navigate-to-the-previous-image-prevButton.addEventListener("click",-()-=>-{-currentIndex-=-(currentIndex---1-+-currentProject.images.length)-%-currentProject.images.length;-updateSlides();-});-//-Update-the-active-slide-function-updateSlides()-{-const-slides-=-imageContainer.querySelectorAll(".slide");-slides.forEach((slide,-index)-=>-{-slide.classList.toggle("active",-index-===-currentIndex);-});-}-//-Attach-openModal-to-project-buttons-(example-setup)-document.querySelectorAll(".project-button").forEach((button,-index)-=>-{-button.addEventListener("click",-()-=>-openModal(index));-});-});-function-openFullscreen(element)-{-if-(element.requestFullscreen)-{-element.requestFullscreen();-}-else-if-(element.webkitRequestFullscreen)-{-//-Safari-element.webkitRequestFullscreen();-}-else-if-(element.msRequestFullscreen)-{-//-IE11-element.msRequestFullscreen();-}-}-function-loadProjects()-{-const-projectsGrid-=-document.getElementById('projectsGrid');-projectsGrid.innerHTML-=-'';-projectsData.forEach(project-=>-{-const-projectCard-=-document.createElement('div');-projectCard.classList.add('project-card');-projectCard.innerHTML-=-`-<img-class="project-image"-src="${project.image}"-alt="${project.title}">-<div-class="project-content">-<h3-class="project-title">${project.title}</h3>-<p-class="project-info">${project.student}---${project.grade}</p>-<p-class="project-description">${project.description}</p>-</div>-`;-projectCard.addEventListener('click',-()-=>-showProjectDetail(project));-projectsGrid.appendChild(projectCard);-});-}-function-showProjectDetail(project)-{-document.getElementById('detailImage').src-=-project.image;-document.getElementById('detailTitle').textContent-=-project.title;-document.getElementById('detailStudent').textContent-=-`الطالب:-${project.student}`;-document.getElementById('detailGrade').textContent-=-`الصف:-${project.grade}`;-document.getElementById('detailDescription').textContent-=-project.description;-showPage('projectDetail');-}-function-showPage(pageId)-{-document.querySelectorAll('.nav-link').forEach(link-=>-{-link.classList.remove('active');-});-event.target.classList.add('active');-const-pages-=-document.querySelectorAll('.page');-pages.forEach(page-=>-{-if-(page.classList.contains('active'))-{-page.style.opacity-=-'0';-page.style.filter-=-'blur(10px)';-setTimeout(()-=>-{-page.classList.remove('active');-},-300);-}-});-setTimeout(()-=>-{-const-newPage-=-document.getElementById(pageId);-newPage.classList.add('active');-requestAnimationFrame(()-=>-{-newPage.style.opacity-=-'1';-newPage.style.filter-=-'blur(0)';-});-},-300);-}-const-translations-=-{-en:-{-pageTitle:-"School-Projects-Showcase",-pageDescription:-"Here-you-can-view-all-the-school-projects.",-footerText:-"©-2025-All-Rights-Reserved",-translateBtn:-"Translate"-},-ar:-{-pageTitle:-"عرض-مشاريع-المدرسة",-pageDescription:-"هنا-يمكنك-رؤية-جميع-مشاريع-المدرسة.",-footerText:-"حقوق-الطبع-والنشر-©-2025-جميع-الحقوق-محفوظة",-translateBtn:-"ترجمة"-}-};-let-currentLang-=-"ar";-//-Default-language-const-translatePage-=-()-=>-{-const-elements-=-{-pageTitle:-document.getElementById("pageTitle"),-pageDescription:-document.getElementById("pageDescription"),-footerText:-document.getElementById("footerText"),-translateBtn:-document.getElementById("translateBtn")-};-//-Toggle-language-currentLang-=-currentLang-===-"ar"-?-"en"-:-"ar";-//-Apply-translations-elements.pageTitle.textContent-=-translations[currentLang].pageTitle;-elements.pageDescription.textContent-=-translations[currentLang].pageDescription;-elements.footerText.textContent-=-translations[currentLang].footerText;-elements.translateBtn.textContent-=-translations[currentLang].translateBtn;-};-//-Attach-event-listener-to-the-translate-button-document.getElementById("translateBtn").addEventListener("click",-translatePage);-function-openProjectModal(project)-{-const-modal-=-document.getElementById('projectModal');-document.getElementById('modalImage').src-=-project.image;-document.getElementById('modalTitle').textContent-=-project.title;-document.getElementById('modalStudent').textContent-=-`الطالب:-${project.student}`;-document.getElementById('modalGrade').textContent-=-`الصف:-${project.grade}`;-document.getElementById('modalDescription').textContent-=-project.description;-modal.style.display-=-'flex';-requestAnimationFrame(()-=>-{-modal.classList.add('show');-});-}-function-closeProjectModal()-{-const-modal-=-document.getElementById('projectModal');-modal.classList.remove('show');-setTimeout(()-=>-{-modal.style.display-=-'none';-},-300);-}-document.getElementById('projectModal').addEventListener('click',-function(event)-{-if-(event.target-===-this)-{-closeProjectModal();-}-});-document.addEventListener('DOMContentLoaded',-loadProjects);-</script>-</body>-</html>-alright-do-you-see-the-project-cards-i-want-it-to-be-the-same-but-i-want-to-change-the-site-so-what-i-want-is-the-مشاريع-page-i-want-it-to-has-projects-cards-ass-a-button-that-sends-you-to-another-html-page-and-in-the-html-page-it-has-the-normal-مشاريع-page-with-but-what-i-want-is-i-dont-want-it-to-sends-to-another-html-i-want-it-to-sends-to-another-page-but-in-the-same-html-file
