generated from dwd/boilarplate-astro-tailwind
pull/6/head
Suvodip
parent
2ec148bccb
commit
8dca92b6fe
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
|
|
@ -1,7 +1,7 @@
|
|||
<main>
|
||||
<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="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 ">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,133 @@
|
|||
<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
|
||||
class="bg-gradient-to-r from-blue-800 to-blue-600
|
||||
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 class="mb-4">
|
||||
<input
|
||||
id="display"
|
||||
class="w-full p-4 text-right bg-black text-green-400 rounded-lg text-3xl"
|
||||
disabled
|
||||
type="text">
|
||||
</div>
|
||||
<div
|
||||
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('/')">
|
||||
÷
|
||||
</button>
|
||||
</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>
|
||||
|
|
@ -1,15 +1,85 @@
|
|||
<div>
|
||||
<button onclick="fetchData()">Fetch Data</button>
|
||||
<div class="flex items-center justify-center min-h-screen bg-gray-900">
|
||||
<div
|
||||
class="clock-container relative">
|
||||
<div class="ring"></div>
|
||||
<div
|
||||
id="time"
|
||||
class="clock-text glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
|
||||
<script is:inline>
|
||||
function fetchData(){
|
||||
fetch(`https://dummy.restapiexample.com/api/v1/employees`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
})
|
||||
function updateClock(){
|
||||
const timeElement = document.getElementById('time');
|
||||
const now = new Date();
|
||||
let hours = now.getHours();
|
||||
let minutes = now.getMinutes();
|
||||
let seconds = now.getSeconds();
|
||||
|
||||
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>
|
||||
<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);
|
||||
}
|
||||
</script>
|
||||
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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue