From: Max Value <greenwoodw50@gmail.com> Date: Mon, 7 Apr 2025 12:22:32 +0000 (+0100) Subject: Centered shout text fix X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=93939ea5de184df144f866f81facd04f2d6adcaa;p=shopping-channel Centered shout text fix ~ ajusted stroke on shout star --- diff --git a/static/assets/star5.svg b/static/assets/star5.svg index 7ad77ec..2fac3b0 100644 --- a/static/assets/star5.svg +++ b/static/assets/star5.svg @@ -49,7 +49,7 @@ </metadata> <path sodipodi:type="star" - style="fill:#ff4eac;fill-opacity:1;stroke:#ffffff;stroke-width:3.36072;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" + style="fill:#ff4eac;fill-opacity:1;stroke:#ffffff;stroke-width:1.69097735;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" id="path1" inkscape:flatsided="false" sodipodi:sides="9" diff --git a/templates/gfx.html b/templates/gfx.html index e61f093..d5bd580 100644 --- a/templates/gfx.html +++ b/templates/gfx.html @@ -27,11 +27,11 @@ body { 100% {transform: rotate(1turn) scale(1.2);} } @keyframes spinOffset { - 0% {transform: perspective(300px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0turn) scale(1.2);} - 25% {transform: perspective(300px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.25turn) scale(1);} + 0% {transform: perspective(200px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0turn) scale(1.2);} + 25% {transform: perspective(250px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.25turn) scale(1);} 50% {transform: perspective(300px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.5turn) scale(1.2);} - 75% {transform: perspective(300px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.75turn) scale(1);} - 100% {transform: perspective(300px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(1turn) scale(1.2);} + 75% {transform: perspective(250px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.75turn) scale(1);} + 100% {transform: perspective(200px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(1turn) scale(1.2);} } @keyframes spinText { 0% {transform: rotate(-0.01turn);} @@ -39,9 +39,9 @@ body { 100% {transform: rotate(-0.01turn);} } @keyframes spinTextOffset { - 0% {transform: perspective(400px) translateX(-50%) rotateY( -15deg ) rotateZ(-0.01turn);} - 50% {transform: perspective(400px) translateX(-50%) rotateY( -15deg) rotateZ(0.01turn);} - 100% {transform: perspective(400px) translateX(-50%) rotateY( -15deg ) rotateZ(-0.01turn);} + 0% {transform: perspective(500px) translateX(-50%) rotateY( -10deg ) rotateZ(-0.01turn);} + 50% {transform: perspective(500px) translateX(-50%) rotateY( -10deg) rotateZ(0.01turn);} + 100% {transform: perspective(500px) translateX(-50%) rotateY( -10deg ) rotateZ(-0.01turn);} } @keyframes flicker { 0% { @@ -321,7 +321,7 @@ body { } #shoutTextContainer { position: absolute; - top: 0vh; + top: 0; opacity: 0; transform: translateX(30vw); transition: opacity 2s ease, transform 2s ease; @@ -332,19 +332,19 @@ body { transform: translateX(0vw); } #shoutBadgeContainer > img { - width: 40vh; - height: 40vh; + width: 45vh; + height: 45vh; padding: 0; animation: spinOffset 10s linear 0s infinite; } #shout { position: absolute; - top: -1em; width: 100vw; + top: 0; perspective: 400px; animation: spinTextOffset 10s linear 0s infinite; rotate: 0.025turn; - font-size: 6em; + font-size: 7em; text-align: center; } #currentPrice { @@ -542,7 +542,7 @@ circle { <img class="badge" src="./static/assets/star5.svg"></img> </div> <div id="shoutTextContainer"> - <h1 id="shout">SHOUT TEXT</h1> + <h1 id="shout" style="top: 0">SHOUT TEXT</h1> </div> </div> @@ -645,6 +645,7 @@ const remaining = document.getElementById("unitsLeft"); const origional = document.getElementById("origionalPrice"); const topTextElement = document.getElementById("topText"); const bottomTextElement = document.getElementById("bottomText"); +const shout = document.getElementById("shout"); const marqueeContainer = document.getElementById("marquee"); @@ -800,7 +801,7 @@ function update() { } // Shout - document.getElementById("shout").innerHTML = data.shout; + shout.innerHTML = data.shout; let current = Math.round((Date.now() + data['timer_offset']) / 1000); var time = data[`end_timer_shout`] - current; if (time > 0) { @@ -848,9 +849,6 @@ function update() { price = Math.round(price * 100) / 100; } - console.log(item.currency); - console.log(item.prefix); - let priceString; let ezString; if (item.prefix) {priceString = `${item.currency}${price}`}