Site Builder

Editing: indexj1.php

writable 0666

<!doctype html>
<html lang="en" data-theme="amber">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>TruthCase™ — The Case for Truth | RF SAFE</title>
<meta name="description" content="A self-contained, affiliate-ready TruthCase™ landing page. Loads phone models from truthcases.json, shows prices, and generates affiliate-ready direct and Amazon links (with optional overrides via URL or modal inputs). Amber low-blue theme." />

<!-- =========================
  HOW TO USE:
  1) Upload this file and truthcases.json into the same folder on your site.
  2) Edit truthcases.json to add/update models.
  3) Affiliates can override codes by URL:
     - ?ref=YOURCODE (direct-buy affiliate code)
     - ?atag=YOURAMAZONTAG (Amazon Associates tag)
  4) They can also enter codes inside the modal (with “Remember” option).

Notes:
  - If you open locally as file:// some browsers block fetch(); use a normal web host or local server.
========================= -->

/* NAV */
  .nav{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.1) blur(8px);
    background:rgba(24,18,10,.68);border-bottom:1px solid var(--border)}
  .navin{max-width:1180px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 18px}
  .brand{display:flex;gap:10px;align-items:center;font-weight:900;color:var(--brand-ink)}
  .dot{width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 18px var(--ring)}
  .row{display:flex;gap:10px;align-items:center}
  .btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:11px 16px;font-weight:900;border:2px solid var(--brand);
    background:transparent;color:var(--brand);box-shadow:0 8px 20px var(--ring);transition:.2s}
  .btn:hover{transform:translateY(-1px)}
  .btn.primary{background:var(--brand);color:#1a1309}
  .btn.ghost{border-color:var(--border);color:var(--brand)}
  .btn.mini{padding:7px 10px;font-size:.9rem}

/* HERO */
  .hero{
    margin-top:18px;background:
      radial-gradient(900px 320px at 10% -20%, var(--soft), transparent 60%),
      radial-gradient(900px 320px at 90% -40%, var(--soft), transparent 60%),
      var(--card);
    border-radius:28px;box-shadow:var(--shadow);padding:28px
  }
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
    border:1px solid var(--border);background:var(--soft2);border-radius:999px;padding:6px 12px}
  h1{margin:10px 0 8px;font-size:clamp(28px,4.8vw,54px);line-height:1.06;color:var(--brand-ink)}
  .subtitle{color:var(--muted);max-width:980px}
  .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
  .badge{font-size:12px;font-weight:900;border:1px solid var(--border);background:var(--soft2);color:var(--brand);
    border-radius:999px;padding:6px 10px}
  .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

/* SECTIONS */
  .section{margin-top:44px}
  .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;border:1px solid var(--border)}
  .grid{display:grid;gap:18px}
  @media(min-width:980px){.cols-2{grid-template-columns:1fr 1fr}.cols-3{grid-template-columns:1fr 1fr 1fr}}

/* MODAL */
  .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:100}
  .modal{position:fixed;inset:0;display:grid;place-items:center;z-index:101;pointer-events:none}
  .modal-panel{
    width:min(680px,94vw);background:var(--card);border:1px solid var(--border);
    border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.55);padding:18px;pointer-events:auto
  }
  .modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
  .modal-title{font-weight:900;color:var(--brand-ink);margin:0}
  .close{appearance:none;border:1px solid var(--border);background:var(--soft2);color:var(--brand);border-radius:999px;padding:6px 10px;font-weight:900;cursor:pointer}
  .form-row{display:grid;gap:12px;margin-top:12px}
  @media(min-width:720px){.form-row{grid-template-columns:1fr 1fr}}
  label{font-weight:700}
  select,input{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:#0f0c06;color:var(--ink)}
  .price{display:flex;align-items:baseline;gap:10px;margin-top:8px}
  .price .sale{font-size:1.25rem;font-weight:900;color:var(--brand-ink)}
  .price .regular{color:var(--muted);text-decoration:line-through}
  .sku{color:var(--muted);font-size:.95rem}
  .modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  .helper{font-size:.9rem;color:var(--muted)}

/* REVEAL */
  .reveal{opacity:0;transform:translateY(12px);transition:all .5s ease}
  .reveal.in{opacity:1;transform:none}
</style>
</head>
<body>

<div class="nav" role="navigation" aria-label="Primary">
  <div class="navin">
    <div class="brand"><span class="dot"></span><span>RF SAFE • TruthCase™</span></div>
    <div class="row">
      <a class="btn ghost" href="#why">Why TruthCase</a>
      <a class="btn ghost" href="#how">How it Works</a>
      <button class="btn primary" id="openModalBtn" type="button">Select Your Phone</button>
    </div>
  </div>
</div>

<div class="wrap">
  
  <header class="hero reveal">
    <span class="eyebrow">RF SAFE • Since the 1990s</span>
    <h1>TruthCase™ — the case for truth about “anti‑radiation” cases</h1>
    <p class="subtitle">
      RF SAFE pioneered exposure‑reduction cases in the <strong>1990s</strong>. TruthCase™ is a first‑principles, antenna‑aware, education‑first design—built to reduce exposure in real use and to support the broader roadmap to lower the <strong>microwave load</strong> on children and families.
    </p>
    <div class="badges" role="list">
      <span class="badge" role="listitem">Design • Usage • Policy • Procedure</span>
      <span class="badge" role="listitem">No metal loops • No magnets</span>
      <span class="badge" role="listitem">Shield between you & phone</span>
      <span class="badge" role="listitem">Antenna‑aware & ultra‑thin</span>
      <span class="badge" role="listitem">Ohmmeter‑checkable shield</span>
    </div>
    <div class="cta-row">
      <button class="btn primary" id="openModalBtn2" type="button">Find Your Model</button>
      <a class="btn" href="#how">Learn how TruthCase™ reduces exposure</a>
    </div>
  </header>

<section id="why" class="section card reveal">
    <h2 style="margin:0 0 8px;color:var(--brand-ink)">Why we still make a case</h2>
    <p>Because the market still ships “anti‑radiation” cases with design choices that can <strong>increase</strong> exposure—metal loops and magnetic plates that detune antennas, thick card stacks near radiators, and ear‑side apertures that break shielding continuity. TruthCase™ excludes those features on purpose and teaches correct use.</p>
  </section>

<section id="how" class="section grid cols-2 reveal">
    <div class="card">
      <h3 style="margin:0 0 6px;color:var(--brand-ink)">What reduces exposure</h3>
      <ul>
        <li><strong>Shield between you & phone</strong> (calls, pocket carry, long scrolls)</li>
        <li><strong>Antenna‑aware, thin design</strong> (avoid provoking power boosts)</li>
        <li><strong>Continuity at the ear</strong> (no large unshielded aperture)</li>
        <li><strong>Habits</strong>: speaker/wired for long calls; distance at night; disable idle radios</li>
      </ul>
    </div>
    <div class="card">
      <h3 style="margin:0 0 6px;color:var(--brand-ink)">What often raises exposure</h3>
      <ul>
        <li>Metal loops, decorative hardware near antennas</li>
        <li>Magnetic detachable wallets & plate steel</li>
        <li>Over‑shielding/thickness at antenna zones</li>
        <li>“99%” fabric swatch claims (swatch % ≠ everyday %)</li>
      </ul>
    </div>
  </section>
</div>

<div class="modal-backdrop" id="backdrop"></div>
<div class="modal" id="modal" aria-hidden="true">
  <div class="modal-panel" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modal-head">
      <h3 id="modalTitle" class="modal-title">Choose Your TruthCase™</h3>
      <button class="close" id="closeModalBtn" type="button" aria-label="Close">✕</button>
    </div>

<div class="form-row">
      <div>
        <label for="modelSelect">Phone model</label>
        <select id="modelSelect" aria-describedby="modelHelp"></select>
        <div id="modelHelp" class="helper">Loaded dynamically from <code>truthcases.json</code>.</div>
      </div>
      <div>
        <label for="skuOut">SKU</label>
        <input id="skuOut" type="text" readonly />
      </div>
    </div>

<div class="form-row">
      <div>
        <label>Price</label>
        <div class="price" id="priceOut">
          <span class="sale" id="salePrice"></span>
          <span class="regular" id="regularPrice"></span>
        </div>
      </div>
      <div>
        <label for="refInput">Affiliate code (direct)</label>
        <input id="refInput" type="text" placeholder="e.g., YOURCODE" />
        <div class="helper">Used as <code>?ref=YOURCODE</code> on direct “Buy Now”. URL override: <code>?ref=</code></div>
      </div>
    </div>

<div class="form-row">
      <div>
        <label for="atagInput">Amazon tag</label>
        <input id="atagInput" type="text" placeholder="e.g., yourtag-20" />
        <div class="helper">Adds <code>?tag=yourtag-20</code> on Amazon links. URL override: <code>?atag=</code></div>
      </div>
      <div style="display:flex;align-items:center;gap:10px;margin-top:28px">
        <input id="rememberBox" type="checkbox" />
        <label for="rememberBox" style="margin:0">Remember these on this browser</label>
      </div>
    </div>

<div class="modal-actions">
      <a class="btn primary" id="buyDirectBtn" href="#" target="_blank" rel="noopener">Buy Direct</a>
      <a class="btn" id="buyAmazonBtn" href="#" target="_blank" rel="noopener">Buy on Amazon</a>
      <button class="btn mini" id="copyDirectBtn" type="button" title="Copy direct link">Copy Direct Link</button>
      <button class="btn mini" id="copyAmazonBtn" type="button" title="Copy Amazon link">Copy Amazon Link</button>
      <span id="copyMsg" class="helper" aria-live="polite"></span>
    </div>
  </div>
</div>

/* ---------------------- STATE ---------------------- */
let DATA = { settings:{ currencySymbol:"$", defaultAffiliateParam:"ref", defaultAmazonTagParam:"tag" }, products:[] };
let selectedIndex = 0;
let affiliateRef = ""; // direct-buy affiliate code
let amazonTag = "";    // amazon associates tag

/* ---------------------- DOM REFS ---------------------- */
const openModalBtn  = $('#openModalBtn');
const openModalBtn2 = $('#openModalBtn2');
const closeModalBtn = $('#closeModalBtn');
const backdrop      = $('#backdrop');
const modal         = $('#modal');
const modelSelect   = $('#modelSelect');
const skuOut        = $('#skuOut');
const salePrice     = $('#salePrice');
const regularPrice  = $('#regularPrice');
const refInput      = $('#refInput');
const atagInput     = $('#atagInput');
const rememberBox   = $('#rememberBox');
const buyDirectBtn  = $('#buyDirectBtn');
const buyAmazonBtn  = $('#buyAmazonBtn');
const copyDirectBtn = $('#copyDirectBtn');
const copyAmazonBtn = $('#copyAmazonBtn');
const copyMsg       = $('#copyMsg');

/* ---------------------- MODAL ---------------------- */
function openModal(){
  backdrop.style.display = 'block';
  modal.style.display = 'grid';
  modal.setAttribute('aria-hidden','false');
  // focus the select
  setTimeout(()=>modelSelect.focus(), 30);
}
function closeModal(){
  backdrop.style.display = 'none';
  modal.style.display = 'none';
  modal.setAttribute('aria-hidden','true');
}
backdrop.addEventListener('click', closeModal);
closeModalBtn.addEventListener('click', closeModal);
document.addEventListener('keydown', e=>{
  if(e.key === 'Escape' && modal.getAttribute('aria-hidden') === 'false'){ closeModal(); }
});
openModalBtn.addEventListener('click', openModal);
openModalBtn2.addEventListener('click', openModal);

/* ---------------------- RENDER ---------------------- */
function renderModels(){
  modelSelect.innerHTML = '';
  DATA.products.forEach((p, i)=>{
    const opt = document.createElement('option');
    opt.value = i;
    opt.textContent = p.title || p.model || `Model ${i+1}`;
    modelSelect.appendChild(opt);
  });
  modelSelect.value = String(selectedIndex);
}
function currentProduct(){
  const p = DATA.products[selectedIndex] || {};
  // Accept "asin" or legacy typo "asan"
  p.asin = p.asin || p.asan || "";
  return p;
}
function buildDirectUrl(p){
  if(!p.buyUrl) return "";
  const paramKey = (DATA.settings && DATA.settings.defaultAffiliateParam) || 'ref';
  const code = (refInput.value || affiliateRef || p.affiliateId || "").trim();
  return appendParam(p.buyUrl, paramKey, code || "");
}
function buildAmazonUrl(p){
  const asin = (p.asin||"").trim();
  if(!asin) return "";
  const tagKey = (DATA.settings && DATA.settings.defaultAmazonTagParam) || 'tag';
  const tagVal = (atagInput.value || amazonTag || p.amazonTag || "").trim();
  let base = `https://www.amazon.com/dp/${encodeURIComponent(asin)}`;
  return appendParam(base, tagKey, tagVal || "");
}
function updateDetail(){
  const p = currentProduct();
  const cur = (DATA.settings && DATA.settings.currencySymbol) || '$';
  skuOut.value = p.sku || '';
  if(p.salePrice != null && p.salePrice !== ""){
    salePrice.textContent = fmtMoney(p.salePrice, cur);
    regularPrice.textContent = p.price != null ? fmtMoney(p.price, cur) : '';
  }else{
    salePrice.textContent = p.price != null ? fmtMoney(p.price, cur) : '';
    regularPrice.textContent = '';
  }
  // build links
  const directUrl = buildDirectUrl(p);
  const amazonUrl = buildAmazonUrl(p);
  if(directUrl){ buyDirectBtn.href = directUrl; buyDirectBtn.style.display='inline-flex'; }
  else { buyDirectBtn.removeAttribute('href'); buyDirectBtn.style.display='none'; }
  if(amazonUrl){ buyAmazonBtn.href = amazonUrl; buyAmazonBtn.style.display='inline-flex'; }
  else { buyAmazonBtn.removeAttribute('href'); buyAmazonBtn.style.display='none'; }
}
modelSelect.addEventListener('change', e=>{ selectedIndex = parseInt(e.target.value,10)||0; updateDetail(); });

/* affiliate inputs reflect & persist */
function syncAffiliateInputsFromState(){
  if(affiliateRef) refInput.value = affiliateRef;
  if(amazonTag)   atagInput.value = amazonTag;
}
function persistAffiliateIfChosen(){
  if(rememberBox.checked){
    localStorage.setItem('truthcase_ref', refInput.value.trim());
    localStorage.setItem('truthcase_atag', atagInput.value.trim());
  }
}
refInput.addEventListener('input', ()=>updateDetail());
atagInput.addEventListener('input', ()=>updateDetail());
rememberBox.addEventListener('change', ()=>persistAffiliateIfChosen());

/* copy buttons */
function showCopyMsg(msg){ copyMsg.textContent = msg; setTimeout(()=>copyMsg.textContent='', 2000); }
copyDirectBtn.addEventListener('click', ()=>{
  const p = currentProduct();
  const url = buildDirectUrl(p);
  if(url && copyToClipboard(url)) showCopyMsg('Direct link copied.');
});
copyAmazonBtn.addEventListener('click', ()=>{
  const p = currentProduct();
  const url = buildAmazonUrl(p);
  if(url && copyToClipboard(url)) showCopyMsg('Amazon link copied.');
});

/* ---------------------- LOAD JSON ---------------------- */
async function loadData(){
  try{
    const res = await fetch('truthcases.json', {cache:'no-store'});
    if(!res.ok) throw new Error('HTTP '+res.status);
    const j = await res.json();
    DATA = Object.assign({settings:{}, products:[]}, j||{});
    if(!DATA.products || !Array.isArray(DATA.products) || !DATA.products.length){
      throw new Error('No products found in truthcases.json');
    }
  }catch(err){
    console.warn('Failed to load truthcases.json, using fallback demo.', err);
    DATA = {
      settings:{ currencySymbol:"$", defaultAffiliateParam:"ref", defaultAmazonTagParam:"tag"},
      products:[
        {
          id:"ip15pm", title:"TruthCase™ for iPhone 15 Pro Max (Black)",
          sku:"QC-IP15PM-BLK", asin:"B0DEMO1234",
          price:59.95, salePrice:49.95,
          buyUrl:"https://www.rfsafe.com/product/truthcase-iphone-15-pro-max/",
          affiliateId:"RFS_DEFAULT", amazonTag:"rfsafe-20"
        },
        {
          id:"s24u", title:"TruthCase™ for Samsung Galaxy S24 Ultra (Black)",
          sku:"QC-S24U-BLK", asin:"",
          price:57.95,
          buyUrl:"https://www.rfsafe.com/product/truthcase-s24-ultra/",
          affiliateId:"RFS_DEFAULT", amazonTag:""
        }
      ]
    };
  }
}

/* ---------------------- INIT ---------------------- */
(async function init(){
  // URL overrides or remembered
  affiliateRef = getQS('ref') || localStorage.getItem('truthcase_ref') || "";
  amazonTag    = getQS('atag')|| localStorage.getItem('truthcase_atag')|| "";
  await loadData();
  renderModels();
  syncAffiliateInputsFromState();
  updateDetail();

// simple reveal-on-scroll
  const io=new IntersectionObserver(es=>es.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} }),{threshold:.12});
  document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
})();
</script>
</body>
</html>

Site Builder

Editing: indexj1.php

Site Builder