dwd-projects
/
holywisdompublicschool.com
generated from dwd/boilarplate-astro-tailwind
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s1

pull/6/head
Suvodip 2024-09-11 18:25:42 +05:30
parent 2ec148bccb
commit 8dca92b6fe
5 changed files with 256 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/bg-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

2
src/pages/login1.astro
View File

@ -1,7 +1,7 @@
<main> <main>
<div class="bg-[url(/img/bg-image.jpg)] bg-cover bg-center h-screen"> <div class="bg-[url(/img/bg-image.jpg)] bg-cover bg-center h-screen">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div class="container mx-auto px-4 max-w-lg py-6 bg-[#00000080] rounded-lg"> <div class="container mx-auto px-4 max-w-lg py-6 bg-[#00000080] rounded-lg shadow-[0px 0px 10px 0px] shadow-[#FFF]">
<div class="flex flex-col space-y-3 "> <div class="flex flex-col space-y-3 ">
<p class="text-2xl font-bold text-[#FFF] ">Welcome Back</p> <p class="text-2xl font-bold text-[#FFF] ">Welcome Back</p>
<p class="text-lg text-[#fff]">Enter your email and password to access your account</p> <p class="text-lg text-[#fff]">Enter your email and password to access your account</p>

143
src/pages/test.astro
View File

@ -1,20 +1,133 @@
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2"> <div
<div class="h-[200px] text-center bg-[#f59e0b]"> class="bg-gradient-to-r from-blue-800 to-blue-600
Grid - 1 flex items-center justify-center min-h-screen">
<div
class="bg-gray-800 shadow-lg rounded-lg p-6 max-w-sm">
<div
class="mb-4 text-white text-center text-3xl font-semibold">
Calculator
</div> </div>
<div class="h-[200px] text-center bg-[#84cc16]"> <div class="mb-4">
Grid - 2 <input
id="display"
class="w-full p-4 text-right bg-black text-green-400 rounded-lg text-3xl"
disabled
type="text">
</div> </div>
<div class="h-[200px] text-center bg-[#84cc16]"> <div
Grid - 3 class="grid grid-cols-4 gap-4">
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('7')">7
</button>
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('8')">8
</button>
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('9')">9
</button>
<button
class="bg-red-500 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="clearDisplay()">C
</button>
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('4')">4
</button>
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('5')">5
</button>
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('6')">6
</button>
<button
class="bg-orange-500 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendOperator('+')">+
</button>
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('1')">1
</button>
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('2')">2
</button>
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('3')">3
</button>
<button
class="bg-orange-500 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendOperator('-')">-
</button>
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('0')">0
</button>
<button
class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendNumber('.')">.
</button>
<button
class="bg-green-500 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="calculate()">=
</button>
<button
class="bg-orange-500 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendOperator('*')">*
</button>
<button
class="col-span-4 bg-orange-500 p-4 rounded-lg text-xl font-semibold
text-black"
onclick="appendOperator('/')">
&#247;
</button>
</div> </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>
</div> </div>
<script is:inline>
let displayValue = '';
function appendNumber(number){
displayValue += number;
document.getElementById('display').value = displayValue;
}
function appendOperator(operator){
displayValue += operator;
document.getElementById('display').value = displayValue;
}
function clearDisplay(){
displayValue = '';
document.getElementById('display').value = '';
}
function calculate(){
try{
displayValue = eval(displayValue);
document.getElementById('display').value = displayValue;
} catch (error){
document.getElementById('display').value = 'Error';
}
}
</script>

92
src/pages/test2.astro
View File

@ -1,15 +1,85 @@
<div> <div class="flex items-center justify-center min-h-screen bg-gray-900">
<button onclick="fetchData()">Fetch Data</button> <div
class="clock-container relative">
<div class="ring"></div>
<div
id="time"
class="clock-text glow"></div>
</div>
</div> </div>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
<script is:inline> <script is:inline>
function fetchData(){ function updateClock(){
fetch(`https://dummy.restapiexample.com/api/v1/employees`) const timeElement = document.getElementById('time');
.then(response => response.json()) const now = new Date();
.then(data => { let hours = now.getHours();
console.log(data) let minutes = now.getMinutes();
}) let seconds = now.getSeconds();
.catch(error => {
console.error(error) hours = hours < 10 ? '0' + hours : hours;
}) minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
timeElement.innerHTML = `${hours}:${minutes}:${seconds}`;
} }
setInterval(updateClock, 1000);
updateClock();
</script> </script>
<style>
.clock-container {
background: radial-gradient(circle at 50%, #ff4081, #d500f9);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-radius: 1rem;
padding: 2rem;
width: 350px;
height: 150px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.clock-text {
font-family: 'Roboto', sans-serif;
color: #ffffff;
font-size: 4rem;
letter-spacing: 0.1em;
text-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
.glow {
animation: glow 1.5s infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}
to {
text-shadow: 0 0 25px rgba(255, 255, 255, 1);
}
}
.ring {
position: absolute;
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
width: 120%;
height: 120%;
top: -10%;
left: -10%;
z-index: 0;
animation: ring 2s linear infinite;
}
@keyframes ring {
0% {
transform: scale(0.8);
opacity: 0.6;
}
50% {
transform: scale(1.1);
opacity: 0.3;
}
100% {
transform: scale(0.8);
opacity: 0.6;
}
}
</style>

42
src/pages/test3.astro Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Themed Login Page</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background: url('/img/bg-3.jpg') no-repeat center center;
background-size: cover;
}
</style>
</head>
<body class="min-h-screen bg-black bg-opacity-80 flex justify-center items-center">
<div class="bg-gray-900/60 bg-opacity-90 shadow-lg rounded-lg w-full max-w-md p-8">
<h2 class="text-3xl font-bold text-center text-white mb-6">Welcome Back</h2>
<div class="flex justify-center mb-8">
<img src="https://via.placeholder.com/80" alt="Login Icon" class="w-20 h-20 rounded-full border-4 border-gray-700 shadow-lg">
</div>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-300 font-medium mb-2">Email</label>
<input type="email" id="email" class="bg-transparent w-full px-4 py-2 bg-gray-800 text-gray-300 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-300 font-medium mb-2">Password</label>
<input type="password" id="password" class="bg-transparent w-full px-4 py-2 bg-gray-800 text-gray-300 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Enter your password">
</div>
<button class="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 rounded-lg transition-all duration-200">Login</button>
</form>
<p class="text-center text-gray-400 mt-4">Don't have an account?
<a href="#" class="text-teal-400 hover:underline">Sign up</a>
</p>
</div>
</body>
</html>