From 106cfbcbb3f9521cda6205e097ef5866bf8ec7ec Mon Sep 17 00:00:00 2001 From: Max Value Date: Wed, 13 May 2026 21:13:58 +0100 Subject: [PATCH] Bulk commit corry ): --- argo/__init__.py | 4 + argo/admin.py | 7 ++ argo/src/admin.ts | 47 +++++++++++ argo/src/image.ts | 12 +++ argo/src/marquee.ts | 56 +++++++++++++ argo/src/time.ts | 34 +++++++- argo/src/update.ts | 6 +- argo/src/utils.ts | 15 +++- argo/static/admin.css | 17 +++- argo/static/media/assets/strap1.svg | 69 +++++++++++++++ argo/static/style.css | 1 + argo/static/style/bottom_box.css | 5 ++ argo/static/style/bottom_graphic.css | 28 +++++++ argo/static/style/box.css | 6 +- argo/static/style/crawler_marquee.css | 7 ++ argo/static/style/crawler_outer_box.css | 27 ++++++ argo/static/style/crawler_timer_box.css | 32 +++++++ argo/static/style/crawler_top.css | 21 +++++ argo/static/style/discount_box.css | 3 +- argo/static/style/item_box.css | 13 +++ argo/static/style/logo_box.css | 9 +- argo/static/style/monthly_box.css | 33 ++++++++ argo/static/style/pricing_box.css | 12 +++ argo/static/style/side_box.css | 3 +- argo/static/style/side_timer_box.css | 35 ++++++++ argo/static/style/spin_box.css | 8 ++ argo/templates/admin.html | 23 +++-- argo/templates/admin/timer.html | 13 +++ argo/templates/admin/toggle.html | 13 +++ argo/templates/index.html | 106 ++++++++++++++++++++---- argo/templates/info/c.html | 2 +- argo/templates/table.html | 26 ++---- requirements.txt | 1 + 33 files changed, 638 insertions(+), 56 deletions(-) create mode 100644 argo/src/image.ts create mode 100644 argo/src/marquee.ts create mode 100644 argo/static/media/assets/strap1.svg create mode 100644 argo/static/style/bottom_box.css create mode 100644 argo/static/style/bottom_graphic.css create mode 100644 argo/static/style/crawler_marquee.css create mode 100644 argo/static/style/crawler_outer_box.css create mode 100644 argo/static/style/crawler_timer_box.css create mode 100644 argo/static/style/crawler_top.css create mode 100644 argo/static/style/monthly_box.css create mode 100644 argo/static/style/spin_box.css create mode 100644 argo/templates/admin/timer.html create mode 100644 argo/templates/admin/toggle.html diff --git a/argo/__init__.py b/argo/__init__.py index 2b0c685..f3e03d6 100644 --- a/argo/__init__.py +++ b/argo/__init__.py @@ -42,6 +42,10 @@ def index(): def connecting(): emit("update", database_read_views(), json=True, namespace="/", broadcast=True) +@app.route("/data", methods=["get"]) +def data(): + return database_read_views() + # info screen pages @app.route("/info/", methods=["get"]) diff --git a/argo/admin.py b/argo/admin.py index dac3bb5..65e4cb5 100644 --- a/argo/admin.py +++ b/argo/admin.py @@ -1,6 +1,8 @@ from flask import render_template, request from flask_socketio import emit +from glob import glob import time +import os from argo.database.read import read_indexes as database_read_indexes from argo.database.read import read_views as database_read_views @@ -10,9 +12,14 @@ from argo.database.read import read as database_read from argo import STAR def admin_main(): + from argo import app + assets = glob(os.path.join(app.root_path, "static", "media", "assets", "*")) + assets = [path.split("argo")[-1] for path in assets] + return render_template( "admin.html", indexes=database_read_indexes(), + assets=assets, star=STAR ) diff --git a/argo/src/admin.ts b/argo/src/admin.ts index 22e72e3..fdc2e65 100644 --- a/argo/src/admin.ts +++ b/argo/src/admin.ts @@ -38,3 +38,50 @@ export function setupTrigger() { }) } } + +export function setupTimerButtons() { + // setup all timer control buttons + const el: HTMLCollectionOf = + document.getElementsByClassName("timer"); + + for (let e of el) { + e.addEventListener("click", (event) => { + if (event.target instanceof HTMLElement) { + let delay = document.getElementById(`${event.target.getAttribute('name')}+delay`); + + if (delay instanceof HTMLInputElement) { + delay.value = eval(`${delay.value}${event.target.getAttribute('value')}`); + } + } + }) + } +} + +export function setupClipboard() { + // copy previous links href to the clipboard + const el: HTMLCollectionOf = + document.getElementsByClassName("clipboard"); + + for (let e of el) { + const button = document.createElement("button"); + button.innerHTML = "Copy Link"; + + button.addEventListener("click", (event) => { + const button = event.target; + if (button instanceof HTMLElement) { + const link = button.previousElementSibling; + if (link instanceof HTMLAnchorElement) { + navigator.clipboard.writeText(link["href"]); + button.innerHTML = "Copied!"; + setTimeout(function () { + button.innerHTML = "Copy Link"; + }, 1000) + } + } + }) + + if (e.parentNode instanceof HTMLElement) { + e.parentNode.insertBefore(button, e.nextSibling); + } + } +} diff --git a/argo/src/image.ts b/argo/src/image.ts new file mode 100644 index 0000000..f26cef0 --- /dev/null +++ b/argo/src/image.ts @@ -0,0 +1,12 @@ +export default function renderImage(): void { + const el: HTMLCollectionOf = + document.getElementsByClassName("image"); + + for (let e of el) { + if (e instanceof HTMLImageElement) { + if (typeof e.dataset.raw === "string") { + e.src = `${e.dataset.raw}?${new Date().getTime()}` // cachebreaker! + } + } + } +} diff --git a/argo/src/marquee.ts b/argo/src/marquee.ts new file mode 100644 index 0000000..91a7d32 --- /dev/null +++ b/argo/src/marquee.ts @@ -0,0 +1,56 @@ +const marqueeInterval: number = 20; //ms + +export default function setupMarquee(): void { + const el: HTMLCollectionOf = + document.getElementsByClassName("marquee"); + + for (let e of el) { + if (e instanceof HTMLElement) { + e.dataset.current = "0"; + setInterval(function() { + const box = e.parentNode; + if (box instanceof HTMLElement) { + let inner = e.getBoundingClientRect().right; + let outer = box.getBoundingClientRect().left; + let width = box.getBoundingClientRect().width; + + if (inner - outer < 0) { + randomPopulate(e); + + e.style = `transform: translateX(${width}px);` + e.dataset.current = width as unknown as string; + } + + let position = e.dataset.current as unknown as number - 1; + e.style = `transform: translateX(${position}px);` + e.dataset.current = position as unknown as string; + } + }, marqueeInterval); + } + } +} + +function randomPopulate(e: HTMLElement) { + if (typeof e.dataset.raw === "string") { + let data = eval(e.dataset.raw); + if (data instanceof Array) { + if (data.length == 0) { return } + else { + let index = randomInt(0, data.length); + + while (index as unknown as string == e.dataset.index) { + index = randomInt(0, data.length); + } + + e.innerHTML = data[index]; + e.dataset.index = index as unknown as string; + } + } else if (typeof data == "string") { // UNTESTED + e.innerHTML = data; + } + } +} + +function randomInt(min: number, max: number): number { + return Math.floor(Math.random() * (max - min) + min) +} diff --git a/argo/src/time.ts b/argo/src/time.ts index 84b69f3..6ab52c0 100644 --- a/argo/src/time.ts +++ b/argo/src/time.ts @@ -1,4 +1,10 @@ -import { timeSince, timeUntil, timeFormatBroadcast } from "./utils.js"; +import { + timeSince, + timeUntil, + timeFormatBroadcast, + timeFormatStandard, + timeFormatState +} from "./utils.js"; const timeUpdate: number = 1000; // ms @@ -34,13 +40,33 @@ export function setupTimeUntil(): void { setInterval( function () { const el: HTMLCollectionOf = - document.getElementsByClassName("until"); + document.getElementsByClassName("until"); for (let e of el) { if (e instanceof HTMLElement) { if (typeof e.dataset.raw === "string") { - let [hours, minutes, seconds] = timeUntil(eval(e.dataset.raw)) - e.innerHTML = timeFormatBroadcast(hours, minutes, seconds); + let [hours, minutes, seconds, totalSeconds] = timeUntil(eval(e.dataset.raw)) + + let length = e.dataset.raw.split("+")[1] as unknown as number; + let percent = (totalSeconds / length) * 100 + e.style = `--percent: ${percent}%;` + + // populate + if (e.classList.contains("until-broadcast")) { // broadcast timer + e.innerHTML = timeFormatBroadcast(hours, minutes, seconds); + } else if (e.classList.contains("until-timeout")) { // state changes when run down + e.dataset.timeout = timeFormatState(hours, minutes, seconds); + } else if (e.classList.contains("until-sound")) { // play sounds when run down + let timeout: string = timeFormatState(hours, minutes, seconds); + if (timeout == "true" && e.dataset.last == "false") { + if (e instanceof HTMLMediaElement) { + e.play(); + } + } + e.dataset.last = timeout; + } else { // standard timer (MM:SS) + e.innerHTML = timeFormatStandard(hours, minutes, seconds); + } } } } diff --git a/argo/src/update.ts b/argo/src/update.ts index f122da3..6a984d5 100644 --- a/argo/src/update.ts +++ b/argo/src/update.ts @@ -5,13 +5,16 @@ import { setupTimeSince, setupTimeUntil } from "./time.js"; import { setupSounds, playSounds } from "./sound.js"; import { setupStyle, renderStyle } from "./style.js"; import renderShowUntil from "./show_until.js"; +import setupMarquee from "./marquee.js"; import renderState from "./state.js"; -import renderPrice from "./price.js" +import renderPrice from "./price.js"; +import renderImage from "./image.js"; import renderText from "./text.js"; export default function setupUpdate(): void { setupTimeSince(); setupTimeUntil(); + setupMarquee(); setupSounds(); setupStyle(); @@ -35,6 +38,7 @@ export default function setupUpdate(): void { renderState(); renderPrice(); renderStyle(); + renderImage(); renderText(); playSounds(); diff --git a/argo/src/utils.ts b/argo/src/utils.ts index 684ee85..b2cadb1 100644 --- a/argo/src/utils.ts +++ b/argo/src/utils.ts @@ -9,7 +9,7 @@ export function timeUntil(end: number): number[] { let minutes: number = Math.floor(time / 60); let seconds: number = Math.floor(time % 60); - return [hours, minutes, seconds] + return [hours, minutes, seconds, time] } export function timeSince(end: number): number[] { @@ -26,6 +26,14 @@ export function timeSince(end: number): number[] { return [hours, minutes, seconds] } +export function timeFormatStandard(hours: number, minutes: number, seconds: number): string { + var hoursString = hours.toString().padStart(2, "0"); + var minutesString = minutes.toString().padStart(2, "0"); + var secondsString = seconds.toString().padStart(2, "0"); + + return `${minutesString}:${secondsString}` +} + export function timeFormatBroadcast(hours: number, minutes: number, seconds: number): string { var hoursString = hours.toString().padStart(2, "0"); var minutesString = minutes.toString().padStart(2, "0"); @@ -33,3 +41,8 @@ export function timeFormatBroadcast(hours: number, minutes: number, seconds: num return `${hoursString}h ${minutesString}' ${secondsString}"` } + +export function timeFormatState(hours: number, minutes: number, seconds: number): string { + if (hours + minutes + seconds == 0) { return "true" } + else { return "false" } +} diff --git a/argo/static/admin.css b/argo/static/admin.css index aee1ec6..9857c03 100644 --- a/argo/static/admin.css +++ b/argo/static/admin.css @@ -30,6 +30,7 @@ main { input[type="submit"]:first-of-type { outline: 15px solid white; position: sticky; top: 0px; + z-index: 2; } /* THE OPTIONS GRID */ @@ -52,7 +53,6 @@ input[type="submit"]:first-of-type { z-index: 1; } .currentValue { color: red; } -.currentValue[type="radio"] { background-color: red; } i { font-style: normal; @@ -68,6 +68,21 @@ i { -1px 0px 0 black; } +.clipboard ~ button { + margin-left: 0.5em; +} + +/* timer button text colors */ +.timer[value^="+"] { color: green; } +.timer[value^="-"] { color: red; } + +#assetGrid { + display: grid; grid-template-columns: 30% 70%; + column-gap: 10px; row-gap: 10px; + margin-bottom: 10px; +} +#assetGrid > img { border: 1px solid black; } + /* PRINT MODE need to work on this a little bit, currently just hides things that shouldnt be printed and thats all. Should be able to potentially display diff --git a/argo/static/media/assets/strap1.svg b/argo/static/media/assets/strap1.svg new file mode 100644 index 0000000..054ce95 --- /dev/null +++ b/argo/static/media/assets/strap1.svg @@ -0,0 +1,69 @@ + + + + + + + + + XMDV + Teleshopping + + + diff --git a/argo/static/style.css b/argo/static/style.css index 3295c95..d8f95a7 100644 --- a/argo/static/style.css +++ b/argo/static/style.css @@ -3,3 +3,4 @@ font-weight: 600; } .title { text-transform: capitalize; } +.style { display: none; } diff --git a/argo/static/style/bottom_box.css b/argo/static/style/bottom_box.css new file mode 100644 index 0000000..2a3d472 --- /dev/null +++ b/argo/static/style/bottom_box.css @@ -0,0 +1,5 @@ +.styleBottomBox { + position: fixed; + bottom: var(--safeVertical); left: var(--safeHorizontal); + width: calc(100vw - (var(--safeHorizontal) * 2)) !important; +} diff --git a/argo/static/style/bottom_graphic.css b/argo/static/style/bottom_graphic.css new file mode 100644 index 0000000..26c747d --- /dev/null +++ b/argo/static/style/bottom_graphic.css @@ -0,0 +1,28 @@ +.styleBottomGraphic { + margin-left: calc(100% - var(--bottomGraphicWidth)) !important; + margin-bottom: 0 !important; + box-sizing: border-box; + width: var(--bottomGraphicWidth) !important; +} + +.state-false .styleBottomGraphic { + padding: 0; margin: 0; +} +.styleBottomGraphic { + opacity: 0; max-height: 0; + transform: translateY(20px); + /* should do some tweeking for the below */ + transition: + opacity var(--baseAnimationLength), + max-height var(--baseAnimationLength) cubic-bezier(1,0,0,1), + padding var(--baseAnimationLength), + margin var(--baseAnimationLength), + transform var(--baseAnimationLength); + overflow: hidden; +} +.state-true .styleBottomGraphic { + opacity: 1; max-height: 50vh; + transform: translateY(0px); +} + +.styleBottomGraphic { display: grid; grid-template-columns: minmax(0, 1fr) auto; } diff --git a/argo/static/style/box.css b/argo/static/style/box.css index 35a7a24..40274d0 100644 --- a/argo/static/style/box.css +++ b/argo/static/style/box.css @@ -11,7 +11,7 @@ text-shadow: var(--textAShadow); background: var(--backgroundA); - box-shadow: inset 0 0 var(--innerGlowSize) var(--innerGlowColor); + box-shadow: inset 0 0 var(--innerGlowASize) var(--innerGlowAColor); border: var(--borderASize) solid var(--borderAColor); border-radius: var(--borderARadius); @@ -29,7 +29,7 @@ text-shadow: var(--textBShadow); background: var(--backgroundB); - box-shadow: inset 0 0 var(--innerGlowSize) var(--innerGlowColor); + box-shadow: inset 0 0 var(--innerGlowBSize) var(--innerGlowBColor); border: var(--borderBSize) solid var(--borderBColor); border-radius: var(--borderBRadius); @@ -47,7 +47,7 @@ text-shadow: var(--textCShadow); background: var(--backgroundC); - box-shadow: inset 0 0 var(--innerGlowSize) var(--innerGlowColor); + box-shadow: inset 0 0 var(--innerGlowCSize) var(--innerGlowCColor); border: var(--borderCSize) solid var(--borderCColor); border-radius: var(--borderCRadius); diff --git a/argo/static/style/crawler_marquee.css b/argo/static/style/crawler_marquee.css new file mode 100644 index 0000000..5733928 --- /dev/null +++ b/argo/static/style/crawler_marquee.css @@ -0,0 +1,7 @@ +.styleCrawlerMarquee { + font-size: 1.5em; + display: inline-block; +} +.styleCrawlerInnerBox { + overflow: clip; +} diff --git a/argo/static/style/crawler_outer_box.css b/argo/static/style/crawler_outer_box.css new file mode 100644 index 0000000..2b2b760 --- /dev/null +++ b/argo/static/style/crawler_outer_box.css @@ -0,0 +1,27 @@ +body.state-blank .styleCrawlerOuterBox { + padding: 0; margin: 0; +} +.styleCrawlerOuterBox { + opacity: 0; max-height: 0; + transform: translateX(-20px); + /* should do some tweeking for the below */ + transition: + opacity var(--baseAnimationLength), + max-height var(--baseAnimationLength) cubic-bezier(1,0,0,1), + padding var(--baseAnimationLength), + margin var(--baseAnimationLength), + transform var(--baseAnimationLength); + overflow: hidden; +} +body:not(.state-blank) .styleCrawlerOuterBox { + opacity: 1; max-height: 50vh; + transform: translateX(0px); +} + +/* BEGIN GRID LAYOUT */ + +.styleCrawlerOuterBox { display: grid; grid-template-columns: minmax(0, 1fr) auto; } +.styleCrawlerOuterBox:has(*[data-timeout="false"]) { column-gap: var(--boxHPad); } +.styleCrawlerOuterBox > *:first-child { grid-column-start: 1; grid-column-end: 3; } + +/* END GRID LAYOUT */ diff --git a/argo/static/style/crawler_timer_box.css b/argo/static/style/crawler_timer_box.css new file mode 100644 index 0000000..036eaf2 --- /dev/null +++ b/argo/static/style/crawler_timer_box.css @@ -0,0 +1,32 @@ +.styleCrawlerTimerBox { + font-size: 1.5em; + background: + linear-gradient( + color-mix(in srgb, var(--borderBColor), transparent 100%), + color-mix(in srgb, var(--borderBColor), transparent 100%) var(--percent), + color-mix(in srgb, var(--borderBColor), transparent 0%) calc(var(--percent) + 1px), + color-mix(in srgb, var(--borderBColor), transparent 0%) + ), + var(--backgroundC) + !important; +} + +.styleCrawlerTimerBox[data-timeout="true"] { + padding: 0; margin: 0; +} +.styleCrawlerTimerBox { + opacity: 0; max-width: 0; + transform: translateX(20px); + /* should do some tweeking for the below */ + transition: + opacity var(--baseAnimationLength), + max-width var(--baseAnimationLength) cubic-bezier(1,0,0,1), + padding var(--baseAnimationLength), + margin var(--baseAnimationLength), + transform var(--baseAnimationLength); + overflow: hidden; +} +.styleCrawlerTimerBox[data-timeout="false"] { + opacity: 1; max-width: 50vh; + transform: translateX(0px); +} diff --git a/argo/static/style/crawler_top.css b/argo/static/style/crawler_top.css new file mode 100644 index 0000000..04b06f7 --- /dev/null +++ b/argo/static/style/crawler_top.css @@ -0,0 +1,21 @@ +.state-false .styleCrawlerTop { + padding: 0; margin: 0; +} +.styleCrawlerTop { + opacity: 0; max-height: 0; + transform: translateY(20px); + /* should do some tweeking for the below */ + transition: + opacity var(--baseAnimationLength), + max-height var(--baseAnimationLength) cubic-bezier(1,0,0,1), + padding var(--baseAnimationLength), + margin var(--baseAnimationLength), + transform var(--baseAnimationLength); + overflow: hidden; +} +.state-true .styleCrawlerTop { + opacity: 1; max-height: 50vh; + transform: translateY(0px); +} + +.styleCrawlerTop { display: grid; grid-template-columns: minmax(0, 1fr) auto; } diff --git a/argo/static/style/discount_box.css b/argo/static/style/discount_box.css index 2c84661..c70a144 100644 --- a/argo/static/style/discount_box.css +++ b/argo/static/style/discount_box.css @@ -1,5 +1,4 @@ -.styleDiscountBox > em { - display: block; +.styleDiscountBox em { font-size: 0.7em; line-height: 1.4em; } diff --git a/argo/static/style/item_box.css b/argo/static/style/item_box.css index f40ef48..3a849a3 100644 --- a/argo/static/style/item_box.css +++ b/argo/static/style/item_box.css @@ -27,3 +27,16 @@ body.state-sold .styleItemBox { opacity: 1; max-height: 50vh; transform: translateX(0px); } + +/* text styling in item box */ +.styleItemId {} +.styleItemTitle { + font-size: 1.1em; + line-height: 1.3; +} +.styleItemDescription { + display: block; + font-size: 0.8em; + line-height: 1.3; + font-weight: 400; +} diff --git a/argo/static/style/logo_box.css b/argo/static/style/logo_box.css index c070292..b17bf33 100644 --- a/argo/static/style/logo_box.css +++ b/argo/static/style/logo_box.css @@ -15,9 +15,16 @@ body:not( margin var(--baseAnimationLength), transform var(--baseAnimationLength); overflow: hidden; + + color: white; + + width: fit-content; + text-align: center; + font-size: 1.5em; + font-weight: 800; } body.state-product .styleLogoBox, body.state-crawler .styleLogoBox { - opacity: 1; max-height: 50vh; + opacity: .4; max-height: 50vh; transform: translateX(0px); } diff --git a/argo/static/style/monthly_box.css b/argo/static/style/monthly_box.css new file mode 100644 index 0000000..92e025d --- /dev/null +++ b/argo/static/style/monthly_box.css @@ -0,0 +1,33 @@ +/* +body:not( + .state-discount, + .state-move +) .styleMonthlyBox { + padding: 0; margin: 0; +} +*/ +.styleMonthlyBox { + /* + opacity: 0; max-height: 0; + transform: translateX(-20px); + /* should do some tweeking for the below *//* + transition: + opacity var(--baseAnimationLength), + max-height var(--baseAnimationLength) cubic-bezier(1,0,0,1), + padding var(--baseAnimationLength), + margin var(--baseAnimationLength), + transform var(--baseAnimationLength); + overflow: hidden; + */ + + font-size: calc(0.75 * var(--baseFontSize)); + line-height: 1; +} +/* +body.state-discount .styleMonthlyBox, +body.state-move .styleMonthlyBox { + opacity: 1; max-height: 50vh; + transform: translateX(0px); + padding: 5px; +} +*/ diff --git a/argo/static/style/pricing_box.css b/argo/static/style/pricing_box.css index 57d2fff..0a89d62 100644 --- a/argo/static/style/pricing_box.css +++ b/argo/static/style/pricing_box.css @@ -12,6 +12,10 @@ body:not(.state-price, .state-discount, .state-move) .stylePricingBox { margin var(--baseAnimationLength), transform var(--baseAnimationLength); overflow: hidden; + + font-size: 0.8em; + line-height: 1; + font-weight: 400; } body.state-price .stylePricingBox, body.state-discount .stylePricingBox, @@ -19,3 +23,11 @@ body.state-move .stylePricingBox { opacity: 1; max-height: 50vh; transform: translateX(0px); } + +body.state-discount .stylePricingBox .styleStrikeDependant, +body.state-move .stylePricingBox .styleStrikeDependant { + text-decoration: line-through var(--textBColor) solid 3px; +} + +.styleStartPrice { font-size: 1.5em; font-weight: 600; } +.stylePhoneNumber { font-size: 1.5em; } diff --git a/argo/static/style/side_box.css b/argo/static/style/side_box.css index 066842e..b5591c1 100644 --- a/argo/static/style/side_box.css +++ b/argo/static/style/side_box.css @@ -4,7 +4,8 @@ display: flex; flex-direction: column; - margin: 50px; + /* standard HD safe margins */ + margin: var(--safeVertical) 0 0 var(--safeHorizontal); } .styleSideBox > * { margin-bottom: 5px; diff --git a/argo/static/style/side_timer_box.css b/argo/static/style/side_timer_box.css index dfd48d4..2594647 100644 --- a/argo/static/style/side_timer_box.css +++ b/argo/static/style/side_timer_box.css @@ -1,4 +1,39 @@ .styleSideTimerBox { display: inline; width: fit-content !important; + + text-shadow: + 1px 1px 3px white, -1px 1px 3px white, 1px -1px 3px white, -1px -1px 3px white, + 0 1px 3px white, 0 -1px 3px white, 1px 0 3px white, -1px 0 3px white + !important; + background: + linear-gradient( + -0.25turn, + color-mix(in srgb, var(--borderBColor), transparent 100%), + color-mix(in srgb, var(--borderBColor), transparent 100%) var(--percent), + color-mix(in srgb, var(--borderBColor), transparent 0%) calc(var(--percent) + 1px), + color-mix(in srgb, var(--borderBColor), transparent 0%) + ), + var(--backgroundA) + !important; +} + +.styleSideTimerBox[data-timeout="true"] { + padding: 0; margin: 0; +} +.styleSideTimerBox { + opacity: 0; max-height: 0; + transform: translateX(-20px); + /* should do some tweeking for the below */ + transition: + opacity var(--baseAnimationLength), + max-height var(--baseAnimationLength) cubic-bezier(1,0,0,1), + padding var(--baseAnimationLength), + margin var(--baseAnimationLength), + transform var(--baseAnimationLength); + overflow: hidden; +} +.styleSideTimerBox[data-timeout="false"] { + opacity: 1; max-height: 50vh; + transform: translateX(0px); } diff --git a/argo/static/style/spin_box.css b/argo/static/style/spin_box.css new file mode 100644 index 0000000..fb6b244 --- /dev/null +++ b/argo/static/style/spin_box.css @@ -0,0 +1,8 @@ +@keyframes spin { + from { transform: rotateY(-90deg); } + to { transform: rotateY(90deg); } +} + +.styleSpinBox { + animation: 6s linear 0s spin infinite; +} diff --git a/argo/templates/admin.html b/argo/templates/admin.html index 40fae54..fa9ebf6 100644 --- a/argo/templates/admin.html +++ b/argo/templates/admin.html @@ -12,8 +12,8 @@ @@ -49,10 +49,21 @@ setupTrigger();
  • Info page C (Gallery screen, timing and state)
    • - +

    Assets

    + +
    + {% for path in assets %} + + Link + {% endfor %} +
    + + {# + + #}
    Delta Aa - Delta Ab - Nomenclature diff --git a/argo/templates/admin/timer.html b/argo/templates/admin/timer.html new file mode 100644 index 0000000..9f1364a --- /dev/null +++ b/argo/templates/admin/timer.html @@ -0,0 +1,13 @@ + + + + seconds + + + + + + + diff --git a/argo/templates/admin/toggle.html b/argo/templates/admin/toggle.html new file mode 100644 index 0000000..66bbdde --- /dev/null +++ b/argo/templates/admin/toggle.html @@ -0,0 +1,13 @@ + + + {% if value == "true" %} + + + + {% else %} + + + + {% endif %} + +{{ value }} diff --git a/argo/templates/index.html b/argo/templates/index.html index fb92419..1bfab8f 100644 --- a/argo/templates/index.html +++ b/argo/templates/index.html @@ -10,19 +10,26 @@ {# ELEMENT STYLING IMPORTS #} + + + + + + + + {# HELPER IMPORTS #} - @@ -22,6 +23,7 @@ setupTrigger();

    δ Velorum {{ star }} Table: {{ table_name }}

    -
    + {% for row in table %} @@ -49,10 +51,12 @@ setupTrigger(); display: flex; justify-content: center; align-items: center; - "> + " {% if loop.index0 == indexes["int--" ~ table_name] %} - + id="current"> + {% else %} + > {% endif %} @@ -68,19 +72,7 @@ setupTrigger(); {% set value = row[feild] %} {% set name = table_name ~ "~~" ~ group ~ "~~" ~ feild %} - {% if type == "textarea" %} - {% include "admin/textarea.html" %} - {% elif type == "text" %} - {% include "admin/text.html" %} - {% elif type == "number" %} - {% include "admin/number.html" %} - {% elif type == "float" %} - {% include "admin/float.html" %} - {% elif type == "trigger" %} - {% include "admin/trigger.html" %} - {% elif type == "color" %} - {% include "admin/color.html" %} - {% endif %} + {% include "admin/" ~ type ~ ".html" %} {% endfor %} diff --git a/requirements.txt b/requirements.txt index 797b570..c1a1519 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,3 +1,4 @@ +prometheus-flask-exporter flask_socketio flask_httpauth flask_cors -- 2.39.2