Working interface

interface/templates/base.html

@@ -0,0 +1,48 @@
+{% load static %}
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="{% static 'interface/css/polyphonic.css' %}"></link>
+    <script src="https://kit.fontawesome.com/c837098e5b.js" crossorigin="anonymous"></script>
+    <title>{% block title %}Polyphonic{% endblock %}</title>
+  </head>
+  <body>
+
+    {% block header %}
+    <nav class="navbar navbar-expand-lg navbar-dark">
+    <a class="navbar-brand" href="#"><i class="fas fa-random"></i> Polyphonic</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <span class="navbar-text">Virtual Ensemble Manager</span>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent"></div>
+        <ul class="navbar-nav ml-auto">
+        <li class="nav-item">
+            <a class="nav-link" href="{% url 'myprojects' %}""><i class="fas fa-music"></i> My Projects</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href=""><i class="fas fa-question"></i> About</a>
+        </li>
+        </ul>
+    </div>
+    </nav>
+    {% endblock %}
+
+    {% block content %}
+    <h1>No content!</h1>
+    {% endblock %}
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
+  </body>
+</html>

interface/templates/interface/project.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="container" id="project">
+
+    <h1>{{ project.name }}</h1>
+    <div class="row">
+        <div class="col-9">
+            {% block page %}
+                <p>There have been {{ project.submissions.count }} submissions so far...</p>
+            {% endblock %}
+        </div>
+        <div class="col-3">
+            <div class="nav flex-column nav-pills" role="tablist">
+                <a class="nav-link" role=tab"
+                    href="{% url 'project' project_id=project.id %}">Project info</a>
+                {% for page in project.wiki_pages.all %}
+                <a class="nav-link {% if page.id == wiki_id %}active{% endif %}"
+                    href="{% url 'wiki' project_id=project.id wiki_id=page.id %}"
+                    role="tab">{{ page.title }}</a>
+                {% endfor %}
+                <a class="nav-link" role="tab"
+                    href="">Record a submission</a>
+                <a class="nav-link" role="tab"
+                    href="{% url 'submission' project_id=project.id %}">Send a file</a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

interface/templates/interface/submission.html

@@ -0,0 +1,31 @@
+{% extends "interface/project.html" %}
+
+{% block page %}
+<p>
+    Some instructions about how to submit the file
+</p>
+<div class="col-md-6 offset-md-3">
+<form>
+    <div class="form-group">
+        <label for="name">Name</label>
+        <input type="text" id="name" class="form-control"/>
+    </div>
+    <div class="form-group">
+        <label for="instrument">Instrument</label>
+        <input type="text" id="instrument" class="form-control"/>
+    </div>
+    <div class="form-group">
+        <label for="video-file">Video File</label>
+        <input type="file" accept="video/*" class="" id="video-file" />
+    </div>
+    <div class="form-group">
+        <label for="notes">Notes</label>
+        <textarea class="form-control" id="notes"></textarea>
+    </div>
+    <div class="text-right">
+        <button type="submit" class="btn btn-primary">Submit</button>
+    </div>
+</form>
+</div>
+
+{% endblock %}

interface/templates/interface/wiki.html

@@ -0,0 +1,7 @@
+{% extends "interface/project.html" %}
+
+{% block page %}
+<div class="wiki-page">
+{{ wiki_html|safe }}
+</div>
+{% endblock %}