Skip to content

Commit 4a7856e

Browse files
hmongcodequesthmongcodequest
committed
Add website files (Home, About, Download)
1 parent a8ff1ac commit 4a7856e

5 files changed

Lines changed: 548 additions & 0 deletions

File tree

‎about.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="dark">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>About - Steering ETS2 Controller</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script>
9+
tailwind.config = {
10+
darkMode: 'class',
11+
theme: {
12+
extend: {
13+
colors: {
14+
brand: {
15+
500: '#10b981',
16+
600: '#059669',
17+
},
18+
dark: {
19+
900: '#0f172a',
20+
800: '#1e293b',
21+
700: '#334155'
22+
}
23+
}
24+
}
25+
}
26+
}
27+
</script>
28+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Outfit:wght@700&display=swap" rel="stylesheet">
29+
<style>
30+
body { font-family: 'Inter', sans-serif; }
31+
h1, h2, h3, .font-outfit { font-family: 'Outfit', sans-serif; }
32+
.glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
33+
.gradient-text { background: linear-gradient(to right, #34d399, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
34+
</style>
35+
</head>
36+
<body class="bg-dark-900 text-white min-h-screen flex flex-col selection:bg-brand-500 selection:text-white">
37+
38+
<!-- Navigation -->
39+
<nav class="fixed w-full z-50 glass border-b-0 border-white/5 transition-all duration-300" id="navbar">
40+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41+
<div class="flex justify-between items-center h-20">
42+
<div class="flex items-center gap-3 cursor-pointer" onclick="window.location.href='index.html'">
43+
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-brand-600 to-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
44+
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
45+
</div>
46+
<span class="font-outfit text-2xl font-bold tracking-wide">V-JOY<span class="text-brand-500">.</span></span>
47+
</div>
48+
<div class="hidden md:flex space-x-8">
49+
<a href="index.html" class="text-gray-300 hover:text-brand-500 font-semibold transition-colors">Home</a>
50+
<a href="about.html" class="text-brand-500 font-semibold transition-colors">About</a>
51+
<a href="download.html" class="text-gray-300 hover:text-brand-500 font-semibold transition-colors">Download</a>
52+
</div>
53+
<div class="md:hidden">
54+
<button id="mobile-menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
55+
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
56+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
57+
</svg>
58+
</button>
59+
</div>
60+
</div>
61+
</div>
62+
<!-- Mobile Menu -->
63+
<div id="mobile-menu" class="hidden md:hidden glass border-t border-white/10 absolute w-full">
64+
<div class="px-4 pt-2 pb-6 space-y-2 text-center">
65+
<a href="index.html" class="block px-3 py-2 text-gray-300 hover:text-white font-medium">Home</a>
66+
<a href="about.html" class="block px-3 py-2 text-brand-500 font-medium">About</a>
67+
<a href="download.html" class="block px-3 py-2 text-gray-300 hover:text-white font-medium">Download</a>
68+
</div>
69+
</div>
70+
</nav>
71+
72+
<!-- Main Content -->
73+
<main class="flex-grow pt-32 pb-24">
74+
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
75+
<h1 class="text-4xl md:text-5xl font-extrabold mb-8 text-center"><span class="gradient-text">About The Project</span></h1>
76+
77+
<div class="glass p-8 md:p-12 rounded-3xl border border-white/10 space-y-8">
78+
<div>
79+
<h2 class="text-2xl font-bold text-white mb-4">The Vision</h2>
80+
<p class="text-gray-400 leading-relaxed text-lg">
81+
Steering ETS2 Controller was born out of a desire to make truck simulation accessible to everyone. Not everyone wants to invest hundreds of dollars into a bulky physical steering wheel just to enjoy a few hours of Euro Truck Simulator 2. This project bridges that gap by turning the supercomputer in your pocket into a high-precision peripheral.
82+
</p>
83+
</div>
84+
85+
<div class="grid md:grid-cols-2 gap-8">
86+
<div class="bg-dark-800/50 p-6 rounded-2xl border border-white/5">
87+
<div class="w-12 h-12 rounded-full bg-brand-500/20 flex items-center justify-center mb-4">
88+
<svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
89+
</div>
90+
<h3 class="text-lg font-bold text-white mb-2">Android App</h3>
91+
<p class="text-gray-400 text-sm">Built with React Native and Expo, capturing high-frequency gyroscope and accelerometer data with a beautifully smooth neon interface.</p>
92+
</div>
93+
<div class="bg-dark-800/50 p-6 rounded-2xl border border-white/5">
94+
<div class="w-12 h-12 rounded-full bg-brand-500/20 flex items-center justify-center mb-4">
95+
<svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
96+
</div>
97+
<h3 class="text-lg font-bold text-white mb-2">PC Server</h3>
98+
<p class="text-gray-400 text-sm">A lightweight Python executable utilizing vJoy to simulate a genuine DirectX gamepad, connecting instantly via WebSockets or USB ADB reverse.</p>
99+
</div>
100+
</div>
101+
102+
<div class="border-t border-white/10 pt-8 mt-8 flex flex-col items-center">
103+
<img src="https://ui-avatars.com/api/?name=Keng&background=10b981&color=fff&size=128" alt="Developer" class="w-20 h-20 rounded-full mb-4 ring-4 ring-brand-500/30">
104+
<h3 class="text-xl font-bold text-white">Developed by Keng</h3>
105+
<p class="text-gray-400 text-center max-w-md mt-2">Passionate developer focused on building tools that bridge hardware and software in innovative ways.</p>
106+
</div>
107+
</div>
108+
</div>
109+
</main>
110+
111+
<!-- Footer -->
112+
<footer class="border-t border-white/10 bg-dark-900 py-10 mt-auto">
113+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4">
114+
<div class="flex items-center gap-2">
115+
<span class="font-outfit font-bold text-xl">V-JOY<span class="text-brand-500">.</span></span>
116+
<span class="text-gray-500 text-sm">© 2026</span>
117+
</div>
118+
<p class="text-gray-400 text-sm">Designed & Developed by <span class="text-brand-500 font-semibold">Keng</span></p>
119+
</div>
120+
</footer>
121+
122+
<script>
123+
// Navbar blur on scroll
124+
window.addEventListener('scroll', () => {
125+
const nav = document.getElementById('navbar');
126+
if (window.scrollY > 20) {
127+
nav.classList.add('bg-dark-900/80', 'shadow-lg');
128+
nav.classList.remove('bg-transparent');
129+
} else {
130+
nav.classList.remove('bg-dark-900/80', 'shadow-lg');
131+
nav.classList.add('bg-transparent');
132+
}
133+
});
134+
135+
// Mobile menu toggle
136+
const btn = document.getElementById('mobile-menu-btn');
137+
const menu = document.getElementById('mobile-menu');
138+
btn.addEventListener('click', () => {
139+
menu.classList.toggle('hidden');
140+
});
141+
</script>
142+
</body>
143+
</html>

‎assets/images/app_mockup.png‎

734 KB
Loading

‎assets/images/hero_image.png‎

856 KB
Loading

0 commit comments

Comments
 (0)