ristoo/privatedocs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: missing .env chore: splashScreen

Browse Source
This commit is contained in:
Ruben 2025-04-01 20:06:19 +01:00
parent 8c12667693
commit ea04c954b0
6 changed files with 143 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(auth)/layout.tsx
View File

@ -1,7 +1,7 @@
import Header from "#/components/header";
export default function AuthLayout({ children }: { children: React.ReactNode }) {
return(
return (
<div className="flex flex-col min-h-screen">
<Header />
<div className="flex flex-1 justify-center items-center bg-blue-100">

38
src/app/globals.css
View File

@ -203,6 +203,34 @@ input[type="checkbox"]:checked::before {
}
/* Splash Screnn */
.splash-screen {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--bluegray);
z-index: 99;
}
.splash-screen p{
width: max-content;
font-size: 32px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.splash-screen span {
/* font-family: "Inter 200"; */
font-weight: 100 !important;
}
/* Scroll Bar */
::-webkit-scrollbar {
@ -268,6 +296,13 @@ input[type="checkbox"]:checked::before {
left: 22px;
animation: bounce 1s infinite ease-in-out;
}
.splash-screen .dot{
font-size: 48px;
top: -28px;
left: 28px;
animation: bounce 1s infinite ease-in-out;
}
@keyframes bounce {
@ -304,6 +339,9 @@ input[type="checkbox"]:checked::before {
@media (max-width: 768px) {
.splash-screen p{
font-size: 24px;
}
.login-main{
width: 100%;

4
src/app/layout.tsx
View File

@ -4,6 +4,7 @@ import NextTopLoader from "nextjs-toploader";
import "../assets/css/ruben-ui.css"
import { AuthProvider } from "#/components/provider/authProvider";
import { QueryClientProvide } from "#/components/provider/queryClient";
import SplashScreen from "#/components/splashScreen";
export const metadata: Metadata = {
title: "Private Docs",
@ -21,12 +22,13 @@ export default function RootLayout({
<head>
<link rel="icon" href="/favicon.svg" />
<link rel="favicon.svg" href="/favicon.svg" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossOrigin="anonymous"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossOrigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossOrigin="anonymous"></script>
</head>
<body>
<AuthProvider>
<QueryClientProvide>
<SplashScreen name="White" label="developer" timer={2000} />
<NextTopLoader color="#246BFD" shadow="0" />
{children}
</QueryClientProvide>

1
src/components/header.tsx
View File

@ -11,7 +11,6 @@ export default function Header() {
className="text-red-500 h-auto"
height={30}
/>
{/* <p className="text-2xl font-bold text-black">Private Docs</p> */}
<p className="r-p-m-0 word">Pr<span className="dot">•</span>ıvate Docs</p>
</div>
</div>

63
src/components/splashScreen.tsx Normal file
View File

@ -0,0 +1,63 @@
"use client"
import Image from "next/image";
import { icons } from "#/assets/icons";
import { ReactNode, useEffect, useState } from "react";
interface Props {
name: string
label: string
timer: number,
}
export default function SplashScreen({ name, label, timer }: Props) {
const [showSplash, setShowSplash] = useState(false);
useEffect(() => {
const timeout = setTimeout(() => setShowSplash(false), timer);
if (typeof window !== undefined) {
if (!sessionStorage.getItem('sessionInitialized')) {
setShowSplash(true);
// Set session
} else {
setShowSplash(false);
//console.log('Session already exists');
}
const handleUnload = () => sessionStorage.removeItem('sessionInitialized')
window.addEventListener("beforeunload", handleUnload);
return () => {
clearTimeout(timeout)
handleUnload
} // Clean up the timeout on unmount
}
}, [timer]);
return (
<>
{showSplash &&
<div className="splash-screen w-[100vw] h-[100vh] ">
<div className="d-flex justify-content-center align-items-center gap-3">
<Image
src={icons.logo}
alt="Private Docs"
className="text-red-500 h-auto"
height={48}
/>
<p className="r-p-m-0 word">Pr<span className="dot">•</span>ıvate Docs</p>
</div>
</div>
}
</>
)
}