monorail
/
Archipelago
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Website landing page preliminary update

This commit is contained in:
Chris Wilson 2021-06-11 20:22:47 -04:00
parent 3ea7f1cb03
commit 7b495f3d81
3 changed files with 40 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
WebHostLib/static/styles/landing.css
View File

@ -7,7 +7,6 @@ html{
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 60px;
} }
#landing-header{ #landing-header{
@ -53,18 +52,19 @@ html{
font-size: 1.4rem; font-size: 1.4rem;
} }
#uploads-button{ #far-left-button{
top: 65px; top: 115px;
left: calc(50% - 416px - 200px - 75px); left: calc(50% - 416px - 200px - 75px);
background-image: url("/static/static/button-images/button-a.png"); background-image: url("/static/static/button-images/button-a.png");
background-size: 200px auto; background-size: 200px auto;
width: 200px; width: 200px;
height: calc(156px - 40px); height: calc(156px - 40px);
padding-top: 40px; padding-top: 40px;
cursor: default;
} }
#setup-guide-button{ #mid-left-button{
top: 270px; top: 320px;
left: calc(50% - 416px - 200px + 140px); left: calc(50% - 416px - 200px + 140px);
background-image: url("/static/static/button-images/button-b.png"); background-image: url("/static/static/button-images/button-b.png");
background-size: 260px auto; background-size: 260px auto;
@ -73,8 +73,8 @@ html{
padding-top: 35px; padding-top: 35px;
} }
#player-settings-button{ #mid-button{
top: 350px; top: 400px;
left: calc(50% - 100px); left: calc(50% - 100px);
background-image: url("/static/static/button-images/button-a.png"); background-image: url("/static/static/button-images/button-a.png");
background-size: 200px auto; background-size: 200px auto;
@ -83,8 +83,8 @@ html{
padding-top: 38px; padding-top: 38px;
} }
#discord-button{ #mid-right-button{
top: 250px; top: 300px;
left: calc(50% + 416px - 166px); left: calc(50% + 416px - 166px);
background-image: url("/static/static/button-images/button-c.png"); background-image: url("/static/static/button-images/button-c.png");
background-size: 250px auto; background-size: 250px auto;
@ -94,14 +94,15 @@ html{
padding-left: 20px; padding-left: 20px;
} }
#generate-button{ #far-right-button{
top: 75px; top: 125px;
left: calc(50% + 416px + 75px); left: calc(50% + 416px + 75px);
background-image: url("/static/static/button-images/button-b.png"); background-image: url("/static/static/button-images/button-b.png");
background-size: 260px auto; background-size: 260px auto;
width: 260px; width: 260px;
height: calc(130px - 35px); height: calc(130px - 35px);
padding-top: 35px; padding-top: 35px;
cursor: default;
} }
#landing-clouds{ #landing-clouds{
@ -111,7 +112,7 @@ html{
#landing-clouds #cloud1{ #landing-clouds #cloud1{
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 265px; top: 365px;
width: 400px; width: 400px;
height: 350px; height: 350px;
@ -147,23 +148,23 @@ html{
@keyframes c1-float{ @keyframes c1-float{
from{ from{
left: 10px; left: 10px;
top: 265px; top: 365px;
} }
25%{ 25%{
left: 14px; left: 14px;
top: 267px; top: 367px;
} }
50%{ 50%{
left: 17px; left: 17px;
top: 265px; top: 365px;
} }
75%{ 75%{
left: 14px; left: 14px;
top: 262px; top: 362px;
} }
to{ to{
left: 10px; left: 10px;
top: 265px; top: 365px;
} }
} }
@ -241,32 +242,32 @@ html{
} }
#landing-deco-1{ #landing-deco-1{
top: 430px; top: 480px;
left: calc(50% - 276px); left: calc(50% - 276px);
} }
#landing-deco-2{ #landing-deco-2{
top: 200px; top: 250px;
left: calc(50% + 150px); left: calc(50% + 150px);
} }
#landing-deco-3{ #landing-deco-3{
top: 300px; top: 350px;
left: calc(50% - 150px); left: calc(50% - 150px);
} }
#landing-deco-4{ #landing-deco-4{
top: 240px; top: 290px;
left: calc(50% - 580px); left: calc(50% - 580px);
} }
#landing-deco-5{ #landing-deco-5{
top: 40px; top: 90px;
left: calc(50% + 450px); left: calc(50% + 450px);
} }
#landing-deco-6{ #landing-deco-6{
top: 412px; top: 462px;
left: calc(50% + 196px); left: calc(50% + 196px);
} }

4
WebHostLib/templates/header/baseHeader.html
View File

@ -11,10 +11,8 @@
<a href="/">archipelago</a> <a href="/">archipelago</a>
</div> </div>
<div id="base-header-right"> <div id="base-header-right">
<a href="/player-settings">start game</a> <a href="/games">games</a>
<a href="/uploads">host game</a>
<a href="/tutorial">setup guides</a> <a href="/tutorial">setup guides</a>
<a href="/generate">upload config</a>
<a href="https://discord.gg/8Z65BR2">discord</a> <a href="https://discord.gg/8Z65BR2">discord</a>
</div> </div>
</header> </header>

30
WebHostLib/templates/landing.html
View File

@ -6,17 +6,18 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
{% include 'header/oceanHeader.html' %}
<div id="landing-wrapper"> <div id="landing-wrapper">
<div id="landing-header"> <div id="landing-header">
<h4>the legend of zelda: a link to the past</h4> <h1>ARCHIPELAGO</h1>
<h1>MULTIWORLD RANDOMIZER</h1> <h4>multiworld randomizer ecosystem</h4>
</div> </div>
<div id="landing-links"> <div id="landing-links">
<a href="/player-settings" id="player-settings-button">start<br />playing</a> <a href="/player-settings" id="mid-button">start<br />playing</a>
<a href="/uploads" id="uploads-button">host<br />game</a> <a id="far-left-button"></a>
<a href="/tutorial" id="setup-guide-button">setup guides</a> <a href="/tutorial" id="mid-left-button">setup guide</a>
<a href="/generate" id="generate-button">upload config</a> <a id="far-right-button"></a>
<a href="https://discord.gg/8Z65BR2" id="discord-button">discord</a> <a href="https://discord.gg/8Z65BR2" id="mid-right-button">discord</a>
</div> </div>
<div id="landing-clouds"> <div id="landing-clouds">
<img id="cloud1" src="/static/static/backgrounds/clouds/cloud-0001.png"/> <img id="cloud1" src="/static/static/backgrounds/clouds/cloud-0001.png"/>
@ -33,14 +34,13 @@
</div> </div>
<div id="landing" class="grass-island"> <div id="landing" class="grass-island">
<div id="landing-body"> <div id="landing-body">
<p id="first-line">Welcome to the Archipelago Multiworld Randomizer!</p> <p id="first-line">Welcome to Archipelago!</p>
<p>This is a <span data-tooltip="Allegedly.">randomizer</span> for The Legend of Zelda: A <p>
Link to the Past.</p> This is a cross-game modification system which randomizes different games, then uses the result to
<p>It is also a multi-world, meaning Link's items may have been placed into other players' games. build a single unified multi-player game. Items from one game may be present in another, and
When a player picks up an item which does not belong to them, it is sent back to the player you will need your fellow players to find items you need in their games to help you complete
it belongs to.</p> your own.
<p>On this website you are able to generate and host multiworld games, and item and location </p>
trackers are provided for games hosted here.</p>
<p> <p>
This project is the cumulative effort of many This project is the cumulative effort of many
<a href="https://github.com/ArchipelagoMW/Archipelago/graphs/contributors">talented people.</a> <a href="https://github.com/ArchipelagoMW/Archipelago/graphs/contributors">talented people.</a>