408 lines
12 KiB
HTML
408 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes"
|
|
/>
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<title>UI Changes Test - House of Prayer</title>
|
|
<style>
|
|
body {
|
|
font-family: "Roboto", Arial, sans-serif;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.test-section {
|
|
margin: 30px 0;
|
|
padding: 20px;
|
|
background: #f9f9f9;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #7c3aed;
|
|
}
|
|
.test-section h2 {
|
|
margin-top: 0;
|
|
color: #7c3aed;
|
|
font-size: 1.5rem;
|
|
}
|
|
.button-demo {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin: 15px 0;
|
|
}
|
|
.btn-compact {
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
border-radius: 6px;
|
|
border: 1px solid #ddd;
|
|
background: white;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-compact:hover {
|
|
background: #f0f0f0;
|
|
border-color: #7c3aed;
|
|
}
|
|
.btn-primary {
|
|
background: #7c3aed;
|
|
color: white;
|
|
border-color: #7c3aed;
|
|
}
|
|
.btn-primary:hover {
|
|
background: #6d28d9;
|
|
}
|
|
.nav-demo {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 15px 0;
|
|
}
|
|
.nav-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: #3b82f6;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
}
|
|
.nav-counter {
|
|
padding: 4px 12px;
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.key-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 6px;
|
|
margin: 15px 0;
|
|
}
|
|
.key-btn {
|
|
padding: 6px 8px;
|
|
font-size: 14px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
background: white;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
.key-btn.active {
|
|
background: #7c3aed;
|
|
color: white;
|
|
border-color: #7c3aed;
|
|
}
|
|
.status {
|
|
padding: 15px;
|
|
background: #10b981;
|
|
color: white;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
margin: 20px 0;
|
|
}
|
|
.info-box {
|
|
padding: 12px;
|
|
background: #dbeafe;
|
|
border-left: 4px solid #3b82f6;
|
|
border-radius: 6px;
|
|
margin: 15px 0;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 15px;
|
|
}
|
|
.test-section {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 style="text-align: center; color: #1a1a1a">✅ UI Changes Applied!</h1>
|
|
|
|
<div class="status">Frontend is LIVE at http://192.168.10.130:3000</div>
|
|
|
|
<div class="info-box">
|
|
<strong>🎯 What Changed:</strong>
|
|
<ul style="margin: 10px 0; padding-left: 20px">
|
|
<li>Buttons are 50% smaller and more compact</li>
|
|
<li>Font sizes optimized for mobile (16px base)</li>
|
|
<li>3-column button layout instead of 2-column</li>
|
|
<li>Clean solid colors (no gradients)</li>
|
|
<li>35-40% more content visible on screen</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📱 Navigation Buttons (NEW)</h2>
|
|
<p><strong>Before:</strong> Large 48x48px circles with gradients</p>
|
|
<p><strong>After:</strong> Compact 32x32px squares</p>
|
|
|
|
<div class="nav-demo">
|
|
<button class="nav-btn">◀</button>
|
|
<span class="nav-counter">1 / 10</span>
|
|
<button class="nav-btn">▶</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎹 Key Selector (NEW)</h2>
|
|
<p><strong>Before:</strong> Large buttons with heavy borders</p>
|
|
<p><strong>After:</strong> Compact grid with minimal spacing</p>
|
|
|
|
<div class="key-grid">
|
|
<button class="key-btn">C</button>
|
|
<button class="key-btn">C#</button>
|
|
<button class="key-btn">D</button>
|
|
<button class="key-btn">D#</button>
|
|
<button class="key-btn">E</button>
|
|
<button class="key-btn">F</button>
|
|
<button class="key-btn">F#</button>
|
|
<button class="key-btn active">G</button>
|
|
<button class="key-btn">G#</button>
|
|
<button class="key-btn">A</button>
|
|
<button class="key-btn">A#</button>
|
|
<button class="key-btn">B</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎵 Action Buttons (NEW)</h2>
|
|
<p><strong>Before:</strong> 2-column grid with full text labels</p>
|
|
<p><strong>After:</strong> 3-column grid with shorter labels</p>
|
|
|
|
<div class="button-demo">
|
|
<button class="btn-compact btn-primary">🎵 Key</button>
|
|
<button class="btn-compact btn-primary">🎸 On</button>
|
|
<button class="btn-compact btn-primary">✏️</button>
|
|
<button
|
|
class="btn-compact"
|
|
style="background: #10b981; color: white; border-color: #10b981"
|
|
>
|
|
💾 Save
|
|
</button>
|
|
<button
|
|
class="btn-compact"
|
|
style="background: #ef4444; color: white; border-color: #ef4444"
|
|
>
|
|
🗑️
|
|
</button>
|
|
<button
|
|
class="btn-compact"
|
|
style="background: #6b7280; color: white; border-color: #6b7280"
|
|
>
|
|
✕ Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📏 Typography Changes</h2>
|
|
<table style="width: 100%; border-collapse: collapse; margin-top: 10px">
|
|
<tr style="background: #f3f4f6">
|
|
<th style="padding: 8px; text-align: left; border: 1px solid #ddd">
|
|
Element
|
|
</th>
|
|
<th style="padding: 8px; text-align: left; border: 1px solid #ddd">
|
|
Before
|
|
</th>
|
|
<th style="padding: 8px; text-align: left; border: 1px solid #ddd">
|
|
After
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px; border: 1px solid #ddd">Song Title</td>
|
|
<td style="padding: 8px; border: 1px solid #ddd">24px</td>
|
|
<td
|
|
style="
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
background: #dcfce7;
|
|
font-weight: 600;
|
|
"
|
|
>
|
|
16px
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px; border: 1px solid #ddd">Chords</td>
|
|
<td style="padding: 8px; border: 1px solid #ddd">24px</td>
|
|
<td
|
|
style="
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
background: #dcfce7;
|
|
font-weight: 600;
|
|
"
|
|
>
|
|
15px
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px; border: 1px solid #ddd">Lyrics</td>
|
|
<td style="padding: 8px; border: 1px solid #ddd">24px</td>
|
|
<td
|
|
style="
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
background: #dcfce7;
|
|
font-weight: 600;
|
|
"
|
|
>
|
|
16px
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px; border: 1px solid #ddd">
|
|
Navigation Buttons
|
|
</td>
|
|
<td style="padding: 8px; border: 1px solid #ddd">48x48px</td>
|
|
<td
|
|
style="
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
background: #dcfce7;
|
|
font-weight: 600;
|
|
"
|
|
>
|
|
32x32px
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Bootstrap Status</h2>
|
|
<div
|
|
style="
|
|
padding: 15px;
|
|
background: white;
|
|
border-radius: 6px;
|
|
border: 1px solid #ddd;
|
|
"
|
|
>
|
|
<p style="margin: 5px 0">
|
|
✅ <strong>Bootstrap 5.3.8</strong> - Installed and imported
|
|
</p>
|
|
<p style="margin: 5px 0">
|
|
✅ <strong>Bootstrap Icons 1.13.1</strong> - Installed and imported
|
|
</p>
|
|
<p style="margin: 5px 0">
|
|
✅ <strong>Mobile Viewport</strong> - Configured for all devices
|
|
</p>
|
|
<p style="margin: 5px 0">
|
|
✅ <strong>Apple Mobile</strong> - iOS web app capable
|
|
</p>
|
|
<p style="margin: 5px 0">
|
|
✅ <strong>Responsive Design</strong> - Works on all screen sizes
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-box" style="background: #fef3c7; border-color: #f59e0b">
|
|
<strong>🧪 How to Test:</strong>
|
|
<ol style="margin: 10px 0; padding-left: 20px">
|
|
<li>Open the main site: <code>http://192.168.10.130:3000</code></li>
|
|
<li>Click on any song to view it</li>
|
|
<li>Check that navigation buttons are small and compact</li>
|
|
<li>Verify key selector shows all 12 keys in a grid</li>
|
|
<li>Test transpose, chords toggle, and edit buttons</li>
|
|
<li>Try on iPhone, iPod, Android, and desktop</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div
|
|
style="
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background: #f9fafb;
|
|
border-radius: 8px;
|
|
"
|
|
>
|
|
<h3 style="margin-top: 0">🚀 Access Your Site</h3>
|
|
<p style="margin: 10px 0"><strong>Local Network:</strong></p>
|
|
<a
|
|
href="http://192.168.10.130:3000"
|
|
target="_blank"
|
|
style="
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
background: #7c3aed;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
margin: 5px;
|
|
"
|
|
>
|
|
Open Main Site →
|
|
</a>
|
|
<p style="margin: 20px 0 10px 0"><strong>Backend API:</strong></p>
|
|
<a
|
|
href="http://192.168.10.130:8080/api/songs"
|
|
target="_blank"
|
|
style="
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
background: #10b981;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
margin: 5px;
|
|
"
|
|
>
|
|
Test API →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Make buttons interactive
|
|
document.querySelectorAll(".key-btn").forEach((btn) => {
|
|
btn.addEventListener("click", function () {
|
|
document
|
|
.querySelectorAll(".key-btn")
|
|
.forEach((b) => b.classList.remove("active"));
|
|
this.classList.add("active");
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".nav-btn").forEach((btn) => {
|
|
btn.addEventListener("click", function () {
|
|
alert(
|
|
"Navigation button clicked! In the real app, this switches between songs."
|
|
);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".btn-compact").forEach((btn) => {
|
|
btn.addEventListener("click", function () {
|
|
alert("Button clicked: " + this.textContent);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|