Improved styling for WebHost
This commit is contained in:
Chris Wilson
parent
79c91f57a8
commit
69f5802e7a
|
|
@ -0,0 +1,35 @@
|
|||
#landing-wrapper{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#landing{
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
#landing-header-links{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#landing-header-links a{
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#landing-buttons{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
iframe{
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/** Global colors for all pages */
|
||||
body{
|
||||
background-color: #dce2bd;
|
||||
font-size: 1.2rem;
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/** Button Styles */
|
||||
button, input[type=submit]{
|
||||
border: 1px solid #7d8c35;
|
||||
border-radius: 4px;
|
||||
width: 200px;
|
||||
height: 75px;
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
background-color: #dce2bd;
|
||||
font-family: inherit;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover, input[type=submit]:hover{
|
||||
background-color: #e0e7bd;
|
||||
}
|
||||
|
||||
/** Content styles */
|
||||
.main-content{
|
||||
max-width: 800px;
|
||||
border-radius: 8px;
|
||||
background-color: #bbb288;
|
||||
padding: 0.5em 1.5rem 1.5rem;=
|
||||
color: #282b28;
|
||||
}
|
||||
|
||||
.main-content h3{
|
||||
margin: 0;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.main-content a{
|
||||
color: #34768a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
#uploads-wrapper{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#uploads-form-wrapper{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#upload-form{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#room-list{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#room-list ul{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
window.onload = () => {
|
||||
document.getElementById('upload-button').addEventListener('click', () => {
|
||||
document.getElementById('file-input').click();
|
||||
});
|
||||
|
||||
document.getElementById('file-input').addEventListener('change', () => {
|
||||
document.getElementById('upload-form').submit();
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
#view-seed-wrapper{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#view-seed-wrapper table td{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
window.onload = () => {
|
||||
const timeElement = document.getElementById('creation-time');
|
||||
const creationTime = timeElement.getAttribute('data-creation-time');
|
||||
const creationDate = new Date(creationTime);
|
||||
timeElement.innerText = creationDate.toLocaleString();
|
||||
};
|
||||
|
|
@ -1,56 +1,43 @@
|
|||
{% extends 'layout.html' %}
|
||||
|
||||
{% block head %}
|
||||
<title>Berserker's Multiworld</title>
|
||||
<link rel="stylesheet" type="text/css" href="static/landing.css" />
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for("uploads") }}">Start a Group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for("uploads") }}">Upload a Multiworld</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for("uploads") }}">Your Content</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<br>
|
||||
|
||||
<div class="container container-fluid d-flex">
|
||||
<div class="jumbotron jumbotron-fluid">
|
||||
<div class="container">
|
||||
<div class="col-md-5 p-lg-2 mx-auto my-2">
|
||||
<h1 class="text-center display-4 font-weight-normal">Berserker's Multiworld</h1>
|
||||
<p class="text-center lead font-weight-normal"><a
|
||||
href="https://github.com/Berserker66/MultiWorld-Utilities">Source Code</a>
|
||||
- <a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>
|
||||
-
|
||||
<a href="https://github.com/Berserker66/MultiWorld-Utilities/graphs/contributors">Contributors</a>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="lead">This webpage is still under heavy construction. Database may be wiped as I see fit
|
||||
and some stuff may be broken.</p>
|
||||
<p class="lead">This is a randomizer for The Legend of Zelda: A Link to the Past.</p>
|
||||
<p class="lead">It is a multiworld, meaning items get shuffled across multiple players' worlds
|
||||
which get exchanged on pickup through the internet.</p>
|
||||
<p class="lead">This website allows hosting such a Multiworld and comes with an item and location
|
||||
tracker.</p>
|
||||
<p class="lead">Currently you still require a locally installed client to play, that handles
|
||||
connecting to the server and patching a vanilla game to the randomized one. Get started on the
|
||||
<a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>.</p>
|
||||
|
||||
</div>
|
||||
<div id="landing-wrapper">
|
||||
<div id="landing" class="main-content">
|
||||
<div id="landing-header">
|
||||
<h3>Berserker's Multiworld</h3>
|
||||
<p id="landing-header-links">
|
||||
<a href="https://github.com/Berserker66/MultiWorld-Utilities">Source Code</a>
|
||||
-
|
||||
<a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>
|
||||
-
|
||||
<a href="https://github.com/Berserker66/MultiWorld-Utilities/graphs/contributors">Contributors</a>
|
||||
</p>
|
||||
</div>
|
||||
<div id="landing-buttons">
|
||||
<a href="uploads"><button>Start Playing</button></a>
|
||||
</div>
|
||||
<div id="landing-body">
|
||||
<p>This is a randomizer for The Legend of Zelda: A Link to the Past.</p>
|
||||
<p>This is also a multiworld, meaning your items may be placed into other players' worlds, and
|
||||
other players's items may be placed into your world. When a player picks up an item which does
|
||||
not belong to them, it is sent back to the player it belongs to over the internet.</p>
|
||||
<p>This website allows you to host a multiworld game, and provides item and location trackers for all
|
||||
games hosted here.</p>
|
||||
<p>Currently, a locally installed client is required to play. This client should handle patching
|
||||
your ROM files and connecting to the multiworld server. More information on how to set up a local
|
||||
client may be found on the
|
||||
<a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>.</p>
|
||||
<p>This website is under active development. As such, your hosted rooms may occasionally disappear,
|
||||
and there may be bugs. If you do happen to find a bug, please report it
|
||||
<a href="https://github.com/Berserker66/MultiWorld-Utilities/issues">here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="https://discordapp.com/widget?id=731205301247803413&theme=light" width="300" height="500"
|
||||
allowtransparency="true" frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
<iframe src="https://discordapp.com/widget?id=731205301247803413&theme=light"
|
||||
width="300" height="500" allowtransparency="true"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -2,16 +2,22 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
|
||||
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
{% block head %}<title>Berserker's Multiworld</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
|
||||
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" href="static/layout.css" />
|
||||
{% block head %}
|
||||
<title>Berserker's Multiworld</title>
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{% with messages = get_flashed_messages() %}
|
||||
{% if messages %}
|
||||
<div class=".container-fluid">
|
||||
<div>
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-danger" role="alert">{{ message }}</div>
|
||||
{% endfor %}
|
||||
|
|
@ -19,13 +25,8 @@
|
|||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
{% block body %}{% endblock %}
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
|
||||
<br> {# spacing for notice #}
|
||||
<footer class="page-footer" style="position: fixed; left: 0; bottom: 0; width: 100%; text-align: center">
|
||||
<div class="container">
|
||||
<span class="text-muted">This site uses a cookie to track your session in order to give you ownership over uploaded files and created instances.</span>
|
||||
{# <button type="button" class="btn btn-secondary btn-sm" onclick="document.getElementById('cookiefooter').remove()">X</button> #}
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
{% macro list_rooms(rooms) -%}
|
||||
Rooms:
|
||||
<ul class="list-group">
|
||||
<ul>
|
||||
{% for room in rooms %}
|
||||
<li class="list-group-item"><a href="{{ url_for("host_room", room=room.id) }}">Room #{{ room.id }}</a></li>
|
||||
<li><a href="{{ url_for("host_room", room=room.id) }}">Room #{{ room.id }}</a></li>
|
||||
{% endfor %}
|
||||
{{ caller() }}
|
||||
|
||||
</ul>
|
||||
{%- endmacro %}
|
||||
|
|
@ -1,24 +1,37 @@
|
|||
{% extends 'layout.html' %}
|
||||
|
||||
{% block head %}
|
||||
<title>Upload Multidata</title>
|
||||
<link rel="stylesheet" type="text/css" href="static/uploads.css" />
|
||||
<script type="application/ecmascript" src="static/uploads.js"></script>
|
||||
{% endblock %}
|
||||
{% block body %}
|
||||
<h1>Upload Multidata or Multiworld Zip</h1>
|
||||
<form method=post enctype=multipart/form-data>
|
||||
<input type=file name=file>
|
||||
<input type=submit value=Upload>
|
||||
</form>
|
||||
<br>
|
||||
{% if rooms %}
|
||||
<h1>Your Rooms:</h1>
|
||||
<ul class="list-group">
|
||||
{% for room in rooms %}
|
||||
<li class="list-group-item"><a href="{{ url_for("host_room", room=room.id) }}">Room #{{ room.id }}</a>
|
||||
based on <a href="{{ url_for("view_seed", seed=room.seed.id) }}">Seed #{{ room.seed.id }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<h3>No rooms owned by you were found. Upload a Multiworld to get started.</h3>
|
||||
{% endif %}
|
||||
|
||||
{% block body %}
|
||||
<div id="uploads-wrapper">
|
||||
<div id="uploads" class="main-content">
|
||||
<h3>Upload Multidata</h3>
|
||||
<p>To host a game, you need up upload a .multidata file or a .zip file created by the
|
||||
multiworld generator.</p>
|
||||
<div id="uploads-form-wrapper">
|
||||
<form id="upload-form" method="post" enctype="multipart/form-data">
|
||||
<input id="file-input" type="file" name="file">
|
||||
</form>
|
||||
<button id="upload-button">Upload</button>
|
||||
</div>
|
||||
|
||||
{% if rooms %}
|
||||
<p>Your Rooms:</p>
|
||||
<ul id="room-list">
|
||||
{% for room in rooms %}
|
||||
<li>
|
||||
Room: <a href="{{ url_for("host_room", room=room.id) }}">{{ room.id }}</a><br />
|
||||
Seed: <a href="{{ url_for("view_seed", seed=room.seed.id) }}">{{ room.seed.id }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p>No rooms owned by you were found. Upload a file to get started.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,25 +1,55 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% import "macros.html" as macros %}
|
||||
|
||||
{% block head %}
|
||||
<title>Multiworld Seed {{ seed.id }}</title>
|
||||
<link rel="stylesheet" type="text/css" href="../static/layout.css">
|
||||
<link rel="stylesheet" type="text/css" href="../static/view_seed.css" />
|
||||
<script type="application/ecmascript" src="../static/view_seed.js" ></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
Seed #{{ seed.id }}<br>
|
||||
Created: {{ seed.creation_time }} UTC <br>
|
||||
Players:
|
||||
<ul class="list-group">
|
||||
{% for team in seed.multidata["names"] %}
|
||||
<li class="list-group-item">Team #{{ loop.index }} - {{ team | length }}
|
||||
<ul class="list-group">
|
||||
{% for player in team %}
|
||||
<li class="list-group-item">{{ player }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% call macros.list_rooms(rooms) %}
|
||||
<li class="list-group-item list-group-item-action"><a href="{{ url_for("new_room", seed=seed.id) }}">new
|
||||
room</a></li>
|
||||
{% endcall %}
|
||||
<div id="view-seed-wrapper">
|
||||
<div class="main-content">
|
||||
<h3>Seed Info</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Seed: </td>
|
||||
<td>{{ seed.id }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Created: </td>
|
||||
<td id="creation-time" data-creation-time="{{ seed.creation_time }}"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Players: </td>
|
||||
<td>
|
||||
<ul>
|
||||
{% for team in seed.multidata["names"] %}
|
||||
<li>Team #{{ loop.index }} - {{ team | length }}
|
||||
<ul>
|
||||
{% for player in team %}
|
||||
<li>{{ player }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rooms: </td>
|
||||
<td>
|
||||
{% call macros.list_rooms(rooms) %}
|
||||
<li>
|
||||
<a href="{{ url_for("new_room", seed=seed.id) }}">Create New Room</a>
|
||||
</li>
|
||||
{% endcall %}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue