Site Builder

Editing: indexokss.php

writable 0666

<?php
$phDir = $_SERVER['DOCUMENT_ROOT'] . '/ph/';
$templateFile = $_SERVER['DOCUMENT_ROOT'] . '/ph/profile-index.php';
$msg = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Validate basic required fields
    if (empty($_POST['phone']) || empty($_POST['name']) || empty($_POST['email'])) {
        $msg = "❌ Phone, name, and email are required.";
    }
    // Ensure latitude and longitude are provided
    elseif (empty($_POST['lat']) || empty($_POST['lon'])) {
        $msg = "❌ Please use 'Locate Me' to fill in your latitude and longitude before submitting.";
    } else {
        // Sanitize and prepare data
        $phone = preg_replace('/\D/', '', $_POST['phone']);
        $phone10 = substr($phone, -10);
        $dir = $phDir . $phone10;

if (is_dir($dir)) {
            $msg = "❌ That business already exists! <a href='/ph/$phone10/'>View page</a>";
        } else {
            // Create directory and JSON file
            mkdir($dir, 0777, true);
            $data = [
                'name'        => trim($_POST['name']),
                'email'       => trim($_POST['email']),
                'slogan'      => mb_substr(trim($_POST['slogan']), 0, 160),
                'description' => mb_substr(trim($_POST['description']), 0, 240),
                'address'     => trim($_POST['address']),
                'city'        => trim($_POST['city']),
                'state'       => trim($_POST['state']),
                'zip'         => trim($_POST['zip']),
                'phone'       => $phone10,
                'website'     => trim($_POST['website']),
                'tags'        => array_filter(array_map('trim', explode(',', $_POST['tags'] ?? ''))),
                'location_tags' => array_filter(array_map('trim', explode(',', $_POST['location_tags'] ?? ''))),
                'lat'         => trim($_POST['lat']),
                'lon'         => trim($_POST['lon']),
                'twitter'     => trim($_POST['twitter'] ?? ''),
                'facebook'    => trim($_POST['facebook'] ?? ''),
                'instagram'   => trim($_POST['instagram'] ?? ''),
                'tiktok'      => trim($_POST['tiktok'] ?? ''),
                'linkedin'    => trim($_POST['linkedin'] ?? ''),
                'youtube'     => trim($_POST['youtube'] ?? '')
            ];
            file_put_contents("$dir/new-business.json", json_encode($data, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE));
            if (is_readable($templateFile)) copy($templateFile, "$dir/index.php");
            $msg = "✅ Business added! <a href='/ph/$phone10/'>View your business page</a>";
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Your Business | BestDealOn</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex,follow">

/* ========== NEW: lock & style city/state once set ========== */
.locked-input{background:#e9ecef!important;color:#666!important;}

/* ========== NEW: collapsible social links ========== */
.social-toggle{cursor:pointer;display:flex;align-items:center;gap:.35em;font-weight:600;margin:1.4em 0 .4em;}
.social-toggle .arrow{transition:transform .2s;}
#socialSection.collapsed{display:none;}

/* ========== NEW: taller description box ========== */
textarea#description{min-height:6.5em;}   /* (~2 extra lines) */
/* ======== mobile layout + universal side‑padding ======== */
@media (max-width: 600px) {                 /* tweak the breakpoint if you like */
    
    /* ❶ Give every form‑field wrapper breathing room */
    form,                                   /* or .your‑form‑class */
    .address-row{
        padding-left: 1rem;
        padding-right: 1rem;
    }

/* ❷ Address row: City + State on first line, ZIP below */
    .address-row{
        flex-wrap: wrap;                    /* let items break lines */
    }

/* City gets ~70 % of the line */
    .address-row > div:first-child{
        flex: 1 0 calc(70% - 0.55em) !important;
    }

/* State gets the rest (~30 %) */
    .address-row > div:nth-child(2){
        flex: 1 0 calc(30% - 0.55em) !important;
    }

/* ZIP takes a full row underneath */
    .address-row > div:nth-child(3){
        flex: 1 0 100% !important;
        margin-top: 0.6rem;                 /* keeps it from crowding the line above */
    }

/* make each input stretch within its flex‑box */
    .address-row input{
        width: 100%;
    }
}
</style>

/* ---------- NEW: lock city & state ---------- */
function lockCityState(){
  ['city','state'].forEach(id=>{
    const el=document.getElementById(id);
    el.readOnly=true;
    el.classList.add('locked-input');
  });
}

/* ---------- NEW: social‑section toggle ---------- */
function initSocialToggle(){
  const tog=document.getElementById('socialToggle');
  if(!tog) return;
  const sect=document.getElementById('socialSection');
  const arr=tog.querySelector('.arrow');
  tog.addEventListener('click',()=>{
    const shut=sect.classList.toggle('collapsed');
    arr.style.transform=shut?'rotate(-90deg)':'rotate(0deg)';
  });
}

/* Prefill phone from ?ph= on load */
window.addEventListener('DOMContentLoaded', function() {
    let urlPh = (new URL(window.location)).searchParams.get('ph');
    if (urlPh && urlPh.match(/^\d{10}$/)) {
        let nums = urlPh.replace(/\D/g,'').slice(-10);
        let formatted = nums;
        if(nums.length === 10)
            formatted = `(${nums.substr(0,3)})-${nums.substr(3,3)}-${nums.substr(6,4)}`;
        document.getElementById('phone').value = formatted;
        document.getElementById('business-id').textContent = nums;
    }
    document.getElementById('business-form').style.display = 'none';
    document.getElementById('locateBtn').addEventListener('click', function() {
        locateMe();
    });
    document.getElementById('addTag').addEventListener('keydown', function(e){
        if(e.key === "Enter" || e.key === "," ) {
            e.preventDefault();
            addTagsFromInput();
        }
        if(e.key==='Backspace' && this.value===''){
            if(tags.length){ tags.pop(); renderChips(); checkFormReady(); }
        }
    });
    document.getElementById('addTag').addEventListener('blur', function(){ addTagsFromInput(); });
    document.getElementById('phone').addEventListener('input', function() {
        let nums = this.value.replace(/\D/g,'').slice(0,10);
        let out = nums;
        if(nums.length > 6) out = `(${nums.substr(0,3)})-${nums.substr(3,3)}-${nums.substr(6,4)}`;
        else if(nums.length > 3) out = `(${nums.substr(0,3)})-${nums.substr(3)}`;
        this.value = out;
        document.getElementById('business-id').textContent = nums;
        if(nums.length === 10) {
            fetch('/ph/check.php?phone='+nums).then(r=>r.json()).then(data=>{
                if (data.exists) {
                    document.getElementById('phone-status').innerHTML = '<span style="color:#d92c2c;font-weight:700;">❌ Already exists</span>';
                    phoneAvailable = false;
                    document.getElementById('addBtn').disabled = true;
                } else {
                    document.getElementById('phone-status').innerHTML = '<span style="color:#20b934;font-weight:700;">✅ Available to claim!</span>';
                    phoneAvailable = true;
                    checkFormReady();
                }
            });
        } else {
            document.getElementById('phone-status').innerHTML = '';
            phoneAvailable = false;
            document.getElementById('addBtn').disabled = true;
        }
    });
    document.getElementById('city').addEventListener('input', updateLatLonFromCityState);
    document.getElementById('state').addEventListener('input', updateLatLonFromCityState);
    Array.from(document.querySelectorAll('#business-form input, #business-form textarea')).forEach(i=>{
        i.addEventListener('input', checkFormReady);
    });

/* NEW: initialise collapsible socials */
    initSocialToggle();
});

/* After location is found and the form is shown, trigger the phone availability check if prefilled */
function locateMe() {
    if (!navigator.geolocation) { alert("Geolocation not supported."); return; }
    document.getElementById('geo-status').textContent = "Locating...";
    navigator.geolocation.getCurrentPosition(function(pos) {
        userLat = pos.coords.latitude; userLon = pos.coords.longitude;
        document.getElementById('lat').value = userLat;
        document.getElementById('lon').value = userLon;
        fetch('/geo/json-data/states-bounds.json').then(r=>r.json()).then(bounds=>{
            let st = '';
            bounds.forEach(function(b){
                if (userLat >= b.minLat && userLat <= b.maxLat && userLon >= b.minLon && userLon <= b.maxLon) st=b.state;
            });
            if(st) {
                userState = st;
                document.getElementById('state').value = st;
                fetch('/geo/json-data/'+st+'.json').then(r=>r.json()).then(cities=>{
                    let nearest = null, bestDist = 1e9;
                    userCitiesList = cities;
                    cities.forEach(c=>{
                        let d = Math.hypot(userLat-c.lat, userLon-c.lon);
                        if (d < bestDist) { bestDist = d; nearest = c; }
                    });
                    if (nearest) {
                        userCity = nearest.city;
                        document.getElementById('city').value = nearest.city;
                        document.getElementById('lat').value = nearest.lat;
                        document.getElementById('lon').value = nearest.lon;
                        document.getElementById('geo-status').innerHTML = "Location found: <b>" + nearest.city + ", " + st + "</b>.";

lockCityState();   /* NEW: lock fields now */

let dists = cities.map(c=>({city:c.city, d:Math.hypot(userLat-c.lat,userLon-c.lon)}));
                        dists.sort((a,b)=>a.d-b.d);
                        let preTags = [nearest.city, st];
                        for (let i=1; i<7 && i<dists.length; ++i) preTags.push(dists[i].city);
                        setTags(preTags);
                        document.getElementById('business-form').style.display = '';
                        checkFormReady();

<label class="lab" for="phone">Business Phone (10 digits)</label>
    <input type="text" id="phone" name="phone" maxlength="16" placeholder="(727)-610-1111" required autocomplete="off">
    <div style="margin-bottom:.6em;">
      <span>Business ID: <span id="business-id" style="font-family:monospace;font-size:1.04em;"></span></span>
      <span id="phone-status" style="margin-left:.8em;"></span>
    </div>

<label class="lab" for="email">Business Email</label>
    <input type="email" id="email" name="email" maxlength="120" required placeholder="you@email.com" autocomplete="off">

<label class="lab" for="name">Business Name</label>
    <input type="text" id="name" name="name" maxlength="80" required>

<label class="lab" for="slogan">Slogan <span class="hint">(max 160 characters, optional)</span></label>
    <input type="text" id="slogan" name="slogan" maxlength="160">

<label class="lab" for="description">Description <span class="hint">(max 240 characters)</span></label>
    <textarea id="description" name="description" maxlength="240" rows="5" required></textarea>

<label class="lab" for="address">Street Address</label>
    <input type="text" id="address" name="address" maxlength="120" required>

<div class="address-row" style="display:flex; gap:1.1em;">
  <div style="flex:2">
    <label class="lab" for="city">City</label>
    <input type="text" id="city" name="city" maxlength="40" required>
  </div>

<div style="flex:1.1">
    <label class="lab" for="state">State&nbsp;(2‑letter)</label>
    <input type="text" id="state" name="state" maxlength="2" required>
  </div>

<label class="lab" for="website">Website (optional)</label>
    <input type="text" id="website" name="website" maxlength="120">

<div id="socialToggle" class="social-toggle"><span class="arrow">▸</span> Add social links</div>

<div id="socialSection" class="collapsed">
      <label class="lab" for="twitter">Twitter/X (URL or handle)</label>
      <input type="text" id="twitter" name="twitter" maxlength="120" placeholder="e.g. https://twitter.com/username or @username">

<label class="lab" for="facebook">Facebook (URL or handle)</label>
      <input type="text" id="facebook" name="facebook" maxlength="120" placeholder="e.g. https://facebook.com/username">

<label class="lab" for="instagram">Instagram (URL or handle)</label>
      <input type="text" id="instagram" name="instagram" maxlength="120" placeholder="e.g. https://instagram.com/username or @username">

<label class="lab" for="tiktok">TikTok (URL or handle)</label>
      <input type="text" id="tiktok" name="tiktok" maxlength="120" placeholder="e.g. https://tiktok.com/@username or @username">

<label class="lab" for="linkedin">LinkedIn (URL or handle)</label>
      <input type="text" id="linkedin" name="linkedin" maxlength="120" placeholder="e.g. https://linkedin.com/in/username">

<label class="lab" for="youtube">YouTube (URL or channel)</label>
      <input type="text" id="youtube" name="youtube" maxlength="120" placeholder="e.g. https://youtube.com/@username">
    </div>
  <hr style="margin:1.7em 0 .9em 0;">
    <label class="lab" for="tags">Business Tags (comma separated)</label>
    <input type="text" id="tags" name="tags" maxlength="120" placeholder="e.g. Restaurant, Pizza, Delivery">

<label class="lab" for="location-tags">Location Tags</label>
    <div id="location-tags" style="margin-bottom:.5em;"></div>
    <input type="hidden" id="location_tags" name="location_tags">
    <input type="text" id="addTag" placeholder="Add more tags (comma separated)" autocomplete="off">

window.locateMe = function() {
    if (inProgress) return;
    inProgress = true;

const btn = document.getElementById('locateBtn');
    if (btn) {
      btn.disabled      = true;
      btn.textContent   = '⌛ Locating…';
    }

// call your existing locateMe
    const ret = originalLocateMe.apply(this, arguments);

// poll until lat shows up
    const poll = setInterval(() => {
      const latField = document.querySelector('input[name="lat"], #lat');
      if (latField && latField.value) {
        // hide the button
        if (btn) btn.style.display = 'none';
        // swap out the Step 1 copy for Step 2
        const step1 = document.getElementById('step1-text');
        if (step1) {
          step1.textContent = 'Step 2: Fill out the form below.';
        }
        clearInterval(poll);
      }
    }, 300);

return ret;
  };
})();
</script>
</body>
</html>

Site Builder

Editing: indexokss.php

Site Builder