Site Builder

Editing: index1.php

writable 0666

<?php
// Place this as /geo/index.php

function scan_geo($dir) {
    $result = [];
    $folders = @scandir($dir) ?: [];
    foreach ($folders as $f) {
        if ($f[0] === '.' || !is_dir($dir . '/' . $f)) continue;
        $children = scan_geo($dir . '/' . $f);
        $result[$f] = $children;
    }
    return $result;
}

// Only scan /geo/USA/
$geo_root = __DIR__ . '/USA';
$geo_tree = is_dir($geo_root) ? scan_geo($geo_root) : [];
$states = array_keys($geo_tree);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BestDealOn Cities & States</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    background: #f7fafc;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #2e3a4c;
    margin: 0;
    min-height: 100vh;
}
.card {
    background: #fff;
    max-width: 520px;
    margin: 3rem auto 2rem auto;
    padding: 2.2rem 2rem 1.5rem 2rem;
    border-radius: 18px;
    box-shadow: 0 2px 14px 0 rgba(48,65,105,.09), 0 0.5px 2px 0 rgba(50,50,50,0.03);
    text-align: center;
}
.card-title {
    font-size: 2.1rem;
    font-weight: 800;
    color: #31548a;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
}
.card-slogan {
    font-size: 1.11rem;
    color: #568ad6;
    margin-bottom: 1.2rem;
    font-weight: 500;
}
.geo-ui {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 1.5px 8px 0 rgba(70,100,140,0.10);
    padding: 1.2rem 1.3rem 2rem 1.3rem;
}
select, button {
    padding: 0.3em 1em;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid #d0dae8;
    background: #f6fafd;
    color: #2e3a4c;
    margin-bottom: 1rem;
}
select:focus, button:focus { outline: 2px solid #6ab1ff; }
.geo-tree ul {
    list-style: none;
    padding-left: 1.3em;
    margin: 0;
}
.geo-tree li {
    line-height: 1.7;
    position: relative;
}
.geo-tree .toggle {
    cursor: pointer;
    display: inline-block;
    margin-right: 0.4em;
    color: #568ad6;
    font-weight: bold;
    user-select: none;
}
.geo-tree .folder {
    color: #23486b;
    font-weight: 500;
}
.geo-tree .toggle:after {
    content: '▶';
    font-size: 0.86em;
    display: inline-block;
    transform: rotate(0deg);
    transition: transform .17s;
}
.geo-tree .expanded > .toggle:after { transform: rotate(90deg); }
.geo-tree .toggle { width: 1.1em; text-align: center; }
.geo-tree a {
    text-decoration: none;
    color: #3972c6;
    font-weight: 500;
    padding-left: 0.15em;
}
.geo-tree a:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .card, .geo-ui { max-width: 97vw; padding: 1rem; }
}
</style>
</head>
<body>
    <div class="card">
        <div class="card-title">BestDealOn</div>
        <div class="card-slogan">Browse by State and City</div>
        <div style="font-size:1.03em; color:#5d6d85;">Select a state to view its cities, or expand the tree below.</div>
    </div>
    <div class="geo-ui">
        <label for="state-select"><b>State:</b></label>
        <select id="state-select">
            <option value="">— All States —</option>
            <?php foreach($states as $state): ?>
                <option value="<?php echo htmlspecialchars($state); ?>"><?php echo htmlspecialchars($state); ?></option>
            <?php endforeach; ?>
        </select>
        <button id="expandall" type="button">Expand All</button>
        <button id="collapseall" type="button">Collapse All</button>
        <div class="geo-tree" id="geo-tree">
            <?php
            function render_geo_tree($arr, $parent_path = '/USA') {
                if (!$arr) return;
                echo '<ul>';
                foreach ($arr as $name => $children) {
                    $human = str_replace('-', ' ', ucfirst($name));
                    $cat_url = '.' . $parent_path . '/' . $name . '/';
                    echo '<li>';
                    if ($children) {
                        echo '<span class="toggle"></span>';
                        echo '<span class="folder">'.$human.'</span>';
                        render_geo_tree($children, $parent_path . '/' . $name);
                    } else {
                        echo '<span style="display:inline-block;width:1.2em;"></span>';
                        echo '<a href="'.$cat_url.'">'.$human.'</a>';
                    }
                    echo '</li>';
                }
                echo '</ul>';
            }
            render_geo_tree($geo_tree);
            ?>
        </div>
    </div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    function collapseAll() {
        document.querySelectorAll('.geo-tree ul').forEach(function(ul, i) {
            if(i===0) return; ul.style.display='none';
        });
        document.querySelectorAll('.geo-tree .expanded').forEach(e=>e.classList.remove('expanded'));
    }
    function expandAll() {
        document.querySelectorAll('.geo-tree ul').forEach(function(ul) {
            ul.style.display='';
        });
        document.querySelectorAll('.geo-tree li').forEach(e=>e.classList.add('expanded'));
    }
    // Tree toggle
    document.querySelectorAll('.geo-tree .toggle').forEach(function(toggle){
        toggle.addEventListener('click', function(e){
            var li = toggle.parentNode;
            li.classList.toggle('expanded');
            var ul = li.querySelector('ul');
            if(ul) ul.style.display = li.classList.contains('expanded') ? '' : 'none';
        });
    });
    collapseAll();

// Dropdown: show only the selected state, or all collapsed if blank
    document.getElementById('state-select').addEventListener('change', function() {
        var val = this.value;
        var topLis = document.querySelectorAll('.geo-tree > ul > li');
        if (!val) {
            // Reset: Show all, collapse all
            topLis.forEach(function(li){
                li.style.display = '';
                li.classList.remove('expanded');
                var ul = li.querySelector('ul');
                if(ul) ul.style.display='none';
            });
        } else {
            topLis.forEach(function(li){
                var folderSpan = li.querySelector('.folder');
                var liText = folderSpan ? folderSpan.textContent.trim().toUpperCase() : '';
                if (liText === val.toUpperCase()) {
                    li.style.display = '';
                    li.classList.add('expanded');
                    // Expand all nested ULs in this branch
                    var uls = li.querySelectorAll('ul');
                    uls.forEach(function(ul){ ul.style.display=''; });
                } else {
                    li.style.display = 'none';
                }
            });
        }
    });
    document.getElementById('expandall').onclick = expandAll;
    document.getElementById('collapseall').onclick = collapseAll;
});
</script>
</body>
</html>

Site Builder

Editing: index1.php

Site Builder