{"id":91,"date":"2023-02-20T16:58:54","date_gmt":"2023-02-20T16:58:54","guid":{"rendered":"https:\/\/coin.backscratch.live\/\/index.php\/start-screen-copy\/"},"modified":"2023-12-18T12:12:16","modified_gmt":"2023-12-18T12:12:16","slug":"homescreen","status":"publish","type":"page","link":"https:\/\/coin.backscratch.live\/index.php\/homescreen\/","title":{"rendered":"HomeScreen"},"content":{"rendered":"\n
\n \t\n\t
\n\t \t\t
\n\t\t\t
\n\t \t \t
\n\t\t \n
\n
\n

\u00a0<\/p>\n

\r\n\r\n\r\n \r\n \r\n Flip A Coin<\/title>\r\n <!--Google Fonts-->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rubik:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n <!--Stylesheet-->\r\n <style media=\"screen\">\r\n *{\r\n padding: 0;\r\n margin: 0;\r\n box-sizing: border-box;\r\n font-family: \"Rubik\", sans-serif;\r\n }\r\n body{\r\n height: 100%;\r\n background: #1f5a82;\r\n }\r\n .container{\r\n background-color: #ffffff;\r\n width: 400px;\r\n padding: 35px;\r\n position: absolute;\r\n transform: translate(-50%,-50%);\r\n top: 50%;\r\n left: 50%;\r\n box-shadow: 15px 30px 35px rgba(0,0,0,0.1);\r\n border-radius: 10px;\r\n -webkit-perspective: 300px;\r\n perspective: 300px;\r\n }\r\n .stats{\r\n display: flex;\r\n color: #101020;\r\n font-weight: 500;\r\n padding: 20px;\r\n margin-bottom: 40px;\r\n margin-top: 55px;\r\n box-shadow: 0 0 20px rgba(0,139,253,0.25);\r\n }\r\n .stats p:nth-last-child(1){\r\n margin-left: 50%;\r\n }\r\n .coin{\r\n height: 150px;\r\n width: 150px;\r\n position: relative;\r\n margin: 32px auto;\r\n -webkit-transform-style: preserve-3d;\r\n transform-style: preserve-3d;\r\n }\r\n .coin img{\r\n width: 145px;\r\n }\r\n .heads, .tails{\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n -webkit-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n }\r\n .tails{\r\n transform: rotateX(180deg);\r\n }\r\n @keyframes spin-tails{\r\n 0%{\r\n transform: rotateX(0);\r\n }\r\n 100%{\r\n transform: rotateX(1980deg);\r\n }\r\n }\r\n @keyframes spin-heads{\r\n 0%{\r\n transform: rotateX(0);\r\n }\r\n 100%{\r\n transform: rotateX(2160deg);\r\n }\r\n }\r\n \/* Spinning animation *\/\r\n .spin-animation {\r\n animation-duration: 2s;\r\n animation-timing-function: ease-in-out;\r\n animation-fill-mode: forwards;\r\n }\r\n\r\n .buttons{\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n button{\r\n width: 150px;\r\n padding: 15px 0;\r\n border: none;\r\n font-size: 16px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n }\r\n #flip-button{\r\n background-color: #02d6b0;\r\n color: #ffffff;\r\n }\r\n #flip-button:disabled{\r\n background-color: #e1e0ee;\r\n border-color: #e1e0ee;\r\n color: #000000;\r\n }\r\n #reset-button{\r\n background-color: #000000;\r\n color: white;\r\n }\r\n .user-input{\r\n margin-top: 20px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n \/* Full-screen ad styles *\/\r\n .full-screen-ad {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.8);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 9999;\r\n }\r\n\r\n .full-screen-ad img {\r\n max-width: 90%;\r\n max-height: 90%;\r\n display: block;\r\n border-radius: 10px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"coin\" id=\"coin\">\r\n <div class=\"heads\">\r\n <img decoding=\"async\" src=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/02\/coin-tail-3.png\">\r\n <\/div>\r\n <div class=\"tails\">\r\n <img decoding=\"async\" src=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/02\/coin-nummber-2.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"stats\">\r\n <p id=\"heads-count\">Heads: 0<\/p>\r\n <p id=\"tails-count\">Tails: 0<\/p>\r\n <p id=\"total-coins\">Total Coins: 100<\/p>\r\n <\/div>\r\n <div class=\"user-input\">\r\n <input type=\"number\" id=\"coin-count\" placeholder=\"Number of coins to flip\">\r\n <select id=\"user-choice\">\r\n <option value=\"heads\">Heads<\/option>\r\n <option value=\"tails\">Tails<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"buttons\">\r\n <button id=\"flip-button\">\r\n Flip Coin\r\n <\/button>\r\n <button id=\"reset-button\">\r\n Reset\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Full-screen ad section -->\r\n <div class=\"full-screen-ad\" id=\"fullScreenAd\">\r\n <img decoding=\"async\" src=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/12\/IMG-post-2023.png\" alt=\"Full-screen ad\">\r\n <\/div>\r\n\r\n <!--Script-->\r\n <script type=\"text\/javascript\">\r\n let heads = 0;\r\n let tails = 0;\r\n let totalCoins = 100; \/\/ Set initial total coins\r\n let coin = document.querySelector(\".coin\");\r\n let flipBtn = document.querySelector(\"#flip-button\");\r\n let resetBtn = document.querySelector(\"#reset-button\");\r\n let fullScreenAd = document.getElementById('fullScreenAd');\r\n\r\n flipBtn.addEventListener(\"click\", () => {\r\n let coinCount = parseInt(document.getElementById('coin-count').value);\r\n let userChoice = document.getElementById('user-choice').value;\r\n\r\n \/\/ Add this line to initiate spinning animation\r\n coin.style.animation = \"\";\r\n void coin.offsetWidth; \/\/ Trigger reflow to restart the animation\r\n coin.style.animation = userChoice === 'heads' ? 'spin-heads 2s ease-in-out forwards' : 'spin-tails 2s ease-in-out forwards';\r\n\r\n \/\/ Delaying the result calculation to match the animation time\r\n setTimeout(() => {\r\n for (let i = 0; i < coinCount; i++) {\r\n let result = Math.floor(Math.random() * 2);\r\n\r\n if ((result && userChoice === 'heads') || (!result && userChoice === 'tails')) {\r\n heads += 1; \/\/ Increment heads count for correct guess\r\n totalCoins += 1; \/\/ Add guessed coins to total for correct guess\r\n } else {\r\n tails += 1; \/\/ Increment tails count for correct guess\r\n totalCoins -= 1; \/\/ Subtract guessed coins from total for incorrect guess\r\n }\r\n }\r\n if (totalCoins < 0) {\r\n totalCoins = 0; \/\/ Ensure coins don't go negative\r\n }\r\n updateStats();\r\n disableButton();\r\n }, 2000); \/\/ This delay should match the animation duration\r\n });\r\n\r\n function updateStats() {\r\n document.querySelector(\"#heads-count\").textContent = `Heads: ${heads}`;\r\n document.querySelector(\"#tails-count\").textContent = `Tails: ${tails}`;\r\n document.querySelector(\"#total-coins\").textContent = `Total Coins: ${totalCoins}`;\r\n }\r\n\r\n function disableButton() {\r\n flipBtn.disabled = true;\r\n setTimeout(function () {\r\n flipBtn.disabled = false;\r\n }, 3000);\r\n }\r\n\r\n resetBtn.addEventListener(\"click\", () => {\r\n coin.style.animation = \"none\";\r\n heads = 0;\r\n tails = 0;\r\n totalCoins = 100; \/\/ Reset total coins to initial value\r\n updateStats();\r\n });\r\n\r\n \/\/ Function to display the full-screen ad\r\n function displayFullScreenAd() {\r\n fullScreenAd.style.display = 'flex';\r\n setTimeout(() => {\r\n fullScreenAd.style.display = 'none';\r\n }, 3000); \/\/ Disappear after 3 seconds\r\n }\r\n\r\n \/\/ Initial display after 20 seconds\r\n setTimeout(displayFullScreenAd, 20000);\r\n\r\n \/\/ Function to display the ad every 20 seconds\r\n setInterval(displayFullScreenAd, 23000); \/\/ 20s + 3s (disappearance time)\r\n <\/script>\r\n<\/body>\r\n<\/html><\/p> <\/div>\n<\/div>\n<!-- \/module text --><!-- module image -->\n<div class=\"module module-image tb_ghk2624 rounded image-full-overlay tf_mw\" data-lazy=\"1\">\n <div class=\"image-wrap tf_rel tf_mw\">\n\t\t <a href=\"https:\/\/back2video.stream\"\n\t \t >\n\t\t \t\t<img decoding=\"async\" src=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/App-banner-3-614x300.jpg\" height=\"300\" class=\"wp-post-image wp-image-255\" title=\"Check Out Back 2 Video Stream\" alt=\"Check Out Back 2 Video Stream\" srcset=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/App-banner-3-614x300.jpg 614w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/App-banner-3-300x146.jpg 300w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/App-banner-3-768x375.jpg 768w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/App-banner-3.jpg 1024w\" sizes=\"(max-width: 614px) 100vw, 614px\" \/>\t <\/a>\n\t\n\t\t<\/div>\n\t<!-- \/image-wrap -->\n \n \t<div class=\"image-content tf_overflow\">\n\t \t\t<h3 class=\"image-title\">\n\t\t \t\t\t<a href=\"https:\/\/back2video.stream\" \n\t\t\t \t\t\t >\n\t\t\t Check Out Back 2 Video Stream\t\t\t<\/a>\n\t\t \t\t<\/h3>\n\t \n\t \t<\/div>\n\t<!-- \/image-content -->\n \n<\/div>\n<!-- \/module image --><!-- module image -->\n<div class=\"module module-image tb_0nxj583 rounded image-full-overlay tf_mw\" data-lazy=\"1\">\n <div class=\"image-wrap tf_rel tf_mw\">\n\t\t <a href=\"https:\/\/apps.backscratch.live\"\n\t \t >\n\t\t \t\t<img decoding=\"async\" src=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/Logo-PDF-901x300.png\" height=\"300\" class=\"wp-post-image wp-image-257\" title=\"Scratch a scratch card\" alt=\"Scratch a scratch card\" srcset=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/Logo-PDF-901x300.png 901w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/Logo-PDF-300x100.png 300w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/Logo-PDF-768x255.png 768w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/Logo-PDF.png 980w\" sizes=\"(max-width: 901px) 100vw, 901px\" \/>\t <\/a>\n\t\n\t\t<\/div>\n\t<!-- \/image-wrap -->\n \n \t<div class=\"image-content tf_overflow\">\n\t \t\t<h3 class=\"image-title\">\n\t\t \t\t\t<a href=\"https:\/\/apps.backscratch.live\" \n\t\t\t \t\t\t >\n\t\t\t Scratch a scratch card\t\t\t<\/a>\n\t\t \t\t<\/h3>\n\t \n\t \t<\/div>\n\t<!-- \/image-content -->\n \n<\/div>\n<!-- \/module image -->\t <\/div>\n\t \t<\/div>\n\t\t <\/div>\n\t <!-- \/row_inner -->\n\t<\/div>\n\t<!-- \/module_row -->\n\t<\/div>\n<!--\/themify_builder_content-->","protected":false},"excerpt":{"rendered":"<p>\u00a0 Check Out Back 2 Video Stream Scratch a scratch card<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-91","page","type-page","status-publish","hentry","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"builder_content":"<p>\u00a0<\/p> <p style=\"text-align: center;\">[xyz-ihs snippet=\"Coin\"]<\/p>\n<a href=\"https:\/\/back2video.stream\" > <img decoding=\"async\" src=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/App-banner-3-614x300.jpg\" height=\"300\" title=\"Check Out Back 2 Video Stream\" alt=\"Check Out Back 2 Video Stream\" srcset=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/App-banner-3-614x300.jpg 614w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/App-banner-3-300x146.jpg 300w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/App-banner-3-768x375.jpg 768w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/App-banner-3.jpg 1024w\" sizes=\"(max-width: 614px) 100vw, 614px\" \/> <\/a> <h3> <a href=\"https:\/\/back2video.stream\" > Check Out Back 2 Video Stream <\/a> <\/h3>\n<a href=\"https:\/\/apps.backscratch.live\" > <img decoding=\"async\" src=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/Logo-PDF-901x300.png\" height=\"300\" title=\"Scratch a scratch card\" alt=\"Scratch a scratch card\" srcset=\"https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/Logo-PDF-901x300.png 901w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/Logo-PDF-300x100.png 300w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/Logo-PDF-768x255.png 768w, https:\/\/coin.backscratch.live\/wp-content\/uploads\/2023\/07\/Logo-PDF.png 980w\" sizes=\"(max-width: 901px) 100vw, 901px\" \/> <\/a> <h3> <a href=\"https:\/\/apps.backscratch.live\" > Scratch a scratch card <\/a> <\/h3>","_links":{"self":[{"href":"https:\/\/coin.backscratch.live\/index.php\/wp-json\/wp\/v2\/pages\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coin.backscratch.live\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/coin.backscratch.live\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/coin.backscratch.live\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coin.backscratch.live\/index.php\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":51,"href":"https:\/\/coin.backscratch.live\/index.php\/wp-json\/wp\/v2\/pages\/91\/revisions"}],"predecessor-version":[{"id":271,"href":"https:\/\/coin.backscratch.live\/index.php\/wp-json\/wp\/v2\/pages\/91\/revisions\/271"}],"wp:attachment":[{"href":"https:\/\/coin.backscratch.live\/index.php\/wp-json\/wp\/v2\/media?parent=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}