diff --git a/app.py b/app.py
index de3ce5f..9118387 100644
--- a/app.py
+++ b/app.py
@@ -4,8 +4,26 @@ app = Flask(__name__)
@app.route('/')
-def hello_world(): # put application's code here
+def home(): # put application's code here
return render_template('home.html')
+
+@app.route('/random')
+def random_image():
+ # TODO Implement
+ return NotImplementedError
+
+
+@app.route('/daily')
+def daily_image():
+ # TODO Implement
+ return NotImplementedError
+
+
+@app.route('/all')
+def all_images():
+ # TODO Implement
+ return NotImplementedError
+
if __name__ == '__main__':
app.run(host='0.0.0.0')
diff --git a/db/connector.py b/db/connector.py
new file mode 100644
index 0000000..e262970
--- /dev/null
+++ b/db/connector.py
@@ -0,0 +1,17 @@
+import os
+
+from sqlalchemy import create_engine
+
+user = os.environ['DB_USER']
+password = os.environ['DB_PASSWORD']
+host = os.environ['DB_HOST']
+port = os.environ['DB_PORT']
+database = os.environ['DB_DATABASE']
+
+
+def get_connection():
+ return create_engine(
+ url="mysql+pymysql://{0}:{1}@{2}:{3}/{4}".format(
+ user, password, host, port, database
+ )
+ )
diff --git a/db/model/image_table.py b/db/model/image_table.py
new file mode 100644
index 0000000..a6af713
--- /dev/null
+++ b/db/model/image_table.py
@@ -0,0 +1,18 @@
+import sqlalchemy as db
+
+from db import connector
+
+engine = connector.create_engine
+
+metadata_obj = db.MetaData()
+
+profile = db.Table(
+ 'images',
+ metadata_obj,
+ db.Column('id', db.Integer, primary_key=True),
+ db.Column('location', db.String),
+ db.Column('copyright', db.String),
+ db.Column('date_added', db.TIMESTAMP),
+)
+
+metadata_obj.create_all(engine)
diff --git a/static/css/styles.css b/static/css/styles.css
new file mode 100644
index 0000000..9923b26
--- /dev/null
+++ b/static/css/styles.css
@@ -0,0 +1,26 @@
+body {
+ background-image: url("/random");
+ height: 100vh;
+ width: 100vw;
+}
+body nav {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.4);
+ width: 100vw;
+ padding: 0 20px;
+}
+body nav ul > li {
+ color: white;
+}
+body nav ul > li :hover {
+ color: #13678A;
+ animation: ease-in;
+}
+body h1 {
+ margin: auto;
+ text-align: center;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/static/css/styles.css.map b/static/css/styles.css.map
new file mode 100644
index 0000000..c3ba649
--- /dev/null
+++ b/static/css/styles.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE,OAnBD;EAoBC;;AAKN;EACE;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/static/css/styles.scss b/static/css/styles.scss
index e69de29..e08a537 100644
--- a/static/css/styles.scss
+++ b/static/css/styles.scss
@@ -0,0 +1,31 @@
+// Variables
+$blue: #13678A;
+
+body {
+ background-image: url("/random");
+ height: 100vh;
+ width: 100vw;
+
+ nav {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.4);
+ width: 100vw;
+ padding: 0 20px;
+
+ ul > li {
+ color: white;
+
+ :hover {
+ color: $blue;
+ animation: ease-in;
+ }
+ }
+ }
+
+ h1 {
+ margin: auto;
+ text-align: center;
+ }
+}
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index 001d90f..7a52053 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -3,8 +3,17 @@
DCSL Image Hosting Server
+
-
+
+Welcome to the DCSL Image Hosting Server!
+ - Serving images since year 2022