Anorak_1
/
Scrapur
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upload files to "templates"

main
Anorak_1 2024-01-05 18:21:26 +00:00
parent 7ec7ba0cb1
commit 19d80efbac
1 changed files with 137 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
templates/index.html 100644
View File

@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Film Search</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #121212;
color: #fff;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
h1 {
color: #04AA6D; /* Light blue for h1 */
margin-top: 20px;
}
h2 {
color: #858585;
}
p {
color: #adadad;
}
form {
margin-top: 20px;
}
label {
font-weight: bold;
margin-right: 10px;
color: #04AA6D;
font-size: 20px;
}
input[type="text"] {
padding: 8px;
font-size: 16px;
background-color: #333;
color: #858585;
border: none;
border-radius: 4px;
}
button {
padding: 8px 16px;
font-size: 16px;
font-weight: bold; /* Make the submit button text bold */
background-color: #04AA6D;
color: #333333;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #06cf85;
}
.error-message {
color: red;
margin-top: 20px;
}
.thumbnail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
margin-top: 20px;
}
.thumbnail-link {
text-decoration: none;
color: #fff;
transition: transform 0.2s ease-in-out;
display: block;
border-radius: 8px;
overflow: hidden; /* Ensure rounded corners are applied */
background-color: #333; /* Background color for the thumbnail container */
border: 3px solid #444; /* Border color */
width: 350px; /* Set maximum width for each entry */
margin: 0 auto; /* Center the entry within the grid */
}
.thumbnail-link:hover {
transform: scale(1.05);
text-decoration: none;
border-color: #04AA6D; /* Change border color on hover */
}
.thumbnail {
max-width: 100%;
height: auto;
cursor: pointer;
border-radius: 8px;
}
@media (min-width: 600px) {
.thumbnail-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
</head>
<body>
<h1>Film Search</h1>
<form id="searchForm" action="/search" method="get"> <!-- Use 'get' method to add search text to URL -->
<label for="search_query">Search:</label>
<input type="text" id="search_query" name="search_query" required value="{{ query }}">
<button type="submit">Submit</button>
</form>
{% if results == "OOPS" %}
<p class="error-message">Couldn't find the film. Please try again.</p>
{% elif results %}
<h2>Search Results for "{{ query }}":</h2>
<div class="thumbnail-grid">
{% for result in results %}
<div>
<a class="thumbnail-link" href="{{ url_for('video', href=result.href|urlencode) }}">
<img class="thumbnail" src="{{ result.thumbnail }}" alt="{{ result.title }}">
<p>{{ result.title }}</p>
</a>
</div>
{% endfor %}
</div>
{% endif %}
</body>
</html>