Skip to content

Commit 86e3076

Browse files
OffLine911OffLine911
committed
feat(ui): Add splash screen and improve app initialization
- Create new splash.html with animated ForgeFlow branding and loading indicator - Implement SplashScreen React component with gradient logo and tagline - Add 1-second minimum splash screen display on app startup - Add loading animation keyframes to global CSS for splash screen bar - Update Wails app background color from #171723 to #1e1e1e for consistency - Align splash screen styling with main application dark theme - Improve visual polish with gradient text, pulsing logo, and smooth animations
1 parent 67685a8 commit 86e3076

4 files changed

Lines changed: 238 additions & 11 deletions

File tree

‎build/splash.html‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>ForgeFlow</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
width: 100vw;
16+
height: 100vh;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
21+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
22+
overflow: hidden;
23+
}
24+
25+
.splash-container {
26+
text-align: center;
27+
animation: fadeIn 0.5s ease-in;
28+
}
29+
30+
.logo {
31+
width: 120px;
32+
height: 120px;
33+
margin: 0 auto 32px;
34+
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
35+
border-radius: 24px;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
box-shadow: 0 20px 60px rgba(59, 130, 246, 0.3);
40+
animation: pulse 2s ease-in-out infinite;
41+
}
42+
43+
.logo-icon {
44+
width: 64px;
45+
height: 64px;
46+
position: relative;
47+
}
48+
49+
.logo-icon::before,
50+
.logo-icon::after {
51+
content: '';
52+
position: absolute;
53+
background: white;
54+
border-radius: 4px;
55+
}
56+
57+
.logo-icon::before {
58+
width: 40px;
59+
height: 8px;
60+
top: 12px;
61+
left: 12px;
62+
box-shadow: 0 16px 0 white, 0 32px 0 white;
63+
}
64+
65+
.logo-icon::after {
66+
width: 8px;
67+
height: 40px;
68+
top: 12px;
69+
right: 12px;
70+
}
71+
72+
h1 {
73+
font-size: 48px;
74+
font-weight: 700;
75+
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
76+
-webkit-background-clip: text;
77+
-webkit-text-fill-color: transparent;
78+
background-clip: text;
79+
margin-bottom: 12px;
80+
letter-spacing: -0.02em;
81+
}
82+
83+
.tagline {
84+
font-size: 16px;
85+
color: #94a3b8;
86+
margin-bottom: 48px;
87+
font-weight: 500;
88+
}
89+
90+
.loader {
91+
width: 200px;
92+
height: 4px;
93+
background: rgba(148, 163, 184, 0.2);
94+
border-radius: 2px;
95+
margin: 0 auto;
96+
overflow: hidden;
97+
position: relative;
98+
}
99+
100+
.loader-bar {
101+
height: 100%;
102+
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
103+
border-radius: 2px;
104+
animation: loading 1.5s ease-in-out infinite;
105+
}
106+
107+
.version {
108+
margin-top: 24px;
109+
font-size: 12px;
110+
color: #64748b;
111+
font-weight: 500;
112+
}
113+
114+
@keyframes fadeIn {
115+
from {
116+
opacity: 0;
117+
transform: translateY(20px);
118+
}
119+
to {
120+
opacity: 1;
121+
transform: translateY(0);
122+
}
123+
}
124+
125+
@keyframes pulse {
126+
0%, 100% {
127+
transform: scale(1);
128+
box-shadow: 0 20px 60px rgba(59, 130, 246, 0.3);
129+
}
130+
50% {
131+
transform: scale(1.05);
132+
box-shadow: 0 25px 70px rgba(59, 130, 246, 0.4);
133+
}
134+
}
135+
136+
@keyframes loading {
137+
0% {
138+
transform: translateX(-100%);
139+
}
140+
100% {
141+
transform: translateX(400%);
142+
}
143+
}
144+
</style>
145+
</head>
146+
<body>
147+
<div class="splash-container">
148+
<div class="logo">
149+
<div class="logo-icon"></div>
150+
</div>
151+
<h1>ForgeFlow</h1>
152+
<p class="tagline">Local automation. Zero cloud. Full control.</p>
153+
<div class="loader">
154+
<div class="loader-bar"></div>
155+
</div>
156+
<p class="version">v0.1.0</p>
157+
</div>
158+
</body>
159+
</html>

‎frontend/src/App.tsx‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,65 @@ import NodeSettings from "@/components/layout/NodeSettings";
66
import Settings from "@/components/layout/Settings";
77
import FlowCanvas from "@/components/flow/FlowCanvas";
88
import { useFlowStore } from "@/stores/flowStore";
9-
import { useEffect } from "react";
9+
import { useEffect, useState } from "react";
10+
11+
function SplashScreen() {
12+
return (
13+
<div className="h-screen w-screen flex items-center justify-center bg-[#1e1e1e]">
14+
<div className="text-center animate-in fade-in duration-500">
15+
{/* Logo */}
16+
<div className="w-32 h-32 mx-auto mb-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-3xl flex items-center justify-center shadow-2xl shadow-blue-500/30 animate-pulse">
17+
<div className="relative w-16 h-16">
18+
<div className="absolute inset-0">
19+
<div className="w-10 h-2 bg-white rounded-sm absolute top-3 left-3" />
20+
<div className="w-10 h-2 bg-white rounded-sm absolute top-7 left-3" />
21+
<div className="w-10 h-2 bg-white rounded-sm absolute top-11 left-3" />
22+
<div className="w-2 h-10 bg-white rounded-sm absolute top-3 right-3" />
23+
</div>
24+
</div>
25+
</div>
26+
27+
{/* Title */}
28+
<h1 className="text-5xl font-bold mb-3 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
29+
ForgeFlow
30+
</h1>
31+
32+
{/* Tagline */}
33+
<p className="text-[#858585] text-base font-medium mb-12">
34+
Local automation. Zero cloud. Full control.
35+
</p>
36+
37+
{/* Loading Bar */}
38+
<div className="w-52 h-1 bg-[#2d2d30] rounded-full mx-auto overflow-hidden">
39+
<div className="h-full bg-gradient-to-r from-blue-500 to-purple-600 rounded-full animate-[loading_1.5s_ease-in-out_infinite]" />
40+
</div>
41+
42+
{/* Version */}
43+
<p className="text-[#858585] text-xs font-medium mt-6">v0.1.0</p>
44+
</div>
45+
</div>
46+
);
47+
}
1048

1149
export default function App() {
1250
const { isDarkMode, selectedNodeId, setSelectedNodeId, settingsOpen, setSettingsOpen } = useFlowStore();
51+
const [isLoading, setIsLoading] = useState(true);
1352

1453
useEffect(() => {
1554
document.documentElement.classList.toggle("dark", isDarkMode);
55+
56+
// Show splash for minimum 1 second
57+
const timer = setTimeout(() => {
58+
setIsLoading(false);
59+
}, 1000);
60+
61+
return () => clearTimeout(timer);
1662
}, [isDarkMode]);
1763

64+
if (isLoading) {
65+
return <SplashScreen />;
66+
}
67+
1868
return (
1969
<ReactFlowProvider>
2070
<div className="h-screen w-screen flex flex-col overflow-hidden select-none">

‎frontend/src/index.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,3 +172,13 @@ body {
172172
-webkit-app-region: no-drag;
173173
app-region: no-drag;
174174
}
175+
176+
/* Splash screen loading animation */
177+
@keyframes loading {
178+
0% {
179+
transform: translateX(-100%);
180+
}
181+
100% {
182+
transform: translateX(400%);
183+
}
184+
}

‎main.go‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@ func main() {
1818
storage := NewStorage()
1919

2020
err := wails.Run(&options.App{
21-
Title: "ForgeFlow",
22-
Width: 1280,
23-
Height: 800,
24-
MinWidth: 1024,
25-
MinHeight: 600,
26-
DisableResize: false,
27-
Fullscreen: false,
28-
Frameless: true,
29-
StartHidden: false,
21+
Title: "ForgeFlow",
22+
Width: 1280,
23+
Height: 800,
24+
MinWidth: 1024,
25+
MinHeight: 600,
26+
DisableResize: false,
27+
Fullscreen: false,
28+
Frameless: true,
29+
StartHidden: false,
3030
HideWindowOnClose: false,
31-
BackgroundColour: &options.RGBA{R: 23, G: 23, B: 30, A: 255},
31+
BackgroundColour: &options.RGBA{R: 30, G: 30, B: 30, A: 255}, // #1e1e1e to match app
3232
AssetServer: &assetserver.Options{
3333
Assets: assets,
3434
},
@@ -43,6 +43,14 @@ func main() {
4343
WebviewIsTransparent: false,
4444
WindowIsTranslucent: false,
4545
Theme: windows.Dark,
46+
CustomTheme: &windows.ThemeSettings{
47+
DarkModeTitleBar: windows.RGB(30, 30, 30), // #1e1e1e
48+
DarkModeTitleText: windows.RGB(212, 212, 212), // #d4d4d4
49+
DarkModeBorder: windows.RGB(62, 62, 66), // #3e3e42
50+
LightModeTitleBar: windows.RGB(30, 30, 30),
51+
LightModeTitleText: windows.RGB(212, 212, 212),
52+
LightModeBorder: windows.RGB(62, 62, 66),
53+
},
4654
},
4755
})
4856

0 commit comments

Comments
 (0)