Change homepage and fix login and account creation pages

This commit is contained in:
Rogerio Chaves 2020-04-20 21:02:08 +02:00
parent 71b44e7586
commit b6e8242bb6
No known key found for this signature in database
GPG Key ID: E6AF5440509B1D94
8 changed files with 36 additions and 46 deletions

View File

@ -37,6 +37,7 @@ a.button.button-big,
input[type="submit"].button-big { input[type="submit"].button-big {
padding: 16px 20px; padding: 16px 20px;
font-size: 18px; font-size: 18px;
height: auto;
} }
button.button-blue, button.button-blue,
a.button.button-blue, a.button.button-blue,
@ -181,6 +182,14 @@ h2 {
background: #fff; background: #fff;
} }
.entrance {
background: #fbb;
}
.entrance header {
display: none;
}
.friends-communities { .friends-communities {
min-width: 200px; min-width: 200px;
max-width: 200px; max-width: 200px;
@ -266,29 +275,6 @@ h2 {
justify-content: space-between; justify-content: space-between;
} }
.entrance {
background: url("/images/bg.jpg") center center #000;
background-size: cover;
}
.entrance main {
margin: 0;
background: rgba(0, 0, 0, 0.7);
width: 100vw;
min-height: 100vh;
max-width: none;
}
.entrance-content {
color: #fff;
margin: 0 auto;
max-width: 800px;
}
.entrance h1 {
font-size: 60px;
}
.profile-pic-placeholder { .profile-pic-placeholder {
min-width: 100px; min-width: 100px;
width: 100px; width: 100px;

View File

@ -7,8 +7,8 @@
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
</head> </head>
<body <%- typeof body_class == "undefined" ? "" : `class="${body_class}"` %>> <body <%- typeof body_class == "undefined" ? "" : `class="${body_class}"` %>>
<% if (context.profile && typeof hideHeader == "undefined") { %> <header class="screen-center">
<header class="screen-center"> <% if (context.profile && typeof hideHeader == "undefined") { %>
<div class="logo"> <div class="logo">
<a href="/">Social</a> <a href="/">Social</a>
</div> </div>
@ -39,6 +39,6 @@
<input type="search" class="input-search" name="query" placeholder="Search for people..."> <input type="search" class="input-search" name="query" placeholder="Search for people...">
</form> </form>
</div> </div>
</header> <% } %>
<% } %> </header>
<main class="<%= typeof main_class == "undefined" ? "screen-center white-page" : main_class %>"> <main class="<%= typeof main_class == "undefined" ? "screen-center white-page" : main_class %>">

View File

@ -2,7 +2,7 @@
<%- include('_header') %> <%- include('_header') %>
<div style="max-width: 800px; margin: 0 auto"> <div style="max-width: 800px; margin: 0 auto">
<h1 style="padding-top: 50px">Download the app</h1> <h1>Download the app</h1>
<p style="padding: 20px 0"> <p style="padding: 20px 0">
If you don't trust this server to hold your credentials, download the app version, If you don't trust this server to hold your credentials, download the app version,
@ -10,7 +10,7 @@
plus you can use Social offline plus you can use Social offline
</p> </p>
<p> <p>
<a class="button" href="https://github.com/rogeriochaves/social/releases" style="padding: 12px 15px;">Go to downloads page</a> <a href="https://github.com/rogeriochaves/social/releases">Go to downloads page</a>
</p> </p>
</div> </div>

View File

@ -1,15 +1,19 @@
<%- include('_header', { body_class: "entrance" }) %> <%- include('_header', { body_class: "entrance", main_class: "" }) %>
<div class="entrance-content"> <div style="background: #8debf5; padding: 50px">
<h1 style="padding-top: 50px">Welcome to Social</h1> <div class="screen-center">
<h2 style="padding: 20px 0">The non-addictive social network</h2> <h1 style="font-size: 60px; font-family: 'Lucida Grande', sans-serif">Welcome to Social</h1>
<h2 style="padding: 20px 0">The non-addictive social network</h2>
<div style="padding-top: 20px"> <div style="padding-top: 20px">
<a href="/signup" class="button button-big">Create account</a> <a href="/signup" class="button button-big button-blue">Create account</a>
<a href="/login" class="button button-big button-secondary" style="margin-left: 10px">Login</a> <a href="/login" class="button button-big" style="margin-left: 10px">Login</a>
</div>
</div> </div>
</div>
<div style="padding-top: 100px"> <div style="background: #fbb; padding: 50px 0; color: #600">
<div class="screen-center">
<p> <p>
Social combines the best original ideas of popular social networks but without the bad parts Social combines the best original ideas of popular social networks but without the bad parts
</p> </p>
@ -23,9 +27,9 @@
</ul> </ul>
<p> <p>
Because Social is not a business, so we don't need to make people Because Social is not a business, we don't need to make people
addicted just to sell more ads and please shareholders. Social is built on top of addicted just to sell more ads and please shareholders. Social is built on top of
<a href="https://scuttlebutt.nz/" target="_blank" style="color: #FFF">SSB</a>, <a href="https://scuttlebutt.nz/" target="_blank" style="color: #600">SSB</a>,
a decentralized social network protocol, which means the community sustains it, not a corporation. a decentralized social network protocol, which means the community sustains it, not a corporation.
</p> </p>
</div> </div>

View File

@ -1,7 +1,7 @@
<%- include('_header', { hideHeader: true }) %> <%- include('_header', { hideHeader: true }) %>
<div style="max-width: 800px; margin: 0 auto"> <div style="max-width: 800px; margin: 0 auto">
<h1 style="padding-top: 50px">Save your keys</h1> <h1>Save your keys</h1>
<p style="padding-top: 20px"> <p style="padding-top: 20px">
Congratulations! Your account was created successfully. Congratulations! Your account was created successfully.
@ -25,7 +25,7 @@
<input type="email" name="email" /> <input type="email" name="email" />
</label> </label>
</div> </div>
<input class="button-big" type="submit" value="Send"> <input class="button-big button-blue" type="submit" value="Send">
</form> </form>
<p>or</p> <p>or</p>
<p> <p>

View File

@ -1,7 +1,7 @@
<%- include('_header', { hideHeader: true }) %> <%- include('_header', { hideHeader: true }) %>
<div style="max-width: 800px; margin: 0 auto"> <div style="max-width: 800px; margin: 0 auto">
<h1 style="padding-top: 50px">Save your keys</h1> <h1>Save your keys</h1>
<p> <p>
Your <a href="/keys/download">download</a> is starting, alternatively, you can copy your key as text: Your <a href="/keys/download">download</a> is starting, alternatively, you can copy your key as text:

View File

@ -1,7 +1,7 @@
<%- include('_header') %> <%- include('_header') %>
<div style="max-width: 800px; margin: 0 auto"> <div style="max-width: 800px; margin: 0 auto">
<h1 style="padding-top: 50px">Login</h1> <h1>Login</h1>
<p style="padding-top: 15px"> <p style="padding-top: 15px">
You should probably have received your login button by email, search for "Social login button", if not, then you must have saved your key, you can input it here You should probably have received your login button by email, search for "Social login button", if not, then you must have saved your key, you can input it here
@ -19,7 +19,7 @@
<textarea name="ssb_key" style="max-width: 300px"></textarea> <textarea name="ssb_key" style="max-width: 300px"></textarea>
</div> </div>
<p> <p>
<input class="button-big" type="submit" value="Login" /> <input class="button-big button-blue" type="submit" value="Login" />
</p> </p>
<% if (mode == "server") { %> <% if (mode == "server") { %>
<p>or</p> <p>or</p>

View File

@ -1,7 +1,7 @@
<%- include('_header') %> <%- include('_header') %>
<div style="max-width: 800px; margin: 0 auto"> <div style="max-width: 800px; margin: 0 auto">
<h1 style="padding-top: 50px">Create account</h1> <h1>Create account</h1>
<form method="POST" action="/signup" enctype="multipart/form-data"> <form method="POST" action="/signup" enctype="multipart/form-data">
<div style="padding-top: 30px"> <div style="padding-top: 30px">
@ -22,7 +22,7 @@
</label> </label>
</div> </div>
<p> <p>
<input class="button-big" type="submit" value="Sign up" /> <input class="button-big button-blue" type="submit" value="Sign up" />
</p> </p>
<% if (mode == "server") { %> <% if (mode == "server") { %>
<p>or</p> <p>or</p>