first commit

lib.php

@@ -0,0 +1,14 @@
+<?php
+
+define("DB_PATH", "../travel.db");
+
+$imageSelectSql = <<<SQL
+SELECT
+i.ImageID, i.UserID, i.Title, i.Description,
+i.Latitude, i.Longitude, i.CityCode, c.AsciiName,
+i.CountryCodeISO, co.CountryName, i.ContinentCode,
+i.Path, i.Exif, i.SourceURL, i.Colors, i.CreatorURL, i.ActualCreator
+FROM imagedetails i
+INNER JOIN cities c ON i.CityCode = c.CityCode
+INNER JOIN countries co ON i.CountryCodeISO = co.ISO
+SQL;

public/assets/css/styles.css

@@ -0,0 +1,127 @@
+body {
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+header {
+	margin: 1rem;
+	padding: 1rem;
+	background-color: #fafafa;
+	background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
+	border: 1px solid #d4d4d4;
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+	border-radius: 4px;
+	display: flex;
+	justify-content: space-between;
+}
+
+select {
+	display: inline-block;
+	padding: 4px 6px;
+    font-size: 14px;
+	color: #555555;
+    background-color: #ffffff;
+    border: 1px solid #cccccc;
+	color: #555555;
+	border-radius: 4px;
+}
+
+input[type=text] {
+	background-color: #ffffff;
+    border: 1px solid #cccccc;
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+	transition: border linear 0.2s, box-shadow linear 0.2s;
+	display: inline-block;
+    padding: 4px 6px;
+    margin-bottom: 0px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #555555;
+	border-radius: 4px;
+}
+
+button {
+	display: inline-block;
+    padding: 4px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    line-height: 20px;
+    color: #333333;
+    text-align: center;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    cursor: pointer;
+    background-color: #f5f5f5;
+	background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+    border: 1px solid #cccccc;
+	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    border-bottom-color: #b3b3b3;
+	border-radius: 4px;
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn-primary {
+	color: #ffffff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    background-color: #006dcc;
+	background-image: linear-gradient(to bottom, #0088cc, #0044cc);
+	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+
+main {
+	margin: 1rem;
+}
+
+ul {
+	display: grid;
+	grid-column-gap: 5px;
+	grid-row-gap: 2px;
+	grid-template-columns: repeat( auto-fill, 150px );
+
+	list-style: none;
+	padding: 0;
+}
+
+li {
+	display: block;
+	padding: 0;
+	margin: 0;
+}
+
+
+.detail {
+	display: grid;
+	grid-template-columns: 650px auto;
+
+	h1 {
+		font-weight: 600;
+		font-size: 1.45em;
+		margin: 0;
+		border-bottom: 1pt solid #857F72;
+	}
+
+	h3 {
+		margin: 0;
+		font-weight: 600;
+		font-size: 1.15em;
+	}
+
+	a:link, a:visited {
+		color:  #0F609B;
+	}
+}
+
+.box {
+	margin-top: 8px;
+	border: 1pt solid #E8E6E1;
+	padding: 5px;
+
+	p {
+		margin: 0;
+	}
+}
+
+.colorBoxes span {
+	display: inline-block;
+	width: 50px;
+	height: 50px;
+	margin-right: 5px;
+}