154 lines
4.4 KiB
HTML
154 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Quick Fix - All Devices</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial;
|
|
padding: 40px;
|
|
background: #f0f0f0;
|
|
}
|
|
.container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
}
|
|
.button {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
background: #4caf50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
.button:hover {
|
|
background: #45a049;
|
|
}
|
|
.status {
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
border-radius: 5px;
|
|
}
|
|
.good {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.bad {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.info {
|
|
background: #d1ecf1;
|
|
color: #0c5460;
|
|
}
|
|
#details {
|
|
margin-top: 20px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🔧 Fix All Devices - One Click</h1>
|
|
<button class="button" onclick="fixNow()">✨ FIX EVERYTHING NOW</button>
|
|
|
|
<div id="details"></div>
|
|
</div>
|
|
|
|
<script>
|
|
async function fixNow() {
|
|
const status = document.getElementById("status");
|
|
const details = document.getElementById("details");
|
|
|
|
status.className = "status info";
|
|
status.textContent = "Fixing settings...";
|
|
|
|
// Detect if desktop or mobile
|
|
const isDesktop =
|
|
window.location.hostname === "localhost" ||
|
|
window.location.hostname === "127.0.0.1";
|
|
const hostname = isDesktop ? "localhost" : window.location.hostname;
|
|
|
|
// Fix settings
|
|
const settings = {
|
|
protocol: "http",
|
|
hostname: hostname,
|
|
port: "5000",
|
|
useLocalStorage: false,
|
|
};
|
|
|
|
localStorage.setItem("api_settings", JSON.stringify(settings));
|
|
|
|
// Test connection
|
|
const testUrl = `http://${hostname}:5000/api/health`;
|
|
|
|
try {
|
|
const response = await fetch(testUrl);
|
|
const data = await response.json();
|
|
|
|
if (data.status === "ok") {
|
|
// Get counts
|
|
const songsResp = await fetch(`http://${hostname}:5000/api/songs`);
|
|
const songs = await songsResp.json();
|
|
const profilesResp = await fetch(
|
|
`http://${hostname}:5000/api/profiles`
|
|
);
|
|
const profiles = await profilesResp.json();
|
|
|
|
status.className = "status good";
|
|
status.innerHTML = `
|
|
<strong>✅ FIXED!</strong><br>
|
|
Backend connected successfully<br>
|
|
Songs: ${songs.length} | Profiles: ${profiles.length}
|
|
`;
|
|
|
|
details.innerHTML = `
|
|
<p><strong>What was fixed:</strong></p>
|
|
<ul>
|
|
<li>Local Mode turned OFF</li>
|
|
<li>Hostname set to: ${hostname}</li>
|
|
<li>Port set to: 5000</li>
|
|
<li>Connection verified</li>
|
|
</ul>
|
|
<p><strong>Next step:</strong></p>
|
|
<p>Go to <a href="http://${hostname}:3000">main app</a> and refresh (Ctrl+Shift+R)</p>
|
|
`;
|
|
} else {
|
|
throw new Error("Backend returned unexpected status");
|
|
}
|
|
} catch (e) {
|
|
status.className = "status bad";
|
|
status.innerHTML = `
|
|
<strong>❌ Connection Failed</strong><br>
|
|
${e.message}<br><br>
|
|
Make sure backend is running on port 5000
|
|
`;
|
|
|
|
details.innerHTML = `
|
|
<p><strong>To start backend:</strong></p>
|
|
<code style="display: block; background: #f5f5f5; padding: 10px; border-radius: 5px;">
|
|
cd "E:\\Documents\\Website Projects\\Church_SongLyric\\backend"<br>
|
|
.\\venv\\Scripts\\python.exe app.py
|
|
</code>
|
|
`;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|