Skip to content

Commit 5b4e833

Browse files
NodeX-ARNodeX-AR
authored
Update index.html
1 parent d601ab7 commit 5b4e833

1 file changed

Lines changed: 37 additions & 28 deletions

File tree

‎index.html‎

Lines changed: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@
158158
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
159159
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
160160

161-
<!-- ========== STYLES (YOUR ORIGINAL – 100% UNCHANGED) ========== -->
161+
<!-- ========== STYLES (YOUR ORIGINAL – UNCHANGED, except minor mobile fixes below) ========== -->
162162
<script src="https://cdn.tailwindcss.com"></script>
163163
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
164164

@@ -336,7 +336,7 @@
336336
100% { transform: scale(1); opacity: 0.15; }
337337
}
338338

339-
/* ===== YOUR MOBILE‑FIRST TWEAKS (unchanged) ===== */
339+
/* ===== YOUR MOBILE‑FIRST TWEAKS (ENHANCED FOR BETTER CENTERING & SCROLL) ===== */
340340
@media (max-width: 640px) {
341341
.logo-box { padding: 0.3rem 0.7rem 0.3rem 0.5rem; gap: 0.5rem; }
342342
.logo-box img { width: 32px; height: 32px; }
@@ -350,6 +350,10 @@
350350
.hero-img-wrap .pulse-ring { width: 160px; height: 160px; }
351351
.marquee-track { gap: 1rem; }
352352
.skill-tag { font-size: 0.65rem; padding: 0.2rem 0.6rem; }
353+
354+
/* FIX: Comparison table scroll on mobile */
355+
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
356+
.compare-table { min-width: 420px; }
353357
}
354358
@media (max-width: 480px) {
355359
.logo-box .text { font-size: 1.25rem; }
@@ -372,6 +376,10 @@
372376
.hero-img-wrap img { width: 80px; height: 80px; }
373377
.hero-img-wrap .pulse-ring { width: 110px; height: 110px; }
374378
.code-box { font-size: 0.6rem; padding: 0.4rem; }
379+
/* Tighter padding on ultra-small screens */
380+
section { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
381+
.compare-table { min-width: 360px; font-size: 0.55rem; }
382+
.compare-table th, .compare-table td { padding: 0.3rem 0.2rem; }
375383
}
376384
@media (prefers-reduced-motion: reduce) {
377385
.fade-up { opacity: 1; transform: none; transition: none; }
@@ -450,7 +458,7 @@
450458
<!-- ===== MAIN CONTENT ===== -->
451459
<main class="relative z-10">
452460

453-
<!-- ===== HERO (REMOVED DUPLICATE LOGO – KEPT ONLY HEADING) ===== -->
461+
<!-- ===== HERO (FIXED CENTERING) ===== -->
454462
<section class="min-h-screen flex items-center justify-center px-4 py-12 sm:px-6 sm:py-20">
455463
<div class="max-w-6xl mx-auto w-full">
456464
<div class="flex flex-col md:flex-row items-center gap-6 md:gap-12">
@@ -474,13 +482,14 @@ <h1 class="text-base sm:text-xl md:text-2xl text-gray-300 mono">$> Run Python in
474482
<a href="#code" class="btn-term"><i class="fas fa-code"></i> See Code</a>
475483
<a href="https://github.com/NodeX-AR/Pytml" target="_blank" class="btn-term"><i class="fab fa-github"></i> GitHub</a>
476484
</div>
477-
<div class="fade-up mt-4 flex flex-wrap gap-2">
485+
<div class="fade-up mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
478486
<span class="badge-term"><i class="fas fa-check-circle mr-1"></i> NITI Frontier Tech</span>
479487
<span class="badge-term"><i class="fas fa-weight-hanging mr-1"></i> 15KB wrapper</span>
480488
</div>
481489
</div>
482-
<div class="flex-1 flex justify-center hero-img-wrap">
483-
<div class="relative w-40 h-40 sm:w-60 sm:h-60 md:w-72 md:h-72 flex items-center justify-center">
490+
<!-- FIXED: added items-center and mx-auto to ensure dead-center on mobile -->
491+
<div class="flex-1 flex justify-center items-center hero-img-wrap">
492+
<div class="relative w-40 h-40 sm:w-60 sm:h-60 md:w-72 md:h-72 flex items-center justify-center mx-auto">
484493
<div class="absolute inset-0 rounded-full border border-[var(--accent)] opacity-20 pulse-ring"></div>
485494
<img src="/android-chrome-192x192.png" alt="Pytml" class="w-28 h-28 sm:w-40 sm:h-40 md:w-56 md:h-56 object-contain" style="filter: drop-shadow(0 0 30px rgba(59,130,246,0.2));" loading="lazy">
486495
</div>
@@ -514,15 +523,15 @@ <h3 class="text-base sm:text-lg font-bold font-heading mb-2">Why it exists</h3>
514523
</div>
515524
</section>
516525

517-
<!-- ===== HONEST COMPARISON ===== -->
526+
<!-- ===== HONEST COMPARISON (FIXED MOBILE SCROLL) ===== -->
518527
<section id="compare" class="py-16 sm:py-20 px-4 sm:px-6 border-t border-white/5">
519528
<div class="max-w-5xl mx-auto">
520529
<div class="fade-up text-center">
521530
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-heading mb-3"><span class="text-accent"></span>Comparison</h2>
522531
<p class="text-gray-400 max-w-2xl mx-auto text-sm sm:text-base">Just real trade‑offs. Pytml is <strong>not</strong> a Flask replacement for backends, and it's <strong>not</strong> as feature‑heavy as PyScript. But for <strong>static pages, demos, and education</strong>, it wins on speed, size, and simplicity.</p>
523532
</div>
524-
<div class="fade-up mt-8 card overflow-x-auto">
525-
<table class="compare-table">
533+
<div class="fade-up mt-8 card overflow-x-auto compare-table-wrap">
534+
<table class="compare-table min-w-[420px]">
526535
<thead>
527536
<tr>
528537
<th>Feature</th>
@@ -534,43 +543,43 @@ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-heading mb-3"><span c
534543
<tbody>
535544
<tr>
536545
<td class="highlight">Setup time</td>
537-
<td><span class="check">✔</span> 1 minute (1 script tag)</td>
538-
<td><span class="cross">~</span> 5 minutes (config + tags)</td>
539-
<td><span class="cross">~</span> 10+ minutes (env + server)</td>
546+
<td><span class="check">✔</span> 1 min (1 tag)</td>
547+
<td><span class="cross">~</span> 5 min (config)</td>
548+
<td><span class="cross">~</span> 10+ min (env)</td>
540549
</tr>
541550
<tr>
542551
<td class="highlight">Server required</td>
543-
<td><span class="check">✔</span> No (static host)</td>
544-
<td><span class="check">✔</span> No (static host)</td>
545-
<td><span class="cross">✘</span> Yes (backend server)</td>
552+
<td><span class="check">✔</span> No (static)</td>
553+
<td><span class="check">✔</span> No (static)</td>
554+
<td><span class="cross">✘</span> Yes (backend)</td>
546555
</tr>
547556
<tr>
548557
<td class="highlight">Wrapper size</td>
549558
<td><span class="check">✔</span> <strong>~15 KB</strong></td>
550559
<td><span class="cross">~</span> Larger bundle</td>
551-
<td><span class="cross">—</span> N/A (server‑side)</td>
560+
<td><span class="cross">—</span> N/A</td>
552561
</tr>
553562
<tr>
554563
<td class="highlight">Pyodide load</td>
555-
<td><span class="check">✔</span> Lazy / on‑demand</td>
556-
<td><span class="cross">✘</span> Eager (slower start)</td>
557-
<td><span class="cross">—</span> Not applicable</td>
564+
<td><span class="check">✔</span> Lazy</td>
565+
<td><span class="cross">✘</span> Eager</td>
566+
<td><span class="cross">—</span> N/A</td>
558567
</tr>
559568
<tr>
560569
<td class="highlight">Configuration</td>
561-
<td><span class="check">✔</span> Zero (<code>&lt;py&gt;</code> only)</td>
562-
<td><span class="cross">~</span> Requires <code>&lt;py-config&gt;</code></td>
563-
<td><span class="cross">~</span> Full app structure</td>
570+
<td><span class="check">✔</span> Zero (<code>&lt;py&gt;</code>)</td>
571+
<td><span class="cross">~</span> <code>&lt;py-config&gt;</code></td>
572+
<td><span class="cross">~</span> Full structure</td>
564573
</tr>
565574
<tr>
566575
<td class="highlight">Best for</td>
567-
<td><span class="check">✔</span> Demos, education, blogs</td>
576+
<td><span class="check">✔</span> Demos, education</td>
568577
<td><span class="check">✔</span> Complex browser apps</td>
569-
<td><span class="check">✔</span> Full‑stack web apps</td>
578+
<td><span class="check">✔</span> Full‑stack apps</td>
570579
</tr>
571580
</tbody>
572581
</table>
573-
<p class="text-xs text-gray-500 mt-4 text-center">* Pyodide (Python runtime) is loaded from CDN – same for both Pytml and PyScript. Pytml just adds a <strong>~15KB</strong> wrapper and smarter lazy loading.</p>
582+
<p class="text-xs text-gray-500 mt-4 text-center">* Pyodide (~6MB) loaded from CDN – same for both. Pytml adds a <strong>~15KB</strong> wrapper + lazy loading.</p>
574583
</div>
575584
</div>
576585
</section>
@@ -608,7 +617,7 @@ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-heading mb-6"><span c
608617
</div>
609618
</section>
610619

611-
<!-- ===== FEATURES (your original 4 cards – unchanged) ===== -->
620+
<!-- ===== FEATURES (your original 4 cards) ===== -->
612621
<section id="features" class="py-16 sm:py-20 px-4 sm:px-6 border-t border-white/5">
613622
<div class="max-w-6xl mx-auto">
614623
<div class="fade-up text-center">
@@ -687,11 +696,11 @@ <h2 class="text-xl sm:text-2xl font-bold font-heading mb-4"><span class="text-ac
687696
</div>
688697
</section>
689698

690-
<!-- ===== UPDATED FAQ (actually useful, technical, honest) ===== -->
699+
<!-- ===== UPDATED FAQ (actually useful) ===== -->
691700
<section id="faq" class="py-16 sm:py-20 px-4 sm:px-6 border-t border-white/5">
692701
<div class="max-w-4xl mx-auto">
693702
<div class="fade-up text-center">
694-
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-heading mb-6"><span class="text-accent">❓</span> Frequently Asked Questions</h2>
703+
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-heading mb-6"><span class="text-accent"></span> Frequently Asked Questions</h2>
695704
</div>
696705
<div class="space-y-4">
697706
<div class="fade-up card">

0 commit comments

Comments
 (0)