From: Max Value <greenwoodw50@gmail.com>
Date: Sun, 19 Apr 2026 22:41:39 +0000 (+0100)
Subject: Bulk commit
X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=9fde77889f21530f17dad55398ffa2f72a2481e0;p=delta-velorum

Bulk commit
---

diff --git a/director/static/admin.css b/director/static/admin.css
index dd2fdee..cc4422f 100644
--- a/director/static/admin.css
+++ b/director/static/admin.css
@@ -20,7 +20,6 @@ main {
 	left: min(20%, calc(350px));
 }
 
-
 /* THE OPTIONS GRID */
 
 .optionsGrid {
@@ -51,6 +50,11 @@ main {
 		or annotate on the page.
  */
 
+@media ( max-width: 1000px ) {
+	nav { position: static; }
+	main { position: static; }
+}
+
 @media print {
 	nav, [type="radio"] { display: none }
 	[type="submit"] { opacity: 0; }
diff --git a/director/static/media/sfx/banner_shout.wav b/director/static/media/sfx/banner_shout.wav
new file mode 100644
index 0000000..4525408
Binary files /dev/null and b/director/static/media/sfx/banner_shout.wav differ
diff --git a/director/static/media/sfx/state_change.wav b/director/static/media/sfx/state_change.wav
new file mode 100644
index 0000000..9a34860
Binary files /dev/null and b/director/static/media/sfx/state_change.wav differ
diff --git a/director/static/show_until.css b/director/static/show_until.css
deleted file mode 100644
index 28e2f5b..0000000
--- a/director/static/show_until.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.showUntil {
-	opacity: 0;
-	transition: opacity 0.5s;
-}
-.showUntil.showUntil-showing { opacity: 1; }
diff --git a/director/static/style.css b/director/static/style.css
index 892f158..3295c95 100644
--- a/director/static/style.css
+++ b/director/static/style.css
@@ -1 +1,5 @@
-title { text-transform: capitalize; }
+:root {
+	font-size: var(--baseFontSize);
+	font-weight: 600;
+}
+.title { text-transform: capitalize; }
diff --git a/director/static/style/banner_box.css b/director/static/style/banner_box.css
new file mode 100644
index 0000000..83213b6
--- /dev/null
+++ b/director/static/style/banner_box.css
@@ -0,0 +1,20 @@
+body:not(.state-sold, .state-move) .styleBannerBox {
+	padding: 0; margin: 0;
+}
+.styleBannerBox {
+	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.state-sold .styleBannerBox,
+body.state-move .styleBannerBox {
+	opacity: 1; max-height: 50vh;
+	transform: translateX(0px);
+}
diff --git a/director/static/style/box.css b/director/static/style/box.css
new file mode 100644
index 0000000..35a7a24
--- /dev/null
+++ b/director/static/style/box.css
@@ -0,0 +1,59 @@
+:root {
+	--boxHPad: 6px;
+	--boxVPad: 2px;
+	--boxHMar: 0px;
+	--boxVMar: 5px;
+}
+.boxA {
+	width: calc(100% - 2 * (var(--boxHMar) + var(--boxHPad) + var(--borderASize)));
+
+	color: var(--textAColor);
+	text-shadow: var(--textAShadow);
+
+	background: var(--backgroundA);
+	box-shadow: inset 0 0 var(--innerGlowSize) var(--innerGlowColor);
+	border: var(--borderASize) solid var(--borderAColor);
+
+	border-radius: var(--borderARadius);
+	padding: var(--boxVPad) var(--boxHPad) var(--boxVPad) var(--boxHPad);
+	margin: var(--boxVMar) var(--boxHMar) var(--boxVMar) var(--boxHMar);
+}
+.boxA.styleExpand.showUntil:not(.showUntil-showing) {
+	margin-bottom: calc(-2 * var(--borderASize));
+}
+
+.boxB {
+	width: calc(100% - 2 * (var(--boxHMar) + var(--boxHPad) + var(--borderBSize)));
+
+	color: var(--textBColor);
+	text-shadow: var(--textBShadow);
+
+	background: var(--backgroundB);
+	box-shadow: inset 0 0 var(--innerGlowSize) var(--innerGlowColor);
+	border: var(--borderBSize) solid var(--borderBColor);
+
+	border-radius: var(--borderBRadius);
+	padding: var(--boxVPad) var(--boxHPad) var(--boxVPad) var(--boxHPad);
+	margin: var(--boxVMar) var(--boxHMar) var(--boxVMar) var(--boxHMar);
+}
+.boxB.styleExpand.showUntil:not(.showUntil-showing) {
+	margin-bottom: calc(-2 * var(--borderBSize));
+}
+
+.boxC {
+	width: calc(100% - 2 * (var(--boxHMar) + var(--boxHPad) + var(--borderCSize)));
+
+	color: var(--textCColor);
+	text-shadow: var(--textCShadow);
+
+	background: var(--backgroundC);
+	box-shadow: inset 0 0 var(--innerGlowSize) var(--innerGlowColor);
+	border: var(--borderCSize) solid var(--borderCColor);
+
+	border-radius: var(--borderCRadius);
+	padding: var(--boxVPad) var(--boxHPad) var(--boxVPad) var(--boxHPad);
+	margin: var(--boxVMar) var(--boxHMar) var(--boxVMar) var(--boxHMar);
+}
+.boxC.styleExpand.showUntil:not(.showUntil-showing) {
+	margin: 0 0 calc(-2 * var(--borderCSize)) 0;
+}
diff --git a/director/static/style/center_shout.css b/director/static/style/center_shout.css
new file mode 100644
index 0000000..21b5949
--- /dev/null
+++ b/director/static/style/center_shout.css
@@ -0,0 +1,29 @@
+.styleCenterShout {
+	position: absolute;
+	top: 0; left: 0; bottom: 0; right: 0;
+
+	display: flex;
+	align-items: center; justify-content: center;
+
+	text-transform: uppercase;
+}
+.styleCenterShout > div { background-color: red; }
+
+.styleCenterShout.showUntil > div {
+	transform: translateX(-100px);
+	opacity: 0;
+	transition:
+		transform var(--baseAnimationLength),
+		opacity var(--baseAnimationLength);
+}
+.styleCenterShout.showUntil > div > span {
+	display: block;
+	transform: translateX(200px);
+	transition: transform var(--baseAnimationLength);
+
+	text-transform: uppercase;
+}
+.styleCenterShout.showUntil-showing * {
+	opacity: 1 !important;
+	transform: translateX(0px) !important;
+}
diff --git a/director/static/style/discount_box.css b/director/static/style/discount_box.css
new file mode 100644
index 0000000..2c84661
--- /dev/null
+++ b/director/static/style/discount_box.css
@@ -0,0 +1,30 @@
+.styleDiscountBox > em {
+	display: block;
+	font-size: 0.7em;
+	line-height: 1.4em;
+}
+.styleDiscountBox > div {
+	font-size: 1.2em;
+}
+
+body:not(.state-discount, .state-move) .styleDiscountBox {
+	padding: 0; margin: 0;
+}
+.styleDiscountBox {
+	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.state-discount .styleDiscountBox,
+body.state-move .styleDiscountBox {
+	opacity: 1; max-height: 50vh;
+	transform: translateX(0px);
+}
+
diff --git a/director/static/style/item_box.css b/director/static/style/item_box.css
new file mode 100644
index 0000000..f40ef48
--- /dev/null
+++ b/director/static/style/item_box.css
@@ -0,0 +1,29 @@
+body:not(
+	.state-product,
+	.state-price,
+	.state-discount,
+	.state-move,
+	.state-sold
+) .styleItemBox {
+	padding: 0; margin: 0;
+}
+.styleItemBox {
+	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.state-product .styleItemBox,
+body.state-price .styleItemBox,
+body.state-discount .styleItemBox,
+body.state-move .styleItemBox,
+body.state-sold .styleItemBox {
+	opacity: 1; max-height: 50vh;
+	transform: translateX(0px);
+}
diff --git a/director/static/style/logo_box.css b/director/static/style/logo_box.css
new file mode 100644
index 0000000..c070292
--- /dev/null
+++ b/director/static/style/logo_box.css
@@ -0,0 +1,23 @@
+body:not(
+	.state-crawler,
+	.state-product
+) .styleLogoBox {
+	padding: 0; margin: 0;
+}
+.styleLogoBox {
+	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.state-product .styleLogoBox,
+body.state-crawler .styleLogoBox {
+	opacity: 1; max-height: 50vh;
+	transform: translateX(0px);
+}
diff --git a/director/static/style/pricing_box.css b/director/static/style/pricing_box.css
new file mode 100644
index 0000000..57d2fff
--- /dev/null
+++ b/director/static/style/pricing_box.css
@@ -0,0 +1,21 @@
+body:not(.state-price, .state-discount, .state-move) .stylePricingBox {
+	padding: 0; margin: 0;
+}
+.stylePricingBox {
+	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.state-price .stylePricingBox,
+body.state-discount .stylePricingBox,
+body.state-move .stylePricingBox {
+	opacity: 1; max-height: 50vh;
+	transform: translateX(0px);
+}
diff --git a/director/static/style/qty_box.css b/director/static/style/qty_box.css
new file mode 100644
index 0000000..b774fa3
--- /dev/null
+++ b/director/static/style/qty_box.css
@@ -0,0 +1,24 @@
+.styleQtyBox {
+	font-size: 0.7em;
+}
+
+body:not(.state-sold, .state-move) .styleQtyBox {
+	padding: 0; margin: 0;
+}
+.styleQtyBox {
+	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.state-sold .styleQtyBox,
+body.state-move .styleQtyBox {
+	opacity: 1; max-height: 50vh;
+	transform: translateX(0px);
+}
diff --git a/director/static/style/show_until.css b/director/static/style/show_until.css
new file mode 100644
index 0000000..451952f
--- /dev/null
+++ b/director/static/style/show_until.css
@@ -0,0 +1,19 @@
+.styleExpand.showUntil:not(.showUntil-showing) {
+	padding: 0; margin: 0;
+}
+.styleExpand.showUntil {
+	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;
+}
+.styleExpand.showUntil.showUntil-showing {
+	opacity: 1; max-height: 50vh;
+	transform: translateX(0px);
+}
diff --git a/director/static/style/side_box.css b/director/static/style/side_box.css
new file mode 100644
index 0000000..066842e
--- /dev/null
+++ b/director/static/style/side_box.css
@@ -0,0 +1,12 @@
+.styleSideBox {
+	width: var(--sideBoxWidth);
+
+	display: flex;
+	flex-direction: column;
+
+	margin: 50px;
+}
+.styleSideBox > * {
+	margin-bottom: 5px;
+	width: 100%;
+}
diff --git a/director/static/style/side_timer_box.css b/director/static/style/side_timer_box.css
new file mode 100644
index 0000000..dfd48d4
--- /dev/null
+++ b/director/static/style/side_timer_box.css
@@ -0,0 +1,4 @@
+.styleSideTimerBox {
+	display: inline;
+	width: fit-content !important;
+}
diff --git a/director/templates/index.html b/director/templates/index.html
index 5ce74fd..af8760e 100644
--- a/director/templates/index.html
+++ b/director/templates/index.html
@@ -2,9 +2,24 @@
 <html>
 	<head>
 		<link rel="stylesheet" href="/static/style.css">
-		<link rel="stylesheet" href="/static/show_until.css">
 		<link rel="stylesheet" href="/static/andika.css">
 
+		{# ELEMENT STYLING IMPORTS #}
+		<link rel="stylesheet" href="/static/style/side_box.css">
+		<link rel="stylesheet" href="/static/style/qty_box.css">
+		<link rel="stylesheet" href="/static/style/side_timer_box.css">
+		<link rel="stylesheet" href="/static/style/center_shout.css">
+		<link rel="stylesheet" href="/static/style/discount_box.css">
+		<link rel="stylesheet" href="/static/style/banner_box.css">
+		<link rel="stylesheet" href="/static/style/pricing_box.css">
+		<link rel="stylesheet" href="/static/style/item_box.css">
+		<link rel="stylesheet" href="/static/style/logo_box.css">
+
+		{# HELPER IMPORTS #}
+		<link rel="stylesheet" href="/static/style/box.css">
+		<link rel="stylesheet" href="/static/style/show_until.css">
+		<link rel="stylesheet" href="/static/style/background.css">
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -21,17 +36,120 @@ setupUpdate();
 	</head>
 	<body class="update data__state~~text--state state">
 
+		{# GLOBAL STYLING ELEMENTS #}
+		<span class="update style~~text--baseAnimationLength style"></span>
+		<span class="update style~~text--sideBoxWidth style"></span>
+		<span class="update style~~text--baseFontSize style"></span>
+
 		{# DYNAMIC STYLING ELEMENTS #}
-		<span class="update style__colorscheme~~color--text style"></span>
-		<span class="update style__colorscheme~~color--textAccent style"></span>
+
+		<span class="update style__colorscheme~~text--borderASize style"></span>
+		<span class="update style__colorscheme~~color--borderAColor style"></span>
+		<span class="update style__colorscheme~~text--borderBSize style"></span>
+		<span class="update style__colorscheme~~color--borderBColor style"></span>
+		<span class="update style__colorscheme~~text--borderCSize style"></span>
+		<span class="update style__colorscheme~~color--borderCColor style"></span>
+
+		<span class="update style__colorscheme~~color--textAColor style"></span>
+		<span class="update style__colorscheme~~color--textBColor style"></span>
+		<span class="update style__colorscheme~~color--textCColor style"></span>
+		<span class="update style__colorscheme~~text--textAShadow style"></span>
+		<span class="update style__colorscheme~~text--textBShadow style"></span>
+		<span class="update style__colorscheme~~text--textCShadow style"></span>
+
+		<span class="update style__colorscheme~~text--borderARadius style"></span>
+		<span class="update style__colorscheme~~text--borderBRadius style"></span>
+		<span class="update style__colorscheme~~text--borderCRadius style"></span>
+
+		<span class="update style__colorscheme__backgroundA~~text--backgroundA style"></span>
+		<span class="update style__colorscheme__backgroundB~~text--backgroundB style"></span>
+		<span class="update style__colorscheme__backgroundC~~text--backgroundC style"></span>
+
+		<span class="update style__colorscheme~~color--innerGlowColor style"></span>
+		<span class="update style__colorscheme~~text--innerGlowSize style"></span>
 
 		{# SFX ELEMENTS #}
+		<audio src="/static/media/sfx/banner_shout.wav" class="update data~~trigger--bannerShoutTrigger sound"></audio>
 		<audio src="/static/media/sfx/clock.wav" class="update data__clock~~number--positionDegrees sound"></audio>
-		<audio src="/static/media/sfx/shout.wav" class="update data~~trigger--shoutTrigger sound"></audio>
+		<audio src="/static/media/sfx/state_change.wav" class="update data__state~~text--state sound"></audio>
+		<audio src="/static/media/sfx/shout.wav" class="update data~~trigger--centerShoutTrigger sound"></audio>
+
+		{# CENTER SHOUT #}
+		<div class="styleCenterShout update data~~trigger--centerShoutTrigger showUntil">
+			<div>
+				<span class="update data~~text--centerShoutText text"></span>
+			</div>
+		</div>
+
+		{# SIDE BOX
+				includes (top to bottom):
+				- LOGO BOX (show during: crawler, product)
+				- BANNER BOX (show during: move, sold)
+				- ITEM BOX (show during: product, price, discount, move, sold)
+				- PRICING BOX (show during: price, discount, move)
+				- DISCOUNT BOX (show during: discount, move)
+				- BANNER SHOUT BOX (show AD)
+				- QTY BOX (show during: move, sold)
+				- TIMER 1 BOX (show AD)
+				- TIMER 2 BOX (show AD)
+
+				these are switched on and off using the state class from the
+				body tag.
+		#}
+		<div class="styleSideBox">
+
+			{# LOGO BOX #}
+			<div class="styleLogoBox">
+				LOGO BOX
+			</div>
+
+			{# BANNER BOX #}
+			<div class="styleBannerBox boxC">
+				BANNER BOX
+			</div>
+
+			{# ITEM BOX #}
+			<div class="styleItemBox boxB">
+				<div class="boxA">
+					ITEM BOX
+				</div>
+			</div>
+
+			{# PRICING BOX #}
+			<div class="stylePricingBox boxA">
+				PRICING BOX
+			</div>
+
+			{# DISOUNT BOX #}
+			<div class="styleDiscountBox boxB">
+				<em>Now only...</em>
+				<div class="boxA">
+					<b><span class="update data__product~~number--discount discount"></span></b>
+					OFF!
+				</div>
+			</div>
+
+			{# BANNER SHOUT BOX #}
+			<div class="styleExpand boxC update data~~trigger--bannerShoutTrigger showUntil">
+				<span class="update data~~text--bannerShoutText title"></span>
+			</div>
+
+			{# QTY BOX #}
+			<div class="styleQtyBox boxB">
+				<em>Sold:
+				<span class="update data__product~~number--quantityTotal text"></span>...</em>
+				only
+				<span class="update data__product~~number--quantityCurrent text"></span>
+				LEFT
+			</div>
 
-		{# BEGINS #}
-		<div class="update data~~trigger--shoutTrigger showUntil">
-			<span class="update data~~text--shoutText title"></span>
+			{# TIMER BOX #}
+			<div class="styleSideTimerBox boxA">
+				TIMER 1!
+			</div>
+			<div class="styleSideTimerBox boxA">
+				TIMER 2!
+			</div>
 		</div>
 	</body>
 </html>