Skip to content

Commit 3fb8eaf

Browse files
hamzaabamboohamzaabamboo
authored
Merge pull request #6 from hamproductions/feature/kuji-calculator-and-redesign
Add Kuji Strategist App & Redesign Index
2 parents f66e014 + aebc2ef commit 3fb8eaf

File tree

4 files changed

+597
-151
lines changed

4 files changed

+597
-151
lines changed

‎index.html‎

Lines changed: 205 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,211 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Project Showcase</title>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Vibe Code Creations</title>
7+
8+
<!-- Tailwind CSS -->
9+
<script src="https://cdn.tailwindcss.com"></script>
10+
11+
<!-- Google Fonts -->
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
15+
16+
<!-- Lucide Icons -->
17+
<script src="https://unpkg.com/lucide@latest"></script>
18+
719
<style>
8-
body {
9-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
10-
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
11-
"Segoe UI Symbol";
12-
margin: 0;
13-
padding: 0;
14-
background-color: #1a1a2e; /* Dark blue-purple background */
15-
color: #e0e0e0; /* Light grey text */
16-
display: flex;
17-
flex-direction: column;
18-
align-items: center;
19-
min-height: 100vh;
20-
}
21-
22-
header {
23-
background-color: #162447; /* Darker blue */
24-
color: #e0e0e0;
25-
padding: 30px 20px;
26-
text-align: center;
27-
width: 100%;
28-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
29-
border-bottom: 3px solid #fca311; /* Accent color */
30-
}
31-
32-
header h1 {
33-
margin: 0;
34-
font-size: 2.8em;
35-
font-weight: 300;
36-
letter-spacing: 1px;
37-
}
38-
39-
.container {
40-
max-width: 900px;
41-
width: 90%;
42-
margin: 40px auto;
43-
padding: 20px;
44-
}
45-
46-
.project-grid {
47-
display: grid;
48-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
49-
gap: 30px;
50-
}
51-
52-
.project-card {
53-
background-color: #1f4068; /* Slightly lighter blue */
54-
border-radius: 10px;
55-
padding: 25px;
56-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
57-
transition: transform 0.3s ease, box-shadow 0.3s ease;
58-
border-left: 5px solid #fca311; /* Accent color */
59-
}
60-
61-
.project-card:hover {
62-
transform: translateY(-10px);
63-
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
64-
}
65-
66-
.project-card h2 {
67-
margin-top: 0;
68-
color: #e0e0e0;
69-
font-size: 1.6em;
70-
border-bottom: 1px solid #2a5285;
71-
padding-bottom: 10px;
72-
margin-bottom: 15px;
73-
}
74-
75-
.project-card p {
76-
font-size: 1em;
77-
line-height: 1.6;
78-
color: #c0c0c0; /* Lighter grey for description */
79-
margin-bottom: 20px;
80-
}
81-
82-
.project-card a {
83-
display: inline-block;
84-
background-color: #fca311; /* Accent color */
85-
color: #1a1a2e; /* Dark text on accent button */
86-
padding: 10px 18px;
87-
text-decoration: none;
88-
border-radius: 5px;
89-
font-weight: bold;
90-
transition: background-color 0.3s ease;
91-
}
92-
93-
.project-card a:hover {
94-
background-color: #e09300; /* Darker accent on hover */
95-
}
20+
body {
21+
font-family: 'Space Grotesk', sans-serif;
22+
background-color: #0f172a;
23+
overflow-x: hidden;
24+
}
25+
26+
/* Animated Background Blobs */
27+
.blob {
28+
position: absolute;
29+
border-radius: 50%;
30+
filter: blur(80px);
31+
z-index: -1;
32+
opacity: 0.6;
33+
animation: float 20s infinite ease-in-out alternate;
34+
}
35+
.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: #4f46e5; animation-delay: 0s; }
36+
.blob-2 { bottom: -10%; right: -10%; width: 50vw; height: 50vw; background: #ec4899; animation-delay: -5s; }
37+
.blob-3 { top: 40%; left: 40%; width: 30vw; height: 30vw; background: #06b6d4; animation-delay: -10s; }
38+
39+
@keyframes float {
40+
0% { transform: translate(0, 0) scale(1); }
41+
50% { transform: translate(30px, 50px) scale(1.1); }
42+
100% { transform: translate(-20px, -30px) scale(0.9); }
43+
}
44+
45+
/* Glass Card Utility */
46+
.glass-card {
47+
background: rgba(255, 255, 255, 0.05);
48+
backdrop-filter: blur(16px);
49+
-webkit-backdrop-filter: blur(16px);
50+
border: 1px solid rgba(255, 255, 255, 0.1);
51+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
52+
}
53+
54+
.glass-card:hover {
55+
background: rgba(255, 255, 255, 0.1);
56+
border-color: rgba(255, 255, 255, 0.2);
57+
box-shadow: 0 0 20px rgba(79, 70, 229, 0.4);
58+
transform: translateY(-5px);
59+
}
9660
</style>
97-
</head>
98-
<body>
99-
<header>
100-
<h1>Vibe code creations</h1>
101-
</header>
102-
<div class="container">
103-
<div class="project-grid">
104-
<div class="project-card">
105-
<h2>Mosaic Image Pixelator</h2>
106-
<p>
107-
An interactive tool to pixelate images. Features include uploading
108-
your image, selecting areas with a rectangle or brush tool,
109-
adjusting pixelation levels, and downloading the result.
110-
</p>
111-
<a href="mosaic/">Go to Mosaic Tool</a>
112-
</div>
113-
<div class="project-card">
114-
<h2>5L Schedule</h2>
115-
<p>
116-
A web page displaying the 5L schedule. Useful for quick reference
117-
and planning.
118-
</p>
119-
<a href="5l-schedule/">View 5L Schedule</a>
120-
</div>
121-
<div class="project-card">
122-
<h2>Letter Checker</h2>
123-
<p>
124-
A tool that uses the Gemini API to evaluate letter content,
125-
providing corrections, comments, improvements, acceptance rates, and
126-
safety assessments.
127-
</p>
128-
<a href="otayori-check/">Go to Letter Checker</a>
129-
</div>
130-
<div class="project-card">
131-
<h2>Snap Me</h2>
132-
<p>
133-
A chat application with integrated camera functionality, allowing
134-
for seamless image capture within conversations.
135-
</p>
136-
<a href="snapme/">Go to Snap Me</a>
137-
</div>
138-
<div class="project-card">
139-
<h2>Saize Quiz</h2>
140-
<p>Become Saizeriya God</p>
141-
<a href="saize-quiz/">Go to Saize Quiz</a>
142-
</div>
143-
<div class="project-card">
144-
<h2>Darts Counter</h2>
145-
<p>A voice-controlled scoreboard for 501 darts.</p>
146-
<a href="darts-counter/">Go to Darts Counter</a>
147-
</div>
148-
<div class="project-card">
149-
<h2>Songwriter's Codex</h2>
150-
<p>A musical composition tool with chord builders and sequencers.</p>
151-
<a href="songwriter-codex/">Go to Songwriter's Codex</a>
152-
</div>
153-
<!-- Add more project cards here as needed -->
154-
</div>
61+
</head>
62+
<body class="text-white min-h-screen relative selection:bg-pink-500 selection:text-white">
63+
64+
<!-- Background Elements -->
65+
<div class="fixed inset-0 overflow-hidden pointer-events-none">
66+
<div class="blob blob-1"></div>
67+
<div class="blob blob-2"></div>
68+
<div class="blob blob-3"></div>
15569
</div>
156-
</body>
70+
71+
<!-- Main Content -->
72+
<main class="relative z-10 container mx-auto px-6 py-20">
73+
74+
<!-- Header -->
75+
<header class="mb-20 text-center">
76+
<h1 class="text-6xl md:text-8xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 via-purple-300 to-pink-300 mb-6 tracking-tighter">
77+
Vibe Code
78+
</h1>
79+
<p class="text-xl md:text-2xl text-gray-300 font-light max-w-2xl mx-auto">
80+
A collection of digital artifacts, tools, and experiments.
81+
</p>
82+
</header>
83+
84+
<!-- Grid -->
85+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
86+
87+
<!-- Card: Ichiban Kuji -->
88+
<a href="kuji-calculator/" class="glass-card rounded-3xl p-8 transition-all duration-300 group flex flex-col h-full">
89+
<div class="mb-6 bg-gradient-to-br from-blue-500/20 to-purple-500/20 w-16 h-16 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 border border-white/10">
90+
<i data-lucide="calculator" class="w-8 h-8 text-blue-300"></i>
91+
</div>
92+
<h2 class="text-2xl font-bold mb-3 group-hover:text-blue-300 transition-colors">Kuji Strategist</h2>
93+
<p class="text-gray-400 text-sm leading-relaxed mb-6 flex-grow">
94+
Calculate expected values and sniping opportunities for Ichiban Kuji lottery games.
95+
</p>
96+
<div class="flex items-center text-xs font-bold text-blue-300 uppercase tracking-widest">
97+
Launch Tool <i data-lucide="arrow-right" class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"></i>
98+
</div>
99+
</a>
100+
101+
<!-- Card: Songwriter's Codex -->
102+
<a href="songwriter-codex/" class="glass-card rounded-3xl p-8 transition-all duration-300 group flex flex-col h-full">
103+
<div class="mb-6 bg-gradient-to-br from-amber-500/20 to-orange-500/20 w-16 h-16 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 border border-white/10">
104+
<i data-lucide="music" class="w-8 h-8 text-amber-300"></i>
105+
</div>
106+
<h2 class="text-2xl font-bold mb-3 group-hover:text-amber-300 transition-colors">Songwriter's Codex</h2>
107+
<p class="text-gray-400 text-sm leading-relaxed mb-6 flex-grow">
108+
Composition tool with chord builders, sequencers, and VexFlow notation.
109+
</p>
110+
<div class="flex items-center text-xs font-bold text-amber-300 uppercase tracking-widest">
111+
Compose <i data-lucide="arrow-right" class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"></i>
112+
</div>
113+
</a>
114+
115+
<!-- Card: Darts Counter -->
116+
<a href="darts-counter/" class="glass-card rounded-3xl p-8 transition-all duration-300 group flex flex-col h-full">
117+
<div class="mb-6 bg-gradient-to-br from-emerald-500/20 to-teal-500/20 w-16 h-16 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 border border-white/10">
118+
<i data-lucide="crosshair" class="w-8 h-8 text-emerald-300"></i>
119+
</div>
120+
<h2 class="text-2xl font-bold mb-3 group-hover:text-emerald-300 transition-colors">Darts Counter</h2>
121+
<p class="text-gray-400 text-sm leading-relaxed mb-6 flex-grow">
122+
Voice-controlled 501 scoreboard with checkout guides and stats.
123+
</p>
124+
<div class="flex items-center text-xs font-bold text-emerald-300 uppercase tracking-widest">
125+
Play <i data-lucide="arrow-right" class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"></i>
126+
</div>
127+
</a>
128+
129+
<!-- Card: Saize Quiz -->
130+
<a href="saize-quiz/" class="glass-card rounded-3xl p-8 transition-all duration-300 group flex flex-col h-full">
131+
<div class="mb-6 bg-gradient-to-br from-red-500/20 to-pink-500/20 w-16 h-16 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 border border-white/10">
132+
<i data-lucide="utensils" class="w-8 h-8 text-red-300"></i>
133+
</div>
134+
<h2 class="text-2xl font-bold mb-3 group-hover:text-red-300 transition-colors">Saize Quiz</h2>
135+
<p class="text-gray-400 text-sm leading-relaxed mb-6 flex-grow">
136+
Test your knowledge of the Saizeriya menu. Become the Saize God.
137+
</p>
138+
<div class="flex items-center text-xs font-bold text-red-300 uppercase tracking-widest">
139+
Start Quiz <i data-lucide="arrow-right" class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"></i>
140+
</div>
141+
</a>
142+
143+
<!-- Card: Snap Me -->
144+
<a href="snapme/" class="glass-card rounded-3xl p-8 transition-all duration-300 group flex flex-col h-full">
145+
<div class="mb-6 bg-gradient-to-br from-indigo-500/20 to-violet-500/20 w-16 h-16 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 border border-white/10">
146+
<i data-lucide="camera" class="w-8 h-8 text-indigo-300"></i>
147+
</div>
148+
<h2 class="text-2xl font-bold mb-3 group-hover:text-indigo-300 transition-colors">Snap Me</h2>
149+
<p class="text-gray-400 text-sm leading-relaxed mb-6 flex-grow">
150+
Chat application with integrated camera functionality for seamless sharing.
151+
</p>
152+
<div class="flex items-center text-xs font-bold text-indigo-300 uppercase tracking-widest">
153+
Open Camera <i data-lucide="arrow-right" class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"></i>
154+
</div>
155+
</a>
156+
157+
<!-- Card: Letter Checker -->
158+
<a href="otayori-check/" class="glass-card rounded-3xl p-8 transition-all duration-300 group flex flex-col h-full">
159+
<div class="mb-6 bg-gradient-to-br from-cyan-500/20 to-sky-500/20 w-16 h-16 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 border border-white/10">
160+
<i data-lucide="mail-check" class="w-8 h-8 text-cyan-300"></i>
161+
</div>
162+
<h2 class="text-2xl font-bold mb-3 group-hover:text-cyan-300 transition-colors">Letter Checker</h2>
163+
<p class="text-gray-400 text-sm leading-relaxed mb-6 flex-grow">
164+
AI-powered evaluation for letter content, safety, and improvements.
165+
</p>
166+
<div class="flex items-center text-xs font-bold text-cyan-300 uppercase tracking-widest">
167+
Check <i data-lucide="arrow-right" class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"></i>
168+
</div>
169+
</a>
170+
171+
<!-- Card: 5L Schedule -->
172+
<a href="5l-schedule/" class="glass-card rounded-3xl p-8 transition-all duration-300 group flex flex-col h-full">
173+
<div class="mb-6 bg-gradient-to-br from-fuchsia-500/20 to-pink-500/20 w-16 h-16 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 border border-white/10">
174+
<i data-lucide="calendar" class="w-8 h-8 text-fuchsia-300"></i>
175+
</div>
176+
<h2 class="text-2xl font-bold mb-3 group-hover:text-fuchsia-300 transition-colors">5L Schedule</h2>
177+
<p class="text-gray-400 text-sm leading-relaxed mb-6 flex-grow">
178+
Quick reference schedule planner.
179+
</p>
180+
<div class="flex items-center text-xs font-bold text-fuchsia-300 uppercase tracking-widest">
181+
View <i data-lucide="arrow-right" class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"></i>
182+
</div>
183+
</a>
184+
185+
<!-- Card: Mosaic -->
186+
<a href="mosaic/" class="glass-card rounded-3xl p-8 transition-all duration-300 group flex flex-col h-full">
187+
<div class="mb-6 bg-gradient-to-br from-gray-500/20 to-slate-500/20 w-16 h-16 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 border border-white/10">
188+
<i data-lucide="grid" class="w-8 h-8 text-gray-300"></i>
189+
</div>
190+
<h2 class="text-2xl font-bold mb-3 group-hover:text-white transition-colors">Mosaic Tool</h2>
191+
<p class="text-gray-400 text-sm leading-relaxed mb-6 flex-grow">
192+
Interactive image pixelation tool with brush and region selection.
193+
</p>
194+
<div class="flex items-center text-xs font-bold text-gray-300 uppercase tracking-widest">
195+
Pixelate <i data-lucide="arrow-right" class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"></i>
196+
</div>
197+
</a>
198+
199+
</div>
200+
201+
<footer class="mt-20 text-center text-gray-500 text-sm">
202+
<p>&copy; Vibe Code Creations. Built with Tailwind CSS.</p>
203+
</footer>
204+
205+
</main>
206+
207+
<script>
208+
lucide.createIcons();
209+
</script>
210+
</body>
157211
</html>

0 commit comments

Comments
 (0)