More animations

This commit is contained in:
olcxja 2026-05-14 22:35:22 +02:00
commit d29c5eea74
12 changed files with 388 additions and 78 deletions

View file

@ -1,3 +1,11 @@
//room screens
var splashScreen = `
<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><blah>title.welcome.splash</blah></herotitle>
<p><blah>desc.welcome.splash</blah>. <span class="aqua">v<span class="clientver aqua">1.0</span></span></p>
</div>
`;
var addDmScreen = `
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M120-160v-600q0-33 23.5-56.5T200-840h480q33 0 56.5 23.5T760-760v203q-10-2-20-2.5t-20-.5q-10 0-20 .5t-20 2.5v-203H200v400h283q-2 10-2.5 20t-.5 20q0 10 .5 20t2.5 20H240L120-160Zm160-440h320v-80H280v80Zm0 160h200v-80H280v80Zm400 280v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-360v-400 400Z"/></svg>
@ -6,7 +14,7 @@ var addDmScreen = `
<br>
<div class="input-group">
<label for="addchat-username"><blah>title.username</blah></label>
<input type="text" id="addchat-username" placeholder="name@example.com" class="forminput">
<input type="text" id="addchat-username" placeholder="name:example.com" class="forminput">
</div>
<div class="input-group">
<button class="submit-button blah" onclick="addDm()">title.add.chat</button>
@ -37,11 +45,43 @@ var createSpaceScreen = `
<p><blah>desc.create.space</blah></p>
<br>
<div class="input-group">
<label for="addgroup-name"><blah>title.name</blah></label>
<label for="createspace-name"><blah>title.name</blah></label>
<input type="text" id="createspace-name" placeholder="{blah(placeholder.create.space.input)}" class="forminput">
</div>
<div class="input-group">
<button class="submit-button blah" onclick="createGroup()">title.create.space</button>
</div>
</div>
`;
var joinSpaceScreen = `
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>
<herotitle><blah>title.join.space</blah></herotitle>
<p><blah>desc.join.space</blah></p>
<br>
<div class="input-group">
<label for="joinspace-id"><blah>title.space.id</blah></label>
<input type="text" id="joinspace-id" placeholder="id:example.com" class="forminput">
</div>
<div class="input-group">
<label for="joinspace-code"><blah>title.invitation.code</blah></label>
<input type="text" id="joinspace-code" placeholder="{blah(placeholder.invitation.code)}" class="forminput">
</div>
<div class="input-group">
<button class="submit-button blah" onclick="createGroup()">title.join.space</button>
</div>
</div>
`;
//context menus
var addSpaceMenu = `
<button onclick="gotoJoinSpace()">
<svg xmlns="http://www.w3.org/2000/svg" width="1.4rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>
<span class="blah">title.join.space</span>
</button>
<button onclick="gotoCreateSpace()">
<svg xmlns="http://www.w3.org/2000/svg" width="1.4rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M80-120v-720h400v160h400v320h-80v-240H480v80h80v80h-80v80h80v80h-80v80h160v80H80Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80ZM800-40v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM640-440v-80h80v80h-80Zm0 160v-80h80v80h-80Z"/></svg>
<span class="blah">title.create.space</span>
</button>
`;