Spaces:
Sleeping
Sleeping
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Upload Database</title> | |
<style> | |
/* Overall dark theme background */ | |
body { | |
background-color: #1a1a2e; | |
color: #eaeaea; | |
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
margin: 0; | |
padding: 0; | |
} | |
.container { | |
max-width: 800px; | |
margin: 0 auto; | |
padding: 20px; | |
} | |
header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-bottom: 20px; | |
} | |
h1 { | |
margin-bottom: 20px; | |
color: #eaeaea; | |
} | |
.upload-btn, .back-btn { | |
background-color: #007bff; | |
color: #fff; | |
padding: 8px 12px; | |
text-decoration: none; | |
border-radius: 5px; | |
} | |
.upload-btn:hover, .back-btn:hover { | |
background-color: #0056b3; | |
} | |
/* Form container styling */ | |
.form-container { | |
background-color: #16213e; | |
border-radius: 8px; | |
padding: 20px; | |
} | |
.form-container h2 { | |
margin-top: 0; | |
} | |
/* Form elements styling */ | |
.form-group { | |
margin-bottom: 15px; | |
} | |
.form-group label { | |
display: block; | |
margin-bottom: 5px; | |
} | |
.form-group input[type="file"] { | |
display: block; | |
padding: 8px; | |
border-radius: 5px; | |
border: 1px solid #ccc; | |
width: 100%; | |
background-color: #eaeaea; | |
color: #333; | |
} | |
.form-group button { | |
background-color: #007bff; | |
color: #fff; | |
padding: 10px 20px; | |
border: none; | |
border-radius: 5px; | |
cursor: pointer; | |
font-size: 1rem; | |
} | |
.form-group button:hover { | |
background-color: #0056b3; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<header> | |
<h1>Upload Database</h1> | |
<!-- Optional: Back link to main chat page --> | |
<a href="/" class="back-btn">Back to Chat</a> | |
</header> | |
<div class="form-container"> | |
<h2>Upload a SQLite DB file</h2> | |
<form method="POST" action="/upload" enctype="multipart/form-data"> | |
<div class="form-group"> | |
<label for="dbFile">Choose file:</label> | |
<input type="file" id="dbFile" name="file" accept=".db" required> | |
</div> | |
<div class="form-group"> | |
<button type="submit">Upload</button> | |
</div> | |
</form> | |
</div> | |
</div> | |
</body> | |
</html> | |