devtimmofto.github.io/CivTechXR.html at main · DevTimmOfTO/devtimmofto.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CivTechXR – Next Gen Roleplay</title>

  <script src="https://cdn.tailwindcss.com"></script>

  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['Josefin Sans', 'sans-serif'],
            mono: ['JetBrains Mono', 'monospace'],
          },
          colors: {
            civ: {
              dark: '#0f172a',
              card: '#1e293b',
              accent: '#06b6d4', // Cyan-500
              alert: '#f43f5e',
            }
          }
        },
      },
    }
  </script>

  <style>
    /* Custom Scrollbar */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #0f172a; }
    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

    .glass-nav {
      background: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(10px);
    }
  </style>
</head>

<body class="font-sans bg-civ-dark text-slate-200 antialiased selection:bg-civ-accent selection:text-civ-dark">

  <nav class="glass-nav fixed w-full z-50 border-b border-slate-700">
    <div class="container mx-auto px-6 py-4 flex justify-between items-center">
      <div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-gradient-to-br from-cyan-400 to-blue-600 rounded flex items-center justify-center shadow-lg shadow-cyan-500/50 overflow-hidden">
  <img src="img/IMG_0430.png" alt="CivTechXR Logo" class="w-8 h-8 object-contain" />
</div>
        <span class="text-2xl font-bold tracking-tight text-white">CivTech<span class="text-cyan-400">XR</span></span>
      </div>

      <div class="hidden md:flex items-center space-x-8 text-sm font-semibold uppercase tracking-wider">
        <a href="#home" class="hover:text-cyan-400 transition" data-i18n="navStart">Home</a>
        <a href="#features" class="hover:text-cyan-400 transition" data-i18n="navFeatures">Features</a>
        <a href="#roadmap" class="hover:text-cyan-400 transition" data-i18n="navRoadmap">Roadmap</a>
        <a href="#join" class="px-5 py-2 bg-cyan-600 hover:bg-cyan-500 text-white rounded transition shadow-lg shadow-cyan-500/30" data-i18n="navJoin">
          <i class="fa-brands fa-discord mr-2"></i> <span data-i18n="btnJoin">Join Discord</span>
        </a>
      </div>

      <div class="flex space-x-2">
        <button onclick="setLanguage('en')" class="opacity-50 hover:opacity-100 transition text-xl" title="English">🇨🇦</button>
        <button onclick="setLanguage('de')" class="opacity-50 hover:opacity-100 transition text-xl" title="Deutsch">🇩🇪</button>
        <button onclick="setLanguage('fr')" class="opacity-50 hover:opacity-100 transition text-xl" title="Français">🇫🇷</button>
      </div>
    </div>
  </nav>

  <section id="home" class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full z-0 pointer-events-none">
      <div class="absolute top-20 left-20 w-72 h-72 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-blob"></div>
      <div class="absolute top-20 right-20 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-blob animation-delay-2000"></div>
    </div>

    <div class="container mx-auto px-6 relative z-10 text-center">
      <div class="inline-block mb-4 px-3 py-1 border border-cyan-500/30 rounded-full bg-cyan-500/10 text-cyan-400 text-xs font-mono font-bold tracking-widest uppercase">
        <span class="w-2 h-2 bg-green-500 rounded-full inline-block mr-2 animate-pulse"></span>
        <span data-i18n="serverStatus">Systems Online</span>
      </div>

      <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight">
        <span data-i18n="heroTitlePre">Maximum</span> <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Realism</span>.
        <br />
        <span data-i18n="heroTitlePost">Zero Compromise.</span>
      </h1>

      <p class="text-lg md:text-xl text-slate-400 mb-10 max-w-2xl mx-auto leading-relaxed" data-i18n="heroText">
        Experience a GTA roleplay environment built on physiological body systems, real logistics, and technical depth. The deepest immersion possible.
      </p>

      <div class="flex justify-center gap-4">
        <a href="#roadmap" class="px-8 py-3 bg-white text-civ-dark font-bold rounded hover:bg-slate-200 transition transform hover:-translate-y-1" data-i18n="btnDev">
          <i class="fa-solid fa-code mr-2"></i> <span data-i18n="viewDev">Dev Progress</span>
        </a>
        <a href="#" class="px-8 py-3 border border-slate-600 text-white font-bold rounded hover:border-cyan-400 hover:text-cyan-400 transition" data-i18n="btnDocs">
          <i class="fa-solid fa-book mr-2"></i> <span data-i18n="viewDocs">Documentation</span>
        </a>
      </div>
    </div>
  </section>

  <section id="features" class="py-20 bg-slate-900/50 border-y border-slate-800">
    <div class="container mx-auto px-6">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="p-8 bg-civ-card rounded-xl border border-slate-700 hover:border-cyan-500/50 transition group">
          <div class="w-12 h-12 bg-red-500/20 text-red-400 rounded-lg flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition">
            <i class="fa-solid fa-heart-pulse"></i>
          </div>
          <h3 class="text-xl font-bold text-white mb-3" data-i18n="featMedTitle">Physiological Health</h3>
          <p class="text-slate-400 text-sm leading-relaxed" data-i18n="featMedText">
            Not just an HP bar. Vital signs, blood loss, symptoms, and realistic treatments based on real medical procedures.
          </p>
        </div>

        <div class="p-8 bg-civ-card rounded-xl border border-slate-700 hover:border-amber-500/50 transition group">
          <div class="w-12 h-12 bg-amber-500/20 text-amber-400 rounded-lg flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition">
            <i class="fa-solid fa-truck-fast"></i>
          </div>
          <h3 class="text-xl font-bold text-white mb-3" data-i18n="featEcoTitle">Real Logistics</h3>
          <p class="text-slate-400 text-sm leading-relaxed" data-i18n="featEcoText">
             Taxi, Bus, and Towing services driven by actual demand and realistic physics-based towing mechanisms.
          </p>
        </div>

        <div class="p-8 bg-civ-card rounded-xl border border-slate-700 hover:border-blue-500/50 transition group">
          <div class="w-12 h-12 bg-blue-500/20 text-blue-400 rounded-lg flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition">
            <i class="fa-solid fa-shield-halved"></i>
          </div>
          <h3 class="text-xl font-bold text-white mb-3" data-i18n="featPolTitle">Tactical Services</h3>
          <p class="text-slate-400 text-sm leading-relaxed" data-i18n="featPolText">
            Police and Fire departments utilizing integrated CAD/MDT systems and realistic operational protocols.
          </p>
        </div>
      </div>
    </div>
  </section>

  <section id="roadmap" class="py-20">
    <div class="container mx-auto px-6">
      <div class="text-center mb-12">
        <h2 class="text-3xl font-bold text-white mb-2" data-i18n="roadmapTitle">Development Roadmap</h2>
        <p class="text-slate-400" data-i18n="roadmapSub">Live tracking of system implementation.</p>
      </div>

      <div class="bg-civ-card border border-slate-700 rounded-xl overflow-hidden shadow-2xl">
        <div class="overflow-x-auto">
          <table class="w-full text-left text-sm text-slate-400 font-mono">
            <thead class="bg-slate-800 text-slate-200 uppercase tracking-wider text-xs">
              <tr>
                <th class="p-4">System</th>
                <th class="p-4">Task</th>
                <th class="p-4">Progress</th>
                <th class="p-4 text-center">Status</th>
                <th class="p-4 text-right">Pri</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-700">
              <tr class="hover:bg-slate-800/50 transition">
                <td class="p-4 font-semibold text-red-400"><i class="fa-solid fa-user-doctor mr-2"></i>Medical</td>
                <td class="p-4">Physiological Vitals Engine</td>
                <td class="p-4 w-1/4">
                  <div class="w-full bg-slate-700 rounded-full h-1.5">
                    <div class="bg-red-500 h-1.5 rounded-full" style="width: 85%"></div>
                  </div>
                </td>
                <td class="p-4 text-center"><span class="px-2 py-1 bg-green-500/10 text-green-400 text-xs rounded border border-green-500/20">Testing</span></td>
                <td class="p-4 text-right text-white">P0</td>
              </tr>
              <tr class="hover:bg-slate-800/50 transition">
                <td class="p-4 font-semibold text-amber-400"><i class="fa-solid fa-bus mr-2"></i>Logistics</td>
                <td class="p-4">Bus Route AI & Ticketing</td>
                <td class="p-4 w-1/4">
                  <div class="w-full bg-slate-700 rounded-full h-1.5">
                    <div class="bg-amber-500 h-1.5 rounded-full" style="width: 30%"></div>
                  </div>
                </td>
                <td class="p-4 text-center"><span class="px-2 py-1 bg-blue-500/10 text-blue-400 text-xs rounded border border-blue-500/20">Planning</span></td>
                <td class="p-4 text-right text-white">P2</td>
              </tr>
               <tr class="hover:bg-slate-800/50 transition">
                <td class="p-4 font-semibold text-purple-400"><i class="fa-brands fa-raspberry-pi mr-2"></i>Hardware</td>
                <td class="p-4">Custom Cab Integration (GPIO)</td>
                <td class="p-4 w-1/4">
                  <div class="w-full bg-slate-700 rounded-full h-1.5">
                    <div class="bg-purple-500 h-1.5 rounded-full" style="width: 15%"></div>
                  </div>
                </td>
                <td class="p-4 text-center"><span class="px-2 py-1 bg-purple-500/10 text-purple-400 text-xs rounded border border-purple-500/20">Concept</span></td>
                <td class="p-4 text-right text-white">P3</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

  <footer class="bg-slate-950 py-10 border-t border-slate-800 text-center">
    <p class="text-slate-500 text-sm">© 2025 CivTechXR. <span data-i18n="footerRights">Built for maximum immersion.</span></p>
    <div class="mt-4 flex justify-center space-x-6">
      <a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-github text-xl"></i></a>
      <a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-discord text-xl"></i></a>
      <a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-twitter text-xl"></i></a>
    </div>
  </footer>

  <script>
    const translations = {
      en: {
        navStart: "Home",
        navFeatures: "Systems",
        navRoadmap: "Roadmap",
        btnJoin: "Join Discord",
        serverStatus: "Systems Operational",
        heroTitlePre: "Maximum",
        heroTitlePost: "Zero Compromise.",
        heroText: "Experience a GTA roleplay environment built on physiological body systems, real logistics, and technical depth. The deepest immersion possible.",
        viewDev: "Dev Progress",
        viewDocs: "Docs",
        featMedTitle: "Physiological Health",
        featMedText: "Not just an HP bar. Vital signs, blood loss, symptoms, and realistic treatments.",
        featEcoTitle: "Real Logistics",
        featEcoText: "Taxi, Bus, and Towing services driven by actual demand and physics.",
        featPolTitle: "Tactical Services",
        featPolText: "Police and Fire depts utilizing integrated CAD/MDT systems and protocols.",
        roadmapTitle: "Development Roadmap",
        roadmapSub: "Live tracking of system implementation.",
        footerRights: "Built for maximum immersion."
      },
      de: {
        navStart: "Start",
        navFeatures: "Systeme",
        navRoadmap: "Roadmap",
        btnJoin: "Discord Beitreten",
        serverStatus: "Systeme Online",
        heroTitlePre: "Maximaler",
        heroTitlePost: "Keine Kompromisse.",
        heroText: "Erlebe ein GTA Roleplay-Umfeld, das auf physiologischen Körpersystemen, echter Logistik und technischer Tiefe basiert. Die tiefstmögliche Immersion.",
        viewDev: "Entwicklung",
        viewDocs: "Doku",
        featMedTitle: "Physiologische Gesundheit",
        featMedText: "Nicht nur ein HP-Balken. Vitalwerte, Blutverlust, Symptome und realistische Behandlungen.",
        featEcoTitle: "Echte Logistik",
        featEcoText: "Taxi, Bus und Abschleppdienste gesteuert durch echte Nachfrage und Physik.",
        featPolTitle: "Taktische Dienste",
        featPolText: "Polizei und Feuerwehr mit integrierten CAD/MDT-Systemen und Protokollen.",
        roadmapTitle: "Entwicklungs-Roadmap",
        roadmapSub: "Live-Verfolgung der Systemimplementierung.",
        footerRights: "Gebaut für maximale Immersion."
      },
      fr: {
        navStart: "Accueil",
        navFeatures: "Systèmes",
        navRoadmap: "Feuille de route",
        btnJoin: "Rejoindre Discord",
        serverStatus: "Systèmes Opérationnels",
        heroTitlePre: "Maximum",
        heroTitlePost: "Zéro Compromis.",
        heroText: "Découvrez un environnement de jeu de rôle GTA basé sur des systèmes physiologiques, une logistique réelle et une profondeur technique.",
        viewDev: "Développement",
        viewDocs: "Docs",
        featMedTitle: "Santé Physiologique",
        featMedText: "Pas juste une barre de PV. Signes vitaux, perte de sang et traitements réalistes.",
        featEcoTitle: "Logistique Réelle",
        featEcoText: "Services de taxi, bus et remorquage basés sur la demande réelle.",
        featPolTitle: "Services Tactiques",
        featPolText: "Police et pompiers utilisant des systèmes CAD/MDT intégrés.",
        roadmapTitle: "Feuille de Route",
        roadmapSub: "Suivi en direct de l'implémentation du système.",
        footerRights: "Construit pour une immersion maximale."
      }
    };

    function setLanguage(lang) {
      localStorage.setItem('civTechLang', lang); // Save preference
      document.querySelectorAll('[data-i18n]').forEach(el => {
        const key = el.getAttribute('data-i18n');
        if (translations[lang][key]) {
          el.textContent = translations[lang][key];
        }
      });

      // Visual feedback for buttons
      const flags = { en: '🇨🇦', de: '🇩🇪', fr: '🇫🇷' };
      console.log(`Language switched to ${flags[lang]}`);
    }

    // Load saved language or default to EN
    document.addEventListener('DOMContentLoaded', () => {
      const savedLang = localStorage.getItem('civTechLang') || 'en';
      setLanguage(savedLang);
    });
  </script>
</body>
</html>