95 lines
3.2 KiB
HTML
95 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
body, html {
|
|
margin: 0; padding: 0; height: 100%;
|
|
display: flex; justify-content: center; align-items: center;
|
|
background-color: #f0f2f5; font-family: sans-serif;
|
|
}
|
|
|
|
/* This wrapper keeps the panel and the message stacked vertically */
|
|
.main-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.panel {
|
|
background: white; width: 100%; max-width: 900px;
|
|
aspect-ratio: 16 / 9; padding: 20px; box-sizing: border-box;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 8px;
|
|
display: flex; flex-direction: column; justify-content: center;
|
|
}
|
|
|
|
.header { text-align: center; margin-bottom: 20px; }
|
|
.input-group { margin-bottom: 15px; display: flex; flex-direction: column; }
|
|
label { font-size: 0.85rem; margin-bottom: 5px; font-weight: bold; color: #555; }
|
|
input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
|
|
|
|
/* Style for the success message */
|
|
#responseMessage {
|
|
margin-top: 20px;
|
|
font-weight: bold;
|
|
color: #27ae60;
|
|
min-height: 1.2em; /* Prevents layout jump when text appears */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="main-container">
|
|
<form id="myForm" class="panel">
|
|
<div class="header">
|
|
<h1>Link Shortener</h1>
|
|
<p>Insert a link and shorten it for sharing!</p>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="input1">Original Link</label>
|
|
<input type="text" id="input1" name="first_name" required>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="input2">New page (www.wholeworldcoding.com/p/)</label>
|
|
<input type="text" id="input2" name="second_name" required>
|
|
</div>
|
|
|
|
<button type="submit" style="margin-top: 10px; padding: 10px; cursor: pointer; background: #3498db; color: white; border: none; border-radius: 4px;">
|
|
Generate Link!
|
|
</button>
|
|
</form>
|
|
|
|
<div id="responseMessage"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const form = document.getElementById('myForm');
|
|
const responseDiv = document.getElementById('responseMessage');
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault(); // Stop page reload
|
|
|
|
const formData = new FormData(form);
|
|
|
|
fetch('/submit', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
// Display the Python response in the div
|
|
responseDiv.innerText = data;
|
|
form.reset(); // Clear the inputs
|
|
})
|
|
.catch(error => {
|
|
responseDiv.innerText = "Error communicating with server.";
|
|
console.error(error);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |