PageSourceSearch

https://html2app.dev/

html html2app.dev collected 2026-10-03 23:19:20 UTC 110,423 bytes, 1,499 lines download raw bytes

1<!doctype html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8" />
6  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8  <meta name="theme-color" content="#eaeaea" />
9  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
10  <link rel="manifest" href="/manifest.json" />
11  <title>HTML to APK & IPA Converter | Free Online App Builder | html2app</title>
12  <link rel="canonical" href="https://html2app.dev/" />
13  <meta name="description"
14    content="Free HTML to APK & IPA converter. Build native Android and iOS apps from HTML5 projects in minutes. No Xcode or Android Studio required." />
15  
15<script type="application/ld+json">
16      {
17        "@context": "https://schema.org",
18        "@graph": [
19          {
20            "@type": "WebApplication",
21            "name": "html2app",
22            "alternateName": [
23              "HTML to APK Converter",
24              "HTML to IPA Converter",
25              "HTML to iOS App Converter",
26              "HTML to Mobile App Converter",
27              "Free Online APK Builder",
28              "Cloud App Builder",
29              "Phaser to APK/iOS Wrapper",
30              "Three.js to Native App",
31              "Pixi.js Native Wrapper",
32              "Online Build Service",
33              "Capacitor Alternative"
34            ],
35            "url": "https://html2app.dev",
36            "applicationCategory": "DeveloperApplication",
37            "applicationSubCategory": ["GameApplication", "UtilitiesApplication"],
38            "operatingSystem": "Android, iOS",
39            "description": "Instant online HTML to mobile app converter. Cloud-based build service that wraps HTML5 projects into native Android and iOS binaries. No Android Studio or Xcode required.",
40            "featureList": [
41              "HTML to APK Converter",
42              "HTML to IPA Converter",
43              "HTML to iOS App Converter",
44              "Phaser to APK/iOS Wrapper",
45              "Three.js to Native App",
46              "Pixi.js Native Wrapper",
47              "Online Build Service",
48              "Cloud-based App Builder",
49              "Get iPhone/iPad UDID"
50            ],
51            "softwareRequirements": "HTML5 Project",
52            "offers": {
53              "@type": "AggregateOffer",
54              "lowPrice": "0",
55              "highPrice": "12",
56              "priceCurrency": "USD",
57              "offers": [
58                {
59                  "@type": "Offer",
60                  "name": "Free Plan",
61                  "price": "0",
62                  "priceCurrency": "USD",
63                  "description": "Free Android Debug Builds (.apk) for HTML5 projects and games."
64                },
65                {
66                  "@type": "Offer",
67                  "name": "Starter Plan",
68                  "price": "24",
69                  "priceCurrency": "USD",
70                  "description": "Android Release Builds (.aab) and increased limits. Billed yearly ($3/mo)."
71                }
72              ]
73            },
74            "author": {
75              "@id": "https://html2app.dev/#organization"
76            }
77          },
78          {
79            "@type": "HowTo",
80            "name": "How to Convert HTML5 to Mobile App",
81            "description": "Convert your HTML5 project into native Android and iOS apps in 3 simple steps using html2app's cloud-based build service.",
82            "step": [
83              {
84                "@type": "HowToStep",
85                "name": "Upload Your Files",
86                "text": "Upload your build folder and we'll handle the native wrapper magic for you.",
87                "position": 1
88              },
89              {
90                "@type": "HowToStep",
91                "name": "Configure & Build",
92                "text": "Works with any HTML, CSS, and JS app. Simply configure your native features and trigger a build.",
93                "position": 2
94              },
95              {
96                "@type": "HowToStep",
97                "name": "Get Your App",
98                "text": "Get your compiled app binary ready for installation or publishing to app stores.",
99                "position": 3
100              }
101            ],
102            "totalTime": "PT10M"
103          },
104          {
105            "@type": "Organization",
106            "@id": "https://html2app.dev/#organization",
107            "name": "html2app",
108            "url": "https://html2app.dev",
109            "logo": "https://html2app.dev/logo-512x512.png",
110            "sameAs": ["https://github.com/html2app"],
111            "contactPoint": {
112              "@type": "ContactPoint",
113              "contactType": "technical support",
114              "url": "https://html2app.dev/contact"
115            },
116            "founder": {
117              "@type": "Person",
118              "name": "Yannick Deubel",
119              "url": "https://github.com/yandeu",
120              "sameAs": ["https://github.com/yandeu"]
121            },
122            "termsOfService": "https://html2app.dev/terms-of-service",
123            "privacyPolicy": "https://html2app.dev/privacy-policy",
124            "publishingPrinciples": "https://html2app.dev/legal-notice"
125          }
126        ]
127      }
128    </script>
vendor: 1 bytes, line 128
128
129<script defer src="js/index.cb76fb34.js"></script>
129<style>:root{--primary:#4f46e5;--primary-hover:#4338ca;--primary-light:#eef2ff;--primary-subtle:#f5f7ff;--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--slate-950:#020617;--white:#fff;--indigo-300:#a5b4fc;--indigo-400:#818cf8;--indigo-500:#6366f1;--indigo-600:#4f46e5;--indigo-700:#4338ca;--indigo-900:#312e81;--purple-400:#c084fc;--amber-300:#fcd34d;--blue-300:#93c5fd;--color-bg:#f9f7f6;--color-bg-footer:#f2efed;--color-primary:#127aca;--color-black:#000;--color-gray2:#c4c4c4;--color-gray:#ebebeb;--color-white:#fff;--color-text:#2e2e2e;--color-text-bold:#363636;--color-text-light:#666;--color-link:#378ef0;--color-link-hover:#363636}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-x:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(180deg,var(--primary-subtle)0%,var(--white)100%);color:var(--slate-900);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}a{color:var(--primary);text-decoration:none}a:hover{color:var(--primary-hover)}strong,b{color:var(--slate-800)}p,li,span{font-size:16px}ul{padding-left:32px}li{line-height:1.6}pre{color:#555;background:#eaeaea;border:1px solid #c4c4c4;border-radius:4px;max-height:max(50vh,312px);padding:8px;overflow:auto}code{font-family:monospace}@keyframes hero-glow{0%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:.8;transform:translate(-50%)scale(1.1)}}@keyframes gradient-shift{0%,to{background-position:0%}50%{background-position:100%}}@keyframes pulse-arrow{0%,to{opacity:.4;transform:translate(0)}50%{opacity:.8;transform:translate(4px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes pulse-glow{0%,to{box-shadow:0 4px 15px rgba(249,115,22,.4)}50%{box-shadow:0 4px 25px rgba(249,115,22,.6)}}@keyframes rippleEffect{0%{transform:scale(1)}to{opacity:0;transform:scale(var(--scale))}}@keyframes zoomPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}#root{flex-direction:column;width:100%;min-height:100dvh;display:flex}main{flex:1}section{padding:6rem 1.5rem}section.bg-white{background:var(--white)}section.bg-slate{background:rgba(248,250,252,.5)}section.bg-dark{background:var(--slate-900);color:var(--white)}.bg-purple{color:var(--white);background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}section.bordered{border-top:1px solid var(--slate-200)}.section-container{max-width:80rem;margin:0 auto;padding:0 1.5rem}.section-container.narrow{max-width:900px}@media (max-width:650px){.section-container{padding:0 .5rem}}.section-header{text-align:center;margin-bottom:4rem}.section-header h2{color:var(--slate-900);margin-bottom:1rem;font-size:2.25rem;font-weight:700}.section-header p{color:var(--slate-600);max-width:42rem;margin:0 auto;font-size:1.125rem;line-height:1.6}@media (min-width:768px){.section-header h2{font-size:3rem}}.bg-dark .section-header h2,.bg-purple .section-header h2{color:var(--white)}.bg-dark .section-header p,.bg-purple .section-header p{color:var(--slate-300)}.container{width:100%;max-width:680px;margin:0 auto;padding:0 16px;position:relative}.site-nav{background:var(--white);border-bottom:1px solid var(--slate-200);z-index:100;padding:.75rem 1.5rem;position:-webkit-sticky;position:sticky;top:0}.nav-container{justify-content:space-between;align-items:center;gap:1.5rem;max-width:80rem;margin:0 auto;display:flex}.nav-left{align-items:center;display:flex}.nav-center{align-items:center;gap:.5rem;display:flex}.nav-right{align-items:center;gap:1.25rem;display:flex}.nav-brand{color:var(--slate-900);letter-spacing:-.025em;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:700;text-decoration:none;display:inline-flex}.nav-brand .beta-tag{background:var(--primary);color:var(--white);text-transform:uppercase;letter-spacing:.05em;border-radius:.25rem;padding:.25rem .5rem;font-size:.625rem;font-weight:700}.nav-brand:hover{color:var(--slate-900)}.nav-link{color:var(--slate-700);cursor:pointer;background:0 0;border:none;border-radius:.5rem;padding:.375rem .75rem;font-family:inherit;font-size:.875rem;font-weight:500;text-decoration:none;transition:color .2s,background .2s;position:relative}.nav-link:after{content:"";background:var(--primary);transform-origin:0;border-radius:2px;height:2px;transition:transform .25s;position:absolute;bottom:.125rem;left:.75rem;right:.75rem;
129transform:scaleX(0)}.nav-link:hover{color:var(--primary)}.nav-link:hover:after{transform:scaleX(1)}.nav-dropdown{position:relative}.nav-dropdown-toggle{align-items:center;gap:.375rem;display:inline-flex}.nav-dropdown-chevron{transition:transform .25s}.nav-dropdown.is-open .nav-dropdown-toggle{color:var(--primary)}.nav-dropdown.is-open .nav-dropdown-chevron{transform:rotate(180deg)}.nav-dropdown-menu{background:var(--white);border:1px solid var(--slate-200);opacity:0;visibility:hidden;z-index:50;border-radius:.75rem;min-width:16rem;padding:.5rem;transition:opacity .2s,transform .2s,visibility .2s;position:absolute;top:calc(100% + .5rem);left:50%;transform:translate(-50%)translateY(-6px);box-shadow:0 10px 30px -10px rgba(15,23,42,.25)}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.is-open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.nav-dropdown-item{border-radius:.5rem;flex-direction:column;gap:.125rem;padding:.625rem .75rem;text-decoration:none;transition:background .15s;display:flex}.nav-dropdown-item:hover{background:var(--primary-light)}.nav-dropdown-item-title{color:var(--slate-900);font-size:.875rem;font-weight:600}.nav-dropdown-item:hover .nav-dropdown-item-title{color:var(--primary)}.nav-dropdown-item-desc{color:var(--slate-500);font-size:.75rem}.nav-login{color:var(--slate-700)}.nav-btn{color:var(--white);background:var(--primary);white-space:nowrap;border-radius:.625rem;align-items:center;gap:.5rem;padding:.625rem 1.5rem;font-size:.875rem;font-weight:600;text-decoration:none;transition:background .2s,box-shadow .2s;display:inline-flex;box-shadow:0 1px 2px rgba(79,70,229,.25)}.nav-btn:hover{background:var(--primary-hover);color:var(--white);box-shadow:0 4px 12px rgba(79,70,229,.35)}.nav-burger{border:1px solid var(--slate-200);cursor:pointer;background:0 0;border-radius:.5rem;flex-direction:column;justify-content:center;gap:5px;width:2.5rem;height:2.5rem;padding:0;transition:background .2s,border-color .2s;display:none}.nav-burger:hover{background:var(--slate-100)}.nav-burger-bar{background:var(--slate-700);border-radius:2px;width:18px;height:2px;margin:0 auto;transition:transform .25s,opacity .2s;display:block}.site-nav.mobile-open .nav-burger-bar:first-child{transform:translateY(7px)rotate(45deg)}.site-nav.mobile-open .nav-burger-bar:nth-child(2){opacity:0}.site-nav.mobile-open .nav-burger-bar:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.nav-mobile{background:var(--white);border-bottom:1px solid var(--slate-200);opacity:0;visibility:hidden;flex-direction:column;gap:.25rem;padding:.75rem 1.5rem 1.25rem;transition:opacity .2s,transform .2s,visibility .2s;display:none;position:absolute;top:100%;left:0;right:0;transform:translateY(-8px);box-shadow:0 12px 24px -12px rgba(15,23,42,.2)}.site-nav.mobile-open .nav-mobile{opacity:1;visibility:visible;transform:translateY(0)}.nav-mobile-link{color:var(--slate-700);border-radius:.5rem;padding:.75rem .5rem;font-size:1rem;font-weight:500;text-decoration:none;transition:background .15s,color .15s;display:block}.nav-mobile-link:hover,.nav-mobile-link:active{background:var(--primary-light);color:var(--primary)}.nav-mobile-group{border-top:1px solid var(--slate-100);border-bottom:1px solid var(--slate-100);margin:.25rem 0;padding:.5rem 0}.nav-mobile-group-label{text-transform:uppercase;letter-spacing:.05em;color:var(--slate-400);padding:.25rem .5rem;font-size:.6875rem;font-weight:600;display:block}.nav-mobile-link.sub{padding-left:1rem;font-size:.9375rem}html:has(.site-nav.mobile-open){overflow:hidden}@media (max-width:860px){.nav-center,.nav-login{display:none}.nav-burger,.nav-mobile{display:flex}}button,.btn{background-color:var(--color-gray);border:1px var(--color-gray2)solid;cursor:pointer;color:#000;border-radius:5px;padding:6px 10px;font-size:12px;font-weight:700;line-height:1.2;transition:opacity .2s;display:inline-block;position:relative;overflow:hidden}button:hover,.btn:hover{opacity:.7}.btn.blue{color:var(--color-white);background-color:var(--color-primary);border:1px var(--color-primary)solid}.btn.orange{color:var(--color-white);background-color:#e67e22;border:1px solid #d35400}.btn.round{border-radius:16px}.btn:disabled{color:rgba(16,16,16,.3);cursor:not-allowed}.btn.blue.btn:disabled{opacity:.5;color:var(--color-white)}.btn.download{padding:4px 8px}.btn-service{text-align:center;border:2px solid var(--slate-200);color:var(--slate-900);
129cursor:pointer;background:0 0;border-radius:.5rem;padding:.75rem 1.25rem;font-family:inherit;font-size:.875rem;font-weight:600;text-decoration:none;transition:all .2s;display:block}.btn-service:hover{background:var(--slate-50);border-color:var(--slate-300);color:var(--slate-900)}.btn-service.blue{background:var(--primary);color:var(--white);border-color:var(--primary)}.btn-service.blue:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--white)}.btn-cta{border-radius:.5rem;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex;color:var(--white)!important}.btn-cta.orange{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 4px 12px rgba(249,115,22,.3);color:var(--white)!important}.btn-cta.orange:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(249,115,22,.4);color:var(--white)!important}.btn-cta img{-webkit-filter:brightness(0)invert();filter:brightness(0)invert();width:16px;height:16px}.btn-modal{text-align:center;border-radius:.5rem;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-block}.btn-modal.primary{background:var(--primary);color:var(--white)}.btn-modal.primary:hover{background:var(--primary-hover);color:var(--white)}.btn-modal.secondary{background:var(--slate-100);color:var(--slate-900);border:1px solid var(--slate-200)}.btn-modal.secondary:hover{background:var(--slate-50);color:var(--slate-900)}.badge{color:var(--primary);background:var(--primary-light);border:1px solid rgba(79,70,229,.2);border-radius:9999px;align-items:center;margin-bottom:2rem;padding:.5rem 1rem;font-size:.75rem;font-weight:600;transition:all .3s;display:inline-flex;box-shadow:0 0 20px rgba(79,70,229,.1),0 4px 6px -1px rgba(0,0,0,.05)}.badge:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(79,70,229,.2),0 4px 10px -1px rgba(0,0,0,.1)}.pulse-dot{background:var(--primary);border-radius:9999px;width:.5rem;height:.5rem;margin-right:.5rem;animation:2s cubic-bezier(.4,0,.6,1) infinite pulse;box-shadow:0 0 10px rgba(79,70,229,.6)}.section-badge{color:var(--primary);background:var(--primary-light);letter-spacing:.05em;border:1px solid rgba(79,70,229,.2);border-radius:9999px;margin-bottom:1rem;padding:.375rem 1rem;font-size:.75rem;font-weight:600;display:inline-block}.bg-dark .section-badge{color:var(--indigo-300);background:rgba(49,46,129,.5);border-color:rgba(67,56,202,.5)}.section-badge.orange{color:#ea580c;background:rgba(234,88,12,.1);border-color:rgba(249,115,22,.3)}.bg-purple .section-badge{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}.badge-label{background:var(--slate-100);border:1px solid var(--slate-200);color:var(--slate-600);white-space:nowrap;border-radius:4px;padding:.25rem .625rem;font-size:.6875rem;font-weight:600;display:inline-block}.badge-label.blue{color:var(--white);background:var(--primary);border-color:var(--primary)}#service-cards{flex-wrap:wrap;gap:2rem;max-width:56rem;margin:0 auto;display:flex}.service-card{background:var(--white);border:1px solid var(--slate-200);border-radius:.75rem;flex-direction:column;flex:1;gap:1rem;min-width:260px;padding:2rem;transition:all .3s;display:flex;box-shadow:0 1px 2px rgba(0,0,0,.05)}.service-card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}.service-card.featured{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),0 4px 6px -1px rgba(0,0,0,.1)}.service-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.service-header h3{color:var(--slate-900);font-size:1.25rem;font-weight:700}.service-card p{color:var(--slate-600);flex:1;font-size:.9375rem;line-height:1.6}@media (max-width:600px){#service-cards{flex-direction:column}.service-card{min-width:100%}}select{border:1px var(--color-gray2)solid;background:var(--color-white);border-radius:5px;width:100%;min-height:32px;margin:8px 0;padding:6px 10px;font-size:12px;display:inline-block}input[type=text]{border:1px var(--color-gray2)solid;background:var(--color-white);border-radius:5px;width:100%;min-height:32px;margin:8px 0;padding:6px 10px;font-size:12px;display:inline-block}input[type=file]{border:1px var(--color-gray2)solid;background:var(--color-white);border-radius:5px;width:100%;min-height:32px;margin:8px 0;padding:6px 10px;font-size:12px;display:inline-block}input[type=email]{border:1px var(--color-gray2)solid;background:var(--color-white);border-radius:5px;width:100%;min-height:32px;margin:8px 0;padding:6px 10px;font-size:12px;display:inline-block}input{background-color:var(--color-white)}.checkbox{font-family:monospace;position:relative;top:-2px}.bc-input-grid{grid-template-columns:1fr;gap:.75rem;display:grid}@media (min-width:480px){.bc-input-grid{grid-template-columns:repeat(2,1fr)}}.bc-input-grid input[type=text]{width:100%;color:var(--slate-900);background:var(--white);border:1px solid var(--slate-300);border-radius:.5rem;outline:none;min-height:auto;margin:0;padding:.625rem 1rem;font-family:inherit;font-size:.875rem;transition:all .2s}.bc-input-grid input[type=number]{width:100%;color:var(--slate-900);background:var(--white);border:1px solid var(--slate-300);border-radius:.5rem;outline:none;min-height:auto;margin:0;padding:.625rem 1rem;font-family:inherit;font-size:.875rem;transition:all .2s}.bc-input-grid input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.bc-input-grid input.invalid{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.15)!important}.bc-orientation-group{gap:1rem;margin-top:.5rem;display:flex}.bc-radio-item{cursor:pointer;color:var(--slate-600);align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;transition:color .2s;
129display:flex}.bc-radio-item:hover{color:var(--primary)}.bc-radio-item input[type=radio]{accent-color:var(--primary);cursor:pointer;width:1rem;height:1rem}#create-credentials-form{flex-flow:wrap;justify-content:space-between;gap:10px 24px;display:flex}#create-credentials-form>div{flex-basis:calc(50% - 12px)}@media only screen and (max-width:600px){#create-credentials-form>div{flex-basis:100%}}.currency-dropdown{position:relative}.currency-dropdown-toggle{background:var(--white);border:1px solid var(--slate-200);cursor:pointer;color:var(--slate-700);border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;transition:all .2s;display:flex}.currency-dropdown-toggle:hover{border-color:var(--slate-300);background:var(--slate-50)}.currency-flag{object-fit:cover;border-radius:50%;width:20px;height:20px}.currency-text{font-weight:600}.currency-divider{color:var(--slate-300)}.currency-vat{color:var(--slate-500);font-size:.75rem;font-weight:300}.dropdown-arrow{color:var(--slate-400);transition:transform .2s}.currency-dropdown-toggle[aria-expanded=true] .dropdown-arrow{transform:rotate(180deg)}.currency-dropdown-menu{background:var(--white);border:1px solid var(--slate-200);z-index:50;border-radius:1.25rem;min-width:100%;margin-bottom:.5rem;padding:.375rem;list-style:none;display:none;position:absolute;bottom:100%;left:0;box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}.currency-dropdown-menu.open{display:block}.currency-option{cursor:pointer;color:var(--slate-700);border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;transition:background .15s;display:flex}.currency-option:hover{background:var(--slate-50)}.currency-option.active{background:var(--primary-light);color:var(--primary)}.footer-vat-indicator{color:var(--slate-500);font-size:.8125rem}.beta-notice{text-align:center;border-bottom:3px solid rgba(255,255,255,.2);padding:1rem 2rem;font-size:.95rem}.beta-notice strong{text-transform:uppercase;letter-spacing:.5px;color:#fff;font-weight:700}.beta-notice a{color:#fff;font-weight:600;text-decoration:underline}.beta-notice a:hover{opacity:.9;color:#fff}.hero2{background-image:linear-gradient(90deg,rgba(99,102,241,.03) 1px,transparent 1px),linear-gradient(rgba(99,102,241,.03) 1px,transparent 1px);background-size:40px 40px;position:relative;overflow:hidden}.hero2:before{content:"";aspect-ratio:1;-webkit-filter:blur(70px);filter:blur(70px);pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(79,70,229,.16) 0%,rgba(124,58,237,.1) 35%,transparent 68%);width:120%;max-width:1300px;animation:14s ease-in-out infinite alternate hero-glow;position:absolute;top:-30%;left:50%;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.hero2:before{animation:none}}.hero2-inner{z-index:1;grid-template-columns:1fr;align-items:center;gap:3rem;max-width:78rem;margin:0 auto;padding:4.5rem 1.5rem 5rem;display:grid;position:relative}@media (min-width:980px){.hero2-inner{grid-template-columns:1.05fr .95fr;gap:3.5rem}}.hero2-copy{text-align:center}@media (min-width:980px){.hero2-copy{text-align:left}}.hero2-badge{color:var(--primary);background:var(--primary-light);border:1px solid rgba(79,70,229,.2);border-radius:9999px;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.4rem 1rem;font-size:.78rem;font-weight:600;display:inline-flex}.hero2-badge .hero2-pulse{background:var(--primary);border-radius:9999px;width:.5rem;height:.5rem;animation:2s ease-in-out infinite hero2-pulse;box-shadow:0 0 rgba(79,70,229,.5)}@keyframes hero2-pulse{0%,to{box-shadow:0 0 rgba(79,70,229,.5)}50%{box-shadow:0 0 0 6px rgba(79,70,229,0)}}.hero2-title{letter-spacing:-.03em;color:var(--slate-900);margin:0 0 1.35rem;font-size:2.75rem;font-weight:800;line-height:1.07}@media (min-width:768px){.hero2-title{font-size:3.5rem}}@media (min-width:1200px){.hero2-title{font-size:4rem}}.hero2-title .hl{font-size:inherit;font-weight:inherit;line-height:inherit;background:linear-gradient(120deg,var(--indigo-600)0%,#7c3aed 60%,#c026d3 100%);-webkit-text-fill-color:transparent;color:transparent;-webkit-background-clip:text;background-clip:text}.hero2-subtitle{color:var(--slate-600);max-width:36rem;margin:0 0 2rem;font-size:1.15rem;line-height:1.65}@media (min-width:980px){.hero2-subtitle{margin-left:0;margin-right:0}}@media (max-width:979px){.hero2-subtitle{margin-left:auto;margin-right:auto}}.hero2-subtitle strong{color:var(--slate-800);font-weight:600}.hero2-cta-row{flex-wrap:wrap;gap:.85rem;margin-bottom:1.75rem;display:flex}@media (max-width:979px){.hero2-cta-row{justify-content:center}}.hero2-btn-primary{color:#fff;background:linear-gradient(135deg,var(--primary),#4338ca);border-radius:.7rem;align-items:center;gap:.5rem;padding:.9rem 1.6rem;font-size:1rem;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 10px 24px -6px rgba(79,70,229,.5)}.hero2-btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -6px rgba(79,70,229,.6)}.hero2-btn-primary img{-webkit-filter:brightness(0)invert();filter:brightness(0)invert();width:1rem;height:1rem}.hero2-btn-secondary{color:var(--slate-700);background:var(--white);border:1px solid var(--slate-300);border-radius:.7rem;align-items:center;gap:.5rem;padding:.9rem 1.4rem;font-size:1rem;font-weight:600;text-decoration:none;transition:border-color .2s,color .2s,transform .2s;
129display:inline-flex}.hero2-btn-secondary:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}.hero2-trust{flex-wrap:wrap;gap:.6rem 1.5rem;margin:0;padding:0;list-style:none;display:flex}@media (max-width:979px){.hero2-trust{justify-content:center}}.hero2-trust li{color:var(--slate-700);white-space:nowrap;align-items:center;gap:.45rem;font-size:.9rem;font-weight:500;display:inline-flex}.hero2-trust img{background:var(--primary);border-radius:9999px;width:18px;height:18px;padding:.25rem;box-shadow:0 1px 3px rgba(79,70,229,.3)}.hero2-visual{justify-content:center;display:flex}.hero2-card{background:var(--white);border:1px solid var(--slate-200);border-radius:1rem;width:100%;max-width:24rem;overflow:hidden;box-shadow:0 30px 60px -25px rgba(15,23,42,.35),0 2px 6px rgba(15,23,42,.05)}.hero2-card-bar{background:var(--slate-50);border-bottom:1px solid var(--slate-200);align-items:center;gap:.6rem;padding:.75rem 1rem;display:flex}.hero2-dots{gap:.4rem;display:flex}.hero2-dots i{background:var(--slate-300);border-radius:9999px;width:.7rem;height:.7rem}.hero2-dots i:first-child{background:#ff5f56}.hero2-dots i:nth-child(2){background:#ffbd2e}.hero2-dots i:nth-child(3){background:#27c93f}.hero2-card-title{color:var(--slate-500);font-family:Monaco,Menlo,monospace;font-size:.8rem;font-weight:600}.hero2-card-body{padding:1.25rem}.hero2-drop{text-align:center;border:2px dashed var(--slate-300);background:var(--slate-50);cursor:pointer;border-radius:.8rem;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;padding:1.75rem 1rem;transition:border-color .2s,background .2s,transform .2s;display:flex;position:relative}.hero2-drop:hover{border-color:var(--primary);background:var(--primary-subtle)}.hero2-drop.dragover{border-color:var(--primary);background:var(--primary-light);transform:scale(1.01)}.hero2-drop.has-file{background:rgba(52,211,153,.08);border-style:solid;border-color:#34d399}.hero2-drop .hero2-file-input{display:none}.hero2-drop-emoji{font-size:1.75rem;line-height:1}.hero2-drop-text{color:var(--slate-800);word-break:break-all;font-size:.95rem;font-weight:700}.hero2-drop-hint{color:var(--slate-500);font-size:.78rem}.hero2-meta{border:1px solid var(--slate-200);border-radius:.7rem;align-items:center;gap:.75rem;margin:1rem 0;padding:.75rem;display:flex}.hero2-meta-icon{background:var(--primary-light);border:1px solid rgba(79,70,229,.18);border-radius:.6rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;display:flex}.hero2-meta-icon img{-webkit-filter:brightness(0)saturate()invert(26%)sepia(89%)saturate(2186%)hue-rotate(235deg)brightness(93%)contrast(95%);filter:brightness(0)saturate()invert(26%)sepia(89%)saturate(2186%)hue-rotate(235deg)brightness(93%)contrast(95%);width:1.25rem;height:1.25rem}.hero2-meta-fields{flex-direction:column;flex:1;gap:.45rem;display:flex}.hero2-bar-line{background:var(--slate-200);border-radius:9999px;height:.5rem}.hero2-bar-line.long{width:80%}.hero2-bar-line.short{width:50%}.hero2-build-btn{color:#fff;background:linear-gradient(135deg,var(--primary),#4338ca);border-radius:.7rem;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.85rem 1rem;font-size:.95rem;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 8px 20px -6px rgba(79,70,229,.5)}.hero2-build-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(79,70,229,.6)}.hero2-build-btn img{-webkit-filter:brightness(0)invert();filter:brightness(0)invert();width:.95rem;height:.95rem}.hero2-card-foot{text-align:center;color:var(--slate-500);margin-top:.75rem;font-size:.75rem;display:block}.supported-tech-section{padding:1.5rem 0;overflow:hidden}.tech-header{text-align:center;margin-bottom:1rem}.tech-header h2{color:var(--slate-500);opacity:.7;letter-spacing:.5px;text-transform:uppercase;margin-bottom:0;font-size:1.2rem;font-weight:400}.tech-subtitle{color:var(--slate-500);opacity:.6;margin-top:.5rem;margin-bottom:0;font-size:.95rem;font-weight:400}.tech-scroll-wrapper{background:0 0;width:100%;position:relative;overflow:hidden}.tech-scroll-container{will-change:transform;width:-webkit-max-content;width:-moz-max-content;width:max-content;animation:40s linear infinite scroll-left;display:flex}.tech-logo-item{flex-direction:row;flex-shrink:0;justify-content:flex-start;align-items:center;gap:.75rem;min-width:140px;margin-right:2rem;padding:.5rem;display:flex}.tech-logo{-webkit-filter:grayscale()brightness(.9);filter:grayscale()brightness(.9);opacity:.8;flex-shrink:0;justify-content:center;align-items:center;width:35px;height:35px;transition:-webkit-filter .3s,filter .3s,opacity .3s;display:flex}
129.tech-logo img{object-fit:contain;max-width:100%;max-height:100%}.tech-logo-item:hover .tech-logo{-webkit-filter:grayscale(50%)brightness(1.1);filter:grayscale(50%)brightness(1.1);opacity:1}.tech-name{text-align:left;color:var(--slate-500);white-space:nowrap;font-size:.85rem;font-weight:500}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-50%)}}@media (max-width:768px){.supported-tech-section{padding:2rem 0}.tech-header h2{font-size:1.5rem}.tech-logo-item{min-width:130px;margin-right:1.5rem}.tech-logo{width:45px;height:45px}.tech-name{font-size:.8rem}.tech-scroll-container{animation:30s linear infinite scroll-left}}@media (max-width:600px){.tech-scroll-container{animation:24s linear infinite scroll-left}}@media (max-width:480px){.tech-logo-item{min-width:110px;margin-right:1rem}.tech-logo{width:40px;height:40px}.tech-name{font-size:.7rem}.tech-scroll-container{animation:20s linear infinite scroll-left}}@media (max-width:380px){.tech-scroll-container{animation:16s linear infinite scroll-left}}.build-flow{position:relative;overflow:hidden}.build-flow .bf-header{text-align:center;max-width:46rem;margin:0 auto 3rem}.build-flow .bf-header h2{letter-spacing:-.02em;color:var(--slate-900);margin:0 0 1.1rem;font-size:max(1.85rem,min(4vw,3rem));font-weight:800;line-height:1.12}.build-flow .bf-highlight{background:linear-gradient(135deg,var(--primary)0%,#7c3aed 50%,#06b6d4 100%);-webkit-text-fill-color:transparent;color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.15em}.build-flow .bf-header p{color:var(--slate-600);margin:0 0 1.5rem;font-size:1.0625rem;line-height:1.7}.build-flow .bf-run{color:#fff;background:linear-gradient(135deg,var(--primary),#4338ca);cursor:pointer;border:none;border-radius:.65rem;align-items:center;gap:.5rem;padding:.7rem 1.4rem;font-family:inherit;font-size:.9rem;font-weight:700;transition:transform .2s,box-shadow .2s;display:inline-flex}.build-flow .bf-run:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(79,70,229,.35)}.build-flow .bf-run img{-webkit-filter:brightness(0)invert();filter:brightness(0)invert();width:.95rem;height:.95rem}.build-flow .bf-pipeline{justify-content:center;align-items:stretch;gap:.5rem;max-width:70rem;margin:0 auto;display:flex}.build-flow .bf-stage{background:var(--white);border:1px solid var(--slate-200);border-radius:1.1rem;flex-direction:column;flex:1 1 0;padding:1.75rem 1.5rem;transition:border-color .4s,box-shadow .4s,transform .4s;display:flex;position:relative;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -18px rgba(15,23,42,.3)}.build-flow .bf-step{color:#fff;background:linear-gradient(135deg,var(--indigo-400),var(--primary));border:3px solid var(--white);border-radius:9999px;justify-content:center;align-items:center;width:2.1rem;height:2.1rem;font-size:.85rem;font-weight:800;display:inline-flex;position:absolute;top:-.9rem;left:1.5rem;box-shadow:0 4px 12px rgba(79,70,229,.35)}.build-flow .bf-stage-head{align-items:center;gap:.7rem;margin:.4rem 0 .35rem;display:flex}.build-flow .bf-stage-icon{background:linear-gradient(135deg,var(--primary-light),#ede9fe);border:1px solid rgba(79,70,229,.18);border-radius:.7rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;display:flex}.build-flow .bf-stage-icon img{width:1.4rem;height:1.4rem}.build-flow .bf-stage-icon img[src*=rocket]{-webkit-filter:brightness(0)saturate()invert(26%)sepia(89%)saturate(2186%)hue-rotate(235deg)brightness(93%)contrast(95%);filter:brightness(0)saturate()invert(26%)sepia(89%)saturate(2186%)hue-rotate(235deg)brightness(93%)contrast(95%)}.build-flow .bf-stage h3{color:var(--slate-900);margin:0;font-size:1.05rem;font-weight:700}.build-flow .bf-stage>p{color:var(--slate-600);margin:0 0 1.1rem;font-size:.875rem;line-height:1.55}.build-flow .bf-canvas{background:radial-gradient(at 50% 0,#161d2e,#0a0e16);border:1px solid #222a3a;border-radius:.85rem;justify-content:center;align-items:center;height:210px;margin-top:auto;padding:.9rem;display:flex;position:relative;overflow:hidden}.build-flow .bf-beam{background:linear-gradient(90deg,rgba(79,70,229,.25),rgba(6,182,212,.25));border-radius:9999px;flex:0 0 46px;align-self:center;height:4px;margin-top:2.5rem;position:relative;overflow:visible}.build-flow .bf-beam:after{content:"";background:var(--primary);width:8px;height:8px;box-shadow:0 0 10px var(--primary);opacity:0;border-radius:9999px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.build-flow.is-building .bf-beam:after{animation:.7s ease-in-out infinite bf-packet}.build-flow .bf-beam.bf-beam-2:after{animation-delay:.2s}@keyframes bf-packet{0%{opacity:0;left:0}20%{opacity:1}80%{opacity:1}to{opacity:0;left:100%}}.build-flow .bf-files{flex-direction:column;align-items:center;gap:.75rem;width:100%;display:flex}.build-flow .bf-zip-tag{letter-spacing:.03em;color:#c7d2fe;background:rgba(129,140,248,.15);border:1px solid rgba(129,140,248,.35);border-radius:9999px;align-items:center;gap:.45rem;padding:.3rem .75rem;font-family:Monaco,Menlo,monospace;font-size:.64rem;font-weight:700;display:inline-flex}.build-flow .bf-file-grid{grid-template-columns:repeat(2,1fr);gap:.5rem;width:100%;display:grid}.build-flow .bf-file{color:rgba(255,255,255,.85);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:.6rem;
129align-items:center;gap:.5rem;padding:.55rem .65rem;font-family:Monaco,Menlo,monospace;font-size:.66rem;transition:border-color .2s,background .2s,transform .2s;display:flex}.build-flow .bf-file:hover{background:rgba(129,140,248,.1);border-color:rgba(129,140,248,.5);transform:translateY(-2px)}.build-flow .bf-file img{flex-shrink:0;width:1.4rem;height:1.4rem}.build-flow .bf-file-name{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.build-flow.is-building .bf-zip-tag{animation:.6s bf-zip-pulse}@keyframes bf-zip-pulse{0%,to{box-shadow:none;transform:scale(1)}50%{transform:scale(1.07);box-shadow:0 0 16px rgba(129,140,248,.55)}}.build-flow.is-building .bf-file{animation:.45s cubic-bezier(.22,1,.36,1) both bf-file-in}.build-flow.is-building .bf-file:first-child{animation-delay:50ms}.build-flow.is-building .bf-file:nth-child(2){animation-delay:.13s}.build-flow.is-building .bf-file:nth-child(3){animation-delay:.21s}.build-flow.is-building .bf-file:nth-child(4){animation-delay:.29s}@keyframes bf-file-in{0%{opacity:0;transform:translateY(10px)scale(.95)}to{opacity:1;transform:none}}.build-flow .bf-build{flex-direction:column;gap:.6rem;width:100%;font-family:Monaco,Menlo,monospace;display:flex}.build-flow .bf-console{flex-direction:column;gap:.3rem;min-height:5.2rem;display:flex}.build-flow .bf-log{color:rgba(255,255,255,.7);opacity:.25;align-items:center;gap:.4rem;font-size:.64rem;transition:opacity .3s,color .3s;display:flex}.build-flow .bf-log:before{content:"›";color:var(--primary);font-weight:700}.build-flow.is-building .bf-log{animation:.4s forwards bf-log-in}.build-flow.is-building .bf-log:first-child{animation-delay:.7s}.build-flow.is-building .bf-log:nth-child(2){animation-delay:1.2s}.build-flow.is-building .bf-log:nth-child(3){animation-delay:1.7s}.build-flow.is-building .bf-log:nth-child(4){animation-delay:2.2s}@keyframes bf-log-in{0%{opacity:.25}to{opacity:1;color:#a5f3c4}}.build-flow .bf-progress{background:rgba(255,255,255,.1);border-radius:9999px;height:7px;overflow:hidden}.build-flow .bf-progress-fill{border-radius:inherit;background:linear-gradient(90deg,var(--primary),#06b6d4 70%,var(--bf-green,#34d399));width:100%;height:100%}.build-flow.is-building .bf-progress-fill{width:0;animation:2.1s ease-in-out .6s forwards bf-progress}@keyframes bf-progress{0%{width:0}to{width:100%}}.build-flow .bf-progress-label{color:rgba(255,255,255,.5);justify-content:space-between;font-size:.6rem;display:flex}.build-flow .bf-output{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.build-flow .bf-device{aspect-ratio:320/640;background:linear-gradient(155deg,#2a3346,#11151f);border-radius:.9rem;height:100%;padding:4px;position:relative;box-shadow:0 0 0 1px #2a3140,0 12px 26px -10px rgba(0,0,0,.8)}.build-flow .bf-device-screen{background:#0b0817;border-radius:.7rem;width:100%;height:100%;overflow:hidden}.build-flow .bf-device-screen img{object-fit:cover;width:100%;height:100%;display:block}.build-flow.is-building .bf-device{animation:.6s 3s both bf-device-on}@keyframes bf-device-on{0%{box-shadow:0 0 0 1px #2a3140,0 12px 26px -10px rgba(0,0,0,.8)}50%{box-shadow:0 0 0 1px #34d399,0 0 26px rgba(52,211,153,.6),0 12px 26px -10px rgba(0,0,0,.8)}to{box-shadow:0 0 0 1px #2a3140,0 12px 26px -10px rgba(0,0,0,.8)}}.build-flow .bf-badges{gap:.4rem;display:flex;position:absolute;bottom:.4rem;left:50%;transform:translate(-50%)}.build-flow .bf-badge-chip{background:rgba(255,255,255,.92);border-radius:.5rem;justify-content:center;align-items:center;width:1.7rem;height:1.7rem;display:flex;box-shadow:0 4px 10px rgba(0,0,0,.4)}.build-flow .bf-badge-chip img{width:1rem;height:1rem}.build-flow .bf-badge-chip.coming{background:rgba(255,255,255,.15)}.build-flow .bf-badge-chip.coming img{-webkit-filter:brightness(0)invert();filter:brightness(0)invert();opacity:.6}.build-flow .bf-installed{background:var(--bf-green,#34d399);color:#06281d;white-space:nowrap;opacity:0;border-radius:9999px;padding:.28rem .7rem;font-size:.6rem;font-weight:800;position:absolute;top:.5rem;left:50%;transform:translate(-50%,-8px)}.build-flow.is-building .bf-installed{animation:1.4s 3.1s forwards bf-installed}@keyframes bf-installed{0%{opacity:0;transform:translate(-50%,-8px)}20%,to{opacity:1;transform:translate(-50%)}}@media (max-width:880px){.build-flow .bf-pipeline{flex-direction:column;align-items:stretch;gap:2rem;max-width:30rem}.build-flow .bf-beam{background:linear-gradient(rgba(79,70,229,.3),rgba(6,182,212,.3));align-self:center;width:4px;height:32px;margin:0 auto}.build-flow .bf-beam:after{top:0;transform:translate(-50%);left:50%!important}.build-flow.is-building .bf-beam:after{animation:.7s ease-in-out infinite bf-packet-v}@keyframes bf-packet-v{0%{opacity:0;top:0}20%{opacity:1}80%{opacity:1}to{opacity:0;top:100%}}}@media (prefers-reduced-motion:reduce){.build-flow [class*=bf-]{animation:none!important}.build-flow .bf-file{opacity:1;transform:none}.build-flow .bf-log{opacity:1}.build-flow .bf-installed{opacity:1;transform:translate(-50%)}}.hidden{display:none!important}.overflow-auto{overflow:auto}
129.flex{display:flex}.margin-0{margin:0}.margin-right-8{margin-right:8px}.margin-top-8{margin-top:8px}.margin-top-48{margin-top:48px}.margin-top-64{margin-top:64px}.margin-bottom-8{margin-bottom:8px}.margin-bottom-48{margin-bottom:48px}.margin-bottom-64{margin-bottom:64px}.has-text-small{font-size:small}.ripple{background-color:rgba(255,255,255,.5);border-radius:50%;width:2px;height:2px;animation:.5s ease-in-out rippleEffect;position:absolute}</style></head>
130
131<body>
132  <div id="root">
133    <nav class="site-nav" id="site-nav">
134      <div class="nav-container">
135        <div class="nav-left">
136          <a href="/" class="nav-brand">
137            html2app.dev
138          </a>
139        </div>
140        <div class="nav-center">
141          <a href="#features" class="nav-link" data-nav-link>Features</a>
142          <a href="#how-it-works" class="nav-link" data-nav-link>How it works</a>
143          <a href="#pricing" class="nav-link" data-nav-link>Pricing</a>
144          <a href="/phaser-js" class="nav-link">Phaser.js</a>
145          <div class="nav-dropdown" id="nav-docs-dropdown">
146            <button type="button" class="nav-link nav-dropdown-toggle" aria-expanded="false" aria-haspopup="true">
147              Docs
148              <svg class="nav-dropdown-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none">
149                <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
150                  stroke-linejoin="round" />
151              </svg>
152            </button>
153            <div class="nav-dropdown-menu" role="menu">
154              <a href="https://html2app.dev/docs/index.html" class="nav-dropdown-item" role="menuitem">
155                <span class="nav-dropdown-item-title">Documentation</span>
156                <span class="nav-dropdown-item-desc">Guides &amp; build setup</span>
157              </a>
158              <a href="https://html2app.dev/js-bridge/index.html" class="nav-dropdown-item" role="menuitem">
159                <span class="nav-dropdown-item-title">JS Bridge API</span>
160                <span class="nav-dropdown-item-desc">Native plugin reference</span>
161              </a>
162            </div>
163          </div>
164        </div>
165        <div class="nav-right">
166          <a href="https://app.html2app.dev/login" class="nav-link nav-login">Log in</a>
167          <a href="https://app.html2app.dev/" class="nav-btn">
168            Dashboard
169            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
170              stroke-linecap="round" stroke-linejoin="round">
171              <polyline points="9 18 15 12 9 6"></polyline>
172            </svg>
173          </a>
174          <button type="button" class="nav-burger" id="nav-burger" aria-label="Open menu" aria-expanded="false"
175            aria-controls="nav-mobile">
176            <span class="nav-burger-bar"></span>
177            <span class="nav-burger-bar"></span>
178            <span class="nav-burger-bar"></span>
179          </button>
180        </div>
181      </div>
182      <div class="nav-mobile" id="nav-mobile">
183        <a href="#features" class="nav-mobile-link" data-nav-close>Features</a>
184        <a href="#how-it-works" class="nav-mobile-link" data-nav-close>How it works</a>
185        <a href="#pricing" class="nav-mobile-link" data-nav-close>Pricing</a>
186        <a href="/phaser-js" class="nav-mobile-link" data-nav-close>Phaser.js</a>
187        <div class="nav-mobile-group">
188          <span class="nav-mobile-group-label">Docs</span>
189          <a href="https://html2app.dev/docs/index.html" class="nav-mobile-link sub" data-nav-close>Documentation</a>
190          <a href="https://html2app.dev/js-bridge/index.html" class="nav-mobile-link sub" data-nav-close>JS Bridge
191            API</a>
192        </div>
193        <a href="https://app.html2app.dev/login" class="nav-mobile-link" data-nav-close>Log in</a>
194      </div>
195    </nav>
196    <main>
197      <!-- Beta Notice Banner -->
198      <!-- <div class="beta-notice bg-purple">
199        <strong>🚀 Live:</strong> The Flutter-based Public Beta is now available.
200        <a href="https://app.html2app.dev/">Try it now →</a>
201      </div> -->
202
203      <!-- Hero V2 (conversion-focused) -->
204      <section class="hero2 bordered" id="hero">
205        <div class="hero2-inner">
206          <div class="hero2-copy">
207            <span class="hero2-badge">
208              <span class="hero2-pulse"></span>
209              Cloud build service · HTML → APK/AAB
210            </span>
211            <h1 class="hero2-title">
212              Ship your web app to <span class="hl">Google Play</span> in minutes
213            </h1>
214            <p class="hero2-subtitle">
215              Upload your ZIP — HTML, CSS &amp; JS and all — and download a production-ready
216              <strong>APK or AAB</strong>. No Android Studio, no native code. Works with any
217              framework or game engine.
218            </p>
219            <div class="hero2-cta-row">
220              <a href="https://app.html2app.dev/login" class="hero2-btn-primary">
221                <img src="/images/icons/play.svg" alt="" width="16" height="16" loading="eager" />
222                Start building free
223              </a>
224              <a href="#how-it-works" class="hero2-btn-secondary" data-nav-link>See how it works</a>
225            </div>
226            <ul class="hero2-trust" aria-label="Key benefits">
227              <li>
228                <img src="/images/icons/check.svg" alt="" width="16" height="16" loading="eager" />
229                No Android Studio
230              </li>
231              <li>
232                <img src="/images/icons/check.svg" alt="" width="16" height="16" loading="eager" />
233                Signed APK &amp; AAB
234              </li>
235              <li>
236                <img src="/images/icons/check.svg" alt="" width="16" height="16" loading="eager" />
237                Free tier — no credit card
238              </li>
239            </ul>
240          </div>
241
242          <div class="hero2-visual">
243            <div class="hero2-card">
244              <div class="hero2-card-bar">
245                <span class="hero2-dots"><i></i><i></i><i></i></span>
246                <span class="hero2-card-title">html2app · new build</span>
247              </div>
248              <div class="hero2-card-body">
249                <div class="hero2-drop" id="h2-drop" role="button" tabindex="0"
250                  aria-label="Upload your app ZIP">
251                  <input type="file" id="h2-zip" accept=".zip" class="hero2-file-input" />
252                  <span class="hero2-drop-emoji">📦</span>
253                  <span class="hero2-drop-text">Drop your app ZIP here</span>
254                  <span class="hero2-drop-hint">HTML · CSS · JS — any framework or engine</span>
255                </div>
256                <div class="hero2-meta" aria-hidden="true">
257                  <span class="hero2-meta-icon">
258                    <img src="/images/icons/image.svg" alt="" width="20" height="20" loading="eager" />
259                  </span>
260                  <span class="hero2-meta-fields">
261                    <span class="hero2-bar-line long"></span>
262                    <span class="hero2-bar-line short"></span>
263                  </span>
264                </div>
265                <a href="https://app.html2app.dev/login" class="hero2-build-btn">
266                  <img src="/images/icons/play.svg" alt="" width="15" height="15" loading="eager" />
267                  Start building free
268                </a>
269                <span class="hero2-card-foot">Free tier · no credit card · build in minutes</span>
270              </div>
271            </div>
272          </div>
273        </div>
274      </section>
275
276      <!-- Choose Your Build Service -->
277      <!-- <section class="bg-slate bordered">
278        <div class="section-container">
279          <div class="section-header">
280            <span class="section-badge">BUILD SERVICES</span>
281            <h2>Choose Your Build Service</h2>
282          </div>
283          <div id="service-cards">
284            <div class="service-card">
285              <div class="service-header">
286                <h3>Beta Sandbox</h3>
287                <span class="badge-label">Ending June 2026</span>
288              </div>
289              <p>Everything in Beta Live, completely free. Full build capabilities with all features. Less stable and
290                available only until end of June 2026.</p>
291              <a href="https://sdbx.html2app.dev/" class="btn-service">Go to Sandbox →</a>
292            </div>
293            <div class="service-card featured">
294              <div class="service-header">
295                <h3>Beta Live</h3>
296                <span class="badge-label blue">Beta • Live</span>
297              </div>
298              <p>Cloud-based build service powered by Flutter. Full build capabilities with release builds, plugin
299                ecosystem, and improved stability.</p>
300              <a href="https://app.html2app.dev/" class="btn-service blue">Go to Live App →</a>
301            </div>
302          </div>
303        </div>
304      </section> -->
305
306      <!-- Supported Technologies & Frameworks -->
307      <section class="supported-tech-section bg-slate bordered">
308        <div class="section-container">
309          <div class="tech-header">
310            <h2>Supported Technologies & Frameworks</h2>
311            <p class="tech-subtitle">Works with any HTML5 project</p>
312          </div>
313
314          <div class="tech-scroll-wrapper">
315            <div class="tech-scroll-container" id="techScrollContainer">
316              <!-- Logo items will be duplicated via JavaScript for seamless loop -->
317              <div class="tech-logo-item">
318                <div class="tech-logo">
319                  <img src="/images/logos/html5.svg" alt="HTML5" loading="lazy" />
320                </div>
321                <span class="tech-name">HTML5</span>
322              </div>
323              <div class="tech-logo-item">
324                <div class="tech-logo">
325                  <img src="/images/logos/javascript.svg" alt="Vanilla JavaScript" loading="lazy" />
326                </div>
327                <span class="tech-name">Vanilla JS</span>
328              </div>
329              <div class="tech-logo-item">
330                <a href="/phaser-js" class="tech-logo" title="Phaser.js App Converter">
331                  <img src="/images/logos/phaser.svg" alt="Phaser.js" loading="lazy" />
332                </a>
333                <a href="/phaser-js" class="tech-name">Phaser.js</a>
334              </div>
335              <div class="tech-logo-item">
336                <div class="tech-logo">
337                  <img src="/images/logos/react.svg" alt="React" loading="lazy" />
338                </div>
339                <span class="tech-name">React</span>
340              </div>
341              <div class="tech-logo-item">
342                <div class="tech-logo">
343                  <img src="/images/logos/vue.svg" alt="Vue" loading="lazy" />
344                </div>
345                <span class="tech-name">Vue</span>
346              </div>
347              <div class="tech-logo-item">
348                <div class="tech-logo">
349                  <img src="/images/logos/pixijs.svg" alt="Pixi.js" loading="lazy" />
350                </div>
351                <span class="tech-name">Pixi.js</span>
352              </div>
353              <div class="tech-logo-item">
354                <div class="tech-logo">
355                  <img src="/images/logos/angular.svg" alt="Angular" loading="lazy" />
356                </div>
357                <span class="tech-name">Angular</span>
358              </div>
359              <div class="tech-logo-item">
360                <div class="tech-logo">
361                  <img src="/images/logos/ionic.svg" alt="Ionic" loading="lazy" />
362                </div>
363                <span class="tech-name">Ionic</span>
364              </div>
365              <div class="tech-logo-item">
366                <div class="tech-logo">
367                  <img src="/images/logos/onsenui.svg" alt="Onsen UI" loading="lazy" />
368                </div>
369                <span class="tech-name">Onsen UI</span>
370              </div>
371              <div class="tech-logo-item">
372                <div class="tech-logo">
373                  <img src="/images/logos/svelte.svg" alt="Svelte" loading="lazy" />
374                </div>
375                <span class="tech-name">Svelte</span>
376              </div>
377              <div class="tech-logo-item">
378                <div class="tech-logo">
379                  <img src="/images/logos/threejs.svg" alt="Three.js" loading="lazy" />
380                </div>
381                <span class="tech-name">Three.js</span>
382              </div>
383            </div>
384          </div>
385        </div>
386      </section>
387
388      <!-- How It Works (reimagined: build pipeline) -->
389      <section id="how-it-works" class="build-flow bordered">
390        <div class="section-container">
391          <div class="bf-header">
392            <span class="section-badge">HOW IT WORKS</span>
393            <h2>From HTML to <span class="bf-highlight">a Real Native App</span></h2>
394            <p>Three simple steps. Drop in your web project, configure it, and download a store-ready app —
395              no Android Studio, no Xcode, no native code.</p>
396            <button type="button" class="bf-run" data-flow-run>
397              <img src="/images/icons/play.svg" alt="" width="15" height="15" /> Run the build
398            </button>
399          </div>
400
401          <div class="bf-pipeline">
402            <!-- Stage 1: Upload -->
403            <article class="bf-stage">
404              <span class="bf-step">01</span>
405              <div class="bf-stage-head">
406                <span class="bf-stage-icon">
407                  <img src="/images/upload-icon-v2.svg" alt="" width="22" height="22" loading="lazy" />
408                </span>
409                <h3>Upload Your Files</h3>
410              </div>
411              <p>Drop in your ZIP — HTML, CSS, JS and assets. Any framework, any engine.</p>
412              <div class="bf-canvas">
413                <div class="bf-files">
414                  <span class="bf-zip-tag">📦 my-app.zip</span>
415                  <div class="bf-file-grid">
416                    <span class="bf-file">
417                      <img src="/images/logos/html5.svg" alt="" width="26" height="26" loading="lazy" />
418                      <span class="bf-file-name">index.html</span>
419                    </span>
420                    <span class="bf-file">
421                      <img src="/images/logos/css3.svg" alt="" width="26" height="26" loading="lazy" />
422                      <span class="bf-file-name">style.css</span>
423                    </span>
424                    <span class="bf-file">
425                      <img src="/images/logos/javascript.svg" alt="" width="26" height="26" loading="lazy" />
426                      <span class="bf-file-name">game.js</span>
427                    </span>
428                    <span class="bf-file">
429                      <img src="/images/icons/folder.svg" alt="" width="26" height="26" loading="lazy" />
430                      <span class="bf-file-name">assets/</span>
431                    </span>
432                  </div>
433                </div>
434              </div>
435            </article>
436
437            <div class="bf-beam" aria-hidden="true"></div>
438
439            <!-- Stage 2: Configure & Build -->
440            <article class="bf-stage">
441              <span class="bf-step">02</span>
442              <div class="bf-stage-head">
443                <span class="bf-stage-icon">
444                  <img src="/images/configure-icon-v2.svg" alt="" width="22" height="22" loading="lazy" />
445                </span>
446                <h3>Configure &amp; Build</h3>
447              </div>
448              <p>Set your app name, icon and orientation, then build. We wrap it in a real native shell.</p>
449              <div class="bf-canvas">
450                <div class="bf-build">
451                  <div class="bf-console">
452                    <span class="bf-log">Unzipping project…</span>
453                    <span class="bf-log">Injecting native wrapper…</span>
454                    <span class="bf-log">Signing package…</span>
455                    <span class="bf-log">Packaging app.aab…</span>
456                  </div>
457                  <div class="bf-progress"><span class="bf-progress-fill"></span></div>
458                  <div class="bf-progress-label"><span>build</span><span>release · .aab</span></div>
459                </div>
460              </div>
461            </article>
462
463            <div class="bf-beam bf-beam-2" aria-hidden="true"></div>
464
465            <!-- Stage 3: Ship -->
466            <article class="bf-stage">
467              <span class="bf-step">03</span>
468              <div class="bf-stage-head">
469                <span class="bf-stage-icon">
470                  <img src="/images/icons/rocket.svg" alt="" width="22" height="22" loading="lazy" />
471                </span>
472                <h3>Ship to the Store</h3>
473              </div>
474              <p>Download a signed APK or AAB, ready to publish to Google Play. iOS coming soon.</p>
475              <div class="bf-canvas">
476                <div class="bf-output">
477                  <span class="bf-installed">Installed ✓</span>
478                  <div class="bf-device">
479                    <div class="bf-device-screen">
480                      <img src="/images/coffee-app-scene.svg" alt="Your finished app on a phone" width="320"
481                        height="640" loading="lazy" />
482                    </div>
483                  </div>
484                  <div class="bf-badges">
485                    <span class="bf-badge-chip">
486                      <img src="/images/Google_Play_2022_icon.svg" alt="Google Play" width="16" height="16"
487                        loading="lazy" />
488                    </span>
489                    <span class="bf-badge-chip coming" title="iOS coming soon">
490                      <img src="/images/Apple_logo_white.svg" alt="Apple App Store (coming soon)" width="16"
491                        height="16" loading="lazy" />
492                    </span>
493                  </div>
494                </div>
495              </div>
496            </article>
497          </div>
498        </div>
499      </section>
500
501      <!-- Core Features -->
502      <section id="features" class="bg-slate bordered">
503        <div class="section-container">
504          <div class="section-header">
505            <span class="section-badge">FEATURES</span>
506            <h2>Core Features</h2>
507            <p>Everything you need to ship a commercial-grade mobile app.</p>
508          </div>
509
510          <div class="features-grid">
511            <div class="feature-card">
512              <div class="feature-icon">
513                <img src="/images/icons/feature-appearance.svg" alt="" width="56" height="56" loading="lazy" />
514              </div>
515              <h3>Appearance Controls</h3>
516              <p>
517                Easily customize orientation, status bar colors, and fullscreen mode. Perfect your app's look with
518                simple configuration options.
519              </p>
520            </div>
521            <div class="feature-card">
522              <div class="feature-icon">
523                <img src="/images/icons/feature-embedded.svg" alt="" width="56" height="56" loading="lazy" />
524              </div>
525              <h3>Embedded HTML & Offline Ready</h3>
526              <p>
527                Your entire app is embedded in the binary. No network required. Launches instantly, works offline by
528                default.
529              </p>
530            </div>
531            <div class="feature-card">
532              <div class="feature-icon">
533                <img src="/images/icons/feature-plugins.svg" alt="" width="56" height="56" loading="lazy" />
534              </div>
535              <h3>One-Click Plugins</h3>
536              <p>
537                Access native features like AdMob monetization, vibration feedback, persistent storage, and in-app
538                browser. More plugins coming soon.
539              </p>
540            </div>
541            <div class="feature-card">
542              <div class="feature-icon">
543                <img src="/images/icons/feature-builds.svg" alt="" width="56" height="56" loading="lazy" />
544              </div>
545              <h3>Store-Ready Builds</h3>
546              <p>
547                Export signed and unsigned APKs plus Android App Bundles (.aab) — ready to install or publish straight
548                to Google Play.
549              </p>
550            </div>
551            <div class="feature-card">
552              <div class="feature-icon">
553                <img src="/images/icons/feature-typescript.svg" alt="" width="56" height="56" loading="lazy" />
554              </div>
555              <h3>Type-Safe Bridge API</h3>
556              <p>
557                A clean JavaScript bridge with full TypeScript definitions — autocomplete, inline docs, and
558                compile-time safety out of the box.
559              </p>
560            </div>
561            <div class="feature-card">
562              <div class="feature-icon">
563                <img src="/images/icons/feature-pricing.svg" alt="" width="56" height="56" loading="lazy" />
564              </div>
565              <h3>Simple, Transparent Pricing</h3>
566              <p>
567                Honest, predictable pricing with a generous free tier. Pay only for what you need, cancel anytime — no
568                lock-in.
569              </p>
570            </div>
571          </div>
572        </div>
573      </section>
574
575      <!-- Affordable Mobile Presence -->
576      <section class="coffee-pricing" id="affordable" aria-labelledby="affordable-title">
577        <div class="coffee-stars" aria-hidden="true"></div>
578        <div class="coffee-grid-overlay" aria-hidden="true"></div>
579
580        <div class="coffee-header">
581          <span class="coffee-badge">
582            <img src="/images/coffee-cup.svg" alt="" width="16" height="16" loading="lazy" />
583            Less than your daily coffee
584          </span>
585          <h2 id="affordable-title">
586            A Professional Mobile Presence for the
587            <span class="highlight">Price of a Coffee</span>
588          </h2>
589          <p>
590            Build <strong>unlimited apps and games</strong> and ship them straight to the Google Play
591            Store — all for just <strong>$5/month</strong> (or <strong>$36/year</strong>). No Android Studio, no surprises.
592          </p>
593        </div>
594
595        <div class="coffee-stage">
596          <div class="coffee-phone">
597            <div class="coffee-phone-notch" aria-hidden="true"></div>
598            <div class="coffee-phone-screen">
599              <img src="/images/coffee-app-scene.svg"
600                alt="A polished mobile home screen filled with apps and games built using html2app" width="320"
601                height="640" loading="lazy" />
602            </div>
603          </div>
604
605          <div class="coffee-card card-unlimited">
606            <div class="coffee-card-icon">
607              <img src="/images/icons/rocket.svg" alt="" width="18" height="18" loading="lazy" />
608            </div>
609            <div class="coffee-card-text">
610              <h3>Unlimited Apps</h3>
611              <p>Build as many apps as you want — no per-app fees.</p>
612            </div>
613          </div>
614
615          <div class="coffee-card card-playstore">
616            <div class="coffee-card-icon">
617              <img src="/images/Google_Play_2022_icon.svg" alt="" width="18" height="18" loading="lazy" />
618            </div>
619            <div class="coffee-card-text">
620              <h3>Play Store Ready</h3>
621              <p>Signed .aab bundles, ready to publish to Google Play.</p>
622            </div>
623          </div>
624
625          <div class="coffee-card card-instant">
626            <div class="coffee-card-icon">
627              <img src="/images/icons/cloud-arrow-up.svg" alt="" width="18" height="18" loading="lazy" />
628            </div>
629            <div class="coffee-card-text">
630              <h3>Instant Cloud Builds</h3>
631              <p>Upload your ZIP and get a real binary in minutes.</p>
632            </div>
633          </div>
634
635          <div class="coffee-card card-lockin">
636            <div class="coffee-card-icon">
637              <img src="/images/icons/lock.svg" alt="" width="18" height="18" loading="lazy" />
638            </div>
639            <div class="coffee-card-text">
640              <h3>No Lock-In</h3>
641              <p>Cancel anytime. Your code stays 100% yours.</p>
642            </div>
643          </div>
644
645          <div class="coffee-card card-games">
646            <div class="coffee-card-icon">
647              <img src="/images/icons/fire.svg" alt="" width="18" height="18" loading="lazy" />
648            </div>
649            <div class="coffee-card-text">
650              <h3>Apps &amp; Games</h3>
651              <p>Phaser, Three.js, Pixi.js, React — anything HTML5.</p>
652            </div>
653          </div>
654
655          <div class="coffee-card card-signed">
656            <div class="coffee-card-icon">
657              <img src="/images/icons/stamp.svg" alt="" width="18" height="18" loading="lazy" />
658            </div>
659            <div class="coffee-card-text">
660              <h3>Store-Grade Output</h3>
661              <p>Production APK &amp; AAB, signed and release-ready.</p>
662            </div>
663          </div>
664        </div>
665
666        <div class="coffee-price-bar">
667          <div class="coffee-price">
668            <img src="/images/coffee-cup.svg" alt="" width="48" height="48" loading="lazy" />
669            <div>
670              <div class="coffee-price-amount">
671                <span class="amount">$5</span>
672                <span class="period">/month</span>
673              </div>
674              <span class="coffee-price-note">or $36/year (= $3/month) · free tier available</span>
675            </div>
676          </div>
677          <a href="https://app.html2app.dev/" class="coffee-cta">
678            Start Building Free
679            <img src="/images/icons/arrow-right.svg" alt="" width="18" height="18" loading="lazy" />
680          </a>
681        </div>
682      </section>
683
684      <!-- JS Bridge Playground (reimagined) -->
685      <section id="bridge-playground" class="bridge-playground bordered">
686        <div class="bp-bg" aria-hidden="true"></div>
687        <div class="section-container">
688          <div class="bp-header">
689            <span class="section-badge bp-badge">JS BRIDGE API</span>
690            <h2>Talk to the Device in <span class="bp-highlight">Plain JavaScript</span></h2>
691            <p>One clean, type-safe API sits between your web code and the native platform. Pick a capability,
692              hit Run, and watch the bridge fire.</p>
693          </div>
694
695          <div class="bp-tabs" role="tablist" aria-label="Native capabilities">
696            <button type="button" class="bp-tab is-active" data-bp-tab="vibration" role="tab" aria-selected="true">
697              <img src="/images/icons/vibration.svg" alt="" width="16" height="16" loading="lazy" /> Vibration
698            </button>
699            <button type="button" class="bp-tab" data-bp-tab="ads" role="tab" aria-selected="false">
700              <img src="/images/icons/coins.svg" alt="" width="16" height="16" loading="lazy" /> Rewarded Ad
701            </button>
702            <button type="button" class="bp-tab" data-bp-tab="device" role="tab" aria-selected="false">
703              <img src="/images/icons/code.svg" alt="" width="16" height="16" loading="lazy" /> Device Info
704            </button>
705            <button type="button" class="bp-tab" data-bp-tab="storage" role="tab" aria-selected="false">
706              <img src="/images/icons/database.svg" alt="" width="16" height="16" loading="lazy" /> Storage
707            </button>
708          </div>
709
710          <div class="bp-stageset">
711            <!-- Vibration -->
712            <article class="bp-demo is-active" id="bp-demo-vibration" data-bp-demo="vibration">
713              <div class="bp-window">
714                <div class="bp-window-bar">
715                  <span class="bp-dots"><span></span><span></span><span></span></span>
716                  <span class="bp-window-title">vibration.js</span>
717                  <button type="button" class="bp-run" data-bp-run>
718                    <img src="/images/icons/play.svg" alt="" width="13" height="13" /> Run
719                  </button>
720                </div>
721<pre class="bp-code"><span class="tk-key">import</span> { <span class="tk-var">Vibration</span> } <span class="tk-key">from</span> <span class="tk-str">'@yandeu/js-bridge/lib/plugins/vibration.js'</span>
722
723<span class="tk-com">// Buzz once (500ms)</span>
724<span class="tk-var">Vibration</span>.<span class="tk-fn">vibrate</span>()
725
726<span class="tk-com">// Custom pattern: [wait, buzz, wait, buzz]</span>
727<span class="tk-key">await</span> <span class="tk-var">Vibration</span>.<span class="tk-fn">vibrateWithPattern</span>([<span class="tk-num">0</span>, <span class="tk-num">500</span>, <span class="tk-num">100</span>, <span class="tk-num">500</span>])</pre>
728              </div>
729              <div class="bp-bridge" aria-hidden="true">
730                <span class="bp-bridge-label">Bridge</span>
731                <span class="bp-bridge-flow"><span></span><span></span><span></span></span>
732                <span class="bp-endpoints"><span>JS</span><span>→ NATIVE</span></span>
733              </div>
734              <div class="bp-phone-wrap">
735                <div class="bp-phone">
736                  <div class="bp-screen">
737                    <div class="bp-statusbar"><span>9:41</span><span class="bp-dot-row"><i></i><i></i><i></i></span></div>
738                    <div class="bp-screen-body">
739                      <span class="bp-ripple"></span>
740                      <span class="bp-ripple"></span>
741                      <span class="bp-ripple"></span>
742                      <span class="bp-vib-glyph">
743                        <img src="/images/icons/vibration.svg" alt="" width="28" height="28" loading="lazy" />
744                      </span>
745                      <span class="bp-vib-label">Buzzing…</span>
746                    </div>
747                  </div>
748                </div>
749              </div>
750            </article>
751
752            <!-- Rewarded Ad -->
753            <article class="bp-demo" id="bp-demo-ads" data-bp-demo="ads">
754              <div class="bp-window">
755                <div class="bp-window-bar">
756                  <span class="bp-dots"><span></span><span></span><span></span></span>
757                  <span class="bp-window-title">ads.js</span>
758                  <button type="button" class="bp-run" data-bp-run>
759                    <img src="/images/icons/play.svg" alt="" width="13" height="13" /> Run
760                  </button>
761                </div>
762<pre class="bp-code"><span class="tk-key">import</span> { <span class="tk-var">Ads</span> } <span class="tk-key">from</span> <span class="tk-str">'@yandeu/js-bridge/lib/plugins/ads.js'</span>
763
764<span class="tk-com">// Point at your rewarded ad unit</span>
765<span class="tk-var">Ads</span>.<span class="tk-var">rewarded</span>.<span class="tk-fn">setAdUnitId</span>(<span class="tk-str">'ca-app-pub-XXXX/WWWW'</span>)
766
767<span class="tk-key">const</span> loaded = <span class="tk-key">await</span> <span class="tk-var">Ads</span>.<span class="tk-var">rewarded</span>.<span class="tk-fn">load</span>()
768<span class="tk-key">if</span> (loaded) <span class="tk-key">await</span> <span class="tk-var">Ads</span>.<span class="tk-var">rewarded</span>.<span class="tk-fn">show</span>()</pre>
769              </div>
770              <div class="bp-bridge" aria-hidden="true">
771                <span class="bp-bridge-label">Bridge</span>
772                <span class="bp-bridge-flow"><span></span><span></span><span></span></span>
773                <span class="bp-endpoints"><span>JS</span><span>→ NATIVE</span></span>
774              </div>
775              <div class="bp-phone-wrap">
776                <div class="bp-phone">
777                  <div class="bp-screen">
778                    <div class="bp-statusbar"><span>9:41</span><span class="bp-dot-row"><i></i><i></i><i></i></span></div>
779                    <div class="bp-screen-body">
780                      <div class="bp-ads-hud"><span>SCORE 1280</span><span>🪙 120</span></div>
781                      <span class="bp-ads-stage">Game running…</span>
782                      <div class="bp-ad-overlay">
783                        <span class="bp-ad-tag">Rewarded Ad</span>
784                        <span class="bp-ad-play">
785                          <img src="/images/icons/play.svg" alt="" width="18" height="18" loading="lazy" />
786                        </span>
787                        <span class="bp-ad-reward">✓ Reward earned · +50 🪙</span>
788                      </div>
789                    </div>
790                  </div>
791                </div>
792              </div>
793            </article>
794
795            <!-- Device & Package Info -->
796            <article class="bp-demo" id="bp-demo-device" data-bp-demo="device">
797              <div class="bp-window">
798                <div class="bp-window-bar">
799                  <span class="bp-dots"><span></span><span></span><span></span></span>
800                  <span class="bp-window-title">device.js</span>
801                  <button type="button" class="bp-run" data-bp-run>
802                    <img src="/images/icons/play.svg" alt="" width="13" height="13" /> Run
803                  </button>
804                </div>
805<pre class="bp-code"><span class="tk-key">import</span> { <span class="tk-var">WebView</span> } <span class="tk-key">from</span> <span class="tk-str">'@yandeu/js-bridge'</span>
806
807<span class="tk-com">// Read live device + package details</span>
808<span class="tk-key">const</span> device = <span class="tk-key">await</span> <span class="tk-var">WebView</span>.<span class="tk-fn">deviceInfo</span>()
809<span class="tk-key">const</span> pkg = <span class="tk-key">await</span> <span class="tk-var">WebView</span>.<span class="tk-fn">packageInfo</span>()
810
811<span class="tk-var">console</span>.<span class="tk-fn">log</span>(device.<span class="tk-var">data</span>.<span class="tk-var">android</span>?.<span class="tk-var">model</span>, pkg.<span class="tk-var">data</span>.<span class="tk-var">version</span>)</pre>
812              </div>
813              <div class="bp-bridge" aria-hidden="true">
814                <span class="bp-bridge-label">Bridge</span>
815                <span class="bp-bridge-flow"><span></span><span></span><span></span></span>
816                <span class="bp-endpoints"><span>JS</span><span>→ NATIVE</span></span>
817              </div>
818              <div class="bp-phone-wrap">
819                <div class="bp-phone">
820                  <div class="bp-screen">
821                    <div class="bp-statusbar"><span>9:41</span><span class="bp-dot-row"><i></i><i></i><i></i></span></div>
822                    <div class="bp-screen-body">
823                      <div class="bp-readout">
824                        <span class="bp-readout-line"><span class="bp-k">model</span><span class="bp-v">Pixel 8</span></span>
825                        <span class="bp-readout-line"><span class="bp-k">os</span><span class="bp-v">Android 14</span></span>
826                        <span class="bp-readout-line"><span class="bp-k">appId</span><span class="bp-v">com.example.app</span></span>
827                        <span class="bp-readout-line"><span class="bp-k">version</span><span class="bp-v">1.0.0 (1)</span></span>
828                      </div>
829                    </div>
830                  </div>
831                </div>
832              </div>
833            </article>
834
835            <!-- Persistent Storage -->
836            <article class="bp-demo" id="bp-demo-storage" data-bp-demo="storage">
837              <div class="bp-window">
838                <div class="bp-window-bar">
839                  <span class="bp-dots"><span></span><span></span><span></span></span>
840                  <span class="bp-window-title">storage.js</span>
841                  <button type="button" class="bp-run" data-bp-run>
842                    <img src="/images/icons/play.svg" alt="" width="13" height="13" /> Run
843                  </button>
844                </div>
845<pre class="bp-code"><span class="tk-key">import</span> { <span class="tk-var">WebView</span> } <span class="tk-key">from</span> <span class="tk-str">'@yandeu/js-bridge'</span>
846
847<span class="tk-com">// Save data that survives app restarts</span>
848<span class="tk-key">await</span> <span class="tk-var">WebView</span>.<span class="tk-var">persistentStorage</span>.<span class="tk-fn">setItem</span>(<span class="tk-str">'token'</span>, <span class="tk-str">'abc123xyz'</span>)
849
850<span class="tk-com">// Read it back later</span>
851<span class="tk-key">const</span> token = <span class="tk-key">await</span> <span class="tk-var">WebView</span>.<span class="tk-var">persistentStorage</span>.<span class="tk-fn">getItem</span>(<span class="tk-str">'token'</span>)</pre>
852              </div>
853              <div class="bp-bridge" aria-hidden="true">
854                <span class="bp-bridge-label">Bridge</span>
855                <span class="bp-bridge-flow"><span></span><span></span><span></span></span>
856                <span class="bp-endpoints"><span>JS</span><span>→ NATIVE</span></span>
857              </div>
858              <div class="bp-phone-wrap">
859                <div class="bp-phone">
860                  <div class="bp-screen">
861                    <div class="bp-statusbar"><span>9:41</span><span class="bp-dot-row"><i></i><i></i><i></i></span></div>
862                    <div class="bp-screen-body">
863                      <div class="bp-store">
864                        <div class="bp-store-title">persistentStorage</div>
865                        <ul class="bp-store-list">
866                          <li class="bp-store-row"><span class="bp-k">theme</span><span class="bp-v">"dark"</span></li>
867                          <li class="bp-store-row"><span class="bp-k">level</span><span class="bp-v">7</span></li>
868                          <li class="bp-store-row bp-store-new"><span class="bp-k">token</span><span class="bp-v">"abc123xyz"</span></li>
869                        </ul>
870                      </div>
871                      <span class="bp-store-toast">Saved ✓</span>
872                    </div>
873                  </div>
874                </div>
875              </div>
876            </article>
877          </div>
878
879          <div class="bp-footer">
880            <a href="https://html2app.dev/js-bridge/index.html" class="bp-docs-link">
881              Explore the full JS Bridge API
882              <img src="/images/icons/arrow-right.svg" alt="" width="16" height="16" loading="lazy" />
883            </a>
884            <span class="bp-meta">Promise-based · Fully typed · @yandeu/js-bridge</span>
885          </div>
886        </div>
887      </section>
888
889      <!-- Pricing Section -->
890      <section id="pricing" class="bg-white bordered">
891        <div class="section-container">
892          <div class="section-header">
893            <span class="section-badge">PRICING</span>
894            <h2>Simple, Transparent Pricing</h2>
895            <p>Pay for what you need.</p>
896          </div>
897
898          <div class="billing-toggle">
899            <label id="label-monthly" class="active" for="billingSwitch">Monthly</label>
900            <label class="toggle-switch" for="billingSwitch">
901              <input type="checkbox" id="billingSwitch" aria-label="Switch between monthly and yearly billing" />
902              <span class="toggle-slider"></span>
903            </label>
904            <label id="label-yearly" for="billingSwitch">Yearly</label>
905          </div>
906
907          <div class="pricing-grid">
908            <div class="pricing-card">
909              <h3 class="plan-name">Free</h3>
910              <div class="plan-price">
911                <div class="price-amount">
912                  <span class="amount" data-price-usd="$0" data-price-eur="€0">$0</span>
913                  <span class="period">/mo</span>
914                </div>
915                <p class="price-note">Forever free</p>
916              </div>
917              <ul class="plan-features">
918                <li class="feature-item">
919                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
920                  <span><span class="highlight">4 builds</span> / Day</span>
921                </li>
922                <li class="feature-item">
923                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
924                  <span><span class="highlight">10 MB</span> Size Limit</span>
925                </li>
926                <li class="feature-item">
927                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
928                  <span><span class="highlight">2 Projects</span></span>
929                </li>
930                <li class="feature-item">
931                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
932                  <span>Unsigned APK (.apk)</span>
933                </li>
934                <li class="feature-item">
935                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
936                  <span>Core Plugins + Vibration</span>
937                </li>
938                <li class="feature-item coming-soon">
939                  <img src="/images/icons/watermark.svg" alt="" width="16" height="16" />
940                  <span>Watermark Included <span class="info-tooltip" aria-label="Enjoy a watermark-free app for 7 days on every new build."><img src="/images/icons/circle-info.svg" alt="Info" width="14" height="14" /></span></span>
941                </li>
942              </ul>
943              <a href="https://app.html2app.dev/login" class="plan-button">Start for Free</a>
944            </div>
945
946            <div class="pricing-card featured">
947              <div class="popular-badge">Most Popular</div>
948              <div class="plan-badge plan-discount-badge" data-plan="starter" style="display: none;"></div>
949              <h3 class="plan-name">Starter</h3>
950              <div class="plan-price">
951                <div class="price-amount">
952                  <span class="amount" data-price-usd="$5" data-price-eur="€5" data-price-usd-yearly="$3" data-price-eur-yearly="€3">$5</span>
953                  <span class="period">/mo</span>
954                </div>
955                <p class="price-note" data-note-usd="Billed monthly" data-note-usd-yearly="Billed $36.00 yearly" data-note-eur="Billed monthly" data-note-eur-yearly="Billed €36.00 yearly">
956                  Billed monthly
957                </p>
958              </div>
959              <ul class="plan-features">
960                <li class="feature-item">
961                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
962                  <span><span class="highlight">20 Builds</span> / Day</span>
963                </li>
964                <li class="feature-item">
965                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
966                  <span><span class="highlight">50 MB</span> Size Limit</span>
967                </li>
968                <li class="feature-item">
969                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
970                  <span><span class="highlight">Unlimited Apps</span></span>
971                </li>
972                <li class="feature-item">
973                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
974                  <span><span class="highlight">Signed & Unsigned APK (.apk)</span></span>
975                </li>
976                <li class="feature-item">
977                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
978                  <span><span class="highlight">Android Release (.aab)</span></span>
979                </li>
980                <li class="feature-item">
981                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
982                  <span>Core Plugins + Vibration</span>
983                </li>
984                <li class="feature-item">
985                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
986                  <span>Watermark Removed</span>
987                </li>
988              </ul>
989              <a href="https://app.html2app.dev/subscriptions" class="plan-button">Choose Starter</a>
990            </div>
991
992            <div class="pricing-card">
993              <div class="plan-badge plan-discount-badge" data-plan="developer" style="display: none;"></div>
994              <h3 class="plan-name">Developer</h3>
995              <div class="plan-price">
996                <div class="price-amount">
997                  <span class="amount" data-price-usd="$19" data-price-eur="€19" data-price-usd-yearly="$16"
998                    data-price-eur-yearly="€16">$19</span>
999                  <span class="period">/mo</span>
1000                </div>
1001                <p class="price-note" data-note-usd="Billed monthly" data-note-usd-yearly="Billed $192 yearly"
1002                  data-note-eur="Billed monthly" data-note-eur-yearly="Billed €192 yearly">
1003                  Billed monthly
1004                </p>
1005              </div>
1006              <ul class="plan-features">
1007                <li class="feature-item">
1008                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
1009                  <span><span class="highlight">50 Builds</span> / Day</span>
1010                </li>
1011                <li class="feature-item">
1012                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
1013                  <span><span class="highlight">200 MB</span> Size Limit</span>
1014                </li>
1015                <li class="feature-item">
1016                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
1017                  <span><span class="highlight">Unlimited Apps</span></span>
1018                </li>
1019                <li class="feature-item">
1020                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
1021                  <span><span class="highlight">All Android Builds</span></span>
1022                </li>
1023                <!-- <li class="feature-item coming-soon">
1024                  <img src="/images/icons/clock.svg" alt="" width="16" height="16" />
1025                  <span><span class="highlight">iOS</span> (Coming Soon)</span>
1026                </li> -->
1027                <li class="feature-item">
1028                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
1029                  <span><span class="highlight">All Plugins</span> Access</span>
1030                </li>
1031                <li class="feature-item">
1032                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
1033                  <span>Watermark Removed</span>
1034                </li>
1035                <!-- <li class="feature-item coming-soon">
1036                  <img src="/images/icons/clock.svg" alt="" width="16" height="16" />
1037                  <span>Basic Encryption (Coming Soon)</span>
1038                </li> -->
1039              </ul>
1040              <a href="https://app.html2app.dev/subscriptions" class="plan-button btn-primary">Get Developer</a>
1041            </div>
1042
1043            <!-- <div class="pricing-card" data-feature-status="coming-soon">
1044              <span class="coming-soon-badge">Coming Soon</span>
1045              <h3 class="plan-name">Pro</h3>
1046              <div class="plan-price">
1047                <div class="price-amount">
1048                  <span class="amount" data-price-usd="$49" data-price-eur="€49" data-price-usd-yearly="$40"
1049                    data-price-eur-yearly="€40">$49</span>
1050                  <span class="period">/mo</span>
1051                </div>
1052                <p class="price-note" data-note-usd="Billed monthly" data-note-usd-yearly="Billed $480 yearly"
1053                  data-note-eur="Billed monthly" data-note-eur-yearly="Billed €480 yearly">
1054                  Billed monthly
1055                </p>
1056              </div>
1057              <ul class="plan-features">
1058                <li class="feature-item">
1059                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
1060                  <span><span class="highlight">100 Builds</span> / Day</span>
1061                </li>
1062                <li class="feature-item">
1063                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
1064                  <span><span class="highlight">250 MB</span> Size Limit</span>
1065                </li>
1066                <li class="feature-item">
1067                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
1068                  <span>Limited Priority Support</span>
1069                </li>
1070                <li class="feature-item">
1071                  <img src="/images/icons/check.svg" alt="" width="16" height="16" />
1072                  <span>Advanced Encryption (all assets)</span>
1073                </li>
1074              </ul>
1075              <button class="plan-button">Contact Sales</button>
1076            </div> -->
1077          </div>
1078
1079          <p class="pricing-vat-note" id="pricing-vat-note">* All prices are exclusive of VAT</p>
1080
1081          <!-- Beta Discount Coupon Section -->
1082          <div class="beta-discount-box">
1083            <div class="beta-discount-badge">
1084              <img src="/images/icons/fire.svg" alt="" width="16" height="16" loading="lazy" />
1085              <span>70% OFF</span>
1086            </div>
1087            <h3>Developer Plan: Just $57/year</h3>
1088            <p>While we expand our list of plugins, lock in the <strong>Developer plan</strong> for just <strong>$57 for one year</strong> (normally $192/year). Apply the coupon code during checkout.</p>
1089            <div class="coupon-codes">
1090              <div class="coupon-item">
1091                <span class="coupon-label">USD Coupon</span>
1092                <code class="coupon-code">USD57</code>
1093              </div>
1094              <div class="coupon-item">
1095                <span class="coupon-label">EUR Coupon</span>
1096                <code class="coupon-code">EUR57</code>
1097              </div>
1098            </div>
1099            <p class="coupon-hint">Apply at checkout on <a
1100                href="https://app.html2app.dev/subscriptions">app.html2app.dev/subscriptions</a> for yearly
1101              subscriptions.</p>
1102          </div>
1103        </div>
1104      </section>
1105
1106      <!-- About Section -->
1107      <section id="about" class="bg-dark bordered">
1108        <div class="section-container narrow">
1109          <div class="prose-header">
1110            <span class="section-badge">ABOUT HTML2APP</span>
1111            <h2>The Story Behind<br /><span class="highlight">html2app</span></h2>
1112          </div>
1113          <div class="prose-body">
1114            <p class="prose-lead">
1115              html2app started as a love letter to a tool I lost — and a mission to make shipping HTML5 games to mobile
1116              feel effortless again. Here's how it came to be.
1117            </p>
1118
1119            <ol class="about-timeline">
1120              <li class="timeline-item">
1121                <span class="timeline-year">2016</span>
1122                <div class="timeline-content">
1123                  <h3>The spark</h3>
1124                  <p>
1125                    I started learning JavaScript, following countless <strong>Phaser.js</strong> tutorials and building
1126                    little games for fun. Along the way I discovered <strong>Intel XDK</strong>, <strong>PhoneGap
1127                      Build</strong>, and <strong>Cocoon.io</strong> — services for wrapping HTML5 games into native
1128                    apps.
1129                  </p>
1130                </div>
1131              </li>
1132              <li class="timeline-item">
1133                <span class="timeline-year">The magic</span>
1134                <div class="timeline-content">
1135                  <h3>Cocoon.io just worked</h3>
1136                  <p>
1137                    Cocoon.io was my favorite. ZIP your game, tweak a few settings, hit build — and suddenly your
1138                    creation was running on your phone. No Xcode. No Android Studio. Just pure, effortless game
1139                    development.
1140                  </p>
1141                </div>
1142              </li>
1143              <li class="timeline-item">
1144                <span class="timeline-year">
11442019</span>
1145                <div class="timeline-content">
1146                  <h3>The magic disappears</h3>
1147                  <p>
1148                    When Ludei shut down the service, it felt like losing a good friend. Shipping an HTML5 game now
1149                    meant
1150                    wrestling with <strong>Capacitor</strong> configs, hunting for compatible plugins, and — for iOS —
1151                    buying a Mac.
1152                  </p>
1153                </div>
1154              </li>
1155              <li class="timeline-item">
1156                <span class="timeline-year">2022</span>
1157                <div class="timeline-content">
1158                  <h3>Bringing it back</h3>
1159                  <p>
1160                    I built <strong>html2app</strong> to bring that feeling back — a tribute to the golden era when
1161                    building with Phaser and shipping to mobile felt genuinely fun. From May 2022 through 2025 it was
1162                    <strong>completely free</strong>, built on Capacitor.
1163                  </p>
1164                </div>
1165              </li>
1166              <li class="timeline-item">
1167                <span class="timeline-year">Nov 2025</span>
1168                <div class="timeline-content">
1169                  <h3>The Flutter transition</h3>
1170                  <p>
1171                    As demand grew, infrastructure costs climbed. We started transitioning to <strong>Flutter</strong> to
1172                    improve performance and reliability. During the transition, the service ran in parallel with a beta
1173                    sandbox preview.
1174                  </p>
1175                </div>
1176              </li>
1177              <li class="timeline-item">
1178                <span class="timeline-year">June 2026</span>
1179                <div class="timeline-content">
1180                  <h3>Sustainable pricing arrives</h3>
1181                  <p>
1182                    The new Flutter platform is live with two tiers: <strong>Starter ($5/month)</strong> for basic builds,
1183                    and <strong>Developer ($19/month)</strong> for a growing plugin ecosystem. Lock in the Developer plan
1184                    for only <strong>$57 for one year</strong> while we increase the list of plugins — a
1185                    <strong>70% discount</strong>.
1186                  </p>
1187                </div>
1188              </li>
1189              <li class="timeline-item">
1190                <span class="timeline-year">Today</span>
1191                <div class="timeline-content">
1192                  <h3>Building the plugin ecosystem</h3>
1193                  <p>
1194                    We're expanding native capabilities based on what you need most. Your feedback shapes what comes next
1195                    — from monetization tools to device features. Join us in making HTML5 development on mobile more
1196                    powerful than ever.
1197                  </p>
1198                </div>
1199              </li>
1200            </ol>
1201
1202            <blockquote class="about-quote">
1203              If you share those nostalgic feelings about the Phaser + Cocoon.io days, welcome home. Let's make shipping
1204              HTML5 games to mobile fun again.
1205            </blockquote>
1206
1207            <p>
1208              html2app is still in beta, and there's much more to come. I'd love for you to join me on this journey as
1209              we
1210              work together to make building and publishing HTML5 games (and apps!) pleasant again.
1211            </p>
1212
1213            <div class="about-newsletter">
1214              <div class="about-newsletter-icon">
1215                <img src="/images/icons/envelope.svg" alt="" width="22" height="22" loading="lazy" />
1216              </div>
1217              <div class="about-newsletter-text">
1218                <h3>Join the journey</h3>
1219                <p>Occasional updates on new plugins, features, and the road ahead. No spam — unsubscribe anytime.</p>
1220              </div>
1221              <a class="about-newsletter-btn"
1222                href="https://ca53ff5c.sibforms.com/serve/MUIFAAP2yaE6_6ON_ucNTLxiKRRanJXrXgTinywvGd3lycQxVRI4zqk24kQ3gaQsjb6SZoXBomJadiXhu6YswbPupVtrKAwAhIE-nal19M4_-kTBlTZs44Rb_MW-N8HP3wduVipZ6kWXZ-PG23MxO2YWK8XXs2N7BUQfayGs0cIBp3bojC0pcGi7ADXK4CtDwSwvY5NRGuGsdM7bQQ=="
1223                target="_blank" rel="noopener noreferrer">Subscribe to the newsletter</a>
1224            </div>
1225
1226            <div class="about-author">
1227              <img class="about-author-photo" src="/images/yandeu.jpg" alt="Yannick Deubel" width="64" height="64"
1228                loading="lazy" />
1229              <div class="about-author-info">
1230                <span class="about-author-name">Yannick (@yandeu)</span>
1231                <span class="about-author-title">Creator of html2app · Software Developer</span>
1232                <a class="about-author-link" href="https://github.com/yandeu" target="_blank" rel="noopener">@yandeu on
1233                  GitHub →</a>
1234              </div>
1235            </div>
1236          </div>
1237        </div>
1238      </section>
1239
1240      <!-- You Own Your App (redesigned) -->
1241      <section id="own-your-app" class="own-section bordered">
1242        <div class="section-container">
1243          <div class="own-header">
1244            <span class="section-badge own-badge">NO LOCK-IN</span>
1245            <h2>You Own Your App. <span class="own-highlight">For Good.</span></h2>
1246            <p class="own-lead">
1247              Most HTML-to-app services quietly hold your signing key and app ID hostage. The day you want to
1248              leave, you can't — you'd have to publish a brand-new app and abandon every review, rating, and
1249              install you earned. <strong>html2app is built the opposite way.</strong>
1250            </p>
1251            <p class="own-sub">
1252              You bring your own signing key and choose your own app ID, so your app's identity is yours from the
1253              very first build. Outgrow us? Move to a custom <strong>Capacitor</strong>, <strong>Flutter</strong>,
1254              or native <strong>Kotlin/Java</strong> setup and keep shipping updates to the
1255              <strong>exact same Google Play listing</strong>. Your app outlives html2app.
1256            </p>
1257          </div>
1258
1259          <!-- Portability journey centerpiece -->
1260          <div class="own-journey"
1261            aria-label="Your signing key, app ID and Play Store listing stay constant as you move between html2app and any other toolchain">
1262            <div class="own-journey-pill">
1263              <img src="/images/Google_Play_2022_icon.svg" alt="" width="20" height="20" loading="lazy" />
1264              <span>One Google Play listing — your reviews, ratings &amp; installs never reset</span>
1265            </div>
1266
1267            <ol class="own-rail">
1268              <li class="own-stop is-current">
1269                <span class="own-stop-node">
1270                  <img src="/images/icons/check.svg" alt="" width="16" height="16" loading="lazy" />
1271                </span>
1272                <span class="own-stop-name">html2app</span>
1273                <span class="own-stop-tag">You're here</span>
1274              </li>
1275              <li class="own-stop">
1276                <span class="own-stop-node"></span>
1277                <span class="own-stop-name">Capacitor</span>
1278                <span class="own-stop-tag">Switch anytime</span>
1279              </li>
1280              <li class="own-stop">
1281                <span class="own-stop-node"></span>
1282                <span class="own-stop-name">Flutter</span>
1283                <span class="own-stop-tag">Switch anytime</span>
1284              </li>
1285              <li class="own-stop">
1286                <span class="own-stop-node"></span>
1287                <span class="own-stop-name">Native Kotlin / Java</span>
1288                <span class="own-stop-tag">Switch anytime</span>
1289              </li>
1290            </ol>
1291
1292            <div class="own-ribbon">
1293              <img src="/images/icons/lock.svg" alt="" width="18" height="18" loading="lazy" />
1294              <span>Your <strong>signing key</strong> and <strong>app ID</strong> travel with you — every step of the way</span>
1295            </div>
1296          </div>
1297
1298          <!-- Ownership pillars -->
1299          <div class="own-pillars">
1300            <article class="own-pillar">
1301              <div class="own-pillar-icon">
1302                <img src="/images/icons/stamp.svg" alt="" width="26" height="26" loading="lazy" />
1303              </div>
1304              <h3>Your Signing Keys</h3>
1305              <p>Bring your own keystore. We never hold your app's identity, so you can sign and ship builds
1306                yourself — with or without us.</p>
1307            </article>
1308
1309            <article class="own-pillar">
1310              <div class="own-pillar-icon">
1311                <img src="/images/icons/code.svg" alt="" width="26" height="26" loading="lazy" />
1312              </div>
1313              <h3>Your App ID</h3>
1314              <p>You pick the package name. It's the master key to your store listing — today, and ten years from
1315                now.</p>
1316            </article>
1317
1318            <article class="own-pillar">
1319              <div class="own-pillar-icon">
1320                <img src="/images/icons/arrow-right.svg" alt="" width="26" height="26" loading="lazy" />
1321              </div>
1322              <h3>A Real Exit Path</h3>
1323              <p>Move to Capacitor, Flutter, or fully native whenever you like and keep updating the same listing.
1324                No new app, no lost reviews, no migration tax.</p>
1325            </article>
1326
1327            <article class="own-pillar">
1328              <div class="own-pillar-icon">
1329                <img src="/images/icons/rocket.svg" alt="" width="26" height="26" loading="lazy" />
1330              </div>
1331              <h3>It Outlives Us</h3>
1332              <p>If html2app disappeared tomorrow, your published app keeps running and updating. You rely on us
1333                for convenience — never for survival.</p>
1334            </article>
1335          </div>
1336
1337          <p class="own-closing">
1338            You stay because html2app is the easiest way to ship — <strong>never because you're trapped.</strong>
1339          </p>
1340        </div>
1341      </section>
1342
1343      <!-- Roadmap v2 (status board) -->
1344      <section id="roadmap" class="roadmap2 bordered">
1345        <div class="section-container">
1346          <div class="rm-header">
1347            <span class="section-badge rm-badge">ROADMAP &amp; TRANSPARENCY</span>
1348            <h2>What's <span class="rm-hl">Coming Next</span></h2>
1349            <p>No vapourware. Here's exactly what's live today, what we're building right now, and what's
1350              further out — so you always know where we're investing.</p>
1351          </div>
1352
1353          <div class="rm-callout">
1354            <span class="rm-callout-icon">
1355              <img src="/images/icons/check.svg" alt="" width="22" height="22" loading="lazy" />
1356            </span>
1357            <div>
1358              <h3>You buy what exists today</h3>
1359              <p>Subscribing gets you the features that are live right now, as they are — stable, working builds
1360                today, not promises about tomorrow.</p>
1361            </div>
1362          </div>
1363
1364          <div class="rm-board">
1365            <!-- Live now -->
1366            <div class="rm-lane live">
1367              <div class="rm-lane-head">
1368                <span class="rm-dot"></span>
1369                <span class="rm-lane-label">Live now</span>
1370              </div>
1371              <h3 class="rm-lane-title">Shipping today</h3>
1372              <div class="rm-progress"><span class="rm-progress-fill" style="width: 100%"></span></div>
1373              <ul class="rm-items">
1374                <li><img src="/images/icons/check.svg" alt="" width="16" height="16" loading="lazy" />Signed APK &amp; AAB output</li>
1375                <li><img src="/images/icons/check.svg" alt="" width="16" height="16" loading="lazy" />Cloud build service — no Android Studio</li>
1376                <li><img src="/images/icons/check.svg" alt="" width="16" height="16" loading="lazy" />Core plugins: AdMob, Vibration, Storage, Device Info</li>
1377                <li><img src="/images/icons/check.svg" alt="" width="16" height="16" loading="lazy" />Embedded, offline-ready apps</li>
1378              </ul>
1379            </div>
1380
1381            <!-- Building now -->
1382            <div class="rm-lane build">
1383              <div class="rm-lane-head">
1384                <span class="rm-dot"></span>
1385                <span class="rm-lane-label">Building now</span>
1386              </div>
1387              <h3 class="rm-lane-title">More native plugins</h3>
1388              <div class="rm-progress"><span class="rm-progress-fill" style="width: 45%"></span></div>
1389              <p class="rm-lane-note">The native plugin ecosystem is growing fast. On the way:</p>
1390              <ul class="rm-chips">
1391                <li>In-App Purchases</li>
1392                <li>Game Services</li>
1393                <li>Social Sharing</li>
1394                <li>Local Notifications</li>
1395              </ul>
1396            </div>
1397
1398            <!-- On the horizon -->
1399            <div class="rm-lane plan">
1400              <div class="rm-lane-head">
1401                <span class="rm-dot"></span>
1402                <span class="rm-lane-label">On the horizon</span>
1403              </div>
1404              <h3 class="rm-lane-title">iOS support</h3>
1405              <div class="rm-progress"><span class="rm-progress-fill" style="width: 12%"></span></div>
1406              <ul class="rm-items">
1407                <li><img src="/images/Apple_logo_white.svg" alt="" width="16" height="16" loading="lazy" />Build iOS apps from the same HTML5 project</li>
1408              </ul>
1409              <p class="rm-lane-note">It needs dedicated Apple hardware and signing, so we're treating it as a
1410                serious long-term goal — not an empty promise.</p>
1411            </div>
1412          </div>
1413
1414          <div class="rm-ongoing">
1415            <span class="rm-ongoing-icon">
1416              <img src="/images/icons/check.svg" alt="" width="20" height="20" loading="lazy" />
1417            </span>
1418            <p><strong>Platform stability is always priority #1.</strong> Reliable builds and compatibility with the
1419              latest Android and Flutter releases come before any new feature.</p>
1420          </div>
1421
1422          <p class="rm-note">
1423            <strong>About "Coming Soon":</strong> these features are in active development, aren't included in your
1424            current subscription, and don't come with delivery dates. The mobile ecosystem moves fast — if something
1425            breaks upstream, we'll do our best to fix it and always be upfront about what's working and what's not.
1426          </p>
1427        </div>
1428      </section>
1429
1430    </main>
1431
1432    <footer>
1433      <div class="footer-container">
1434        <div class="footer-main">
1435          <div class="footer-brand">
1436            <span class="brand">html2app<span class="highlight">.dev</span></span>
1437            <p class="brand-desc">Convert web projects to Android</p>
1438          </div>
1439
1440          <!-- Currency/Region Dropdown -->
1441          <div class="currency-dropdown" id="currency-dropdown">
1442            <button class="currency-dropdown-toggle" id="currency-toggle" aria-expanded="false" aria-haspopup="listbox">
1443              <img src="/images/flags/flag-us.svg" alt="" class="currency-flag" id="selected-flag" width="20"
1444                height="20" />
1445              <span class="currency-text" id="selected-currency">USD</span>
1446              <span class="currency-divider">|</span>
1447              <span class="currency-vat" id="selected-vat">excl. VAT</span>
1448              <svg class="dropdown-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none">
1449                <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
1450                  stroke-linejoin="round" />
1451              </svg>
1452            </button>
1453            <ul class="currency-dropdown-menu" id="currency-menu" role="listbox">
1454              <li class="currency-option active" data-currency="usd" data-vat="excl" role="option" aria-selected="true">
1455                <img src="/images/flags/flag-us.svg" alt="US Flag" class="currency-flag" width="20" height="20" />
1456                <span class="currency-text">USD</span>
1457                <span class="currency-divider">|</span>
1458                <span class="currency-vat">excl. VAT</span>
1459              </li>
1460              <li class="currency-option" data-currency="eur" data-vat="incl" role="option" aria-selected="false">
1461                <img src="/images/flags/flag-eu.svg" alt="EU Flag" class="currency-flag" width="20" height="20" />
1462                <span class="currency-text">EUR</span>
1463                <span class="currency-divider">|</span>
1464                <span class="currency-vat">incl. VAT</span>
1465              </li>
1466            </ul>
1467          </div>
1468
1469          <div class="footer-author">
1470            <img src="/images/yandeu.jpg" alt="Yannick" class="footer-author-photo" loading="lazy" width="40"
1471              height="40" />
1472            <div class="footer-author-info">
1473              <span class="footer-author-name">Created by Yannick (<a href="https://github.com/yandeu" target="_blank"
1474                  rel="noopener">@yandeu</a>)</span>
1475              <span class="footer-author-title">Software Developer & Open Source Contributor</span>
1476            </div>
1477          </div>
1478          <div class="footer-links">
1479            <a href="/contact">Contact</a>
1480            <a href="/terms-of-service">Terms of Service</a>
1481            <a href="/privacy-policy">Privacy Policy</a>
1482            <a href="/terms-of-service#refund-policy">Refund Policy</a>
1483            <a href="/legal-notice">Legal Notice</a>
1484          </div>
1485        </div>
1486        <div class="footer-bottom">
1487          <p>
1488            <span>© 2026 html2app.dev. All rights reserved.</span><br />
1489            <span class="footer-vat-indicator" id="footer-vat-indicator">Prices excl. VAT</span>
1490          </p>
1491        </div>
1492      </div>
1493    </footer>
1494  </div>
1495
1496
1497</body>
1498
1499</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.