You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
6.1 KiB
139 lines
6.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Flask App</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
|
|
</head>
|
|
<body class="bg-light">
|
|
<!-- <div class="container py-5">
|
|
<div id="signup" class="mb-5">
|
|
<h2>Signup</h2>
|
|
<form id="signup-form">
|
|
<div class="mb-3">
|
|
<label for="signup-username" class="form-label">Username:</label>
|
|
<input type="text" id="signup-username" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="signup-password" class="form-label">Password:</label>
|
|
<input type="password" id="signup-password" class="form-control" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-dark">Signup</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="login" class="mb-5">
|
|
<h2>Login</h2>
|
|
<form id="login-form">
|
|
<div class="mb-3">
|
|
<label for="login-username" class="form-label">Username:</label>
|
|
<input type="text" id="login-username" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="login-password" class="form-label">Password:</label>
|
|
<input type="password" id="login-password" class="form-control" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-dark">Login</button>
|
|
</form>
|
|
</div> -->
|
|
|
|
<div id="main-form-container" style="display:block">
|
|
<h2>API Request</h2>
|
|
<form id="main-form">
|
|
<div class="mb-3">
|
|
<label for="image" class="form-label">Image:</label>
|
|
<input type="file" id="image" class="form-control" accept="image/*" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="text" class="form-label">Text:</label>
|
|
<input type="text" id="text" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="blocks" class="form-label">Blocks (comma-separated):</label>
|
|
<input type="text" id="blocks" class="form-control" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-dark">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// async function signup(username, password) {
|
|
// const response = await fetch("http://localhost:5000/signup", {
|
|
// method: "POST",
|
|
// headers: {
|
|
// "Content-Type": "application/x-www-form-urlencoded",
|
|
// },
|
|
// body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`,
|
|
// mode: "cors", // Adding this line to explicitly enable CORS
|
|
// });
|
|
// return response;
|
|
// }
|
|
|
|
// async function login(username, password) {
|
|
// const response = await fetch("http://localhost:5000/login", {
|
|
// method: "POST",
|
|
// headers: {
|
|
// "Content-Type": "application/x-www-form-urlencoded",
|
|
// },
|
|
// body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`,
|
|
// credentials: "include",
|
|
// mode: "cors", // Adding this line to explicitly enable CORS
|
|
// });
|
|
// return response;
|
|
// }
|
|
|
|
// // Signup form
|
|
// document.getElementById("signup-form").addEventListener("submit", async (event) => {
|
|
// event.preventDefault();
|
|
// const username = document.getElementById("signup-username").value;
|
|
// const password = document.getElementById("signup-password").value;
|
|
// await signup(username, password);
|
|
// alert("Signup successful!");
|
|
// });
|
|
|
|
// // Login form
|
|
// document.getElementById("login-form").addEventListener("submit", async (event) => {
|
|
// event.preventDefault();
|
|
// const username = document.getElementById("login-username").value;
|
|
// const password = document.getElementById("login-password").value;
|
|
// const response = await login(username, password);
|
|
// if (response.ok) {
|
|
// alert("Login successful!");
|
|
// document.getElementById("signup").style.display = "none";
|
|
// document.getElementById("login").style.display = "none";
|
|
// document.getElementById("main-form-container").style.display = "block";
|
|
// } else {
|
|
// alert("Login failed. Please check your credentials and try again.");
|
|
// }
|
|
// });
|
|
|
|
// Main form
|
|
document.getElementById("main-form").addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
const imageFile = document.getElementById("image").files[0];
|
|
const text = document.getElementById("text").value;
|
|
const blocks = document.getElementById("blocks").value.split(",").map(block => block.trim());
|
|
|
|
const formData = new FormData();
|
|
formData.append("image", imageFile);
|
|
formData.append("text", text);
|
|
blocks.forEach(block => formData.append("blocks", block));
|
|
|
|
const response = await fetch("http://localhost:5000/api", {
|
|
method: "POST",
|
|
body: formData,
|
|
credentials: "include",
|
|
});
|
|
|
|
if (response.ok) {
|
|
alert("Request succeeded.");
|
|
} else {
|
|
alert("Request failed.");
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|