5 files changed, 190 insertions, 0 deletions
diff --git a/assets/static/css/gallery.css b/assets/static/css/gallery.css
new file mode 100644
index 0000000..c72dd80
--- /dev/null
+++ b/assets/static/css/gallery.css
@@ -0,0 +1,85 @@
+* {
+	box-sizing: border-box;
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	min-height: 100vh;
+	background-color: #faf6e5;
+	font-family: Helvetica, Verdana, sans-serif;
+}
+
+.header-container,
+.gallery-container {
+	width: 90vw;
+	height: auto;
+	margin: 0 auto;
+	padding: 1em;
+}
+
+.album-container {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.album-container a {
+	text-decoration: none;
+	flex-grow: 1;
+	height: 150px;
+}
+
+.album-container img {
+	max-height: 100%;
+	min-width: 100%;
+	object-fit: cover;
+}
+
+.album-container::after {
+	content: "";
+	flex-grow: 10;
+}
+
+.image-container {
+	text-align: center;
+	background-color: #000;
+}
+
+.image-container img {
+	display: inline-block;
+	max-width: 100vw;
+	max-height: 85vh;
+}
+
+.control-btn {
+	display: inline-block;
+	text-decoration: none;
+	padding: 0.5em;
+	color: #fff !important;
+}
+
+.control-btn:hover {
+	text-decoration: none;
+	background-color: #333;
+	color: #fff;
+}
+
+.control-btn.hidden {
+	visibility: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+	html, body {
+		background-color: #151517;
+		color: #fcf8e2;
+	}
+
+	a {
+		color: #3f6e90;
+	}
+
+	a:visited {
+		color: #9c6992;
+	}
+}
diff --git a/assets/templates/album.html b/assets/templates/album.html
new file mode 100644
index 0000000..95d9935
--- /dev/null
+++ b/assets/templates/album.html
@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="header-container">
+	<h1>
+	<a href="{{ index }}/#{{ album.year }}">{{ album.year }}</a> 
+	{% if album.title %}
+	{{ album.title }} 
+	{% else %}
+	Untitled 
+	{% endif %}
+	</h1>
+	<p>from <a href="{{ index }}/">{{ title }}</a> </p>
+</div>
+<div class="gallery-container">
+	<p>{{ album.desc }}</p>
+	<div class="album-container">
+		{% for thumb in album.thumbs %}
+		<a href="{{ thumb.link }}">
+			<img class="thumbnail" src="{{ thumb.source }}">
+		</a>
+		{% endfor %}
+	</div>
+</div>
+{% endblock %}
diff --git a/assets/templates/base.html b/assets/templates/base.html
new file mode 100644
index 0000000..1f2d8dc
--- /dev/null
+++ b/assets/templates/base.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta content="width=device-width, initial-scale=1" name="viewport">
+		<title>
+			{% block title %}
+			A photo gallery by Yaroslav de la Peña Smirnov
+			{% endblock %}
+		</title>
+		<link rel="stylesheet" href="{{ index }}/css/gallery.css">
+	</head>
+	<body>
+		{% block content %}
+		{% endblock %}
+	</body>
+</html>
diff --git a/assets/templates/image.html b/assets/templates/image.html
new file mode 100644
index 0000000..8f7dd11
--- /dev/null
+++ b/assets/templates/image.html
@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="image-container">
+	<a href="{{ image.source }}"><img class="full" src="{{ image.source }}"></a>
+	<div class="controls-container">
+		{% if image.prev %}
+		<a class="control-btn" href="{{ image.prev }}">⮜ Previous</a>
+		{% else %}
+		<a class="control-btn hidden" href="#">⮜ Previous</a>
+		{% endif %}
+		{% if image.next %}
+		<a class="control-btn" href="{{ image.next }}">Next ⮞</a>
+		{% else %}
+		<a class="control-btn hidden" href="#">Next ⮞</a>
+		{% endif %}
+	</div>
+</div>
+<div class="gallery-container">
+	<h3>
+		From <a href="{{ index }}/#{{ album.year }}">{{ album.year }}</a>  
+		{% if album.title %}
+		<a href="{{ album.link }}">{{ album.title }}</a>
+		{% else %}
+		<a href="{{ album.link }}">Untitled</a>
+		{% endif %}
+		in <a href="{{ index }}/">{{ title }}</a>
+	</h3>
+	<p>Taken {{ image.date }}</p>
+</div>
+{% endblock %}
+
diff --git a/assets/templates/index.html b/assets/templates/index.html
new file mode 100644
index 0000000..61160a5
--- /dev/null
+++ b/assets/templates/index.html
@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="header-container">
+	<h1>{{ title }}</h1>
+</div>
+<div class="gallery-container">
+	<p>
+	Jump to year: 
+	{% for year in years %}
+	<a href="#{{ year.name }}">{{ year.name }}</a>
+	{% endfor %}
+	</p>
+	{% for year in years %}
+	<h2 id="{{ year.name }}">{{ year.name }}</h2>
+	{% for album in year.albums %}
+	{% if album.title %}
+	<a href="{{ album.link }}"><h3>{{ album.title }}</h3></a>
+	{% else %}
+	<a href="{{ album.link }}"><h3>Untitled</h3></a>
+	{% endif %}
+	<div class="album-container">
+		{% for thumb in album.thumbs %}
+			{% if loop.index < 4 %}
+			<a href="{{ thumb.link }}">
+				<img class="thumbnail" src="{{ thumb.source }}">
+			</a>
+			{% endif %}
+		{% endfor %}
+	</div>
+	{% endfor %}
+	{% endfor %}
+</div>
+{% endblock %}