<?php
// Save JSON on POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Build the flexible content array
$content = [];
if (!empty($_POST['item_type'])) {
foreach ($_POST['item_type'] as $i => $type) {
if ($type === 'section') {
$content[] = [
"type" => "section",
"text" => trim($_POST['section_text'][$i] ?? "")
];
}
elseif ($type === 'quote') {
$content[] = [
"type" => "quote",
"text" => trim($_POST['quote_text'][$i] ?? "")
];
}
elseif ($type === 'image') {
$content[] = [
"type" => "image",
"src" => $_POST['image_src'][$i] ?? ""
];
}
}
}
$bio = [
"name" => $_POST['name'] ?? "",
"subtitle" => $_POST['subtitle'] ?? "",
"content" => $content,
"footer" => $_POST['footer'] ?? ""
];
file_put_contents("bio.json", json_encode($bio, JSON_PRETTY_PRINT));
$saved = true;
}
// Load existing bio
$existing = file_exists("bio.json")
? json_decode(file_get_contents("bio.json"), true)
: ["name"=>"","subtitle"=>"","content"=>[],"footer"=>""];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Edit Bio</title>
<style>
body {
font-family: Georgia, serif;
background: #f6f1e9;
margin: 0;
padding: 30px;
}
.container {
max-width: 900px;
background: white;
margin: auto;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.item {
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 15px;
border-radius: 8px;
background: #faf7f2;
}
.remove-btn {
background: #c34545;
color: white;
border: none;
padding: 6px 10px;
border-radius: 5px;
cursor: pointer;
float: right;
}
.control {
margin-top: 10px;
}
textarea, select, input[type="text"] {
width: 100%;
padding: 10px;
margin-top: 6px;
border-radius: 6px;
border: 1px solid #aaa;
}
.add-set {
padding: 10px;
background: #6b8cae;
color: white;
border-radius: 6px;
cursor: pointer;
display: inline-block;
}
.save {
margin-top: 25px;
width: 100%;
padding: 15px;
background: #3e4e63;
color: white;
border: none;
font-size: 1.2em;
border-radius: 8px;
cursor: pointer;
}
.thumb-preview img {
max-width: 150px;
border: 1px solid #bbb;
padding: 4px;
border-radius: 4px;
background: white;
margin-top: 10px;
}
</style>
<script>
// Load images from your browse_files.php
async function loadImages() {
const r = await fetch("browse_files.php?type=image");
const j = await r.json();
window.imageList = j.files || [];
}
// Update thumbnail when an image is selected
function updateThumb(select) {
const img = select.parentElement.querySelector(".thumb-preview img");
img.src = select.value;
img.style.display = select.value ? "block" : "none";
}
// Build item blocks (section, quote, image)
function addItem(type, text = "", src = "") {
const list = document.getElementById("content-list");
let html = `<div class="item">`;
html += `
<button type="button" class="remove-btn"
onclick="this.parentElement.remove()">Remove</button>
<input type="hidden" name="item_type[]" value="${type}">
`;
if (type === "section") {
html += `
<label>Section Text</label>
<textarea name="section_text[]">${text}</textarea>
<input type="hidden" name="quote_text[]" value="">
<input type="hidden" name="image_src[]" value="">
`;
}
else if (type === "quote") {
html += `
<label>Quote</label>
<textarea name="quote_text[]">${text}</textarea>
<input type="hidden" name="section_text[]" value="">
<input type="hidden" name="image_src[]" value="">
`;
}
else if (type === "image") {
let options = window.imageList
.map(i => `<option value="${i}" ${i === src ? "selected" : ""}>${i}</option>`)
.join("");
html += `
<label>Image</label>
<select name="image_src[]" onchange="updateThumb(this)">
${options}
</select>
<div class="thumb-preview">
<img src="${src}" style="display:${src ? "block" : "none"};">
</div>
<input type="hidden" name="section_text[]" value="">
<input type="hidden" name="quote_text[]" value="">
`;
}
html += `</div>`;
list.insertAdjacentHTML("beforeend", html);
}
window.onload = async () => {
await loadImages();
// Load existing items
<?php foreach ($existing["content"] as $item):
$json = json_encode($item); ?>
(function(){
let it = <?= $json ?>;
addItem(it.type, it.text || "", it.src || "");
})();
<?php endforeach; ?>
};
</script>
</head>
<body>
<div class="container">
<h1>Edit Bio</h1>
<?php if (!empty($saved)) echo "<p style='padding:10px;background:#d4edda;border:1px solid #a3cfbb;'>Saved</p>"; ?>
<form method="POST">
<label>Name</label>
<input type="text" name="name" value="<?= htmlspecialchars($existing['name']) ?>">
<label>Subtitle</label>
<input type="text" name="subtitle" value="<?= htmlspecialchars($existing['subtitle']) ?>">
<h3>Bio Content</h3>
<div id="content-list"></div>
<div class="control">
<div class="add-set" onclick="addItem('section')">+ Add Section</div>
<div class="add-set" onclick="addItem('quote')">+ Add Quote</div>
<div class="add-set" onclick="addItem('image')">+ Add Image</div>
</div>
<label>Footer Note</label>
<input type="text" name="footer" value="<?= htmlspecialchars($existing['footer']) ?>">
<button class="save" type="submit">Save Bio</button>
</form>
</div>
</body>
</html>