CREATE TABLE state (
id INTEGER PRIMARY KEY,
item_id INTEGER,
- discount_1 REAL,
- discount_2 REAL,
- discount_3 REAL,
- discount_4 REAL,
+ discount_1 INTEGER,
+ discount_2 INTEGER,
+ discount_3 INTEGER,
+ discount_4 INTEGER,
discount_change INTEGER,
percent_remaining INTEGER,
currency_symbol TEXT,
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
- width="400"
- height="400"
- viewBox="0 0 105.83333 105.83333"
- version="1.1"
- id="svg1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
- xmlns:cc="http://creativecommons.org/ns#"
- xmlns:dc="http://purl.org/dc/elements/1.1/">
- <defs
- id="defs1" />
- <metadata
- id="metadata1">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <path
- style="fill:#bd0000;fill-opacity:1;stroke-width:0.264798;stroke-dasharray:none"
- id="path1"
- d="M 71.019533,63.52164 69.13196,77.122826 56.678371,71.338072 48.243092,82.173258 40.350345,70.93672 27.627586,76.102627 26.410535,62.425126 12.809349,60.537554 18.594102,48.083965 7.7589164,39.648686 18.995454,31.755938 13.829547,19.03318 27.507048,17.816129 29.394621,4.214943 41.84821,9.9996963 50.283489,-0.83548968 58.176236,10.401048 70.898995,5.2351411 l 1.217051,13.6775009 13.601186,1.887573 -5.784754,12.453589 10.835186,8.435278 -11.236537,7.892748 5.165907,12.722759 z"
- transform="matrix(1.274966,0,0,1.274966,-9.8923536,1.065222)" />
-</svg>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="400"
+ height="400"
+ viewBox="0 0 105.83333 105.83333"
+ version="1.1"
+ id="svg1"
+ sodipodi:docname="star1.svg"
+ inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <sodipodi:namedview
+ id="namedview1"
+ pagecolor="#696969"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:zoom="0.71411936"
+ inkscape:cx="171.53995"
+ inkscape:cy="168.03914"
+ inkscape:window-width="1366"
+ inkscape:window-height="704"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg1" />
+ <defs
+ id="defs1" />
+ <metadata
+ id="metadata1">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <path
+ style="fill:#bd0000;fill-opacity:1;stroke:none;stroke-width:1.5875;stroke-dasharray:none;stroke-opacity:1"
+ id="path1"
+ d="M 79.313561,81.033139 76.99122,97.76711 61.669173,90.649944 51.290981,103.98082 41.580283,90.156147 25.927069,96.511927 24.429692,79.684063 7.6957206,77.361723 14.812886,62.039676 1.4820128,51.661484 15.306682,41.950785 8.9509023,26.297572 25.778767,24.800195 28.101108,8.0662237 43.423154,15.183389 53.801346,1.8525158 63.512044,15.677185 79.165259,9.3214063 80.662636,26.14927 l 16.733971,2.322341 -7.117167,15.322047 13.33087,10.37819 -13.824664,9.710699 6.355779,15.653215 z" />
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="400"
+ height="400"
+ viewBox="0 0 105.83333 105.83333"
+ version="1.1"
+ id="svg1"
+ sodipodi:docname="star2.svg"
+ inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <sodipodi:namedview
+ id="namedview1"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:zoom="1.0745014"
+ inkscape:cx="174.96487"
+ inkscape:cy="154.49026"
+ inkscape:window-width="1366"
+ inkscape:window-height="704"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg1" />
+ <defs
+ id="defs1" />
+ <metadata
+ id="metadata1">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <path
+ sodipodi:type="star"
+ style="fill:#a500cf;fill-opacity:1;stroke:none;stroke-width:3.15574;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ id="path1"
+ inkscape:flatsided="false"
+ sodipodi:sides="3"
+ sodipodi:cx="50.232597"
+ sodipodi:cy="48.262691"
+ sodipodi:r1="62.690723"
+ sodipodi:r2="31.345362"
+ sodipodi:arg1="0.80206329"
+ sodipodi:arg2="1.8492608"
+ inkscape:rounded="0"
+ inkscape:randomized="0"
+ d="M 93.816763,93.324286 41.616397,78.400588 -10.583971,63.476888 28.440514,25.731895 67.465001,-12.0131 80.640881,40.655592 Z"
+ inkscape:transform-center-x="0.040078743"
+ inkscape:transform-center-y="-13.105393"
+ transform="matrix(0.80646422,-0.22922661,0.2292323,0.80648423,1.6641526,26.083336)" />
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="400"
+ height="400"
+ viewBox="0 0 105.83333 105.83333"
+ version="1.1"
+ id="svg1"
+ sodipodi:docname="star3.svg"
+ inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <sodipodi:namedview
+ id="namedview1"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:zoom="0.86956539"
+ inkscape:cx="205.27496"
+ inkscape:cy="221.37496"
+ inkscape:window-width="1366"
+ inkscape:window-height="704"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg1" />
+ <defs
+ id="defs1" />
+ <metadata
+ id="metadata1">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <path
+ sodipodi:type="star"
+ style="fill:#fff612;fill-opacity:1;stroke:none;stroke-width:1.54949;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+ id="path2"
+ inkscape:flatsided="false"
+ sodipodi:sides="12"
+ sodipodi:cx="51.117489"
+ sodipodi:cy="52.0303"
+ sodipodi:r1="51.662281"
+ sodipodi:r2="74.872871"
+ sodipodi:arg1="0.78539816"
+ sodipodi:arg2="1.0471976"
+ inkscape:rounded="0"
+ inkscape:randomized="0"
+ d="M 87.648238,88.561049 88.553921,116.87211 64.488671,101.93223 51.117485,126.90317 37.746307,101.93223 13.68105,116.87211 14.58674,88.56105 -13.724322,89.466733 1.2155574,65.401483 -23.755383,52.030296 1.2155573,38.659118 -13.724318,14.593861 14.586739,15.499551 13.681056,-12.81151 37.746306,2.1283687 51.117493,-22.842571 64.488671,2.1283686 88.553928,-12.811507 l -0.90569,28.311058 28.311062,-0.905683 -14.93988,24.06525 24.97094,13.371186 -24.97094,13.371178 14.93988,24.065257 z"
+ transform="matrix(0.68302111,0,0,0.68302111,18.028789,18.01386)" />
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="400"
+ height="400"
+ viewBox="0 0 105.83333 105.83333"
+ version="1.1"
+ id="svg1"
+ sodipodi:docname="star4.svg"
+ inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <sodipodi:namedview
+ id="namedview1"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:zoom="0.76491564"
+ inkscape:cx="179.75839"
+ inkscape:cy="181.06572"
+ inkscape:window-width="1366"
+ inkscape:window-height="704"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg1" />
+ <defs
+ id="defs1" />
+ <metadata
+ id="metadata1">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <path
+ sodipodi:type="star"
+ style="fill:#00bd11;fill-opacity:1;stroke:none;stroke-width:5.4325;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+ id="path1"
+ inkscape:flatsided="false"
+ sodipodi:sides="5"
+ sodipodi:cx="53.985233"
+ sodipodi:cy="50.386215"
+ sodipodi:r1="67.578911"
+ sodipodi:r2="28.383142"
+ sodipodi:arg1="0.82557753"
+ sodipodi:arg2="1.4538961"
+ inkscape:rounded="0"
+ inkscape:randomized="0"
+ d="M 99.812698,100.05263 57.295677,78.575641 20.911132,109.31849 28.198479,62.245646 -12.28315,37.14195 34.737699,29.526321 46.103221,-16.731466 67.876357,25.63466 115.38227,22.149473 81.817954,55.948808 Z"
+ transform="matrix(0.77438917,0,0,0.77438917,10.45016,13.788966)" />
+</svg>
local("Archivo"),
url("fonts/Archivo-SemiBoldItalic.woff") format("woff"),
}
+
+@font-face {
+ font-family: 'Calculator';
+ src: url('fonts/DSEG7ClassicMini-Italic.woff2') format('woff2'),
+ url('fonts/DSEG7ClassicMini-Italic.woff') format('woff'),
+ url('fonts/DSEG7ClassicMini-Italic.ttf') format('truetype');
+ font-weight: normal;
+}
+@font-face {
+ font-family: 'Calculator';
+ src: url('fonts/DSEG7ClassicMini-BoldItalic.woff2') format('woff2'),
+ url('fonts/DSEG7ClassicMini-BoldItalic.woff') format('woff'),
+ url('fonts/DSEG7ClassicMini-BoldItalic.ttf') format('truetype');
+ font-weight: bold;
+}
+@font-face {
+ font-family: 'Pacifico';
+ src: url('fonts/Pacifico-Regular.woff2') format('woff2'),
+ url('fonts/Pacifico-Regular.woff') format('woff'),
+ url('fonts/Pacifico-Regular.ttf') format('truetype');
+}
{
"text": {
"crawler_top":[
- "Test top text 1",
- "Test top text 2",
+ "Buy now!",
+ "XMDV Teleshopping!",
+ "Exciting products coming!",
+ "Plenty more coming to get you!",
+ "Imagine thinking on a piece of paper!",
+ "On Air 24/7!",
+ "Tick!",
+ "Anchor",
+ "Sale Sale Sale Sale Sale Sale Sale",
+ "Doomsday",
"It's here!"
],
"crawler_bottom":[
"Something bright and radiant for all of you at home!",
"I take your life and raise you 10 over the hour!",
"We grab the bullion counterweight and throw ourselves down!",
- "We have been falling for a looong time people!",
+ "We have been falling for a looong time!",
"Let me slip into something less spacious!",
"Down the side of a large golden pyramid!",
+ "Get ahead of the drop!",
"So we dress ourselves in your Ballast!",
+ "Whats the significance of callers?",
+ "Someone on the other end of the phone?",
+ "Sell you? On this?",
+ "All holding",
+ "THE THREAT",
"I used to be so unimaginably tall!",
+ "Doomsday",
"It's here!"
],
"banner":[
"Buy XMDV!",
"Discounts on XMDV!",
- "Imagine thinking on a piece of paper!",
- "Imagine thinking on a dime!",
- "Imagine thinking on a dollar!",
"The quant we created!",
"The quant we fear!",
+ "Dynamite!",
+ "Suicidal price cuts!",
+ "Eyes on us!",
+ "We're all eyes!",
+ "Ending soon!",
+ "Closing down!",
+ "Sold!",
+ "Kill!",
+ "Oh",
+ "Anchor",
+ "Look",
+ "Doomsday",
"It's here!"
],
"sigil":[
},
"items": [
{
- "code":"Placeholder item code",
+ "code":"XMDV",
"rating":"★★★★★",
- "subtext":"Test item name",
- "description":"Test item description",
- "origional_price":0,
- "stock_count":0,
+ "subtext":"Starting soon!",
+ "description":"The show will be starting soon!",
+ "origional_price":1,
+ "stock_count":1,
"notes":"<p>[autocue] Showing: test product.<br>Commencing shortly.</p>",
- "crew_notes":"testing"
+ "crew_notes":"Test crew notes"
+ },
+ {
+ "code":"526F74",
+ "rating":"★★★★★",
+ "subtext":"Hyperclean™! Teethpaste",
+ "description":"Hyperclean™! Professional Dentist-grade Teethpaste with a dark shine and a matte-finish. Dentists want it off the air!",
+ "origional_price":14.99,
+ "stock_count":230,
+ "notes":"<ul><li>Dentists have got the manufacturers shut down</li><li>Leaves a matte finish and a stange smell</li><li>Limited supply, last time on air</li><li>Larger capacity tube 10% more paste</li><li>Strange texture feel through tube</li><li>Only 230 in stock (tooth joke)</li></ul>",
+ "crew_notes":"Test crew notes"
+ },
+ {
+ "code":"454747",
+ "rating":"★★★★★",
+ "subtext":"Is that a hairline fracture? A crack?",
+ "description":"Don't look too close! Detailed painting from a long time ago! Decades of a careful hand in observation of the bright and round moon.",
+ "origional_price":4500,
+ "stock_count":5,
+ "notes":"<ul><li>Paining of the moon thats difficult to look at</li><li>Look away tell cameraman to look away</li><li>Cover it with your jacket</li><li>Represents the moon hatching into an egg</li><li>Something the grandchildren would love</li></ul>",
+ "crew_notes":"Test crew notes"
+ },
+ {
+ "code":"434947",
+ "rating":"★★★★★",
+ "subtext":"Abundance Declared Cigarettes",
+ "description":"Smoke breaks too short? borrow the time! Try royal abundance.",
+ "origional_price":35,
+ "stock_count":111,
+ "notes":"<ul><li>Play up the whole not ment to be selling them thing</li><li>Each one takes an entire tobacco plant to make</li><li>each cigarette is 2ft long</li></ul>",
+ "crew_notes":"Test crew notes"
},
{
- "code":"Item 1",
- "rating":"✶✶✶✶✶",
- "subtext":"Gold <em>Stick-Strip</em>™",
- "description":"50m shiny gold <em>Stick-Strip</em>™! Origional beautiful formula! Cannot be broken! Too beautiful! Stuck!",
- "origional_price":500,
+ "code":"435550",
+ "rating":"★★★★★",
+ "subtext":"Coffee. we killed the sheep!",
+ "description":"Bad dreams? Never sleep again. <em>New</em> formula, 100x strength",
+ "origional_price":12,
"stock_count":100,
- "notes":"<p>ITEM IS A REEL OF GOLDEN TAPE THAT CANNOT BE TORN</p><ul><li>EMPASIZE AS MUCH AS POSSIBLE HOW BEAUTIFUL IT IS</li></ul>",
- "crew_notes":"testing"
+ "notes":"<ul><li>Stops you sleeping possibly perminently</li><li>Enhanced with special chemical that comes from adrenial glands</li><li>Describe vividly fever dreams</li></ul>",
+ "crew_notes":"Test crew notes"
+ },
+ {
+ "code":"594F55",
+ "rating":"★★★★★",
+ "subtext":"The replacement mirror",
+ "description":"Ready to move on? Look over your shoulder to the person replacing you when you go.",
+ "origional_price":2000,
+ "stock_count":40,
+ "notes":"<ul><li>Something about the generation your handing the battone to</li><li>See nothing in the mirror but play up that you do because you're scared of nothing coming after you</li></ul>",
+ "crew_notes":"Test crew notes"
},
{
- "code":"Item 2",
- "rating":"✦✦✦",
- "subtext":"Item subtext",
- "description":"Product 2 description. It's really long to see if the badge element moves down the page at all. I f**king hate CSS positioning. Oops family show.",
- "origional_price":170,
- "stock_count":200,
- "notes":"Some more notes...",
- "crew_notes":"testing"
+ "code":"777777",
+ "rating":"★★★★★",
+ "subtext":"The number previously known as 7",
+ "description":"Ready to move on? Look over your shoulder to the person replacing you when you go.",
+ "origional_price":823543,
+ "stock_count":7,
+ "notes":"<ul><li>Do the 7 ate 9 joke</li><li>Discount by 7s (70%, 7%)</li><li>List plenty of things that begin with 7</li></ul>",
+ "crew_notes":"Test crew notes"
+ },
+ {
+ "code":"424F58",
+ "rating":"★★★★★",
+ "subtext":"Supprise jack-in-the-box, shock your friends!",
+ "description":"Suprise-Box™ Limited edition, only 100 EVER made!. Beautiful handpainted sides.",
+ "origional_price":45,
+ "stock_count":99,
+ "notes":"<ul><li>JACK IN THE BOX IS FULL OF BLOOD</li><li>Dont tell the audience its full of blood</li><li>Dont turn the crank unless instructed</li></ul>",
+ "crew_notes":"Test crew notes"
+ },
+ {
+ "code":"422657",
+ "rating":"★★★★★",
+ "subtext":"Black and White Blood Chocolate Sauce",
+ "description":"The perfect topping for noir detectives in ice-cream bars! Sweet and thick chocolate, made from all natural ingredients.",
+ "origional_price":8,
+ "stock_count":300,
+ "notes":"<ul><li>Novelty chocolate sauce that looks like blood in black and white</li><li>Describe how refreshing a nice bowl of ice cream would be</li><li>Treat yourself</li></ul>",
+ "crew_notes":"Test crew notes"
}
]
}
pass
except sqlite3.OperationalError:
print("Table missing or corrupt...")
- cursor.execute("DROP TABLE state;")
+ try: cursor.execute("DROP TABLE state;") # catch if there is no table "state"
+ except: pass
cursor.execute(schema)
cursor.execute(load)
connection.commit()
- app.run(host='192.168.8.143', port=5080, debug=True)
+ app.run(host='127.0.0.1', port=8000, debug=True)
<style>
body {
- --star-light: #FFE0B3;
- --star-dark: #FFC266;
- --dark: #DEDEDE;
- --black: #3b3b45;
- --feature-dark: #AAAAEE;
- --feature-light: #BBBBEE;
- --feature-white: #EAEAFA;
- --background-light: #FFFFFF;
- --background-dark: #EEEEEE;
- --feature-gradient: linear-gradient(var(--feature-dark), var(--feature-light));
- --background: linear-gradient(var(--background-light), var(--background-dark));
- --clock: conic-gradient(var(--background-light) 0deg, var(--background-light) 0deg, rgb(0,0,0,0) 0.1deg), rgb(0,0,0,0) 360deg);
+ --magenta: purple;
+ --blue: violet;
+ --red: red;
font-family: "Archivo", sans-serif;
font-size: 1.6vh;
}
@keyframes spin {
0% {transform: rotate(0turn) scale(1.2);}
- 50% {transform: rotate(0.25turn) scale(1);}
- 100% {transform: rotate(0.5turn) scale(1.2);}
+ 25% {transform: rotate(0.25turn) scale(1);}
+ 50% {transform: rotate(0.5turn) scale(1.2);}
+ 75% {transform: rotate(0.75turn) scale(1);}
+ 100% {transform: rotate(1turn) scale(1.2);}
}
@keyframes spinText {
0% {transform: rotate(-0.01turn);}
}
.container {
position: absolute;
- border-radius: 1vh;
}
-.box {
- border-radius: 1vh;
+/*.box {
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
background-image: var(--background);
-}
+}*/
#side {
-left: 6vh;
-top: 6vh;
-width: 40vh;
-opacity: 0;
-transition: opacity 1.5s;
+ left: 6vh;
+ top: 6vh;
+ width: 40vh;
+ opacity: 0;
+ transition: opacity 1.5s;
}
.soldBox {
margin: 5px;
padding: 5px;
- border-radius: 5px;
- background-image: var(--background);
+ color: blue;
+ background-color: white;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.19) 0px 1px 2px;
}
.soldBox > * {
font-style: normal;
}
#raiting {
-margin: 5px;
-margin-top: 0;
-border-radius: 5px;
-font-size: 2em;
-line-height: 1em;
-color: var(--star-dark);
-text-shadow: -1px -1px 0 var(--star-light), 1px -1px 0 var(--star-light), -1px 1px 0 var(--star-light), 1px 1px 0 var(--star-light), 2px 2px 0 var(--dark);
-background-image: linear-gradient(var(--background-dark), var(--dark));
-box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.19) 0px 1px 2px;
+ margin: 5px;
+ margin-top: 0;
+ font-size: 2em;
+ line-height: 1em;
+ color: white;
+ background-color: var(--magenta);
+ box-shadow: pink 0px 1px 3px, pink 0px 1px 2px;
}
.main {
+ background-color: white;
z-index: 0;
}
+#subtext {
+ color: white;
+ font-family: "Pacifico";
+ background-color: var(--blue);
+}
#banner {
-left: 48vh;
-top: 6vh;
-height: 2em;
-width: 0vh;
-padding: 0.5vh;
-overflow: hidden;
-opacity: 0;
-transition: opacity 1.5s, width 1.5s, left 1.5s;
-background: linear-gradient(var(--feature-white), rgb(0,0,0,0), var(--feature-white)), var(--background);
-border: 1px solid var(--feature-dark);
-}
-#banner.moved, #timer2.moved {
-left: 6vh;
-}
-#timer2.movedUp {
-top: 6vh;
+ right: 6vh;
+ top: 6vh;
+ height: 2em;
+ width: 0vh;
+ padding: 0.5vh;
+ overflow: hidden;
+ opacity: 0;
+ transition: opacity 1.5s, width 1.5s, left 1.5s;
+ color: white;
+ background-color: var(--magenta);
+}
+#timer2.moved {
+ top: 6vh;
}
#timer3.focus {
-bottom: calc(50% - 15vh);
-right: calc(50% - 15vh);
-width: 30vh;
-height: 30vh;
-border-radius: 15vh;
-font-size: 6em;
-line-height: 30vh;
+ bottom: calc(50% - 15vh);
+ right: calc(50% - 15vh);
+ width: 30vh;
+ height: 30vh;
+ border-radius: 15vh;
+ font-size: 5em;
+ line-height: 30vh;
}
.extra {
position: relative;
transform: translateY(-100%);
padding-top: 2vh;
padding-bottom: 1px;
- background-image: var(--feature-gradient);
+ color: white;
+ background-color: var(--magenta);
transition: transform 1.5s;
}
.showExtra > .extra {
padding: 0.5vh 1vh;
}
#banner > h1 {
-width: 49vh;
-margin: 0;
-font-size: 2em;
-line-height: 1;
-font-style: italic;
-font-weight: normal;
-text-align: center;
+ width: 49vh;
+ margin: 0;
+ font-size: 2em;
+ line-height: 1;
+ font-style: italic;
+ font-weight: bold;
+ text-align: center;
}
.sigilBox {
opacity: 0;
height: 20vh;
}
#sigil1 {
-right: 4vh;
-top: 4vh;
+ right: 4vh;
+ top: 4vh;
}
#sigil2 {
-right: 4vh;
-bottom: 4vh;
+ right: 4vh;
+ bottom: 4vh;
}
#sigil3 {
-left: 4vh;
-bottom: 4vh;
+ left: 4vh;
+ bottom: 4vh;
}
#sigil4 {
-left: 4vh;
-top: 4vh;
+ left: 4vh;
+ top: 4vh;
+}
+#origionalPrice {
+ color: var(--red);
+ font-size: 2em;
}
-#badgeContainer {
-position: relative;
-padding: 0;
+#unitsLeft {
+ font-size: 3em;
}
-.badge {
+#badge1Container {
+ position: relative;
+ padding: 0;
+ transform: translateX(12vh) scale(0%);
+ transition: transform 1.5s;
+}
+#badge1Container > img {
+ position: absolute;
+ top: -9vh;
+ left: 36vh;
+ width: 12vh;
+ height: 12vh;
+ padding: 0;
+ animation: spin 12s linear 0s infinite;
+ animation-direction: reverse;
+}
+#badge1Text {
+ position: absolute;
+ top: -7.5vh;
+ left: 31.5vh;
+ color: yellow;
+ width: 22vh;
+ animation: spinText 7s linear 0s infinite;
+ rotate: -0.015turn;
+ font-size: 2em;
+ text-align: center;
+ /*text-shadow: -2px -2px 0 green, 2px -2px 0 green, -2px 2px 0 green, 2px 2px 0 green;*/
+}
+#badge2Container {
+ position: relative;
+ padding: 0;
+ transform: translateX(12vh) scale(0%);
+ transition: transform 1.5s;
+}
+#badge2Container > img {
position: absolute;
top: -2vh;
left: 32vh;
padding: 0;
animation: spin 10s linear 0s infinite;
}
-h2.badge {
+#badge2Text {
+ position: absolute;
top: -1vh;
left: 26.5vh;
- color: white;
+ color: black;
+ width: 20vh;
+ animation: spinText 10s linear 0s infinite;
+ rotate: 0.025turn;
+ text-align: center;
+ /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
+}
+#badge3Container {
+ position: relative;
+ padding: 0;
+ transform: translateX(12vh) scale(0%);
+ transition: transform 1.5s;
+}
+#badge3Container > img {
+ position: absolute;
+ top: 3vh;
+ left: 38vh;
+ width: 10vh;
+ height: 10vh;
+ padding: 0;
+ animation: spin 10s linear 0s infinite;
+ animation-direction: reverse;
+}
+#badge3Text {
+ position: absolute;
+ top: 4.9vh;
+ left: 33.9vh;
+ color: blue;
+ width: 20vh;
+ animation: spinText 10s linear 0s infinite;
+ rotate: -0.03turn;
+ text-align: center;
+ /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
+}
+#badge4Container {
+ position: relative;
+ padding: 0;
+ transform: translateX(12vh) scale(0%);
+ transition: transform 1.5s;
+}
+#badge4Container > img {
+ position: absolute;
+ top: 10vh;
+ left: 32vh;
+ width: 14vh;
+ height: 14vh;
+ padding: 0;
+ animation: spin 10s linear 0s infinite;
+}
+#badge4Text {
+ position: absolute;
+ top: 11.8vh;
+ left: 28.4vh;
+ color: var(--blue);
width: 20vh;
animation: spinText 10s linear 0s infinite;
rotate: 0.025turn;
+ font-size: 2.2em;
+ line-height: 0.6em;
text-align: center;
- text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+ /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
}
-#badgeContainer {
-transform: translateX(12vh) scale(0%);
-transition: transform 1.5s;
+#currentPrice {
+ line-height: 0.5em;
+}
+#monthlyPrice {
+ line-height: 1em;
+ font-family: "Pacifico";
}
.main > hr, .extra > hr {
margin: 0 1vh;
padding: 0;
border-color: var(--dark);
}
-.feature {
- border-top: 2px solid var(--dark);
- border-bottom: 2px solid var(--dark);
- background-image: var(--feature-gradient);
-}
.bottom {
left: 6vh;
bottom: 6vh;
width: 100vh;
+ background-color: white;
}
.bottom > *:not(#timer1) {
display: inline-block;
vertical-align: top;
}
#topTextBox {
-width: calc(100% - 20px);
-margin: 5px;
-margin-bottom: 0;
-padding: 5px;
-border-radius: 5px;
-background-image: linear-gradient(0.25turn, var(--feature-dark), rgba(0,0,0,0) 40%), var(--background);
-box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.19) 0px 1px 2px;
+ width: calc(100% - 20px);
+ margin: 5px;
+ margin-bottom: 0;
+ padding: 5px;
+ color: white;
+ background-color: var(--blue);
+ box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.19) 0px 1px 2px;
}
#topText {
-display: inline-block;
-width: 50%;
-padding: 0;
+ display: inline-block;
+ width: 50%;
+ padding: 0;
}
#idText {
-display: inline-block;
-width: 50%;
-padding: 0;
-text-align: right;
-font-size: 1.5em;
-font-weight: bold;
-font-style: italic;
-text-shadow: 0 0 3px rgba(0,0,0,0.25);
-color: var(--feature-dark);
+ display: inline-block;
+ width: 50%;
+ padding: 0;
+ text-align: right;
+ font-size: 1.5em;
+ font-weight: bold;
+ font-style: italic;
+ text-shadow: 0 0 3px rgba(0,0,0,0.25);
}
#marquee {
-padding: 0;
-width: 100%;
-mask-image: linear-gradient(0.25turn, transparent, black 5%, black 95%, transparent);
-overflow: hidden;
+ padding: 0;
+ width: 100%;
+ mask-image: linear-gradient(0.25turn, transparent, black 5%, black 95%, transparent);
+ color: var(--magenta);
+ overflow: hidden;
}
#marqueeText {
-white-space: nowrap;
-overflow: hidden;
+ white-space: nowrap;
+ overflow: hidden;
}
#timer1 {
-position: absolute;
-left: 101vh;
-padding: 0.5vh;
-opacity: 0;
-text-align: center;
-border: 2px solid var(--dark);
-border-radius: calc(1vh - 2px);
-transition: opacity 1.5s;
+ position: absolute;
+ left: 101vh;
+ padding: 0.5vh;
+ opacity: 0;
+ text-align: center;
+ color: white;
+ background-color: var(--magenta);
+ transition: opacity 1.5s;
}
#timer2 {
-position: absolute;
-left: calc(48vh + 2px);
-top: calc(11.5vh + 2px);
-height: 1.2em;
-width: 3em;
-margin: 0;
-text-align: center;
-font-size: 2em;
-font-weight: bold;
-line-height: 1.2em;
-border: 2px solid var(--dark);
-outline: 2px solid var(--feature-dark);
-opacity: 0;
-transition: opacity 1.5s, left 1.5s, top 1.5s;
+ position: absolute;
+ right: calc(6vh + 2px);
+ top: calc(11.5vh + 2px);
+ height: 1.2em;
+ width: 3em;
+ margin: 0;
+ text-align: center;
+ color: white;
+ font-size: 2em;
+ font-weight: bold;
+ line-height: 1.2em;
+ opacity: 0;
+ transition: opacity 1.5s, left 1.5s, top 1.5s;
}
#timer3 {
-position: absolute;
-bottom: 4vh;
-right: 4vh;
-opacity: 0;
-width: 12vh;
-height: 12vh;
-border-radius: 6vh;
-margin: 0;
-text-align: center;
-vertical-align: center;
-font-size: 2em;
-font-weight: bold;
-line-height: 12vh;
-background-image: var(--background);
-border: 2px solid var(--feature-dark);
-outline: 2px solid var(--dark);
-opacity: 0;
-transition: opacity 1.5s, bottom 1.5s, right 1.5s, width 1.5s, height 1.5s, border-radius 1.5s, font-size 1.5s, line-height 1.5s, transform 1.5s;
-animation: spinText 10s linear 0s infinite;
+ position: absolute;
+ bottom: 4vh;
+ right: 4vh;
+ opacity: 0;
+ width: 12vh;
+ height: 12vh;
+ border-radius: 6vh;
+ margin: 0;
+ color: white;
+ text-align: center;
+ vertical-align: center;
+ font-family: "Calculator";
+ font-size: 2em;
+ font-weight: bold;
+ line-height: 12vh;
+ opacity: 0;
+ transition: opacity 1.5s, bottom 1.5s, right 1.5s, width 1.5s, height 1.5s, border-radius 1.5s, font-size 1.5s, line-height 1.5s, transform 1.5s;
+ animation: spinText 10s linear 0s infinite;
}
.show {
opacity: 1 !important;
}
-#badgeContainer.show {
-transform: translateX(0vh) scale(100%);
+#badge1Container.show, #badge2Container.show, #badge3Container.show, #badge4Container.show {
+ transform: translateX(0vh) scale(100%);
}
#banner.show {
-width: 50vh;
+ width: 50vh;
}
.sigilBox.show {
opacity: 0.9;
}
line, polyline, circle {
fill: none;
- stroke: var(--feature-dark);
+ stroke: #00FF00;
stroke-width: 3;
}
circle {
- fill: #F2F2F2;
+ fill: none;
}
.sigilGrid {
- stroke: var(--dark);
+ stroke: none;
stroke-width: 1;
}
<h3 id="description">Description</h3>
<hr>
<h4 id="origionalPrice">Origional Price</h4>
- <div id="badgeContainer">
- <img class="badge" src="./static/assets/star.svg"></img>
- <h2 class="badge" id="badgeText">Percent off</h2>
+ <div id="badge1Container">
+ <img class="badge" src="./static/assets/star1.svg"></img>
+ <h2 class="badge" id="badge1Text">Percent off</h2>
+ </div>
+ <div id="badge2Container">
+ <img class="badge" src="./static/assets/star2.svg"></img>
+ <h2 class="badge" id="badge2Text">Percent off</h2>
+ </div>
+ <div id="badge3Container">
+ <img class="badge" src="./static/assets/star3.svg"></img>
+ <h2 class="badge" id="badge3Text">Percent off</h2>
+ </div>
+ <div id="badge4Container">
+ <img class="badge" src="./static/assets/star4.svg"></img>
+ <h2 class="badge" id="badge4Text">Percent off</h2>
</div>
</div>
<div class="box extra">
<p id="monthlyPrice">Monthly Price</p>
<div class="soldBox">
<p style="font-size: 1.2em;">In stock: <span style="margin-right:10px;" id="stock"></span> Sold: <span id="sold"></span></p>
- <p style="font-size: 1.6em;" class="alert" id="unitsLeft"></p>
+ <p class="alert" id="unitsLeft"></p>
</div>
</div>
</div>
<div class="container box bottom">
<h3 id="timer1" class="feature box"></h3>
<div id="topTextBox">
- <h2 id="topText"></h2><p id="idText">Welcome to <span style="font-family: serif;">XMDV</span> Shopping!</p>
+ <h2 id="topText"></h2><p id="idText">Welcome to <span style="font-family: 'Pacifico';">XMDV</span> Shopping!</p>
</div>
<div id="marquee">
<h1 class="marqueeText" id="bottomText"></h1>
];
const banner = document.getElementById("banner");
const side = document.getElementById("side");
-const badgeContainer = document.getElementById("badgeContainer");
+const badgeContainer = [
+ document.getElementById("badge1Container"),
+ document.getElementById("badge2Container"),
+ document.getElementById("badge3Container"),
+ document.getElementById("badge4Container")
+ ]
// 1:NE 2:SE 3:SW 4:NW
const sigils = [
document.getElementById("sigil1"),
// all dynamic variables used between functions
-let discountHard = 0;
let discountRate = 0;
+let discountHard = [
+ 0,
+ 0,
+ 0,
+ 0
+]
+let discount = [
+ 0,
+ 0,
+ 0,
+ 0
+]
let topText = "";
let bottomText = [];
const item = items[id];
// frame function variable hand-over
- discountHard = data.discount_1;
+ discountHard = [
+ 1-(data.discount_1 / 100),
+ 1-(data.discount_2 / 100),
+ 1-(data.discount_3 / 100),
+ 1-(data.discount_4 / 100)
+ ]
discountRate = data.discount_change / 200; // happens 200x per second in the frame function
topText = dataStatic.text.crawler_top[data.crawler_top_index]
bottomText = [];
conic-gradient(
rgb(0,0,0,0) 0deg,
rgb(0,0,0,0) ${angle}deg,
- var(--feature-light) ${angle}.1deg,
- var(--feature-light) 360deg
- ), var(--background)`;
+ var(--blue) ${angle}.1deg,
+ var(--blue) 360deg
+ ), white`;
}
case 3: {
timer3.style.background = `
linear-gradient(
rgb(0,0,0,0) 0%, rgb(0,0,0,0) ${radius}%,
- var(--feature-light) ${radius}.1%,
- var(--feature-dark) 100%
- ), var(--background)`;
+ purple ${radius}.1%,
+ purple 100%
+ ), lightblue`;
}
}
}
document.getElementById("bannerText").innerHTML = dataStatic.text.banner[data.banner_index];
}
banner.classList.add("show");
- timer2.classList.remove("movedUp");
+ timer2.classList.remove("moved");
} else {
banner.classList.remove("show");
- timer2.classList.add("movedUp");
+ timer2.classList.add("moved");
}
// handle element showing
// hierarchy: main product information -> extra information -> discount badge
if (data.bool_product) {
side.classList.add("show");
- banner.classList.remove("moved");
- timer2.classList.remove("moved");
if (data.bool_extra) {
side.classList.add("showExtra");
- if (discount <= 0.99) {
- badgeContainer.classList.add("show");
- } else {
- badgeContainer.classList.remove("show");
+ for (let d = 0; d < 4; d++) {
+ if (discount[d] <= 0.99) {
+ badgeContainer[d].classList.add("show");
+ } else {
+ badgeContainer[d].classList.remove("show");
+ }
}
} else {
side.classList.remove("showExtra");
+ for (let d = 0; d < 4; d++) {
+ badgeContainer[d].classList.remove("show");
+ }
}
} else {
side.classList.remove("show");
- banner.classList.add("moved");
- timer2.classList.add("moved");
side.classList.remove("showExtra");
badgeContainer.classList.remove("show");
}
document.getElementById("description").innerHTML = item.description;
// calculate the price sting with the pre/postfix
- let price = item.origional_price * discount;
+ let price = item.origional_price * discount.reduce((a, b)=> a*b, 1);
if (data.bool_rounding) {
price = Math.round(price * 100) / 100;
}
// set discount, pricing and ez pay
document.getElementById("currentPrice").innerHTML = `<em>Now only:</em> ${priceString}`;
document.getElementById("monthlyPrice").innerHTML = `12 monthly payments of <b>${ezString}</b>`;
- document.getElementById("badgeText").innerHTML = `${Math.round((1 - discount) * 100)}% OFF`;
+ document.getElementById("badge1Text").innerHTML = `${Math.round((1 - discount[0]) * 100)}% OFF`;
+ document.getElementById("badge2Text").innerHTML = `ONLY ${Math.round((discount[1]) * 100)}%`;
+ document.getElementById("badge3Text").innerHTML = `${Math.round((1 - discount[2]) * 100)}% REMOVED`;
+ document.getElementById("badge4Text").innerHTML = `10 FOR ${Math.round(discount[3] * 10)}<br><span style='font-size: 0.7em;'>WHAT?</span>`;
document.getElementById("stock").innerHTML = `${item.stock_count} units`;
- document.getElementById("sold").innerHTML = `${Math.round(item.stock_count * (1 - data.percent_remaining))} units`;
+ document.getElementById("sold").innerHTML = `${Math.round(item.stock_count * (1 - (data.percent_remaining / 100)))} units`;
- if (discount <= 0.99) {
+ if (discount.reduce((a, b)=> a*b, 1) <= 0.99) {
let origionalPrice = Math.round(item.origional_price);
if (data.bool_prefix) {origionalString = `${data.currency_symbol}${origionalPrice}`}
else {origionalString = `${origionalPrice}${data.currency_symbol}`};
else if (data.percent_remaining < 0.5) {descriptor = "Just"}
else {descriptor = ""}
remaining.innerHTML = `
- ${descriptor} ${Math.round(item.stock_count * (data.percent_remaining))} left!
+ ${descriptor} <span style='font-family: "Calculator"; font-size: 0.75em;'>${Math.round(item.stock_count * (data.percent_remaining / 100))}</span> left!
`; }
});
});
// frame dynamic variables
-let discount = 0;
let marqueeOffset = 0;
let bottomTextIndex = 0;
function frame() {
// move the current discount towards the target distance at the supplied rate
- if (Math.abs(discount - discountHard) <= discountRate) { // if the discount is within one tick, snap to current discount
- discount = discountHard;
- } else if (discount > discountHard) {
- discount -= discountRate;
- } else {
- discount += discountRate;
+ for (let d = 0; d < 4; d++) {
+ if (Math.abs(discount[d] - discountHard[d]) <= discountRate) {discount[d] = discountHard[d];}
+ else if (discount[d] > discountHard[d]) {discount[d] -= discountRate;}
+ else {discount[d] += discountRate;}
}
bottomTextElement.style.transform = `translateX(${marqueeOffset}px)`;
<br>
<input type='number' name='percent_remaining' value='{{data.percent_remaining}}'>
- <label>Unsold (%)</label> <label style='color: red;'>was {{data.percent_remaining}}</label><br>
+ <label>Stock left (%)</label> <label style='color: red;'>was {{data.percent_remaining}}</label><br>
<br>
{% for d in (1,2,3,4) %}
- <input type='number' name='discount_{{d}}' step='0.01' value='{{data['discount_' ~ d]}}'>
+ <input type='number' name='discount_{{d}}' step='1' value='{{data['discount_' ~ d]}}'>
<label>Discount {{d}} (%)</label> <label style='color: red;'>was {{data['discount_' ~ d]}}</label><br>
{% endfor %}
<br>
projects / shopping-channel / commitdiff
