Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-18 08:44:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

add motd

Browse Source
This commit is contained in:
Vladimir Mandic
2023-10-09 08:46:48 -04:00
parent 6b4df05b5c
commit d951007d21
8 changed files with 37 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/loader.js
+7 -2
View File
@@ -31,11 +31,16 @@ async function createSplash() {
const splash = `
<div id="splash" class="splash" style="background: ${dark ? 'black' : 'white'}">
<div class="loading"><div class="loader"></div></div>
<div id="motd" class="motd""></div>
</div>`;
document.body.insertAdjacentHTML('beforeend', splash);
await preloadImages();
const imgElement = `<div class="splash-img" alt="logo" style="background-image: url(file=html/logo-bg-${dark ? 'dark' : 'light'}.jpg), url(file=html/logo-bg-${num}.jpg); background-blend-mode: ${dark ? 'multiply' : 'lighten'}"></div>`;
document.getElementById('splash').insertAdjacentHTML('afterbegin', imgElement);
const imgEl = `<div id="spash-img" class="splash-img" alt="logo" style="background-image: url(file=html/logo-bg-${dark ? 'dark' : 'light'}.jpg), url(file=html/logo-bg-${num}.jpg); background-blend-mode: ${dark ? 'multiply' : 'lighten'}"></div>`;
document.getElementById('splash').insertAdjacentHTML('afterbegin', imgEl);
fetch('/sdapi/v1/motd')
.then((res) => res.text())
.then((text) => document.getElementById('motd').innerHTML = text.replace(/["]+/g, ''))
.catch((err) => console.error('getMOTD:', err));
}
async function removeSplash() {
javascript/style.css
+1
View File
@@ -253,6 +253,7 @@ div.controlnet_main_options { display: grid; grid-template-columns: 1fr 1fr; gri
/* loader */
.splash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; display: block; text-align: center; }
.motd { margin-top: 2em; color: var(--body-text-color-subdued); font-family: monospace; font-variant: all-petite-caps; }
.splash-img { margin: 10% auto 0 auto; width: 512px; background-repeat: no-repeat; height: 512px; animation: color 10s infinite alternate; }
.loading { color: white; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); }
.loader { width: 300px; height: 300px; border: var(--spacing-md) solid transparent; border-radius: 50%; border-top: var(--spacing-md) solid var(--primary-600); animation: spin 4s linear infinite; position: relative; }