Add cool animations and placeholder pfps
This commit is contained in:
parent
8402564b28
commit
e0c044a894
13 changed files with 624 additions and 204 deletions
|
|
@ -8,104 +8,119 @@
|
|||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
<sidebar>
|
||||
<sidebarelement id="sidebar-home">
|
||||
<indicator class="active">
|
||||
</indicator>
|
||||
<button class="icon-button" aria-label="Homepage" onclick="gotoHome()">
|
||||
<svg viewBox="-1 -1 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.28"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
transform="translate(0 0.5)"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</sidebarelement>
|
||||
<hr>
|
||||
<sidebarelement id="sidebar-add">
|
||||
<indicator>
|
||||
</indicator>
|
||||
<button class="icon-button" aria-label="Add space" onclick="gotoCreateSpace()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</sidebarelement>
|
||||
<hr>
|
||||
<sidebarelement id="sidebar-profile" class="bottom-element">
|
||||
<indicator>
|
||||
</indicator>
|
||||
<button class="icon-button" aria-label="Profile" onclick="gotoSideProfilePopup()">
|
||||
<img id="sidebar-pfp" src="./pfpexamp.png">
|
||||
</button>
|
||||
</sidebarelement>
|
||||
</sidebar>
|
||||
|
||||
<sidebar class="second" id="roomsbar">
|
||||
<roomtopbar>
|
||||
Home
|
||||
</roomtopbar>
|
||||
<div class="sidebar-section-header">
|
||||
<button class="collapse-text-button" id="collapse-dms">
|
||||
<span>Direct messages</span>
|
||||
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="add-action-button" aria-label="Add Direct Message" id="add-dm-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section-header">
|
||||
<button class="collapse-text-button" id="collapse-groups">
|
||||
<span>Groups</span>
|
||||
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="add-action-button" aria-label="Add Group" id="add-group-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</sidebar>
|
||||
|
||||
<roomcontent>
|
||||
<roomtopbar>
|
||||
Splash
|
||||
</roomtopbar>
|
||||
<roomcontent2>
|
||||
<loading>
|
||||
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
||||
<img src="favicon.svg" style="width: 6rem">
|
||||
<herotitle>Welcome to Miarven</herotitle>
|
||||
<p>First Larpix client. <span class="aqua">v<span class="clientver aqua">1.0</span></span></p>
|
||||
<p id="loadingstatus"></p>
|
||||
</div>
|
||||
</roomcontent2>
|
||||
</roomcontent>
|
||||
<sidebar class="second" id="roomdetailsbar" style="display: none;">
|
||||
</sidebar>
|
||||
|
||||
</loading>
|
||||
<main style="display: none;">
|
||||
<sidebar>
|
||||
<sidebarelement id="sidebar-home">
|
||||
<indicator class="active">
|
||||
</indicator>
|
||||
<button class="icon-button" aria-label="Homepage" onclick="gotoHome()">
|
||||
<svg viewBox="-1 -1 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.28"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
transform="translate(0 0.5)"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</sidebarelement>
|
||||
<sidebarelement id="sidebar-add">
|
||||
<indicator>
|
||||
</indicator>
|
||||
<button class="icon-button" aria-label="Add space" onclick="gotoCreateSpace()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</sidebarelement>
|
||||
<hr>
|
||||
<hr class="bottom-element">
|
||||
<sidebarelement id="sidebar-inbox">
|
||||
<indicator>
|
||||
</indicator>
|
||||
<button class="icon-button" aria-label="Inbox" onclick="gotoSideInboxPopup()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M216-144q-29 0-50.5-21.5T144-216v-528q0-29.7 21.5-50.85Q187-816 216-816h528q29.7 0 50.85 21.15Q816-773.7 816-744v528q0 29-21.15 50.5T744-144H216Zm0-72h528v-144H632q-23 43-63.5 69.5T480-264q-49 0-89.5-26T328-360H216v144Zm332-148q28-28 28-68h168v-312H216v312h168q0 40 28 68t68 28q40 0 68-28ZM216-216h528-528Z"/></svg>
|
||||
</button>
|
||||
</sidebarelement>
|
||||
<sidebarelement id="sidebar-profile">
|
||||
<indicator>
|
||||
</indicator>
|
||||
<button class="icon-button" aria-label="Profile" onclick="gotoInbox()">
|
||||
<img id="sidebar-pfp">
|
||||
</button>
|
||||
</sidebarelement>
|
||||
</sidebar>
|
||||
|
||||
<sidebar class="second" id="roomsbar">
|
||||
<roomtopbar>
|
||||
Home
|
||||
</roomtopbar>
|
||||
<div class="sidebar-section-header">
|
||||
<button class="collapse-text-button" id="collapse-dms">
|
||||
<span>Direct messages</span>
|
||||
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="add-action-button" aria-label="Add Direct Message" id="add-dm-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section-header">
|
||||
<button class="collapse-text-button" id="collapse-groups">
|
||||
<span>Groups</span>
|
||||
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="add-action-button" aria-label="Add Group" id="add-group-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</sidebar>
|
||||
|
||||
<roomcontent>
|
||||
<roomtopbar>
|
||||
Splash
|
||||
</roomtopbar>
|
||||
<roomcontent2>
|
||||
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
||||
<img src="favicon.svg" style="width: 6rem">
|
||||
<herotitle>Welcome to Miarven</herotitle>
|
||||
<p>First Larpix client. <span class="aqua">v<span class="clientver aqua">1.0</span></span></p>
|
||||
</div>
|
||||
</roomcontent2>
|
||||
</roomcontent>
|
||||
<sidebar class="second" id="roomdetailsbar" style="display: none;">
|
||||
</sidebar>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<script src="main.js"></script>
|
||||
<script>
|
||||
async function start() {
|
||||
updateLoadingStatus("loading.loading");
|
||||
try {
|
||||
if (host != null)
|
||||
{
|
||||
|
|
@ -115,7 +130,9 @@
|
|||
{
|
||||
await updateProtocolAndUrl(window.location.hostname);
|
||||
}
|
||||
|
||||
|
||||
sidebarPfp.src = await getAvatarUrl(username);
|
||||
|
||||
showAction("Authenticating...", "startauth");
|
||||
let res = await Auth(username, password);
|
||||
clearAction("startauth");
|
||||
|
|
@ -126,6 +143,8 @@
|
|||
await delay(2000);
|
||||
window.location.href = "login/index.html";
|
||||
}
|
||||
updateLoadingStatus("loading.done");
|
||||
await loadingFadeOut();
|
||||
} catch (e) {
|
||||
clearAction("startauth");
|
||||
showBlahNotification("error:auth.failed.redirect.to.login");
|
||||
|
|
@ -170,6 +189,5 @@
|
|||
|
||||
}
|
||||
|
||||
start();
|
||||
</script>
|
||||
<script src="userscript.js"></script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue