Site Builder

Editing: index4.php

writable 0666

<?php
/***************************************************************************
 *  MINI‑SITE INDEX (All‑in‑One) – 2025 POLISHED
 *  --------------------------------------------
 *  • Inline JS & CSS — no external loader
 *  • 4 Tab navigation (Overview / Deals / Content / Connect)
 *  • Gold‑card aesthetic retained; non‑card modules now auto‑centered
 *  • Modern sticky nav with pill‑indicator + subtle shadow
 ***************************************************************************/

/* ---------- CONFIG ---------- */
$MOD_ROOT   = $_SERVER['DOCUMENT_ROOT'] . '/pages/modules';
$GLOBAL_CFG = $MOD_ROOT . '/modules.json';

function safe_json($f){return is_file($f)?json_decode(file_get_contents($f),true):[];}
$global = safe_json($GLOBAL_CFG);

/* map modules → tabs */
$tabMap=[
  'about'=>'overview','tags'=>'overview','hours'=>'overview',
  'coupon'=>'deals','cta'=>'deals',
  'links'=>'content','rss'=>'content','prompts'=>'content',
  'qr'=>'connect','contact-form'=>'connect','social-links'=>'connect'
];
$tabs=['overview'=>[], 'deals'=>[], 'content'=>[], 'connect'=>[]];
foreach($global as $m){ if(!($m['active']??false)) continue; $tabs[$tabMap[$m['name']]??'overview'][]=$m; }
?>
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mini‑Site</title>
<style>
:root{
  --gold:#ffb63b;--blue:#2357d7;--bg:#f9fbff;--fg:#111;
  --nav-bg:#ffffffcc;--nav-shadow:0 2px 10px rgba(0,0,0,.06);
  font-family:system-ui,Arial,sans-serif
}
body{margin:0;background:var(--bg);color:var(--fg)}

/* ========== NAV BAR ========== */
.tabs{display:flex;justify-content:center;gap:0.5rem;
      position:sticky;top:0;z-index:999;background:var(--nav-bg);
      backdrop-filter:blur(6px);box-shadow:var(--nav-shadow)}
.tab-btn{flex:1 1 160px;padding:.9rem .4rem;border:none;background:none;cursor:pointer;
         font-size:1.05rem;font-weight:600;letter-spacing:.02em;color:#444;position:relative}
.tab-btn:hover{color:var(--blue)}
.tab-btn.active{color:#000}
.tab-btn.active::after{content:"";position:absolute;left:10%;right:10%;bottom:2px;
                       height:3px;background:var(--gold);border-radius:3px}

/* ========== TAB PANES ========== */
.tab{display:none;padding:1rem 0}
.tab.active{display:block}

/* ========== GOLD CARD SHORTHAND ========== */
.gold-card{background:#fff;padding:1.8rem 1.6rem;border:3.5px solid var(--gold);
           border-radius:27px;box-shadow:0 8px 26px rgba(0,0,0,.06);margin:2rem auto;
           max-width:clamp(480px,70vw,720px)}
/* Any module output NOT using gold‑card will still be centered */
.tab>*:not(.gold-card){max-width:clamp(480px,70vw,720px);margin:2rem auto}

/* simple fade‑in for tab switching */
.tab{opacity:0;transition:opacity .25s ease}
.tab.active{opacity:1}
</style></head><body>

<nav class="tabs">
  <button class="tab-btn active" data-tab="overview">Overview</button>
  <button class="tab-btn" data-tab="deals">Deals</button>
  <button class="tab-btn" data-tab="content">Content</button>
  <button class="tab-btn" data-tab="connect">Connect</button>
</nav>

<?php foreach($tabs as $key=>$mods): ?>
<section id="tab-<?= $key ?>" class="tab<?= $key==='overview'?' active':'' ?>">
  <?php foreach($mods as $m):
        $abs=$MOD_ROOT.'/'.$m['relative_path']; if(is_file($abs)) include $abs; ?>
  <?php endforeach; ?>
</section>
<?php endforeach; ?>

Site Builder

Editing: index4.php

Site Builder