325 lines
10 KiB
HTML
325 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Contact Page Structured Fields Test</title>
|
||
|
|
<link
|
||
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||
|
|
/>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 40px;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
.test-container {
|
||
|
|
max-width: 1400px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.test-card {
|
||
|
|
background: white;
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 30px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
.success-badge {
|
||
|
|
display: inline-block;
|
||
|
|
background: #d4edda;
|
||
|
|
color: #155724;
|
||
|
|
padding: 8px 16px;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin: 5px;
|
||
|
|
}
|
||
|
|
.step {
|
||
|
|
background: #f8f9fa;
|
||
|
|
border-left: 4px solid #667eea;
|
||
|
|
padding: 15px;
|
||
|
|
margin: 10px 0;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.step strong {
|
||
|
|
color: #667eea;
|
||
|
|
}
|
||
|
|
.split-view {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 20px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
@media (max-width: 968px) {
|
||
|
|
.split-view {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.preview-frame {
|
||
|
|
border: 3px solid #667eea;
|
||
|
|
border-radius: 8px;
|
||
|
|
min-height: 600px;
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
h1,
|
||
|
|
h2,
|
||
|
|
h3 {
|
||
|
|
color: #2d3436;
|
||
|
|
}
|
||
|
|
.instruction-badge {
|
||
|
|
background: #fff3cd;
|
||
|
|
color: #856404;
|
||
|
|
padding: 12px 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
border-left: 4px solid #ffc107;
|
||
|
|
margin: 15px 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="test-container">
|
||
|
|
<div class="test-card text-center">
|
||
|
|
<h1 class="mb-3">
|
||
|
|
<i class="bi bi-check-circle-fill text-success"></i>
|
||
|
|
Contact Page Structured Fields
|
||
|
|
</h1>
|
||
|
|
<p class="lead">
|
||
|
|
Test the new structured editing system that prevents layout breaking
|
||
|
|
</p>
|
||
|
|
<div class="mt-3">
|
||
|
|
<span class="success-badge">✓ Layout Protected</span>
|
||
|
|
<span class="success-badge">✓ Data Separated</span>
|
||
|
|
<span class="success-badge">✓ User-Friendly</span>
|
||
|
|
<span class="success-badge">✓ No Errors</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-card">
|
||
|
|
<h2><i class="bi bi-list-check"></i> Testing Steps</h2>
|
||
|
|
<p class="text-muted mb-4">
|
||
|
|
Follow these steps to see the structured fields in action
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="step">
|
||
|
|
<strong>Step 1:</strong> Open the admin panel in a new tab →
|
||
|
|
<a
|
||
|
|
href="/admin/pages.html"
|
||
|
|
target="_blank"
|
||
|
|
class="btn btn-sm btn-primary ms-2"
|
||
|
|
>
|
||
|
|
<i class="bi bi-box-arrow-up-right"></i> Open Admin Panel
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step">
|
||
|
|
<strong>Step 2:</strong> Find the "Contact" page in the list and click
|
||
|
|
the <strong>Edit</strong> button (pencil icon)
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step">
|
||
|
|
<strong>Step 3:</strong> Notice you DON'T see a Quill rich text
|
||
|
|
editor. Instead, you see:
|
||
|
|
<ul class="mt-2">
|
||
|
|
<li>
|
||
|
|
<strong>Header Section Card</strong> - Title and subtitle fields
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<strong>Contact Information Card</strong> - Phone, email, address
|
||
|
|
fields
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<strong>Business Hours Card</strong> - Multiple time slot fields
|
||
|
|
with add/remove buttons
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step">
|
||
|
|
<strong>Step 4:</strong> Make a change:
|
||
|
|
<ul class="mt-2">
|
||
|
|
<li>Change phone number to <code>+1 (555) 999-8888</code></li>
|
||
|
|
<li>
|
||
|
|
Or update the header title to <code>Contact Sky Art Shop</code>
|
||
|
|
</li>
|
||
|
|
<li>Or add a new business hour slot</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step">
|
||
|
|
<strong>Step 5:</strong> Click <strong>"Save Page"</strong> button at
|
||
|
|
the bottom of the modal
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step">
|
||
|
|
<strong>Step 6:</strong> Return to this page and click the button
|
||
|
|
below to refresh the preview:
|
||
|
|
<button
|
||
|
|
class="btn btn-sm btn-success mt-2"
|
||
|
|
onclick="refreshPreview()"
|
||
|
|
>
|
||
|
|
<i class="bi bi-arrow-clockwise"></i> Refresh Contact Page Preview
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="instruction-badge">
|
||
|
|
<i class="bi bi-lightbulb-fill"></i>
|
||
|
|
<strong>What to Expect:</strong> The contact page will show your
|
||
|
|
updated data but the beautiful gradient layout, icons, and styling
|
||
|
|
will remain perfectly intact!
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-card">
|
||
|
|
<h2><i class="bi bi-split"></i> Live Comparison</h2>
|
||
|
|
<p class="text-muted mb-3">
|
||
|
|
Compare admin interface with frontend result
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="split-view">
|
||
|
|
<div>
|
||
|
|
<h4 class="mb-3"><i class="bi bi-gear"></i> Admin Panel</h4>
|
||
|
|
<iframe
|
||
|
|
id="adminFrame"
|
||
|
|
src="/admin/pages.html"
|
||
|
|
class="preview-frame w-100"
|
||
|
|
title="Admin Panel"
|
||
|
|
>
|
||
|
|
</iframe>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="mb-3">
|
||
|
|
<i class="bi bi-eye"></i> Frontend Contact Page
|
||
|
|
<button
|
||
|
|
class="btn btn-sm btn-outline-primary"
|
||
|
|
onclick="refreshPreview()"
|
||
|
|
>
|
||
|
|
<i class="bi bi-arrow-clockwise"></i>
|
||
|
|
</button>
|
||
|
|
</h4>
|
||
|
|
<iframe
|
||
|
|
id="contactFrame"
|
||
|
|
src="/contact.html"
|
||
|
|
class="preview-frame w-100"
|
||
|
|
title="Contact Page"
|
||
|
|
>
|
||
|
|
</iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-card">
|
||
|
|
<h2><i class="bi bi-shield-check"></i> What's Different?</h2>
|
||
|
|
|
||
|
|
<div class="row mt-4">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="alert alert-danger">
|
||
|
|
<h5><i class="bi bi-x-circle"></i> Before (Problem)</h5>
|
||
|
|
<ul>
|
||
|
|
<li>Single rich text editor for entire page</li>
|
||
|
|
<li>User could type anything (e.g., "5")</li>
|
||
|
|
<li>Would replace entire beautiful layout</li>
|
||
|
|
<li>Lost gradient cards, icons, styling</li>
|
||
|
|
<li>Required HTML knowledge to maintain</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="alert alert-success">
|
||
|
|
<h5><i class="bi bi-check-circle"></i> After (Solution)</h5>
|
||
|
|
<ul>
|
||
|
|
<li>Structured input fields for each section</li>
|
||
|
|
<li>Can only enter data, not HTML</li>
|
||
|
|
<li>JavaScript generates formatted HTML</li>
|
||
|
|
<li>Layout template is protected</li>
|
||
|
|
<li>No HTML knowledge needed</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-card">
|
||
|
|
<h2><i class="bi bi-database"></i> Technical Details</h2>
|
||
|
|
|
||
|
|
<h4 class="mt-4">Database Structure</h4>
|
||
|
|
<pre class="bg-light p-3 rounded"><code>{
|
||
|
|
"header": {
|
||
|
|
"title": "Our Contact Information",
|
||
|
|
"subtitle": "Reach out to us..."
|
||
|
|
},
|
||
|
|
"contactInfo": {
|
||
|
|
"phone": "+1 (555) 123-4567",
|
||
|
|
"email": "contact@skyartshop.com",
|
||
|
|
"address": "123 Art Street..."
|
||
|
|
},
|
||
|
|
"businessHours": [
|
||
|
|
{ "days": "Monday - Friday", "hours": "9:00 AM - 6:00 PM" },
|
||
|
|
{ "days": "Saturday", "hours": "10:00 AM - 4:00 PM" }
|
||
|
|
]
|
||
|
|
}</code></pre>
|
||
|
|
|
||
|
|
<h4 class="mt-4">How It Works</h4>
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
<strong>Admin edits fields</strong> → Structured data collected
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<strong>JavaScript function</strong> → Generates formatted HTML from
|
||
|
|
template
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<strong>Save to database</strong> → Stores both structured data
|
||
|
|
(JSON) and generated HTML
|
||
|
|
</li>
|
||
|
|
<li><strong>Frontend displays</strong> → Shows the generated HTML</li>
|
||
|
|
<li><strong>Result</strong> → Data changes, layout stays perfect!</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<div class="alert alert-info mt-3">
|
||
|
|
<i class="bi bi-info-circle-fill"></i>
|
||
|
|
<strong>Note:</strong> Other pages (About, Privacy) still use the rich
|
||
|
|
text editor because they don't have a fixed layout requirement. The
|
||
|
|
system automatically detects which editor to show.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-card text-center">
|
||
|
|
<h3 class="mb-3">Quick Links</h3>
|
||
|
|
<a href="/admin/pages.html" target="_blank" class="btn btn-primary m-2">
|
||
|
|
<i class="bi bi-gear"></i> Admin Panel
|
||
|
|
</a>
|
||
|
|
<a href="/contact.html" target="_blank" class="btn btn-success m-2">
|
||
|
|
<i class="bi bi-envelope"></i> Contact Page
|
||
|
|
</a>
|
||
|
|
<a href="/test-data-sync.html" target="_blank" class="btn btn-info m-2">
|
||
|
|
<i class="bi bi-arrow-repeat"></i> Data Sync Test
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function refreshPreview() {
|
||
|
|
const contactFrame = document.getElementById("contactFrame");
|
||
|
|
contactFrame.src = contactFrame.src; // Reload iframe
|
||
|
|
|
||
|
|
// Show feedback
|
||
|
|
const btn = event.target.closest("button");
|
||
|
|
const originalHTML = btn.innerHTML;
|
||
|
|
btn.innerHTML = '<i class="bi bi-check-circle"></i> Refreshed!';
|
||
|
|
btn.classList.remove("btn-outline-primary", "btn-success");
|
||
|
|
btn.classList.add("btn-success");
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
btn.innerHTML = originalHTML;
|
||
|
|
btn.classList.remove("btn-success");
|
||
|
|
btn.classList.add("btn-outline-primary");
|
||
|
|
}, 2000);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|