Site Builder

Editing: index5.php

writable 0666

<?php
/***************************************************************************
 *  MINI‑SITE INDEX (All‑in‑One) – 2025 **Hero Edition**
 *  ---------------------------------------------------
 *  • Inline JS & CSS — no external loader
 *  • Sticky nav with pill‑indicator + blur
 *  • Hero banner pulls *display_name* & *slogan* from profile.json
 *  • 4 responsive tabs (Overview / Deals / Content / Connect)
 *  • Gold‑card aesthetic; non‑card modules auto‑centered
 ***************************************************************************/

/* ---------- HELPERS ---------- */
$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):[];}

/* ---------- PROFILE (for hero) ---------- */
$user = $_GET['user'] ?? (basename(__DIR__)); // e.g. /pages/index.php?user=rfsafe
$profilePath = $_SERVER['DOCUMENT_ROOT'] . "/social/$user/profile.json";
$profile = safe_json($profilePath);
$heroName = $profile['display_name'] ?? ($profile['handle'] ?? 'Welcome!');
$heroSlogan = $profile['slogan'] ?? 'Powered by BestDealOn';

/* ---------- MODULE REGISTRY ---------- */
$global = safe_json($GLOBAL_CFG);
$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><?= htmlspecialchars($heroName) ?> – 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)}

/* ========== HERO ========== */
.hero{background:linear-gradient(120deg,#136bff 0%,#0048d5 100%);color:#fff;
      text-align:center;padding:4.2rem 1rem 3rem;position:relative;overflow:hidden}
.hero h1{margin:0;font-size:2.6rem;font-weight:900;letter-spacing:-.5px}
.hero p{margin:.8rem auto 0;font-size:1.2rem;font-weight:500;max-width:640px;color:#e6eeff}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,transparent 40%,rgba(0,0,0,.15));pointer-events:none}

/* ========== 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 2rem}
.tab.active{display:block}

/* ========== GOLD CARD & CENTERING ========== */
.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)}
.tab>*:not(.gold-card){max-width:clamp(480px,70vw,720px);margin:2rem auto}

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

<header class="hero">
  <h1><?= htmlspecialchars($heroName) ?></h1>
  <p><?= htmlspecialchars($heroSlogan) ?></p>
</header>

<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: index5.php

Site Builder