added base template, added header bar to all pages

This commit is contained in:
iou1name 2018-06-18 22:13:49 -04:00
parent 0980554cff
commit faf4b995b2
7 changed files with 87 additions and 74 deletions

View File

@ -1,14 +1,26 @@
#questBody { #header {
height: 100%;
position: fixed; position: fixed;
padding-left: 10px; top: 0;
padding-right: 32%; left: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #dddddd;
}
#header li {
display: inline;
}
#questContainer {
display: flex;
overflow: auto; overflow: auto;
} }
.chat { #questBody {
display: flex; padding-left: 10px;
flex-direction: column; padding-right: 32%;
} }
#chatPane { #chatPane {
@ -16,7 +28,8 @@
width: 30%; width: 30%;
right: 0; right: 0;
position: fixed; position: fixed;
padding-right: 20px; display: flex;
flex-direction: column;
} }
#chatWindow { #chatWindow {
@ -28,6 +41,8 @@
#messageBox { #messageBox {
padding-bottom: 10px; padding-bottom: 10px;
width: 100%; width: 100%;
display: flex;
flex-direction: column;
} }
#messageTextarea { #messageTextarea {

14
templates/base.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %} - Anonkun</title>
<link rel="stylesheet" type="text/css" href="/static/anonkun.css">
{% block head %}{% endblock %}
</head>
<body>
<ul id="header">
<li><a href="{{ url_for('views.index') }}">Home</a></li>
</ul>
<div id="content">{% block content %}{% endblock %} </div>
</body>
</html>

View File

@ -1,13 +1,10 @@
<!DOCTYPE html> {% extends "base.html" %}
<html> {% block title %}Start a new quest{% endblock %}
<head> {% block content %}
<title>Make a new quest</title> <h1>New Quest</h1>
</head> <form method="post" action="{{ url_for('views.create_quest') }}">
<body> <input type="text" placeholder="Quest Title" name="quest_title" maxlength="300" required/><br/>
<form method="post" action="{{ url_for('views.create_quest') }}"> <textarea id="create_textarea" name="quest_body"></textarea>
<input type="text" placeholder="Quest Title" name="quest_title" maxlength="300" required/><br/> <input type="submit" name="submit" value="Submit"/>
<textarea id="create_textarea" name="quest_body"></textarea> </form>
<input type="submit" name="submit" value="Submit"/> {% endblock %}
</form>
</body>
</html>

View File

@ -1,13 +1,9 @@
<!DOCTYPE html> {% extends "base.html" %}
<html> {% block title %}Index{% endblock %}
<head> {% block content %}
<title>Meet the new anonkun.</title>
</head>
<body>
<h1>Quests 'n Shiet</h1> <h1>Quests 'n Shiet</h1>
<a href="./quest/unga-bunga-quest">Unga Bunga Quest</a><br /> <a href="./quest/unga-bunga-quest">Unga Bunga Quest</a><br />
<a href="./create_quest">Create New Quest</a><br /> <a href="./create_quest">Create New Quest</a><br />
<a href="./signup">Sign up</a><br /> <a href="./signup">Sign up</a><br />
<a href="./login">Login</a><br /> <a href="./login">Login</a><br />
</body> {% endblock %}
</html>

View File

@ -1,13 +1,10 @@
<!DOCTYPE html> {% extends "base.html" %}
<html> {% block title %}Login{% endblock %}
<head> {% block content %}
<title>Login</title> <h1>Login</h1>
</head>
<body>
<form method="post" action="{{ url_for('views.login') }}"> <form method="post" action="{{ url_for('views.login') }}">
<input type="text" placeholder="Username" name="user" maxlength="20" required/><br /> <input type="text" placeholder="Username" name="user" maxlength="20" required/><br />
<input type="password" placeholder="Password" name="pass" maxlength="1024" required/><br /> <input type="password" placeholder="Password" name="pass" maxlength="1024" required/><br />
<input type="submit" value="Log in" name="submit"/> <input type="submit" value="Log in" name="submit"/>
</form> </form>
</body> {% endblock %}
</html>

View File

@ -1,8 +1,6 @@
<!DOCTYPE html> {% extends "base.html" %}
<html> {% block title %}{{ quest_title }}{% endblock %}
<head> {% block head %}
<title>{{ quest_title }}</title>
<link rel="stylesheet" type="text/css" href="/static/anonkun.css">
<script type="text/javascript" src="/static/socket.io.slim.js"></script> <script type="text/javascript" src="/static/socket.io.slim.js"></script>
<script> <script>
var socket; var socket;
@ -43,31 +41,30 @@
return number; return number;
} }
</script> </script>
</head> {% endblock %}
<body> {% block content %}
<div id="questBody"> <div id="questContainer">
<h1>{{ quest_title }}</h1> <div id="questBody">
{% autoescape false %} <h1>{{ quest_title }}</h1>
{{ quest_body }}
{% endautoescape %}
</div>
<div id="chatPane" class="chat">
<h1>Chat</h1>
<div id="chatWindow" class="chat">
{% autoescape false %} {% autoescape false %}
{% for message in messages %} {{ quest_body }}
<div class="message">
<div class="messageHeader">
<span class="messageName">{{ message[1] }}</span> <span class="messageDate">{{ message[3] | strftime }}</span>
</div>
<div class="messageMessage">{{ message[4] }}</div>
</div>
{% endfor %}
{% endautoescape %} {% endautoescape %}
</div> </div>
<div id="messageBox" class="chat"> <div id="chatPane">
<textarea id="messageTextarea"></textarea> <h1>Chat</h1>
<div id="chatWindow">
{% autoescape false %}
{% for message in messages %}
<div class="message">
<div class="messageHeader">
<span class="messageName">{{ message[1] }}</span> <span class="messageDate">{{ message[3] | strftime }}</span>
</div>
<div class="messageMessage">{{ message[4] }}</div>
</div>
{% endfor %}
{% endautoescape %}
</div>
<div id="messageBox"><textarea id="messageTextarea"></textarea></div>
</div> </div>
</div> </div>
</body> {% endblock %}
</html>

View File

@ -1,9 +1,7 @@
<!DOCTYPE html> {% extends "base.html" %}
<html> {% block title %}Sign up a new account{% endblock %}
<head> {% block content %}
<title>Sign up a new account</title> <h1>Sign up</h1>
</head>
<body>
<div id="namePassRules"> <div id="namePassRules">
<p>Username rules: <p>Username rules:
<ul> <ul>
@ -14,12 +12,11 @@
<ul> <ul>
<li>Must be between 8 and 1024 characters</li> <li>Must be between 8 and 1024 characters</li>
</ul> </ul>
</div>
<form method="post" action="{{ url_for('views.signup') }}"> <form method="post" action="{{ url_for('views.signup') }}">
<input type="text" placeholder="Username" name="user" maxlength="20" required/><br /> <input type="text" placeholder="Username" name="user" maxlength="20" required/><br />
<input type="password" placeholder="Password" name="pass" maxlength="1024" required/><br /> <input type="password" placeholder="Password" name="pass" maxlength="1024" required/><br />
<input type="password" placeholder="Verify password" name="pass_verify" maxlength="1024" required/><br /> <input type="password" placeholder="Verify password" name="pass_verify" maxlength="1024" required/><br />
<input type="submit" value="Sign up" name="submit"/> <input type="submit" value="Sign up" name="submit"/>
</form> </form>
</body> {% endblock %}
</html>