b4 #3
|
Before Width: | Height: | Size: 431 KiB After Width: | Height: | Size: 365 KiB |
|
Before Width: | Height: | Size: 409 KiB After Width: | Height: | Size: 357 KiB |
|
Before Width: | Height: | Size: 416 KiB After Width: | Height: | Size: 356 KiB |
|
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 214 KiB After Width: | Height: | Size: 181 KiB |
|
Before Width: | Height: | Size: 204 KiB |
|
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 336 KiB After Width: | Height: | Size: 278 KiB |
|
Before Width: | Height: | Size: 435 KiB After Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 279 KiB After Width: | Height: | Size: 205 KiB |
|
Before Width: | Height: | Size: 442 KiB After Width: | Height: | Size: 377 KiB |
|
Before Width: | Height: | Size: 243 KiB After Width: | Height: | Size: 187 KiB |
|
Before Width: | Height: | Size: 258 KiB After Width: | Height: | Size: 228 KiB |
|
Before Width: | Height: | Size: 246 KiB After Width: | Height: | Size: 186 KiB |
|
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 236 KiB After Width: | Height: | Size: 196 KiB |
|
Before Width: | Height: | Size: 209 KiB After Width: | Height: | Size: 168 KiB |
|
Before Width: | Height: | Size: 358 KiB After Width: | Height: | Size: 323 KiB |
|
Before Width: | Height: | Size: 216 KiB After Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 255 KiB After Width: | Height: | Size: 231 KiB |
|
Before Width: | Height: | Size: 183 KiB After Width: | Height: | Size: 165 KiB |
|
Before Width: | Height: | Size: 444 KiB After Width: | Height: | Size: 379 KiB |
|
Before Width: | Height: | Size: 463 KiB After Width: | Height: | Size: 439 KiB |
|
Before Width: | Height: | Size: 239 KiB After Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 334 KiB After Width: | Height: | Size: 295 KiB |
|
Before Width: | Height: | Size: 356 KiB After Width: | Height: | Size: 323 KiB |
|
Before Width: | Height: | Size: 313 KiB After Width: | Height: | Size: 283 KiB |
|
Before Width: | Height: | Size: 380 KiB After Width: | Height: | Size: 331 KiB |
|
Before Width: | Height: | Size: 376 KiB After Width: | Height: | Size: 328 KiB |
|
Before Width: | Height: | Size: 386 KiB After Width: | Height: | Size: 329 KiB |
|
|
@ -16,6 +16,7 @@
|
|||
<!-- <li><a href="#">Services</a></li> -->
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/overview">Overview</a></li>
|
||||
<li><a href="/gallery">Gallery</a></li>
|
||||
<li><a href="/admission">Admission</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="">
|
||||
<swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
|
||||
<swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
|
||||
:modules="modules"
|
||||
:slides-per-view="1"
|
||||
:space-between="50"
|
||||
|
|
@ -11,6 +11,8 @@
|
|||
:autoplay=" { delay: 2500, disableOnInteraction: false}"
|
||||
@swiper="onSwiper"
|
||||
@slideChange="onSlideChange">
|
||||
|
||||
<swiper-slide v-for="(item, index) in img3DResInter" :key="index"> <img class="aspect-video" :src="item.image_src" alt="" /></swiper-slide>
|
||||
<swiper-slide> <img class="" src="/img/school1.jpg" alt="" /></swiper-slide>
|
||||
<swiper-slide> <img class="" src="/img/school2.jpg" alt="" /></swiper-slide>
|
||||
<swiper-slide> <img class="" src="/img/school3.jpg" alt="" /></swiper-slide>
|
||||
|
|
@ -65,6 +67,7 @@
|
|||
page: null,
|
||||
lessonplan:null,
|
||||
isLoading: true,
|
||||
img3DResInter: [{ image_src: "/assets/school_image/hps-image1.jpg" },{ image_src: "/assets/school_image/hps-image2.jpg" },{ image_src: "/assets/school_image/hps-image3.jpg" },{ image_src: "/assets/school_image/hps-image4.jpg" },{ image_src: "/assets/school_image/hps-image5.jpg" },{ image_src: "/assets/school_image/hps-image6.jpg" },{ image_src: "/assets/school_image/hps-image7.jpg" },{ image_src: "/assets/school_image/hps-image8.jpg" },{ image_src: "/assets/school_image/hps-image9.jpg" },{ image_src: "/assets/school_image/hps-image10.jpg" },{ image_src: "/assets/school_image/hps-image11.jpg" },{ image_src: "/assets/school_image/hps-image12.jpg" },{ image_src: "/assets/school_image/hps-image13.jpg" },{ image_src: "/assets/school_image/hps-image14.jpg" },{ image_src: "/assets/school_image/hps-image16.jpg" },{ image_src: "/assets/school_image/hps-image17.jpg" },{ image_src: "/assets/school_image/hps-image18.jpg" },{ image_src: "/assets/school_image/hps-image19.jpg" },{ image_src: "/assets/school_image/hps-image20.jpg" },{ image_src: "/assets/school_image/hps-image21.jpg" },{ image_src: "/assets/school_image/hps-image22.jpg" },{ image_src: "/assets/school_image/hps-image23.jpg" },{ image_src: "/assets/school_image/hps-image24.jpg" },{ image_src: "/assets/school_image/hps-image25.jpg" },{ image_src: "/assets/school_image/hps-image26.jpg" },{ image_src: "/assets/school_image/hps-image27.jpg" },{ image_src: "/assets/school_image/hps-image28.jpg" },{ image_src: "/assets/school_image/hps-image29.jpg" },{ image_src: "/assets/school_image/hps-image30.jpg" },{ image_src: "/assets/school_image/hps-image31.jpg" }]
|
||||
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ import Layout from "../layouts/Layout.astro";
|
|||
<img class="lg:max-w-2xl" src="/img/rec_girl.png" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Get in Touch with Holywisdom Preschool!</h1>
|
||||
<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Preschool!</h2>
|
||||
<h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Preschool – your gateway to educational excellence!</h3>
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Get in Touch with Holywisdom Public School!</h1>
|
||||
<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Public School!</h2>
|
||||
<h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Public School – your gateway to educational excellence!</h3>
|
||||
<!-- <div class="flex flex-row place-content-between">
|
||||
<a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
|
||||
</div> -->
|
||||
|
|
@ -21,8 +21,8 @@ import Layout from "../layouts/Layout.astro";
|
|||
</section>
|
||||
<section class="container mx-auto px-4 my-10">
|
||||
<div class="">
|
||||
<h1 class="text-2xl">Reach Out to Holywisdom Preschool</h1>
|
||||
<p class="">Contacting Holywisdom Preschool is your first step toward a seamless connection with our dedicated team. Whether you have inquiries about our programs, enrollment details, or simply want to learn more about our unique approach to early childhood education, we're here to help. Your child's journey with us begins with a conversation. Reach out through the provided contact information, and let's embark on the path of educational discovery together. We look forward to hearing from you and welcoming your family into the Holywisdom community.</p>
|
||||
<h1 class="text-2xl">Reach Out to Holywisdom Public School</h1>
|
||||
<p class="">Contacting Holywisdom Public School is your first step toward a seamless connection with our dedicated team. Whether you have inquiries about our programs, enrollment details, or simply want to learn more about our unique approach to early childhood education, we're here to help. Your child's journey with us begins with a conversation. Reach out through the provided contact information, and let's embark on the path of educational discovery together. We look forward to hearing from you and welcoming your family into the Holywisdom community.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 my-16">
|
||||
|
|
|
|||
|
|
@ -237,7 +237,7 @@ let inSportsData = [
|
|||
{outSportsData.map((data) => (
|
||||
<div class="drop-shadow-2xl flex flex-col justify-center place-items-center items-center hover:bg-[#3084b530] p-2 rounded-lg duration-[1s] cursor-pointer">
|
||||
<img class="" src={data.image} alt="" />
|
||||
<h2 class="pt-3">{data.name}</h2>
|
||||
<h2 class="pt-3 text-center">{data.name}</h2>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -246,7 +246,7 @@ let inSportsData = [
|
|||
{inSportsData.map((data) => (
|
||||
<div class="drop-shadow-2xl flex flex-col justify-center place-items-center items-center hover:bg-[#3084b530] p-2 rounded-lg duration-[1s] cursor-pointer">
|
||||
<img class="" src={data.image} alt="" />
|
||||
<h2 class="pt-3">{data.name}</h2>
|
||||
<h2 class="pt-3 ">{data.name}</h2>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<div>
|
||||
<input type="text" name="name" id="name" style="border: 1px solid #000"><br>
|
||||
<input type="text" name="mobile" id="mobile" style="border: 1px solid #000"><br>
|
||||
<input type="text" name="email" id="email" style="border: 1px solid #000"><br>
|
||||
<textarea name="message" id="message" style="border: 1px solid #000"></textarea><br>
|
||||
<button onclick="saveForm(event)" type="submit" style="border: 1px solid #000">Submit</button>
|
||||
</div>
|
||||
|
||||
<script is:inline>
|
||||
function saveForm(event){
|
||||
event.preventDefault();
|
||||
let userName = document.getElementById('name').value;
|
||||
let userMobile = document.getElementById('mobile').value;
|
||||
let userEmail = document.getElementById('email').value;
|
||||
let userMessage = document.getElementById('message').value;
|
||||
|
||||
let userData = {
|
||||
name : userName,
|
||||
mobile: userMobile,
|
||||
email: userEmail,
|
||||
message: userMessage
|
||||
}
|
||||
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/contact`, {
|
||||
method: 'POST',
|
||||
headers:{
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
})
|
||||
.then(error => {
|
||||
console.error(error)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,53 +1,53 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
const img3DResInter = [{ image_src: "/assets/school_image/hps-image1.jpg" },{ image_src: "/assets/school_image/hps-image2.jpg" },{ image_src: "/assets/school_image/hps-image3.jpg" },{ image_src: "/assets/school_image/hps-image4.jpg" },{ image_src: "/assets/school_image/hps-image5.jpg" },{ image_src: "/assets/school_image/hps-image6.jpg" },{ image_src: "/assets/school_image/hps-image7.jpg" },{ image_src: "/assets/school_image/hps-image8.jpg" },{ image_src: "/assets/school_image/hps-image9.jpg" },{ image_src: "/assets/school_image/hps-image10.jpg" },{ image_src: "/assets/school_image/hps-image11.jpg" },{ image_src: "/assets/school_image/hps-image12.jpg" },{ image_src: "/assets/school_image/hps-image13.jpg" },{ image_src: "/assets/school_image/hps-image14.jpg" },{ image_src: "/assets/school_image/hps-image15.jpg" },{ image_src: "/assets/school_image/hps-image16.jpg" },{ image_src: "/assets/school_image/hps-image17.jpg" },{ image_src: "/assets/school_image/hps-image18.jpg" },{ image_src: "/assets/school_image/hps-image19.jpg" },{ image_src: "/assets/school_image/hps-image20.jpg" },{ image_src: "/assets/school_image/hps-image21.jpg" },{ image_src: "/assets/school_image/hps-image22.jpg" },{ image_src: "/assets/school_image/hps-image23.jpg" },{ image_src: "/assets/school_image/hps-image24.jpg" },{ image_src: "/assets/school_image/hps-image25.jpg" },{ image_src: "/assets/school_image/hps-image26.jpg" },{ image_src: "/assets/school_image/hps-image27.jpg" },{ image_src: "/assets/school_image/hps-image28.jpg" },{ image_src: "/assets/school_image/hps-image29.jpg" },{ image_src: "/assets/school_image/hps-image30.jpg" },{ image_src: "/assets/school_image/hps-image31.jpg" }];
|
||||
const img3DResInter = [{ image_src: "/assets/school_image/hps-image1.jpg" },{ image_src: "/assets/school_image/hps-image2.jpg" },{ image_src: "/assets/school_image/hps-image3.jpg" },{ image_src: "/assets/school_image/hps-image4.jpg" },{ image_src: "/assets/school_image/hps-image5.jpg" },{ image_src: "/assets/school_image/hps-image6.jpg" },{ image_src: "/assets/school_image/hps-image7.jpg" },{ image_src: "/assets/school_image/hps-image8.jpg" },{ image_src: "/assets/school_image/hps-image9.jpg" },{ image_src: "/assets/school_image/hps-image10.jpg" },{ image_src: "/assets/school_image/hps-image11.jpg" },{ image_src: "/assets/school_image/hps-image12.jpg" },{ image_src: "/assets/school_image/hps-image13.jpg" },{ image_src: "/assets/school_image/hps-image14.jpg" },{ image_src: "/assets/school_image/hps-image16.jpg" },{ image_src: "/assets/school_image/hps-image17.jpg" },{ image_src: "/assets/school_image/hps-image18.jpg" },{ image_src: "/assets/school_image/hps-image19.jpg" },{ image_src: "/assets/school_image/hps-image20.jpg" },{ image_src: "/assets/school_image/hps-image21.jpg" },{ image_src: "/assets/school_image/hps-image22.jpg" },{ image_src: "/assets/school_image/hps-image23.jpg" },{ image_src: "/assets/school_image/hps-image24.jpg" },{ image_src: "/assets/school_image/hps-image25.jpg" },{ image_src: "/assets/school_image/hps-image26.jpg" },{ image_src: "/assets/school_image/hps-image27.jpg" },{ image_src: "/assets/school_image/hps-image28.jpg" },{ image_src: "/assets/school_image/hps-image29.jpg" },{ image_src: "/assets/school_image/hps-image30.jpg" },{ image_src: "/assets/school_image/hps-image31.jpg" }];
|
||||
|
||||
---
|
||||
|
||||
<Layout title="">
|
||||
<div>
|
||||
<section class="container-fluid gradintBack">
|
||||
<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center">
|
||||
<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center">
|
||||
<div class="w-full">
|
||||
<img class="lg:max-w-2xl" src="/img/rec_girl.png" alt="">
|
||||
<img class="lg:max-w-2xl aspect-video" src="/assets/school_image/hps-image8.jpg" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Holy Wisdom Paublic School Gallery!</h1>
|
||||
<!-- <h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Preschool!</h2> -->
|
||||
<!-- <h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Preschool – your gateway to educational excellence!</h3> -->
|
||||
<!-- <div class="flex flex-row place-content-between">
|
||||
<a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4">
|
||||
<section class="container mx-auto px-4 mt-8">
|
||||
<div class="demo-gallery">
|
||||
<ul id="lightgallery4" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
{img3DResInter.map((data: { image_src: string | undefined }) => (
|
||||
<li
|
||||
class="w-full md:w-[300px]"
|
||||
data-responsive={`${data.image_src} 375, ${data.image_src} 480, ${data.image_src} 800`}
|
||||
data-src={data.image_src}
|
||||
data-sub-html=" "
|
||||
>
|
||||
<a href="">
|
||||
<div class="w-full md:w-[400px] h-[400px]">
|
||||
<img class="img-responsive" src={data.image_src} alt="School Image" />
|
||||
<ul id="lightgallery4">
|
||||
{img3DResInter.map((data) => (
|
||||
<li class="w-full md:w-[300px] aspect-video" data-responsive={`${data.image_src} 375, ${data.image_src} 480, ${data.image_src} 800`} data-src={data.image_src} data-sub-html=" " >
|
||||
<a href="#">
|
||||
<div class="w-full md:w-[400px] aspect-video">
|
||||
<img class="img-responsive aspect-video" src={data.image_src} alt="Gallery item" />
|
||||
</div>
|
||||
<div class="demo-gallery-poster">
|
||||
<img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png" alt="Zoom Icon" />
|
||||
<img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png" alt="Zoom icon" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<script is:inline src="/assets/lightgallery.min.js"></script>
|
||||
<link rel="stylesheet" href="/assets/lightgallery.min.css">
|
||||
|
||||
<script is:inline>
|
||||
lightGallery(document.getElementById('lightgallery4'));
|
||||
lightGallery(document.getElementById('lightgallery4'))
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.gradintBack {
|
||||
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
|
||||
|
|
@ -56,51 +56,130 @@ const img3DResInter = [{ image_src: "/assets/school_image/hps-image1.jpg" },{ im
|
|||
margin-bottom: 0;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.demo-gallery > ul > li {
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li {
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
list-style: outside none none;
|
||||
}
|
||||
.demo-gallery > ul > li a {
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a {
|
||||
border: 3px solid #FFF;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
.demo-gallery > ul > li a > img {
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a > img {
|
||||
-webkit-transition: -webkit-transform 0.15s ease 0s;
|
||||
-moz-transition: -moz-transform 0.15s ease 0s;
|
||||
-o-transition: -o-transform 0.15s ease 0s;
|
||||
transition: transform 0.15s ease 0s;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.demo-gallery > ul > li a:hover > img {
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a:hover > img {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
|
||||
opacity: 1;
|
||||
}
|
||||
.demo-gallery > ul > li a .demo-gallery-poster {
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a .demo-gallery-poster {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
.demo-gallery > ul > li a .demo-gallery-poster > img {
|
||||
-webkit-transition: background-color 0.15s ease 0s;
|
||||
-o-transition: background-color 0.15s ease 0s;
|
||||
transition: background-color 0.15s ease 0s;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a .demo-gallery-poster > img {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
margin-top: -10px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.demo-gallery > ul > li a:hover .demo-gallery-poster {
|
||||
-webkit-transition: opacity 0.3s ease 0s;
|
||||
-o-transition: opacity 0.3s ease 0s;
|
||||
transition: opacity 0.3s ease 0s;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a:hover .demo-gallery-poster {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a > img {
|
||||
-webkit-transition: -webkit-transform 0.15s ease 0s;
|
||||
-moz-transition: -moz-transform 0.15s ease 0s;
|
||||
-o-transition: -o-transform 0.15s ease 0s;
|
||||
transition: transform 0.15s ease 0s;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a:hover > img {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a .demo-gallery-poster {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
-webkit-transition: background-color 0.15s ease 0s;
|
||||
-o-transition: background-color 0.15s ease 0s;
|
||||
transition: background-color 0.15s ease 0s;
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a .demo-gallery-poster > img {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
margin-top: -10px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transition: opacity 0.3s ease 0s;
|
||||
-o-transition: opacity 0.3s ease 0s;
|
||||
transition: opacity 0.3s ease 0s;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.demo-gallery .video .demo-gallery-poster img {
|
||||
height: 48px;
|
||||
margin-left: -24px;
|
||||
margin-top: -24px;
|
||||
opacity: 0.8;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.demo-gallery.dark > ul > li a {
|
||||
border: 3px solid #04070a;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,15 +5,37 @@
|
|||
<div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
|
||||
<img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
|
||||
<form action="" class="p-6">
|
||||
<input v-model="name" id="name" name="name" type="text" placeholder="User ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
|
||||
<input v-model="name" id="name" name="name" type="password" placeholder="Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-6" required/>
|
||||
<button class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Login</button>
|
||||
<input id="email" name="email" type="text" placeholder="User ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
|
||||
<input id="password" name="password" type="password" placeholder="Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-6" required/>
|
||||
<button onclick="myFunction(event)" class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Login</button>
|
||||
</form>
|
||||
<p class="">Not Registerd? <a href="/sign-up" class="text-[#FFFFFF] font-bold">Register Now</a></p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<script is:inline>
|
||||
function myFunction(event){
|
||||
event.preventDefault();
|
||||
let emailId = document.getElementById('email').value;
|
||||
let password = document.getElementById('password').value;
|
||||
let userData = {
|
||||
email : emailId,
|
||||
password : password
|
||||
}
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.content {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -2,23 +2,64 @@
|
|||
<div class="content">
|
||||
<section class="container mx-auto max-w-lg bg-[url(/img/hps_logo.png)] rounded-2xl">
|
||||
<div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
|
||||
<img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
|
||||
<form action="" class="p-6 space-y-4">
|
||||
<input v-model="name" id="name" name="name" type="text" placeholder="Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
|
||||
<input v-model="name" id="name" name="name" type="text" placeholder="Email ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
|
||||
<input v-model="name" id="name" name="name" type="text" placeholder="Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
|
||||
<input v-model="name" id="name" name="name" type="password" placeholder="New Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
|
||||
<input v-model="name" id="name" name="name" type="password" placeholder="Confirm Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
|
||||
<button class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Register</button>
|
||||
<img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="Logo">
|
||||
<form action="" class="p-6 space-y-4" onsubmit="signUp(event)">
|
||||
<input id="name" name="name" type="text" placeholder="Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
|
||||
<input id="email" name="email" type="email" placeholder="Email ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
|
||||
<input id="mobile" name="mobile" type="text" placeholder="Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
|
||||
<input id="password" name="password" type="password" placeholder="New Password" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
|
||||
<input id="con_password" name="con_password" type="password" placeholder="Confirm Password" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
|
||||
<button type="submit" class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Register</button>
|
||||
</form>
|
||||
<div class="flex flex-col place-content-between float-left">
|
||||
<p class="">Back to <a href="/login" class="text-[#3084b5] font-bold">Login</a></p>
|
||||
<p class="">Continue Without <a href="/" class="text-[#3084b5] font-bold">Login</a></p>
|
||||
<div class="flex flex-col">
|
||||
<p>Back to <a href="/login" class="text-[#3084b5] font-bold">Login</a></p>
|
||||
<p><a href="/" class="text-[#3084b5] font-bold">Continue</a> Without Login</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script is:inline>
|
||||
function signUp(event) {
|
||||
event.preventDefault(); // Prevent form submission
|
||||
let password = document.getElementById('password').value;
|
||||
let conPassword = document.getElementById('con_password').value;
|
||||
|
||||
if (password !== conPassword) {
|
||||
alert('Passwords do not match. Please try again.');
|
||||
return;
|
||||
}
|
||||
|
||||
let userName = document.getElementById('name').value;
|
||||
let userEmail = document.getElementById('email').value;
|
||||
let userMobile = document.getElementById('mobile').value;
|
||||
|
||||
let userSignData = {
|
||||
name: userName,
|
||||
email: userEmail,
|
||||
mobile: userMobile,
|
||||
password: password
|
||||
};
|
||||
console.log(userSignData)
|
||||
|
||||
fetch('https://game-du.teachertrainingkolkata.in/users', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userSignData)
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
|
||||
<div class="h-[200px] text-center bg-[#f59e0b]">
|
||||
Grid - 1
|
||||
</div>
|
||||
<div class="h-[200px] text-center bg-[#84cc16]">
|
||||
Grid - 2
|
||||
</div>
|
||||
<div class="h-[200px] text-center bg-[#84cc16]">
|
||||
Grid - 3
|
||||
</div>
|
||||
<div class="h-[200px] text-center bg-[#4f46e5]">
|
||||
Grid - 4
|
||||
</div>
|
||||
<div class="h-[200px] text-center bg-[#db2777]">
|
||||
Grid - 5
|
||||
</div>
|
||||
<div class="h-[200px] text-center bg-[#b91c1c]">
|
||||
Grid - 6
|
||||
</div>
|
||||
</div>
|
||||