2 files changed, 120 insertions, 0 deletions
diff --git a/src/templates/notifier/inbox.html b/src/templates/notifier/inbox.html
new file mode 100644
index 0000000..ee0f27a
--- /dev/null
+++ b/src/templates/notifier/inbox.html
@@ -0,0 +1,86 @@
+{% extends "base.html" %}
+
+
+{% load staticfiles %}
+
+{% block content %}
+
+<style media="screen">
+
+  .inbox-panel {
+    display: grid;
+    grid-template-columns: 30% 70%;
+  }
+
+  .section-panel {
+    padding: 10px;
+  }
+
+  .iframe-panel {
+    padding: 0px;
+    margin-top: 0px;
+  }
+
+  .card-container {
+    box-shadow: 0 0 5px 2px #cccccc;
+  }
+  .card {
+    height: 50px;
+    position: relative;
+    border-bottom: 1px solid #cccccc;
+    padding: 10px;
+    width: 100%;
+    background-color: #ffffff;
+    z-index: 5;
+  }
+  .selected-card {
+    background-color: #f3f3f3;
+  }
+
+  .card:hover {
+    box-shadow: 0px 0 5px 2px #cccccc;
+    z-index: 6;
+  }
+
+  #inbox-iframe {
+    height: calc(100vh - 130px);
+  }
+
+  .half_width {
+    width: 50%;
+  }
+  .card-wrapper {
+  }
+</style>
+
+<div class="inbox-panel">
+  <div class="section-panel">
+    <div class="card-container">
+      {% for notification in notifier_messages  %}
+        <div class="inbox-entry card" onclick="showmessage({{notification.id}}); setactive(this);">
+          {{ notification }}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+  <div class="iframe-panel inbox-expanded-view">
+      <div class="inbox-iframe-div">
+        <iframe id="inbox-iframe" src="notification/0" frameBorder="0" width="100%" height="100vh" scrolling="yes" onload="sizetoiframe(this);">Please select a notification</iframe>
+      </div>
+  </div>
+</div>
+
+<script type="text/javascript">
+  $('#inbox-iframe').load(function() {
+    sizetoiframe(this);
+  })
+
+  function showmessage(msg_id)
+  {
+    iframe = document.getElementById("inbox-iframe");
+    iframe.src = "notification/" + msg_id;
+  }
+
+</script>
+
+{% endblock %}
diff --git a/src/templates/notifier/notification.html b/src/templates/notifier/notification.html
new file mode 100644
index 0000000..1258fe0
--- /dev/null
+++ b/src/templates/notifier/notification.html
@@ -0,0 +1,34 @@
+{% load staticfiles %}
+<div class="card-container">
+<h3 class="msg_header">{{notification.title}}</h3>
+<p class="content"></p>
+<pre>
+{{notification.content|safe}}
+</pre>
+
+<p class="sender">Message from {{notification.sender}}</p>
+</div>
+
+<style media="screen">
+  .card-container {
+    box-shadow: 0 0 5px 2px #cccccc;
+    border: 1px solid #ffffff;
+    margin-top: 11px;
+  }
+  .card {
+    height: 50px;
+    margin: 0px;
+    position: relative;
+    border-bottom: 1px solid #cccccc;
+    padding: 0px;
+    width: 100%;
+    background-color: #ffffff;
+    z-index: 5;
+  }
+
+  .sender {
+    color: #636363;
+  }
+
+
+</style>