Skip to content

Commit 97b7538

Browse files
DevasyDevasy
authored
Create Design Revamp.html
1 parent 6df2118 commit 97b7538

File tree

1 file changed

+304
-0
lines changed

1 file changed

+304
-0
lines changed

‎Design Revamp.html‎

Lines changed: 304 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,304 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="scroll-smooth">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Interactive Blueprint: Splitwiser Redesign</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
11+
<!-- Chosen Palette: Vibrant Trust -->
12+
<!-- Application Structure Plan: The SPA is structured as a single-page interactive exploration of the design blueprint. It uses a fixed top navigation for smooth scrolling between thematic sections (Vision, Principles, Design System, etc.). This structure was chosen to mirror the logical flow of the report while transforming it from a static document into an engaging, hands-on experience. Key interactions include live demonstrations of the design system (colors, typography, glassmorphism), an interactive component library showcasing button/form states, and animated mockups of the final app screens. This allows the user to not just read about the design principles, but to see and interact with them directly, leading to a deeper understanding. -->
13+
<!-- Visualization & Content Choices: The report's content is qualitative, describing a design system. Therefore, traditional data charts are not applicable. Instead, information is presented using interactive HTML/CSS/JS components. Report Info: Color Palette -> Goal: Inform/Interact -> Presentation: Interactive color swatches -> Interaction: Hover/click to see details -> Justification: Allows users to experience the palette directly. | Report Info: Components (Buttons) -> Goal: Demonstrate -> Presentation: Live HTML buttons -> Interaction: Click to see different states (pressed, disabled) -> Justification: Provides a tangible feel for the component's behavior. | Report Info: Screen Mockups -> Goal: Visualize -> Presentation: Styled HTML/CSS layouts -> Interaction: Hover for annotations -> Justification: Connects the abstract design system to its concrete application in the final product. All visuals are created using HTML/CSS/Tailwind, confirming no SVG/Mermaid JS is used. -->
14+
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
15+
<style>
16+
:root {
17+
--color-background-primary: #FFFFFF;
18+
--color-background-secondary: #F3F4F6;
19+
--color-text-primary: #111827;
20+
--color-text-secondary: #6B7280;
21+
--color-brand-accent: #8B5CF6;
22+
--color-brand-accent-darker: #7C3AED;
23+
--color-semantic-success: #10B981;
24+
--color-semantic-error: #EF4444;
25+
--color-border-subtle: #E5E7EB;
26+
}
27+
body {
28+
font-family: 'Inter', sans-serif;
29+
background-color: var(--color-background-primary);
30+
color: var(--color-text-primary);
31+
}
32+
.glassmorphic {
33+
background: rgba(255, 255, 255, 0.4);
34+
backdrop-filter: blur(24px);
35+
-webkit-backdrop-filter: blur(24px);
36+
border: 1px solid rgba(255, 255, 255, 0.2);
37+
}
38+
.nav-link {
39+
transition: color 0.2s ease-in-out;
40+
}
41+
.nav-link:hover {
42+
color: var(--color-brand-accent);
43+
}
44+
.section-title {
45+
font-size: 2.25rem;
46+
font-weight: 700;
47+
line-height: 2.5rem;
48+
}
49+
.section-subtitle {
50+
font-size: 1.125rem;
51+
color: var(--color-text-secondary);
52+
max-width: 48rem;
53+
margin: 1rem auto 0;
54+
}
55+
.principle-card {
56+
transition: transform 0.3s ease, box-shadow 0.3s ease;
57+
}
58+
.principle-card:hover {
59+
transform: translateY(-8px);
60+
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
61+
}
62+
.component-showcase button, .component-showcase input {
63+
transition: all 0.2s ease-in-out;
64+
}
65+
.btn-primary {
66+
background-color: var(--color-brand-accent);
67+
color: white;
68+
}
69+
.btn-primary:hover {
70+
background-color: var(--color-brand-accent-darker);
71+
}
72+
.btn-primary:active {
73+
transform: scale(0.98);
74+
}
75+
.btn-primary:disabled {
76+
background-color: #9CA3AF;
77+
opacity: 0.7;
78+
cursor: not-allowed;
79+
}
80+
.btn-secondary {
81+
background-color: transparent;
82+
border: 1px solid var(--color-brand-accent);
83+
color: var(--color-brand-accent);
84+
}
85+
.btn-secondary:hover {
86+
background-color: rgba(139, 92, 246, 0.1);
87+
}
88+
.btn-secondary:active {
89+
transform: scale(0.98);
90+
}
91+
.btn-tertiary {
92+
color: var(--color-brand-accent);
93+
}
94+
.btn-tertiary:hover {
95+
text-decoration: underline;
96+
}
97+
.input-field {
98+
background-color: var(--color-background-secondary);
99+
border: 1px solid var(--color-border-subtle);
100+
}
101+
.input-field:focus {
102+
outline: none;
103+
border-color: var(--color-brand-accent);
104+
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
105+
}
106+
.input-field.error {
107+
border-color: var(--color-semantic-error);
108+
}
109+
.mobile-mockup {
110+
width: 300px;
111+
height: 600px;
112+
border: 10px solid #1f2937;
113+
border-radius: 40px;
114+
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
115+
}
116+
.animated-element {
117+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
118+
}
119+
</style>
120+
</head>
121+
<body class="antialiased">
122+
123+
<header id="header" class="bg-white/80 backdrop-blur-sm fixed top-0 left-0 right-0 z-50 border-b border-gray-200">
124+
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
125+
<h1 class="text-xl font-bold text-gray-800">Splitwiser Blueprint</h1>
126+
<nav class="hidden md:flex space-x-8">
127+
<a href="#vision" class="nav-link text-gray-600 font-medium">Vision</a>
128+
<a href="#principles" class="nav-link text-gray-600 font-medium">Principles</a>
129+
<a href="#system" class="nav-link text-gray-600 font-medium">Design System</a>
130+
<a href="#components" class="nav-link text-gray-600 font-medium">Components</a>
131+
<a href="#screens" class="nav-link text-gray-600 font-medium">Screens</a>
132+
<a href="#motion" class="nav-link text-gray-600 font-medium">Motion</a>
133+
</nav>
134+
</div>
135+
</header>
136+
137+
<main class="pt-20">
138+
139+
<section id="vision" class="py-20 text-center">
140+
<div class="container mx-auto px-6">
141+
<h2 class="text-4xl md:text-6xl font-extrabold tracking-tight" style="color: var(--color-text-primary);">A New Vision for Expense Splitting</h2>
142+
<p class="mt-4 text-lg md:text-xl max-w-3xl mx-auto" style="color: var(--color-text-secondary);">Moving from a '90s feel to a modern, Gen Z-centric experience through the philosophy of <span class="font-bold" style="color: var(--color-brand-accent);">Expressive Minimalism</span>.</p>
143+
</div>
144+
</section>
145+
146+
<section id="principles" class="py-20 bg-gray-50">
147+
<div class="container mx-auto px-6 text-center">
148+
<h2 class="section-title">Core Principles for Gen Z</h2>
149+
<p class="section-subtitle">These four pillars translate Gen Z's digital behaviors into an actionable design framework, ensuring the app is not just used, but loved.</p>
150+
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-12">
151+
<div class="principle-card bg-white p-8 rounded-2xl shadow-sm text-left">
152+
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
153+
<span class="text-2xl">⚡️</span>
154+
</div>
155+
<h3 class="text-xl font-bold mb-2">Immediacy</h3>
156+
<p style="color: var(--color-text-secondary);">Designing for an 8-second attention span. Performance is a feature, minimalism is a functional requirement, and every action gets instant feedback.</p>
157+
</div>
158+
<div class="principle-card bg-white p-8 rounded-2xl shadow-sm text-left">
159+
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
160+
<span class="text-2xl">🤝</span>
161+
</div>
162+
<h3 class="text-xl font-bold mb-2">Authenticity</h3>
163+
<p style="color: var(--color-text-secondary);">Building trust through transparency. No fake fronts, just clear financial data, upfront policies, and honest communication.</p>
164+
</div>
165+
<div class="principle-card bg-white p-8 rounded-2xl shadow-sm text-left">
166+
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
167+
<span class="text-2xl">🎨</span>
168+
</div>
169+
<h3 class="text-xl font-bold mb-2">Personalization</h3>
170+
<p style="color: var(--color-text-secondary);">The interface as an extension of identity. Offering meaningful customization like dark mode and accent colors to make the app feel personal.</p>
171+
</div>
172+
<div class="principle-card bg-white p-8 rounded-2xl shadow-sm text-left">
173+
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
174+
<span class="text-2xl">🌍</span>
175+
</div>
176+
<h3 class="text-xl font-bold mb-2">Values-Driven</h3>
177+
<p style="color: var(--color-text-secondary);">Embedding ethics into the design. Prioritizing accessibility, inclusive representation, and gender-neutral language as a baseline requirement.</p>
178+
</div>
179+
</div>
180+
</div>
181+
</section>
182+
183+
<section id="system" class="py-20">
184+
<div class="container mx-auto px-6 text-center">
185+
<h2 class="section-title">The Design System</h2>
186+
<p class="section-subtitle">The single source of truth that codifies "Expressive Minimalism" into a set of reusable components and clear standards for a consistent, high-quality experience.</p>
187+
188+
<div class="mt-16 text-left space-y-16">
189+
<div>
190+
<h3 class="text-2xl font-bold mb-4 text-center">Aesthetic: Strategic Glassmorphism</h3>
191+
<div class="relative h-80 rounded-2xl overflow-hidden p-8 flex items-center justify-center bg-gradient-to-br from-purple-500 to-indigo-600">
192+
<div class="absolute -top-20 -left-20 w-64 h-64 bg-white/20 rounded-full filter blur-xl"></div>
193+
<div class="absolute -bottom-20 -right-10 w-80 h-80 bg-white/20 rounded-full filter blur-2xl"></div>
194+
<div class="glassmorphic w-full max-w-md p-8 rounded-2xl text-center">
195+
<h4 class="text-xl font-bold text-white">Floating Content</h4>
196+
<p class="text-white/80 mt-2">This effect is used for background surfaces like cards to create depth and a modern feel, while critical text remains on opaque surfaces for accessibility.</p>
197+
</div>
198+
</div>
199+
</div>
200+
201+
<div>
202+
<h3 class="text-2xl font-bold mb-6 text-center">Color Palette</h3>
203+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
204+
<div>
205+
<h4 class="font-semibold mb-3">Primary (Fintech Trust)</h4>
206+
<div class="flex space-x-2">
207+
<div class="w-full h-16 rounded-lg flex items-center justify-center text-white" style="background-color: #111827;">Deep Blue</div>
208+
<div class="w-full h-16 rounded-lg flex items-center justify-center text-white" style="background-color: #047857;">Dark Green</div>
209+
</div>
210+
</div>
211+
<div>
212+
<h4 class="font-semibold mb-3">Accent (Gen Z Expression)</h4>
213+
<div class="flex space-x-2">
214+
<div class="w-full h-16 rounded-lg" style="background-color: #8B5CF6;"></div>
215+
<div class="w-full h-16 rounded-lg" style="background-color: #22D3EE;"></div>
216+
<div class="w-full h-16 rounded-lg" style="background-color: #E52A6F;"></div>
217+
</div>
218+
</div>
219+
<div>
220+
<h4 class="font-semibold mb-3">Neutral (Foundation)</h4>
221+
<div class="flex space-x-2">
222+
<div class="w-full h-16 rounded-lg" style="background-color: #F9FAFB; border: 1px solid #E5E7EB;"></div>
223+
<div class="w-full h-16 rounded-lg" style="background-color: #E5E7EB;"></div>
224+
<div class="w-full h-16 rounded-lg" style="background-color: #6B7280;"></div>
225+
<div class="w-full h-16 rounded-lg" style="background-color: #1F2937;"></div>
226+
</div>
227+
</div>
228+
<div>
229+
<h4 class="font-semibold mb-3">Semantic (Status)</h4>
230+
<div class="flex space-x-2">
231+
<div class="w-full h-16 rounded-lg" style="background-color: var(--color-semantic-success);"></div>
232+
<div class="w-full h-16 rounded-lg" style="background-color: #F59E0B;"></div>
233+
<div class="w-full h-16 rounded-lg" style="background-color: var(--color-semantic-error);"></div>
234+
</div>
235+
</div>
236+
</div>
237+
</div>
238+
239+
<div>
240+
<h3 class="text-2xl font-bold mb-6 text-center">Typography: Inter</h3>
241+
<div class="bg-gray-50 p-8 rounded-2xl">
242+
<p class="text-4xl font-bold" id="type-demo">Display Text</p>
243+
<h1 class="text-3xl font-semibold mt-2">Screen Title (H1)</h1>
244+
<h2 class="text-2xl font-semibold mt-2">Section Heading (H2)</h2>
245+
<p class="text-base mt-4">This is body text. Inter was designed for high legibility on screens, making it perfect for both expressive headlines and dense financial data.</p>
246+
<p class="text-sm text-gray-500 mt-2">This is caption text for metadata.</p>
247+
</div>
248+
</div>
249+
</div>
250+
</div>
251+
</section>
252+
253+
<section id="components" class="py-20 bg-gray-50">
254+
<div class="container mx-auto px-6 text-center">
255+
<h2 class="section-title">Core Components</h2>
256+
<p class="section-subtitle">The reusable building blocks of the interface. Standardized for consistency, accessibility, and development efficiency.</p>
257+
<div class="component-showcase mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12 text-left">
258+
<div class="space-y-8">
259+
<h3 class="text-xl font-bold">Buttons & CTAs</h3>
260+
<div class="flex items-center space-x-4">
261+
<button class="btn-primary px-6 py-3 rounded-lg font-semibold">Primary Action</button>
262+
<button class="btn-secondary px-6 py-3 rounded-lg font-semibold">Secondary</button>
263+
<button class="btn-tertiary font-semibold">Tertiary</button>
264+
</div>
265+
<div>
266+
<p class="font-medium mb-2">States:</p>
267+
<div class="flex items-center space-x-4">
268+
<button class="btn-primary px-6 py-3 rounded-lg font-semibold" disabled>Disabled</button>
269+
<button id="loading-btn" class="btn-primary px-6 py-3 rounded-lg font-semibold w-36 flex items-center justify-center">
270+
<span class="btn-text">Click for loading</span>
271+
<span class="btn-loader hidden">
272+
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
273+
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
274+
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
275+
</svg>
276+
</span>
277+
</button>
278+
</div>
279+
</div>
280+
</div>
281+
<div class="space-y-8">
282+
<h3 class="text-xl font-bold">Input Fields & Forms</h3>
283+
<div class="space-y-4">
284+
<div>
285+
<label for="default" class="block text-sm font-medium text-gray-700 mb-1">Default State</label>
286+
<input type="text" id="default" class="input-field w-full p-3 rounded-lg" placeholder="Enter details...">
287+
</div>
288+
<div>
289+
<label for="focused" class="block text-sm font-medium mb-1" style="color: var(--color-brand-accent);">Focused State</label>
290+
<input type="text" id="focused" class="input-field w-full p-3 rounded-lg" value="Active input" style="border-color: var(--color-brand-accent); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);">
291+
</div>
292+
<div>
293+
<label for="error" class="block text-sm font-medium mb-1" style="color: var(--color-semantic-error);">Error State</label>
294+
<input type="email" id="error" class="input-field error w-full p-3 rounded-lg" value="invalid-email">
295+
<p class="text-sm mt-1" style="color: var(--color-semantic-error);">Please enter a valid email address.</p>
296+
</div>
297+
</div>
298+
</div>
299+
<div class="space-y-8 lg:col-span-2">
300+
<h3 class="text-xl font-bold text-center">Cards & Navigation</h3>
301+
<div class="flex flex-col md:flex-row items-center justify-center gap-12">
302+
<div class="bg-gradient-to-br from-gray-700 to-gray-900 p-8 rounded-2xl">
303+
<div class="glassmorphic p-6 rounded-xl w-72">
304+
<

0 commit comments

Comments
 (0)