mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.7 KiB
HTML
83 lines
1.7 KiB
HTML
3 weeks ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta name="description" content="Auth Layout with animated background">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
background: linear-gradient(135deg, var(--color-primary-light, #e0e7ff) 0%, var(--color-primary-dark, #4338ca) 100%);
|
||
|
|
font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-layer {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bubble {
|
||
|
|
position: absolute;
|
||
|
|
bottom: -150px;
|
||
|
|
background: rgba(255, 255, 255, 0.2);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: rise linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
vslot {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rise {
|
||
|
|
0% {
|
||
|
|
transform: translateY(0) rotate(0);
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateY(-120vh) rotate(360deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="bg-layer">
|
||
|
|
<div v-for="b in bubbles" class="bubble" :style="b"></div>
|
||
|
|
</div>
|
||
|
|
<vslot></vslot>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
bubbles = [];
|
||
|
|
const n = 15;
|
||
|
|
for (let i = 0; i < n; i++) {
|
||
|
|
const size = Math.random() * 80 + 40;
|
||
|
|
bubbles.push({
|
||
|
|
width: size + 'px',
|
||
|
|
height: size + 'px',
|
||
|
|
left: (Math.random() * 100) + '%',
|
||
|
|
animationDelay: (Math.random() * 15) + 's',
|
||
|
|
animationDuration: (Math.random() * 15 + 10) + 's',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|