| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>MASSFRONT — Command. Conquer. Overwhelm.</title> |
| <meta name="description" content="A full-scale real-time strategy game built for phones. Four asymmetric factions, a commander you level through the match, and no compromises on the RTS."> |
| <meta property="og:title" content="MASSFRONT — Command. Conquer. Overwhelm."> |
| <meta property="og:description" content="A full-scale RTS built for phones. Four asymmetric factions. Play free in your browser, or install the Android build."> |
| <meta property="og:image" content="img/brand.png"> |
| <meta property="og:type" content="website"> |
| <meta name="theme-color" content="#04090f"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root{ |
| --gold:#ffd66f; --cyan:#8be8ff; --ink:#04090f; --ink2:#070e17; |
| --line:rgba(120,170,205,.18); --tx:#cfe0ec; --dim:#8fa9bd; |
| --fT:'Orbitron','Segoe UI',sans-serif; --fB:'Rajdhani','Segoe UI',sans-serif; |
| --wrap:1180px; |
| } |
| *{box-sizing:border-box;margin:0;padding:0} |
| html{scroll-behavior:smooth} |
| body{background:var(--ink);color:var(--tx);font-family:var(--fB);font-size:17px;line-height:1.65; |
| -webkit-font-smoothing:antialiased;overflow-x:hidden} |
| a{color:var(--cyan);text-decoration:none} |
| img{max-width:100%;display:block} |
| .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto} |
| section{padding:86px 0;position:relative;scroll-margin-top:70px} |
| h2{font-family:var(--fT);font-size:clamp(24px,3.6vw,38px);font-weight:900;letter-spacing:.06em; |
| color:#eaf7ff;text-transform:uppercase;line-height:1.15} |
| h3{font-family:var(--fT);font-size:16px;font-weight:700;letter-spacing:.11em;color:#eaf7ff;text-transform:uppercase} |
| .eyebrow{font-family:var(--fT);font-size:11px;font-weight:700;letter-spacing:.32em;color:var(--cyan); |
| text-transform:uppercase;margin-bottom:14px} |
| .lede{font-size:clamp(17px,2vw,20px);color:var(--dim);max-width:74ch;margin-top:18px} |
|
|
| /* ---------- nav ---------- */ |
| nav{position:sticky;top:0;z-index:50;background:rgba(4,9,15,.86);backdrop-filter:blur(12px); |
| border-bottom:1px solid var(--line)} |
| nav .wrap{display:flex;align-items:center;gap:22px;height:62px} |
| .brandMark{font-family:var(--fT);font-weight:900;letter-spacing:.18em;color:#eaf7ff;font-size:15px;margin-right:auto} |
| .brandMark span{color:var(--gold)} |
| nav a.navlink{color:var(--dim);font-weight:600;letter-spacing:.04em;font-size:15px} |
| nav a.navlink:hover{color:var(--cyan)} |
| @media(max-width:820px){nav a.navlink{display:none}} |
|
|
| /* ---------- buttons ---------- */ |
| .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:11px; |
| font-family:var(--fT);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; |
| border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .2s} |
| .btn:active{transform:scale(.97)} |
| .btn.gold{color:#1c1403;background:linear-gradient(180deg,#ffe9a3,#e8bd5c 45%,#c9973b 55%,#f2cf78); |
| box-shadow:0 6px 24px rgba(255,200,80,.26)} |
| .btn.gold:hover{box-shadow:0 8px 32px rgba(255,200,80,.4)} |
| .btn.ghost{color:#dfeeff;background:rgba(12,22,34,.9);border-color:rgba(120,170,205,.34)} |
| .btn.ghost:hover{border-color:var(--cyan);color:#eaf7ff} |
|
|
| /* ---------- hero ---------- */ |
| header.hero{position:relative;padding:72px 0 88px;text-align:center;overflow:hidden; |
| background: |
| radial-gradient(ellipse 70% 46% at 50% 24%,rgba(28,68,104,.5),transparent 70%), |
| radial-gradient(ellipse 60% 40% at 50% 96%,rgba(96,58,14,.24),transparent 70%), |
| var(--ink)} |
| header.hero::after{content:'';position:absolute;inset:0;pointer-events:none; |
| background:repeating-linear-gradient(0deg,rgba(139,232,255,.028) 0 1px,transparent 1px 3px)} |
| .heroArt{width:min(88vw,760px);margin:0 auto;filter:drop-shadow(0 18px 44px rgba(0,0,0,.8))} |
| .heroTag{font-family:var(--fT);font-size:clamp(11px,1.7vw,14px);letter-spacing:.3em;color:var(--dim); |
| margin-top:6px;text-transform:uppercase} |
| .heroSub{margin:26px auto 0;max-width:62ch;font-size:clamp(17px,2vw,20px);color:#b6cbdc} |
| .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;position:relative;z-index:2} |
| .ctaNote{margin-top:16px;font-size:14px;color:#7f9db4} |
| .badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px;position:relative;z-index:2} |
| .badge{font-family:var(--fT);font-size:10px;letter-spacing:.14em;color:#9fc6e0;text-transform:uppercase; |
| border:1px solid var(--line);border-radius:99px;padding:7px 14px;background:rgba(10,18,28,.7)} |
|
|
| /* ---------- hook ---------- */ |
| .hook{background:linear-gradient(180deg,var(--ink),var(--ink2))} |
| .pitch{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-top:44px} |
| .card{border:1px solid var(--line);border-radius:14px;padding:24px;background:rgba(10,18,28,.6); |
| transition:border-color .2s,transform .2s} |
| .card:hover{border-color:rgba(139,232,255,.4);transform:translateY(-3px)} |
| .card .k{font-family:var(--fT);font-size:26px;color:var(--gold);line-height:1} |
| .card h3{margin:14px 0 8px} |
| .card p{color:var(--dim);font-size:16px} |
|
|
| /* ---------- factions ---------- */ |
| .fac{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:26px; |
| background:rgba(8,14,22,.75);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} |
| .fac:nth-child(even) .facArt{order:2} |
| .facArt{position:relative;min-height:290px;background-size:cover;background-position:center} |
| .facArt::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(8,14,22,.92))} |
| /* The art must fade toward whichever side the TEXT is on, and the cards |
| alternate. Odd cards put the art on the left (fade right, the rule above); |
| even cards put it on the right, so the fade has to flip with them. */ |
| .fac:nth-child(even) .facArt::after{background:linear-gradient(90deg,rgba(8,14,22,.92),transparent 60%)} |
| .facBody{padding:30px 32px} |
| .facHead{display:flex;align-items:center;gap:14px} |
| .facHead img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--fc); |
| box-shadow:0 0 14px color-mix(in srgb,var(--fc) 55%,transparent)} |
| .facNm{font-family:var(--fT);font-size:19px;font-weight:900;letter-spacing:.06em;color:#eaf7ff;text-transform:uppercase} |
| .facMotto{font-family:var(--fT);font-size:10px;letter-spacing:.2em;color:var(--fc);margin-top:4px} |
| .facLore{margin-top:16px;color:#b6cbdc;font-size:16px} |
| .facQuote{margin-top:14px;padding-left:14px;border-left:2px solid var(--fc);color:#dfe9f2;font-style:italic;font-size:16px} |
| .facQuote b{display:block;font-style:normal;font-size:12px;letter-spacing:.1em;color:var(--dim); |
| text-transform:uppercase;margin-top:6px;font-family:var(--fT)} |
| .facRow{margin-top:18px;display:grid;gap:9px} |
| .facLine{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;font-size:15px} |
| .facLine b{font-family:var(--fT);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase} |
| .facLine.up b{color:#5be69f} .facLine.dn b{color:#ff9b87} .facLine.bn b{color:var(--gold)} |
| .facLine span{color:var(--dim)} |
| @media(max-width:900px){ |
| .fac{grid-template-columns:1fr} |
| .fac:nth-child(even) .facArt{order:0} |
| .facArt{min-height:190px} |
| /* Both of these are needed: the nth-child rule above out-specifies a bare |
| .facArt::after even from inside this media query, so without the second |
| line every even card kept its horizontal fade on a phone. */ |
| .facArt::after, |
| .fac:nth-child(even) .facArt::after{background:linear-gradient(180deg,transparent 30%,rgba(8,14,22,.95))} |
| .facBody{padding:24px 22px} |
| } |
|
|
| /* ---------- gameplay gallery ---------- */ |
| .shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:42px} |
| .shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#060c14; |
| transition:border-color .2s,transform .2s} |
| .shot:hover{border-color:rgba(139,232,255,.45);transform:translateY(-3px)} |
| .shot img{width:100%;height:auto;aspect-ratio:760/1660;object-fit:cover;object-position:top} |
| .shot .cap{padding:14px 16px 16px} |
| .shot .cap b{display:block;font-family:var(--fT);font-size:11.5px;letter-spacing:.11em;color:#eaf7ff; |
| text-transform:uppercase} |
| .shot .cap p{margin-top:6px;color:var(--dim);font-size:14.5px;line-height:1.5} |
| .shotWide{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:30px;align-items:center; |
| margin-top:42px;border:1px solid var(--line);border-radius:16px;padding:26px;background:rgba(10,18,28,.55)} |
| .shotWide img{border-radius:12px;border:1px solid var(--line)} |
| .shotWide h3{font-size:17px} |
| .shotWide p{margin-top:12px;color:var(--dim);font-size:16px} |
| @media(max-width:760px){.shotWide{grid-template-columns:1fr;gap:20px}} |
|
|
| /* ---------- features ---------- */ |
| .feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:40px} |
| .feat .card p{font-size:15.5px} |
|
|
| /* ---------- news + notes ---------- */ |
| .split{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px} |
| @media(max-width:900px){.split{grid-template-columns:1fr}} |
| .panel{border:1px solid var(--line);border-radius:14px;background:rgba(8,14,22,.7);overflow:hidden} |
| .panelHead{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px} |
| .panelHead h3{font-size:13px} |
| .dot{width:8px;height:8px;border-radius:50%;background:#5be69f;box-shadow:0 0 8px rgba(91,230,159,.9);flex:0 0 auto} |
| .panelBody{max-height:520px;overflow-y:auto} |
| .item{padding:17px 20px;border-bottom:1px solid rgba(120,170,205,.1)} |
| .item:last-child{border-bottom:0} |
| .item b{display:block;font-family:var(--fT);font-size:12px;letter-spacing:.09em;color:#eaf7ff;text-transform:uppercase} |
| .item .ver{color:var(--gold)} |
| .item p{margin-top:7px;color:var(--dim);font-size:15.5px} |
| .item .when{font-family:var(--fT);font-size:9.5px;letter-spacing:.1em;color:#6f8ba0;margin-top:8px;display:block} |
|
|
| /* ---------- download ---------- */ |
| .dl{background:linear-gradient(180deg,var(--ink2),#050b13);border-top:1px solid var(--line); |
| border-bottom:1px solid var(--line)} |
| .dlGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px} |
| @media(max-width:820px){.dlGrid{grid-template-columns:1fr}} |
| .dlCard{border:1px solid var(--line);border-radius:14px;padding:28px;background:rgba(10,18,28,.7); |
| display:flex;flex-direction:column} |
| .dlCard .k{font-size:30px;line-height:1} |
| .dlCard h3{margin:14px 0 8px} |
| .dlCard p{color:var(--dim);font-size:15.5px;flex:1 1 auto} |
| .dlCard .btn{margin-top:20px;align-self:flex-start} |
| .small{font-size:13px;color:#71889b;margin-top:12px;word-break:break-all} |
|
|
| footer{padding:52px 0 60px;text-align:center;color:#6f8ba0;font-size:14.5px} |
| footer .brandMark{margin:0 0 14px;display:block;font-size:14px} |
| .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} |
| </style> |
| </head> |
| <body> |
|
|
| <nav> |
| <div class="wrap"> |
| <div class="brandMark">MASS<span>FRONT</span></div> |
| <a class="navlink" href="#game">The Game</a> |
| <a class="navlink" href="#screens">Screens</a> |
| <a class="navlink" href="#factions">Factions</a> |
| <a class="navlink" href="#features">Features</a> |
| <a class="navlink" href="#news">News</a> |
| <a class="navlink" href="#play">Play</a> |
| </div> |
| </nav> |
|
|
| <header class="hero"> |
| <div class="wrap"> |
| <img class="heroArt" src="img/brand.png" alt="MASSFRONT — Command. Conquer. Overwhelm."> |
| <p class="heroSub">A full-scale real-time strategy game built for a phone screen — base building, army composition, |
| a commander you level through the match, and four factions that genuinely do not play alike.</p> |
| <div class="cta"> |
| <a class="btn gold" href="https://creatorjd-massfront-playtest.static.hf.space/">▶ Play free in browser</a> |
| <a class="btn ghost" href="https://huggingface.co/datasets/CREATORJD/massfront-releases/resolve/main/MASSFRONT-install.apk?download=true">⬇ Download for Android</a> |
| </div> |
| <p class="ctaNote">No account required. Plays offline. Updates arrive over the air.</p> |
| <div class="badges"> |
| <span class="badge">4 Factions</span> |
| <span class="badge">4 Maps</span> |
| <span class="badge">Up to 3 AI Commanders</span> |
| <span class="badge">Adaptive Soundtrack</span> |
| <span class="badge">Offline Play</span> |
| </div> |
| </div> |
| </header> |
|
|
| <section class="hook" id="game"> |
| <div class="wrap"> |
| <div class="eyebrow">What it is</div> |
| <h2>A real RTS. On the device you actually have.</h2> |
| <p class="lede">Most mobile strategy games quietly remove the strategy — timers instead of decisions, a build queue |
| instead of a battle. MASSFRONT keeps the parts that make the genre worth playing and rebuilds the controls around |
| a thumb, not a mouse.</p> |
|
|
| <div class="pitch"> |
| <div class="card"> |
| <div class="k">⚔</div> |
| <h3>You command, not wait</h3> |
| <p>Harvest mass and energy, raise a base, scout, tech up, and commit to a front. Everything resolves in |
| real time. Nothing asks you to come back in four hours.</p> |
| </div> |
| <div class="card"> |
| <div class="k">★</div> |
| <h3>Your Commander is a unit</h3> |
| <p>A hero on the field who earns XP, levels mid-match, and picks doctrine cards as they go. Orbital Blast, |
| Repair Pulse, Combat Surge, Orbital Lance, EMP. Lose them and you feel it.</p> |
| </div> |
| <div class="card"> |
| <div class="k">◈</div> |
| <h3>Asymmetry that means something</h3> |
| <p>The Brood has no factories and no vehicles — it grows. The Coalition reshapes a fight before slower armies |
| understand it. Each side wins differently and loses differently.</p> |
| </div> |
| <div class="card"> |
| <div class="k">⬡</div> |
| <h3>The battlefield fights back</h3> |
| <p>Meteor storms, dust fronts, fault collapses. Derelict districts you can level for salvage. Terrain that |
| deforms under bombardment and changes where armies can walk.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="screens"> |
| <div class="wrap"> |
| <div class="eyebrow">Actual gameplay</div> |
| <h2>This is the game running</h2> |
| <p class="lede">Every shot below is a live match on a phone-sized screen — no mock-ups, no |
| cropped-out interface. Full HUD, real armies, real base.</p> |
|
|
| <div class="shotWide"> |
| <img src="img/shot-battle.jpg" alt="Two armies converging on open ground during a MASSFRONT match" loading="lazy"> |
| <div> |
| <h3>Armies that meet in the middle</h3> |
| <p>Two dozen units a side, converging on open ground, with the whole command interface still on |
| screen — resources, objective clock, minimap, orders. The fight is the game, not a cutscene |
| between menus.</p> |
| </div> |
| </div> |
|
|
| <div class="shots"> |
| <figure class="shot"> |
| <img src="img/shot-base.jpg" alt="A player base with factories, reactors and defensive turrets" loading="lazy"> |
| <figcaption class="cap"><b>Build a real base</b> |
| <p>Extractors, reactors, factories, research, turrets — laid out on ground you chose, wired |
| into a power grid you have to defend.</p></figcaption> |
| </figure> |
| <figure class="shot"> |
| <img src="img/shot-close.jpg" alt="Close-range combat between armoured units" loading="lazy"> |
| <figcaption class="cap"><b>Zoom into the line</b> |
| <p>Pinch from a company overview down to individual tanks trading fire. The camera never |
| fights you for the information you need.</p></figcaption> |
| </figure> |
| <figure class="shot"> |
| <img src="img/shot-emp.jpg" alt="A commander ability firing on the battlefield" loading="lazy"> |
| <figcaption class="cap"><b>Commander abilities</b> |
| <p>Orbital Blast, Repair Pulse, Combat Surge, Orbital Lance and a craftable EMP that freezes |
| everything hostile around you.</p></figcaption> |
| </figure> |
| <figure class="shot"> |
| <img src="img/shot-production.jpg" alt="The unit production menu open on a factory" loading="lazy"> |
| <figcaption class="cap"><b>Production that reads</b> |
| <p>Tap a factory, pick a role, queue it. Infantry, vehicles, anti-tank, artillery, air, naval — |
| each with its counters spelled out.</p></figcaption> |
| </figure> |
| <figure class="shot"> |
| <img src="img/shot-warroom.jpg" alt="The War Room mode select screen" loading="lazy"> |
| <figcaption class="cap"><b>The War Room</b> |
| <p>One door to every operation: Training, Standard skirmish, and the Hosted, MMO and Campaign |
| modes still being built.</p></figcaption> |
| </figure> |
| <figure class="shot"> |
| <img src="img/shot-menu.jpg" alt="The MASSFRONT main menu with commander profile" loading="lazy"> |
| <figcaption class="cap"><b>A career worth keeping</b> |
| <p>Rank up, wear a commander from the roster, earn callsign titles and portrait frames. All of |
| it saved on your device.</p></figcaption> |
| </figure> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="factions"> |
| <div class="wrap"> |
| <div class="eyebrow">Choose a doctrine</div> |
| <h2>Four ways to take a planet</h2> |
| <p class="lede">Halcyon Reach is not empty and it is not yours. Every faction has a different answer to that — |
| a different economy, a different army, and a different idea of what victory looks like.</p> |
|
|
| <div class="fac" style="--fc:#5db6ff"> |
| <div class="facArt" style="background-image:url(img/fac-nova.jpg)"></div> |
| <div class="facBody"> |
| <div class="facHead"> |
| <img src="img/cdr-nova.jpg" alt="Captain Elara Kai"> |
| <div><div class="facNm">Terran Frontline Command</div><div class="facMotto">Discipline. Technology. Unity.</div></div> |
| </div> |
| <p class="facLore">A combined-arms expedition built around hardened positions, precision fire and dependable |
| battlefield logistics. It wins by seeing first, building a line, then advancing that line without breaking it.</p> |
| <blockquote class="facQuote">“For peace. For the people. For tomorrow.”<b>Captain Elara Kai</b></blockquote> |
| <div class="facRow"> |
| <div class="facLine up"><b>Strong</b><span>Long-range fire · durable defence · flexible combined arms</span></div> |
| <div class="facLine dn"><b>Weak</b><span>Slower deployment · costly upgrades · flanking and EMP pressure</span></div> |
| <div class="facLine bn"><b>Bonus</b><span>Advanced Engineering — units build faster and cost less</span></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="fac" style="--fc:#ff6b58"> |
| <div class="facArt" style="background-image:url(img/fac-ascendancy.jpg)"></div> |
| <div class="facBody"> |
| <div class="facHead"> |
| <img src="img/cdr-ascendancy.jpg" alt="Lord Darion Vex"> |
| <div><div class="facNm">Crimson Dominion</div><div class="facMotto">Strength. Authority. Conquest.</div></div> |
| </div> |
| <p class="facLore">An authoritarian war machine of armoured offensives, suppression batteries and siege engines. |
| It wins by forcing one decisive front and breaking it with overwhelming burst damage.</p> |
| <blockquote class="facQuote">“The weak are fuel. The strong ascend.”<b>Lord Darion Vex</b></blockquote> |
| <div class="facRow"> |
| <div class="facLine up"><b>Strong</b><span>Heavy frontal assaults · anti-armour · siege and morale pressure</span></div> |
| <div class="facLine dn"><b>Weak</b><span>Predictable lanes · expensive elites · mobile harassment</span></div> |
| <div class="facLine bn"><b>Bonus</b><span>Martial Doctrine — units hit harder the longer they stay in combat</span></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="fac" style="--fc:#8ce85a"> |
| <div class="facArt" style="background-image:url(img/fac-syndicate.jpg)"></div> |
| <div class="facBody"> |
| <div class="facHead"> |
| <img src="img/cdr-syndicate.jpg" alt="Broker Lys Renn"> |
| <div><div class="facNm">Syndicate Coalition</div><div class="facMotto">Adapt. Profit. Survive.</div></div> |
| </div> |
| <p class="facLore">Autonomous constructs, predictive targeting and the most advanced energy weapons on Halcyon. |
| Its machine cadres reshape an engagement before slower armies understand the threat.</p> |
| <blockquote class="facQuote">“Information is power. Profit is freedom.”<b>Broker Lys Renn</b></blockquote> |
| <div class="facRow"> |
| <div class="facLine up"><b>Strong</b><span>Precision energy weapons · drones · shields · area control</span></div> |
| <div class="facLine dn"><b>Weak</b><span>Low hull strength · setup time · melee pressure · EMP</span></div> |
| <div class="facLine bn"><b>Bonus</b><span>Black Market — extra resources from captured deposits and structures</span></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="fac" style="--fc:#b978ff"> |
| <div class="facArt" style="background-image:url(img/fac-horde.jpg)"></div> |
| <div class="facBody"> |
| <div class="facHead"> |
| <img src="img/cdr-horde.jpg" alt="The Brood Sovereign"> |
| <div><div class="facNm">Brood Swarm</div><div class="facMotto">Evolve. Assimilate. Endure.</div></div> |
| </div> |
| <p class="facLore">A wholly biological hive — no vehicles, no factories, no machine weapons. It grows organisms, |
| spreads living territory, mutates under pressure and overwhelms defences through relentless numbers.</p> |
| <blockquote class="facQuote">“It does not negotiate. It arrives.”<b>The Brood Sovereign</b></blockquote> |
| <div class="facRow"> |
| <div class="facLine up"><b>Strong</b><span>Critical mass · anti-light claws · structure rending · casters</span></div> |
| <div class="facLine dn"><b>Weak</b><span>Area fire · long-range siege · detection · exposed growth organs</span></div> |
| <div class="facLine bn"><b>Bonus</b><span>Endless Spawn — cheaper broods, faster hatcheries, packs that grow as they feed</span></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="hook" id="features"> |
| <div class="wrap"> |
| <div class="eyebrow">Under the hood</div> |
| <h2>Systems, not menus</h2> |
| <div class="feat"> |
| <div class="card"><h3>Platoons & orders</h3><p>Group units into platoons, set patrol routes, hold ground, |
| and give formation moves that arrive as a column rather than a pile.</p></div> |
| <div class="card"><h3>Research & development</h3><p>A real tech tree — ballistics, armour, logistics — plus |
| craftable modules that change what your Commander can do.</p></div> |
| <div class="card"><h3>Air & transport</h3><p>Aircraft for rapid response, and the Atlas Skycrane to airlift |
| infantry, constructors and light vehicles across terrain that would take minutes on foot.</p></div> |
| <div class="card"><h3>Wildcards</h3><p>Optional match modifiers that change the rules — meteor seasons, blitz |
| timers, iron enemies — for extra XP and cores.</p></div> |
| <div class="card"><h3>Adaptive soundtrack</h3><p>The music follows combat intensity with hysteresis, so it |
| escalates with the battle instead of flapping around a threshold.</p></div> |
| <div class="card"><h3>Command radio</h3><p>Unit acknowledgements are recorded voice lines — one voice per |
| faction, run through a real comms filter, not a text-to-speech reader.</p></div> |
| <div class="card"><h3>Training operation</h3><p>A protected live-fire drop that teaches the full command loop |
| with no early rush. Nineteen objectives, and your progress is saved.</p></div> |
| <div class="card"><h3>Play offline</h3><p>No account needed, no connection required. Sign in only if you want a |
| cloud backup, and export a save file to move a career between phones.</p></div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="news"> |
| <div class="wrap"> |
| <div class="eyebrow">Live channel</div> |
| <h2>News & update notes</h2> |
| <p class="lede">MASSFRONT updates over the air — the game checks on launch and patches itself, so a download is |
| only ever needed once.</p> |
| <div class="split"> |
| <div class="panel"> |
| <div class="panelHead"><span class="dot"></span><h3>News</h3></div> |
| <div class="panelBody" id="newsBody"> |
| <div class="item"> |
| <b>War Room is open</b> |
| <p>PLAY is now the War Room: Standard skirmish, Training, and a look at the Hosted Match, MMO and Campaign |
| modes still in development.</p> |
| </div> |
| <div class="item"> |
| <b>Commanders and unlocks</b> |
| <p>Your commander is a character now. Pick from the roster in Profile, with callsign titles and portrait |
| frames that unlock as your account ranks up.</p> |
| </div> |
| <div class="item"> |
| <b>Radio voices</b> |
| <p>Unit acknowledgements are recorded radio lines, one voice per faction, over a real comms filter. They |
| arrive as an optional 1.9 MB pack.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="panel"> |
| <div class="panelHead"><span class="dot" style="background:var(--gold);box-shadow:0 0 8px rgba(255,214,111,.9)"></span><h3>Update notes</h3></div> |
| <div class="panelBody" id="notesBody"> |
| <div class="item"><b class="ver">v1.32.25</b><p>The game version block is now a status dot in the header — it |
| checks for updates by itself when you reach the menu, amber while checking or when one is waiting, green when |
| you are current. Tap it for release notes, install or rollback. The Inbox gained an update log and a |
| newsletter section.</p></div> |
| <div class="item"><b class="ver">v1.32.24</b><p>New commander header: profile icon with your level, resources |
| underneath, and proper clearance from the phone's status bar. The EMP Charge module now works — it stuns |
| enemy units and structures around your Commander. Combat Stims no longer eat part of any damage research |
| completed while they are active.</p></div> |
| <div class="item"><b class="ver">v1.32.23</b><p>Fixes a freeze when your Commander got stuck on crater |
| terrain. Atlas Skycrane now appears with the aircraft in the Airfield. Menu music no longer loops |
| back-to-back. Long-range turrets now actually shoot at their stated range, and the base-attack alarm works |
| in every match, not just the first.</p></div> |
| <div class="item"><b class="ver">v1.32.22</b><p>New Inbox on the menu — every transmission in one place with |
| an unread badge, plus where friend requests and messages will land.</p></div> |
| <div class="item"><b class="ver">v1.32.21</b><p>Accounts gained a username so friends can find you, a 13+ age |
| check at sign-up, and Delete Account in Profile.</p></div> |
| <div class="item"><b class="ver">v1.32.20</b><p>Your commander became a character — the MASSFRONT roster in |
| Profile, with callsign titles and portrait frames unlocked by account rank. Recorded radio voices replaced |
| the phone's text reader.</p></div> |
| <div class="item"><b class="ver">v1.32.19</b><p>PLAY became the WAR ROOM. Account moved under Profile, sign-in |
| offered at launch, and the commander rank moved to Profile with a clean badge in its place.</p></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="dl" id="play"> |
| <div class="wrap"> |
| <div class="eyebrow">Get it</div> |
| <h2>Two ways to play</h2> |
| <div class="dlGrid"> |
| <div class="dlCard"> |
| <div class="k">🌐</div> |
| <h3>Play in your browser</h3> |
| <p>The full game, no install. Works on desktop and mobile browsers — best in portrait on a phone. Nothing to |
| sign up for.</p> |
| <a class="btn gold" href="https://creatorjd-massfront-playtest.static.hf.space/">▶ Launch web build</a> |
| </div> |
| <div class="dlCard"> |
| <div class="k">🤖</div> |
| <h3>Install on Android</h3> |
| <p>The native build, with offline play and over-the-air updates. You may need to allow installs from unknown |
| sources — this is a direct download, not a store listing.</p> |
| <a class="btn ghost" href="https://huggingface.co/datasets/CREATORJD/massfront-releases/resolve/main/MASSFRONT-install.apk?download=true">⬇ Download APK (46.6 MB)</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <footer> |
| <div class="wrap"> |
| <span class="brandMark">MASS<span>FRONT</span></span> |
| <p>Command. Conquer. Overwhelm. · Halcyon Reach is not empty and it is not yours.</p> |
| <p style="margin-top:10px">MMO and Campaign modes are in development. Hosted matches are next.</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| |
| (function(){ |
| var URL='https://huggingface.co/datasets/CREATORJD/massfront-releases/resolve/main/news.json'; |
| fetch(URL,{cache:'no-store'}).then(function(r){return r.ok?r.json():null;}).then(function(j){ |
| if(!j||!Array.isArray(j.items)||!j.items.length) return; |
| var esc=function(s){return String(s==null?'':s).replace(/[&<>]/g,function(c){ |
| return {'&':'&','<':'<','>':'>'}[c];});}; |
| document.getElementById('newsBody').innerHTML=j.items.map(function(n){ |
| return '<div class="item"><b>'+esc(n.title||'Briefing')+'</b><p>'+esc(n.body||'')+'</p></div>'; |
| }).join(''); |
| }).catch(function(){}); |
| })(); |
| </script> |
| </body> |
| </html> |
|
|
