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

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 */ /* Scroll Bar */
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -268,6 +296,13 @@ input[type="checkbox"]:checked::before {
left: 22px; left: 22px;
animation: bounce 1s infinite ease-in-out; 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 { @keyframes bounce {
@ -304,6 +339,9 @@ input[type="checkbox"]:checked::before {
@media (max-width: 768px) { @media (max-width: 768px) {
.splash-screen p{
font-size: 24px;
}
.login-main{ .login-main{
width: 100%; width: 100%;

2
src/app/layout.tsx
View File

@ -4,6 +4,7 @@ import NextTopLoader from "nextjs-toploader";
import "../assets/css/ruben-ui.css" import "../assets/css/ruben-ui.css"
import { AuthProvider } from "#/components/provider/authProvider"; import { AuthProvider } from "#/components/provider/authProvider";
import { QueryClientProvide } from "#/components/provider/queryClient"; import { QueryClientProvide } from "#/components/provider/queryClient";
import SplashScreen from "#/components/splashScreen";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Private Docs", title: "Private Docs",
@ -27,6 +28,7 @@ export default function RootLayout({
<body> <body>
<AuthProvider> <AuthProvider>
<QueryClientProvide> <QueryClientProvide>
<SplashScreen name="White" label="developer" timer={2000} />
<NextTopLoader color="#246BFD" shadow="0" /> <NextTopLoader color="#246BFD" shadow="0" />
{children} {children}
</QueryClientProvide> </QueryClientProvide>

1
src/components/header.tsx
View File

@ -11,7 +11,6 @@ export default function Header() {
className="text-red-500 h-auto" className="text-red-500 h-auto"
height={30} 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> <p className="r-p-m-0 word">Pr<span className="dot">•</span>ıvate Docs</p>
</div> </div>
</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>
}
</>
)
}