dubey/spectra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

More styling

Browse Source
This commit is contained in:
Tanishq Dubey 2024-10-20 15:53:35 -04:00
parent f8042571b2
commit fee6f755a3
5 changed files with 208 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app.py
View File

@ -74,7 +74,7 @@ scheduler.add_job(generate_all_thumbnails, 'date', run_date=datetime.now()) # R
@app.route('/') @app.route('/')
def index(): def index():
return render_template('index.html') return render_template('index.html', accent_color=config['appearance']['accent_color'])
@app.route('/api/images') @app.route('/api/images')
def get_images(): def get_images():
@ -116,7 +116,7 @@ def admin():
photos = db_session.query(Photo).order_by(Photo.date_taken.desc()).all() photos = db_session.query(Photo).order_by(Photo.date_taken.desc()).all()
db_session.close() db_session.close()
return render_template('admin.html', photos=photos) return render_template('admin.html', photos=photos, accent_color=config['appearance']['accent_color'])
@app.route('/admin/login', methods=['GET', 'POST']) @app.route('/admin/login', methods=['GET', 'POST'])
def admin_login(): def admin_login():
@ -126,7 +126,7 @@ def admin_login():
return redirect(url_for('admin')) return redirect(url_for('admin'))
else: else:
flash('Invalid password') flash('Invalid password')
return render_template('admin_login.html') return render_template('admin_login.html', accent_color=config['appearance']['accent_color'])
@app.route('/admin/upload', methods=['POST']) @app.route('/admin/upload', methods=['POST'])
def admin_upload(): def admin_upload():
@ -183,7 +183,7 @@ def admin_upload():
orientation=int(exif.get('Orientation', 1)), orientation=int(exif.get('Orientation', 1)),
width=width, width=width,
height=height, height=height,
highlight_color=get_highlight_color(THUMBNAIL_FOLDER + f"{os.path.splitext(filename)[0]}/256_{filename}") highlight_color=get_highlight_color(THUMBNAIL_FOLDER + f"/{os.path.splitext(filename)[0]}/256_{filename}")
) )
db_session.add(new_photo) db_session.add(new_photo)
db_session.commit() db_session.commit()

3
config.py
View File

@ -14,6 +14,9 @@ def load_or_create_config():
'directories': { 'directories': {
'upload': 'uploads', 'upload': 'uploads',
'thumbnail': 'thumbnails' 'thumbnail': 'thumbnails'
},
'appearance': {
'accent_color': '{{ accent_color }}'
} }
} }
with open(CONFIG_FILE, 'w') as f: with open(CONFIG_FILE, 'w') as f:

166
templates/admin.html
View File

@ -3,56 +3,146 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Interface</title> <title>Admin Interface - Tanishq Dubey Photography</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
<style> <style>
body {
margin: 0;
padding: 0;
font-family: 'Noto Sans Mono', monospace;
background-color: #f0f0f0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
h1 {
color: {{ accent_color }};
margin-bottom: 1.5rem;
}
.upload-form {
background-color: #ffffff;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
input[type="file"] {
margin-right: 1rem;
}
input[type="submit"] {
background-color: {{ accent_color }};
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-family: inherit;
font-weight: bold;
}
input[type="submit"]:hover {
background-color: {{ accent_color }}e0; /* Slightly darker version of the accent color */
}
table { table {
border-collapse: collapse;
width: 100%; width: 100%;
border-collapse: collapse;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
th, td { th, td {
border: 1px solid #ddd; padding: 0.75rem;
padding: 8px;
text-align: left; text-align: left;
border-bottom: 1px solid #e0e0e0;
} }
th { th {
background-color: #f2f2f2; background-color: #f5f5f5;
font-weight: bold;
color: #333;
}
tr:hover {
background-color: #f9f9f9;
}
.thumbnail {
max-width: 100px;
max-height: 100px;
object-fit: cover;
}
.flash-messages {
margin-bottom: 1rem;
}
.flash-messages p {
background-color: #4CAF50;
color: white;
padding: 0.5rem;
border-radius: 4px;
}
.logout {
text-align: right;
margin-bottom: 1rem;
}
.logout a {
color: {{ accent_color }};
text-decoration: none;
}
.logout a:hover {
text-decoration: underline;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Admin Interface</h1> <div class="container">
{% with messages = get_flashed_messages() %} <div class="logout">
{% if messages %} <a href="{{ url_for('admin_logout') }}">Logout</a>
<ul> </div>
{% for message in messages %} <h1>Admin Interface</h1>
<li>{{ message }}</li> {% with messages = get_flashed_messages() %}
{% if messages %}
<div class="flash-messages">
{% for message in messages %}
<p>{{ message }}</p>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<div class="upload-form">
<h2>Upload New Image</h2>
<form action="{{ url_for('admin_upload') }}" method="POST" enctype="multipart/form-data">
<input type="file" name="file" accept=".jpg,.jpeg,.png,.gif" required>
<input type="submit" value="Upload">
</form>
</div>
<h2>Uploaded Images</h2>
<table>
<thead>
<tr>
<th>Thumbnail</th>
<th>Filename</th>
<th>Date Taken</th>
<th>Focal Length</th>
<th>Aperture</th>
<th>Shutter Speed</th>
<th>ISO</th>
<th>Dimensions</th>
</tr>
</thead>
<tbody>
{% for photo in photos %}
<tr>
<td><img src="{{ url_for('serve_thumbnail', filename=photo.thumbnail_filename) }}" alt="Thumbnail" class="thumbnail"></td>
<td>{{ photo.input_filename }}</td>
<td>{{ photo.date_taken.strftime('%Y-%m-%d %H:%M:%S') }}</td>
<td>{{ photo.focal_length }}</td>
<td>{{ photo.aperture }}</td>
<td>{{ photo.shutter_speed }}</td>
<td>{{ photo.iso }}</td>
<td>{{ photo.width }}x{{ photo.height }}</td>
</tr>
{% endfor %} {% endfor %}
</ul> </tbody>
{% endif %} </table>
{% endwith %} </div>
<h2>Upload New Image</h2>
<form action="{{ url_for('admin_upload') }}" method="POST" enctype="multipart/form-data">
<input type="file" name="file" accept=".jpg,.jpeg,.png,.gif" required>
<input type="submit" value="Upload">
</form>
<h2>Uploaded Images</h2>
<table>
<tr>
<th>ID</th>
<th>Thumbnail</th>
<th>Filename</th>
<th>Date Taken</th>
<th>Technical Info</th>
</tr>
{% for photo in photos %}
<tr>
<td>{{ photo.id }}</td>
<td><img src="{{ url_for('static', filename='thumbnails/' + photo.thumbnail_filename) }}" alt="Thumbnail" width="100"></td>
<td>{{ photo.input_filename }}</td>
<td>{{ photo.date_taken.strftime('%Y-%m-%d %H:%M:%S') }}</td>
<td>{{ photo.focal_length }}mm f/{{ photo.aperture }} {{ photo.shutter_speed }}s ISO{{ photo.iso }}</td>
</tr>
{% endfor %}
</table>
</body> </body>
</html> </html>

83
templates/admin_login.html
View File

@ -3,22 +3,75 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login</title> <title>Admin Login - Tanishq Dubey Photography</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Noto Sans Mono', monospace;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: #ffffff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: {{ accent_color }};
margin-bottom: 1.5rem;
}
input[type="password"] {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
}
input[type="submit"] {
background-color: {{ accent_color }};
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-family: inherit;
font-weight: bold;
}
input[type="submit"]:hover {
background-color: #e55c00;
}
.flash-messages {
margin-bottom: 1rem;
color: #ff0000;
}
</style>
</head> </head>
<body> <body>
<h1>Admin Login</h1> <div class="login-container">
{% with messages = get_flashed_messages() %} <h1>Admin Login</h1>
{% if messages %} {% with messages = get_flashed_messages() %}
<ul> {% if messages %}
{% for message in messages %} <div class="flash-messages">
<li>{{ message }}</li> {% for message in messages %}
{% endfor %} <p>{{ message }}</p>
</ul> {% endfor %}
{% endif %} </div>
{% endwith %} {% endif %}
<form method="POST"> {% endwith %}
<input type="password" name="password" required> <form method="POST">
<input type="submit" value="Login"> <input type="password" name="password" required placeholder="Enter password">
</form> <input type="submit" value="Login">
</form>
</div>
</body> </body>
</html> </html>

16
templates/index.html
View File

@ -55,13 +55,13 @@
position: absolute; position: absolute;
bottom: 4rem; bottom: 4rem;
font-size: 1rem; font-size: 1rem;
padding-right: 10px; right: 1rem;
color: #ff6600; text-align: right;
padding: 2px 5px; color: #ec5a11;
font-family: "Noto Sans Mono", monospace; font-family: "Noto Sans Mono", monospace;
font-size: 0.7rem; font-size: 0.7rem;
opacity: 0; opacity: 0;
text-shadow: 0 0 2px #ff6600; text-shadow: 0 0 2px #ec5a11;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
@ -121,7 +121,7 @@
} }
.sidebar-nav a { .sidebar-nav a {
text-decoration: none; text-decoration: none;
color: #ff6600; color: {{ accent_color }};
} }
@ -149,12 +149,6 @@
height: auto; height: auto;
} }
} }
@media (min-width: 769px) and (max-width: 1024px) {
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
</style> </style>
</head> </head>
<body> <body>