ktyl
/
singularity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: finish desktop for intro sequence

This commit is contained in:
Cat Flynn 2024-08-10 14:43:01 +01:00
parent 264ad19cb1
commit ffd3296630
3 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -11,10 +11,9 @@
<body> <body>
<div id="start-splash"> <div id="start-splash">
<img class="center" src="oct.jpg"></img> <h1>welcome to the singularity.</h1>
<input class="center" type="text" id="username" placeholder="Choose a username!" onkeyup="usernameInputUpdated(event)"></input> <input class="center" type="text" id="username" placeholder="choose a username." onkeyup="usernameInputUpdated(event)"></input>
<!--<ul class="center" id="interest-selection"></ul>--> <a id="advance-button" class="center" href="#" onclick="advanceSplash()">next.</a>
<a id="advance-button" class="center" href="#" onclick="advanceSplash()">Choose some interests!</a>
</div> </div>
<!-- blocks are added by JavaScript so container starts empty --> <!-- blocks are added by JavaScript so container starts empty -->

15
main.js
View File

@ -55,6 +55,10 @@ const postCountElem = document.getElementById("post-count");
const postTotalElem = document.getElementById("post-total"); const postTotalElem = document.getElementById("post-total");
const loader = document.getElementById("loader"); const loader = document.getElementById("loader");
// some state
var isWritingPost = false;
var isWritingReply = false;
// define a variable for how many posts we want to increase the page by // define a variable for how many posts we want to increase the page by
const postIncrease = 9; const postIncrease = 9;
// and define a value to determine which page we're on // and define a value to determine which page we're on
@ -331,9 +335,6 @@ function getWritePostButtonText() {
return `Write something ${getAdjective()} for me!`; return `Write something ${getAdjective()} for me!`;
} }
var isWritingPost = false;
var isWritingReply = false;
function writePost() { function writePost() {
if (isWritingPost) if (isWritingPost)
return; return;
@ -452,7 +453,7 @@ function chooseInterest(interest) {
} }
const advanceButtonElem = document.getElementById("advance-button"); const advanceButtonElem = document.getElementById("advance-button");
advanceButtonElem.innerHTML = "Begin!"; advanceButtonElem.innerHTML = "enter.";
advanceButtonElem.style.visibility = "visible"; advanceButtonElem.style.visibility = "visible";
interestsTextElem.remove(); interestsTextElem.remove();
@ -508,7 +509,11 @@ function populateSplashInterests() {
} }
function getInterestsTextValue(numChosenInterests) { function getInterestsTextValue(numChosenInterests) {
return `Choose some interests! (${numChosenInterests}/${maxInterests})`; const leftToChoose = maxInterests - numChosenInterests;
if (leftToChoose > 1)
return `choose ${leftToChoose} interests.`;
return "choose 1 interest.";
} }
function usernameInputUpdated(event) { function usernameInputUpdated(event) {

15
styles.css
View File

@ -46,23 +46,23 @@ body {
text-align: center; text-align: center;
} }
#start-splash img { #start-splash h1 {
max-width: 40vw; padding-top: 35vh;
margin-top: 10vh; display: flex;
justify-content: center;
} }
#start-splash input { #start-splash input {
margin: 2em auto; margin: 2em auto;
border: none; border: none;
background-color: var(--sky-blue); color: var(--sky-blue);
color: white;
border-radius: 16px; border-radius: 16px;
font-size: 1.5em; font-size: 1.5em;
padding: 4px 8px; padding: 4px 8px;
} }
#advance-button { #advance-button {
width: 20%; width: 10%;
margin: 2em auto; margin: 2em auto;
color: white; color: white;
background-color: var(--sky-blue); background-color: var(--sky-blue);
@ -77,7 +77,8 @@ body {
} }
#interest-selection { #interest-selection {
width: 80%; max-width: 400px;
min-width: 40%;
padding: 8px; padding: 8px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;