Spaces:

CREATORJD
/

massfront

Running

File size: 30,104 Bytes

<!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/">▶ &nbsp;Play free in browser</a>
      <a class="btn ghost" href="https://huggingface.co/datasets/CREATORJD/massfront-releases/resolve/main/MASSFRONT-install.apk?download=true">⬇ &nbsp;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 &amp; 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 &amp; 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 &amp; 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 &amp; 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/">▶ &nbsp;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">⬇ &nbsp;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>
/* Pull the same news feed the in-game Inbox reads, so the site and the game can
   never disagree. Static fallback above stays if the fetch fails or is blocked. */
(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 {'&':'&amp;','<':'&lt;','>':'&gt;'}[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>