Skip to content
Snippets Groups Projects
Commit 62ee48b9 authored by tmohale's avatar tmohale
Browse files

Changing look of the web app

parent 0dde83de
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Code/static/css/style.css
+ 60
− 18
View file @ 62ee48b9
/* style.css */
/* Apply a background color and some padding to the body */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 20px;
background-color: #f4f4f9; /* Light grey background */
color: #333; /* Dark grey text for better readability */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full viewport height */
}
/* Center the content and give it some spacing */
.container {
text-align: center;
padding: 20px;
background: #fff; /* White background for the container */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
max-width: 800px; /* Maximum width */
width: 100%; /* Full width */
}
/* Style for headings */
h1, h2 {
color: #007bff; /* Primary blue color */
margin-bottom: 20px;
}
/* Style for forms and buttons */
form {
margin-bottom: 20px;
}
input[type="text"], input[type="number"], button {
input[type="text"], input[type="number"] {
padding: 10px;
margin-top: 8px;
margin-bottom: 8px;
border: 1px solid #ccc;
border-radius: 4px;
border: 1px solid #ddd; /* Light border */
border-radius: 4px; /* Rounded corners */
width: calc(100% - 22px); /* Full width with padding */
box-sizing: border-box; /* Include padding in width calculation */
margin-bottom: 10px;
}
button {
background-color: #4CAF50; /* Green */
color: white;
background-color: #007bff; /* Primary blue color */
color: #fff; /* White text */
border: none;
cursor: pointer;
padding: 10px 20px;
border-radius: 4px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
form {
margin-bottom: 20px;
background-color: #0056b3; /* Darker blue on hover */
}
/* Style for images */
img {
max-width: 100%;
height: auto;
display: block;
margin-top: 20px;
border-radius: 4px; /* Rounded corners for images */
}
/* Add some margin to links */
a {
color: #007bff;
text-decoration: none;
font-size: 16px;
margin: 10px 0;
display: inline-block;
}
a:hover {
text-decoration: underline;
}
Code/templates/index.html
+ 21
− 19
View file @ 62ee48b9
......@@ -17,25 +17,27 @@
</script>
</head>
<body>
<h1>Welcome to the FloraGuard Camera App</h1>
<form method="post" action="/">
<label for="path">Save Path:</label>
<input type="text" id="path" name="path" value="{{ path }}">
<div class="container">
<h1>Welcome to the FloraGuard Camera App</h1>
<form method="post" action="/">
<label for="path">Save Path:</label>
<input type="text" id="path" name="path" value="{{ path }}">
<br>
<label for="frequency">Capture Frequency (seconds):</label>
<input type="number" id="frequency" name="frequency" value="{{ frequency }}">
<br>
<button type="submit">Save Settings</button>
</form>
<br>
<label for="frequency">Capture Frequency (seconds):</label>
<input type="number" id="frequency" name="frequency" value="{{ frequency }}">
<br>
<button type="submit">Save Settings</button>
</form>
<br>
<a href="/start-capture">Start Continuous Capture</a>
{% if image_file %}
<div>
<h2>Most Recent Image:</h2>
<img id="latestImage" src="{{ url_for('static', filename='images/' + image_file) }}" alt="Most recent captured image" style="max-width: 100%;">
</div>
{% else %}
<p>No images captured yet.</p>
{% endif %}
<a href="/start-capture">Start Continuous Capture</a>
{% if image_file %}
<div>
<h2>Most Recent Image:</h2>
<img id="latestImage" src="{{ url_for('static', filename='images/' + image_file) }}" alt="Most recent captured image">
</div>
{% else %}
<p>No images captured yet.</p>
{% endif %}
</div>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment