Bulk commit

diff --git a/director/static/admin.css b/director/static/admin.css
index dd2fdee576f71860266bf292ea3d5464c1cb9cde..cc4422f408214f6b5ef07aef35fc251eabe60a70 100644 (file)
--- 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 (file)
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 (file)
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 (file)
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 892f1586087f64e3eed2a0232b205ec372bc47b4..3295c95621966d4c3038944e54b1842e2c522f68 100644 (file)
--- 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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 5ce74fdae0a3f3ac613c968dda6048b2500d9b53..af8760e9707689fe73527bd375ceaa71d15f01c2 100644 (file)
--- 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>