snurra.html

<div class="ptContainer"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="40" viewBox="0 0 36 40" fill="none" class="ptPackage" ><path d="M9.5 5.28595L26.5 15.0137Z" fill="#BA5217" /><path d="M35 12.3315C34.9993 11.669 34.8244 11.0184 34.4929 10.4448C34.1614 9.87126 33.6848 9.39497 33.1111 9.06373L19.8889 1.50818C19.3146 1.17661 18.6631 1.00205 18 1.00205C17.3369 1.00205 16.6854 1.17661 16.1111 1.50818L2.88889 9.06373C2.31516 9.39497 1.83863 9.87126 1.50709 10.4448C1.17556 11.0184 1.00068 11.669 1 12.3315V27.4426C1.00068 28.1051 1.17556 28.7558 1.50709 29.3293C1.83863 29.9029 2.31516 30.3792 2.88889 30.7104L16.1111 38.266C16.6854 38.5975 17.3369 38.7721 18 38.7721C18.6631 38.7721 19.3146 38.5975 19.8889 38.266L33.1111 30.7104C33.6848 30.3792 34.1614 29.9029 34.4929 29.3293C34.8244 28.7558 34.9993 28.1051 35 27.4426V12.3315Z" fill="#BA5217" /><path d="M1.56667 10.4426L18 19.8871L34.4333 10.4426" fill="#BA5217" /><path d="M18 38.776V19.8871Z" fill="#BA5217" /><path d="M9.5 5.28595L26.5 15.0137M1.56667 10.4426L18 19.8871M18 19.8871L34.4333 10.4426M18 19.8871V38.776M35 12.3315C34.9993 11.669 34.8244 11.0184 34.4929 10.4448C34.1614 9.87126 33.6848 9.39497 33.1111 9.06373L19.8889 1.50818C19.3146 1.17661 18.6631 1.00205 18 1.00205C17.3369 1.00205 16.6854 1.17661 16.1111 1.50818L2.88889 9.06373C2.31516 9.39497 1.83863 9.87126 1.50709 10.4448C1.17556 11.0184 1.00068 11.669 1 12.3315V27.4426C1.00068 28.1051 1.17556 28.7558 1.50709 29.3293C1.83863 29.9029 2.31516 30.3792 2.88889 30.7104L16.1111 38.266C16.6854 38.5975 17.3369 38.7721 18 38.7721C18.6631 38.7721 19.3146 38.5975 19.8889 38.266L33.1111 30.7104C33.6848 30.3792 34.1614 29.9029 34.4929 29.3293C34.8244 28.7558 34.9993 28.1051 35 27.4426V12.3315Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg><div id="ptCounterContainer"><div class="ptCounter">0</div><div class="ptCounter">0</div><div class="ptCounter">0</div><div class="ptCounter">0</div><div class="ptCounter">0</div><div class="ptCounter">0</div></div><div class="ptTitle">paket har hittils skeppats</div><div class="ptDescription">från AliExpress, Shein, Tiktok Shop och Temu sedan du började läsa den här artikeln </div><div></div></div><style>@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); body{ font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "slnt" 0; padding: 0; margin: 0; background-color: rgb(248 250 252);} .ptParent{ position: absolute; left: 0; top: 0; right: 0; bottom: 0;} .ptPackage{ position: absolute; top: 0px; transform: translateY(-50%); width: 42px; height: 42px;} .ptContainer{ padding: 36px; padding-bottom: 24px; padding-top: 36px; gap: 6px; align-items: center; flex-direction: column; box-sizing: border-box; background-color: white; position: fixed; z-index: 999;} @media (min-width: 768px){ .ptContainer{ display: flex; bottom: 36px; right: 36px; border-radius: 12px; border: 2px solid rgb(31 41 55); width: auto;}} .ptTitle{ width: 212px; font-weight: 600; font-size: 16px; text-align: center;} .ptDescription{ width: auto; font-weight: 400; font-size: 10px; width: 212px; text-align: center;} @media (max-width: 768px){ .ptContainer{ display: flex; bottom: 0px; border-top: 2px solid rgb(31 41 55); width: 100dvw; justify-content: center;}} #ptCounterContainer{ display: flex; flex-direction: row; gap: 4px; color: white; font-weight: 600;} .ptCounter{ position: relative; border-radius: 6px; background: hsl(358, 72%, 49%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;} .ptCounterText{ position: absolute;} .ptCounterShadow{ position: absolute; bottom: 0; width: 32px; height: 16px; background: hsl(358, 72%, 62%); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;}</style><script>const counter=document.getElementById("ptCounterContainer"); let counterValue=-67; const reverseString=(str)=>{ let newString=""; for (let i=str.length - 1; i >=0; i--){ newString +=str[i];} return newString;}; const incrementCounter=()=>{ counterValue +=67; const reversedCounter=reverseString(counterValue.toString()); counter.innerHTML=` <div class="ptCounter"><div class="ptCounterShadow"></div><div class="ptCounterText">${ reversedCounter[5] ?? 0}</div></div><div class="ptCounter"><div class="ptCounterShadow"></div><div class="ptCounterText">${ reversedCounter[4] ?? 0}</div></div><div class="ptCounter"><div class="ptCounterShadow"></div><div class="ptCounterText">${ reversedCounter[3] ?? 0}</div></div><div class="ptCounter"><div class="ptCounterShadow"></div><div class="ptCounterText">${ reversedCounter[2] ?? 0}</div></div><div class="ptCounter"><div class="ptCounterShadow"></div><div class="ptCounterText">${ reversedCounter[1] ?? 0}</div></div><div class="ptCounter"><div class="ptCounterShadow"></div><div class="ptCounterText">${ reversedCounter[0] ?? 0}</div></div>`; setTimeout(incrementCounter, 1000);}; incrementCounter();</script>