[勝手に解答] Q. JavaScriptでルーレットと一緒に画像を用いたアニメーションを動かしたい(後編)

何でもオリジナルが大好きな、ユゲタです。 前回行った、元ソースコードからのリファクタリングコードを元に、今回は、ルーレット（ていうか、スロットじゃね？）の画像を入れてクオリティアップさせてみたいと思います。

クオリティアップポイント

まず数字を画像にするというそもそものオーダーがあるので、１０種類のスロット画像をフリー素材サイトから取得。 これをbase64化して、cssに埋め込んでおきます。 次に、ボタン箇所のbuttonタグをdivタグに変更。 これは、作業しているGoogleChromeブラウザではあまり問題なく見えていたんですが、safariブラウザで見た時に、装飾が大幅に違っていたので、どのブラウザでも共通してみることができるように、cssで一律設定できる形式に変換。 あと、enterキーを押して、スタート・ストップする方式を正式採用にして、keyupイベント登録を追加。

ソースコード

<div class="roulette"> <div class="label">ROULETTE</div> <div class="boxes"> <div class="box" name="x"> <span class="img" data-img="7"></span> </div> <div class="box" name="y"> <span class="img" data-img="7"></span> </div> <div class="box" name="z"> <span class="img" data-img="7"></span> </div> </div> <div class="buttons"> <div class="btn" data-type="start">start</div> </div> </div> .roulette{ display:block; margin:0 auto; width:200px; background-color:#b1a8ff; border:1px solid black; padding:20px; } .roulette .label{ text-align:center; font-weight:bold; margin-bottom:20px; color:white; font-size:24px; text-shadow:2px 2px 2px rgba(0,0,0,0.5); } .roulette .boxes{ text-align:center; margin-bottom:20px; } .roulette .boxes .box{ display:inline-block; margin:2px 4px; width:42px; height:42px; background: linear-gradient(#888, #fff, #fff , #888); border:1px solid black; font-size:12px; padding:4px; text-align:center; line-height:50px; overflow:hidden; } .roulette .buttons{ text-align:center; width:90%; margin:0 auto; padding;:0; } .roulette .buttons .btn{ display:block; width:100%; text-align:center; padding:20px 0; border:1px solid black; border-radius:4px; background-color:red; color:white; font-size:16px; cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .roulette .buttons .btn:hover{ opacity:0.5; } .roulette .buttons .btn:after{ content:" or Enter"; } .img{ width:40px; height:40px; } [data-img="0"]{ content:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSItMTMgMCA0ODEgNDgxLjg5NDY0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNi45ODA0NjkgMjk5LjMwMDc4MS0zLjU3ODEyNSA1NC45MTQwNjNjLS4yMDcwMzIgMy4xOTE0MDYgMS41MTU2MjUgNi4xOTUzMTIgNC4zNzg5MDYgNy42Mjg5MDZsNTUuNDcyNjU2IDI4LjAwMzkwNiAyOC4wMjM0MzggNTUuNDY0ODQ0YzEuNDI5Njg3IDIuODQzNzUgNC40MDYyNSA0LjU2MjUgNy41ODIwMzEgNC4zNzg5MDZsNjIuMzM1OTM3LTMuNDMzNTk0IDUyLjA0Njg3NiAzNC4zMTY0MDdjMi42NzE4NzQgMS43NjE3MTkgNi4xMzY3MTggMS43NjE3MTkgOC44MDg1OTMgMGw1Mi4wMzkwNjMtMzQuMzEyNSA2Mi4zMzk4NDQgMy40Mjk2ODdjMy4xNzE4NzQuMTc1NzgyIDYuMTQ4NDM3LTEuNTQyOTY4IDcuNTc4MTI0LTQuMzgyODEybDI4LjAyMzQzOC01NS40NzI2NTYgNTUuNDc2NTYyLTI4LjAyMzQzOGMyLjg2MzI4Mi0xLjQ0NTMxMiA0LjU4MjAzMi00LjQ2MDkzOCA0LjM3NS03LjY2MDE1NmwtMy41NzQyMTgtNTQuODUxNTYzYy0uMjg1MTU2LTQuMTgzNTkzLTMuNzkyOTY5LTcuNDE0MDYyLTcuOTg4MjgyLTcuMzUxNTYyaC00MDUuMzU5Mzc0Yy00LjE5MTQwNy0uMDU4NTk0LTcuNjk1MzEzIDMuMTY3OTY5LTcuOTgwNDY5IDcuMzUxNTYyem0xNS40ODA0NjkgOC42NDg0MzhoMzkwLjM2MzI4MWwyLjc0NjA5MyA0Mi4wODk4NDMtNTMuMTAxNTYyIDI2Ljc2MTcxOWMtMS41MTk1MzEuNzU3ODEzLTIuNzU3ODEyIDEuOTg4MjgxLTMuNTMxMjUgMy41bC0yNi44NTU0NjkgNTMuMTQ4NDM4LTU5Ljc1MzkwNi0zLjMwMDc4MWMtMS43MTQ4NDQtLjEwMTU2My0zLjQxMDE1Ni4zNTkzNzQtNC44NDM3NSAxLjMwNDY4N2wtNDkuODQzNzUgMzIuODU5Mzc1LTQ5Ljg0Mzc1LTMyLjg2MzI4MWMtMS4zMDQ2ODctLjg2MzI4MS0yLjgzNTkzNy0xLjMyNDIxOS00LjM5ODQzNy0xLjMyNDIxOS0uMTQ4NDM4IDAtLjI5Mjk2OS4wMDM5MDYtLjQ0MTQwNy4wMTE3MTlsLTU5Ljc1MzkwNiAzLjI4OTA2Mi0yNi44NTU0NjktNTMuMTUyMzQzYy0uNzY5NTMxLTEuNTIzNDM4LTIuMDA3ODEyLTIuNzYxNzE5LTMuNTMxMjUtMy41MzUxNTdsLTUzLjEwMTU2Mi0yNi42OTkyMTl6bTAgMCIvPjxwYXRoIGQ9Im0yNC45NjA5MzggMTg5Ljk0OTIxOWg0MDUuMzU5Mzc0YzQuMTkxNDA3LjA1ODU5MyA3LjY5OTIxOS0zLjE3MTg3NSA3Ljk4NDM3Ni03LjM1NTQ2OWwzLjU3NDIxOC01NC45MTQwNjJjLjIwNzAzMi0zLjE5MTQwNy0xLjUxNTYyNS02LjE5NTMxMy00LjM3NS03LjYyODkwN2wtNTUuNDc2NTYyLTI4LjAwMzkwNi0yOC4wMjM0MzgtNTUuNDY4NzVjLTEuNDI5Njg3LTIuODM5ODQ0LTQuNDA2MjUtNC41NTg1OTQtNy41NzgxMjUtNC4zNzg5MDZsLTYyLjMzOTg0MyAzLjQzMzU5My01Mi4wNDI5NjktMzQuMzEyNWMtMi42NzE4NzUtMS43NjE3MTgtNi4xMzY3MTktMS43NjE3MTgtOC44MDg1OTQgMGwtNTIuMDM5MDYzIDM0LjMxNjQwNy02Mi4zMzU5MzctMy40MzM1OTRjLTMuMTc1NzgxLS4xNzU3ODEtNi4xNDg0MzcgMS41NDI5NjktNy41ODIwMzEgNC4zODI4MTNsLTI4LjAyMzQzOCA1NS40NzI2NTYtNTUuNDcyNjU2IDI4LjAyNzM0NGMtMi44NjMyODEgMS40NDUzMTItNC41ODU5MzggNC40NTcwMzEtNC4zNzg5MDYgNy42NjAxNTZsMy41NzgxMjUgNTQuODQ3NjU2Yy4yODUxNTYgNC4xODM1OTQgMy43ODkwNjIgNy40MTQwNjIgNy45ODA0NjkgNy4zNTU0Njl6bTU3Ljg1NTQ2OC04NC43OTI5NjljMS41MjM0MzgtLjc2OTUzMSAyLjc2MTcxOS0yLjAwNzgxMiAzLjUzMTI1LTMuNTM1MTU2bDI2Ljg1NTQ2OS01My4xNTIzNDQgNTkuNzUgMy4yODkwNjJjMS43MTQ4NDQuMDkzNzUgMy40MTQwNjMtLjM2MzI4MSA0Ljg0Mzc1LTEuMzA4NTkzbDQ5Ljg0Mzc1LTMyLjg2MzI4MSA0OS44NDM3NSAzMi44NjMyODFjMS40Mjk2ODcuOTQ1MzEyIDMuMTI4OTA2IDEuNDAyMzQzIDQuODQzNzUgMS4zMDg1OTNsNTkuNzUzOTA2LTMuMjg5MDYyIDI2Ljg1MTU2MyA1My4xNTIzNDRjLjc2OTUzMSAxLjUyNzM0NCAyLjAwNzgxMiAyLjc2NTYyNSAzLjUzNTE1NiAzLjUzNTE1Nmw1My4wOTc2NTYgMjYuNjk5MjE5LTIuNzQyMTg3IDQyLjA5Mzc1aC0zOTAuMzYzMjgxbC0yLjc1LTQyLjA5Mzc1em0wIDAiLz48cGF0aCBkPSJtMjYuMDg5ODQ0IDI3OC41OTc2NTZjMTUuNTc0MjE4IDAgMjQuNTUwNzgxLTguNzgxMjUgMjQuNTUwNzgxLTI0LjA5NzY1NnYtNDUuMzAwNzgxYzAtMy42NDA2MjUtMy44Nzg5MDYtNS4yNDYwOTQtNy4zOTg0MzctNS4yNDYwOTRoLTE3LjVjLTMuNTkzNzUgMC01LjE5OTIxOSAzLjgxMjUtNS4xOTkyMTkgNy4zOTg0MzcgMCA0LjM1NTQ2OSAyLjEzNjcxOSA3LjYwMTU2MyA1LjE5OTIxOSA3LjYwMTU2M2g3Ljg5ODQzN3YzNS41NTA3ODFjMCA2LjI5Njg3NS0yLjc0MjE4NyA5LjUtOC40NDkyMTkgOS41LTcuNTY2NDA2IDAtNy45MzM1OTQtNS43NDIxODctOC4yMjY1NjItOS41NDI5NjgtLjI3NzM0NC0zLjQyNTc4Mi0zLTUuMTYwMTU3LTguMTYwMTU2LTUuMTYwMTU3LTUuMzIwMzEzIDAtOC4zNTU0NjkgMS4yOTI5NjktOC4zNTU0NjkgNy45MDIzNDQgMCAxMi43OTY4NzUgMTAuMzI4MTI1IDIxLjM5NDUzMSAyNS42NDA2MjUgMjEuMzk0NTMxem0wIDAiLz48cGF0aCBkPSJtODEuMTI1IDI3NC45MDYyNSAzLjMwMDc4MS0xMS45NTcwMzFoMjAuMzM1OTM4bDMuMzAwNzgxIDExLjk2MDkzN2MuNjA5Mzc1IDIuMTM2NzE5IDIuNTM5MDYyIDMuMTc1NzgyIDUuNTc4MTI1IDMuMTc1NzgyIDQuMjg1MTU2IDAgMTAuNS0yLjczMDQ2OSAxMC41LTYuOTQxNDA3LS4wMjM0MzctLjQyOTY4Ny0uMDk3NjU2LS44NTU0NjktLjIxODc1LTEuMjY5NTMxbC0xOC43MDMxMjUtNjEuMDE5NTMxYy0xLjA1ODU5NC0zLjM3MTA5NC01LjI1LTUuNTU0Njg4LTEwLjY3NTc4MS01LjU1NDY4OHMtOS42MTcxODggMi4xNzU3ODEtMTAuNjc5Njg4IDUuNTUwNzgxbC0xOC42MDU0NjkgNjEuMDI3MzQ0Yy0uMTIxMDkzLjM5ODQzOC0uMTkxNDA2LjgwODU5NC0uMjE4NzUgMS4yMjI2NTYgMCA0LjIxMDkzOCA2LjIyMjY1NyA2Ljk4NDM3NiAxMC41IDYuOTg0Mzc2IDMuMDQyOTY5IDAgNC45NzI2NTctMS4wMzkwNjMgNS41ODU5MzgtMy4xNzk2ODh6bTYuNzY5NTMxLTI0Ljk1NzAzMSA2LjY0ODQzOC0yNC40MDIzNDQgNi42NDQ1MzEgMjQuNDAyMzQ0em0wIDAiLz48cGF0aCBkPSJtMTYzLjE5MTQwNiAyMTguNDk2MDk0YzguMDc0MjE5IDAgOC4zMjgxMjUgNS45NzI2NTYgOC40MjU3ODIgOC41MjczNDQuMTkxNDA2IDMuNDMzNTkzIDMgNS4xNzU3ODEgOC4zMTI1IDUuMTc1NzgxIDUuMjU3ODEyIDAgOC4zMDQ2ODctMS4yOTI5NjkgOC4zMDQ2ODctNy45MDIzNDQgMC0xMi4zOTQ1MzEtMTAuMjkyOTY5LTIwLjM5ODQzNy0yNS44NDM3NS0yMC4zOTg0MzctMTUuNTc0MjE5IDAtMjQuNzUgOC43ODUxNTYtMjQuNzUgMjQuMDk3NjU2djI2LjVjMCAxNS4zMTY0MDYgOS4xNzk2ODcgMjQuMTAxNTYyIDI0Ljc1IDI0LjEwMTU2MiAxNS4zMTY0MDYgMCAyNS43MjY1NjMtOC42MDE1NjIgMjUuNzI2NTYzLTIxLjM5ODQzNyAwLTYuNjA5Mzc1LTMuMDE1NjI2LTcuOTAyMzQ0LTguMzM1OTM4LTcuOTAyMzQ0LTUuMTY0MDYyIDAtNy44OTA2MjUgMS43MzQzNzUtOC4xNjc5NjkgNS4xNjQwNjMtLjI5Mjk2OSAzLjc5Njg3NC0uNzY5NTMxIDkuNTM5MDYyLTguMzM1OTM3IDkuNTM5MDYyLTUuNzA3MDMyIDAtOC42MzY3MTktMy4yMDMxMjUtOC42MzY3MTktOS41di0yNi41YzAtNi4zMDg1OTQgMi45MTAxNTYtOS41MDM5MDYgOC41NTA3ODEtOS41MDM5MDZ6bTAgMCIvPjxwYXRoIGQ9Im0yMTMuMTQwNjI1IDIwMy44OTQ1MzFjLTMuODI4MTI1IDAtOC41IDEuMzYzMjgxLTguNSA1LjE5OTIxOXY2My42MDE1NjJjMCAzLjY0MDYyNiA0LjUgNS4zMDA3ODIgOC41IDUuMzAwNzgyczguNS0xLjY2MDE1NiA4LjUtNS4zMDA3ODJ2LTE3LjkyNTc4MWwzLjcxNDg0NC00LjcxNDg0MyAxNi43MzgyODEgMjUuNDA2MjVjMS4yMzA0NjkgMi4wMzEyNSAzLjQ2NDg0NCAzLjIzMDQ2OCA1LjgzNTkzOCAzLjEzNjcxOCA0LjkwMjM0MyAwIDkuOTA2MjUtNC4xODc1IDkuOTA2MjUtOC4yOTY4NzUtLjAxNTYyNi0xLjAyMzQzNy0uMzIwMzEzLTIuMDE5NTMxLS44Nzg5MDctMi44NzVsLTIwLjUtMzEuMzk4NDM3IDE2LjE5MTQwNy0yMC4zMzU5MzhjLjcwNzAzMS0uOTUzMTI1IDEuMDkzNzUtMi4xMDkzNzUgMS4xMDE1NjItMy4yOTY4NzUgMC00LjMwMDc4MS01LjU1NDY4OC04LjUtOS43MDMxMjUtOC41LTEuODM1OTM3LS4wNTA3ODEtMy41NjY0MDYuODYzMjgxLTQuNTU4NTk0IDIuNDE0MDYzbC0xNy44NDc2NTYgMjUuMjEwOTM3di0yMi40MjU3ODFjMC0zLjgzNTkzOC00LjY3MTg3NS01LjE5OTIxOS04LjUtNS4xOTkyMTl6bTAgMCIvPjxwYXRoIGQ9Im0yODguNjQwNjI1IDI3Mi42OTkyMTl2LTIwLjc1aDkuMTAxNTYzYzE2LjE4NzUgMCAyNC44OTg0MzctOC43Njk1MzEgMjQuODk4NDM3LTI0LjA1NDY4OHYtLjVjMC0xNS4xNTIzNDMtOC4zNTU0NjktMjMuNDQ1MzEyLTIzLjg5ODQzNy0yMy40NDUzMTJoLTIwLjY5OTIxOWMtMy41OTM3NSAwLTYuNDAyMzQ0IDIuMTgzNTkzLTYuNDAyMzQ0IDUuMTQ0NTMxdjYzLjYwMTU2MmMwIDMuNjQwNjI2IDQuNSA1LjMwMDc4MiA4LjUgNS4zMDA3ODJzOC41LTEuNjU2MjUgOC41LTUuMjk2ODc1em0xOC00My42MDE1NjNjMCA2LjIxODc1LTMuMzM5ODQ0IDkuODUxNTYzLTguODk4NDM3IDkuODUxNTYzaC05LjEwMTU2M3YtMjBoOS4xMDE1NjNjNS41NjI1IDAgOC44OTg0MzcgMi44MzIwMzEgOC44OTg0MzcgOS4wNDY4NzV6bTAgMCIvPjxwYXRoIGQ9Im0zODcuNjQwNjI1IDI1NC41di0yNi41YzAtMTUuNTQyOTY5LTguODYzMjgxLTI0LjEwMTU2Mi0yNS4wNTA3ODEtMjQuMTAxNTYyLTE2LjEyMTA5NCAwLTI0Ljk0OTIxOSA4LjU1ODU5My0yNC45NDkyMTkgMjQuMTAxNTYydjI2LjVjMCAxNS41MzkwNjIgOC44MjgxMjUgMjQuMDk3NjU2IDI0Ljk0OTIxOSAyNC4wOTc2NTYgMTYuMTg3NSAwIDI1LjA1MDc4MS04LjU1ODU5NCAyNS4wNTA3ODEtMjQuMDk3NjU2em0tMTYgMGMwIDYuMjk2ODc1LTIuOTEwMTU2IDkuNS04LjU1MDc4MSA5LjUtNS41NzQyMTkgMC04LjQ0OTIxOS0zLjIwMzEyNS04LjQ0OTIxOS05LjV2LTI2LjVjMC02LjMwMDc4MSAyLjg3NS05LjUgOC40NDkyMTktOS41IDUuNjQwNjI1IDAgOC41NTA3ODEgMy4xOTkyMTkgOC41NTA3ODEgOS41em0wIDAiLz48cGF0aCBkPSJtNDAxLjI0MjE4OCAyMTEuMzQ3NjU2YzAgNC40NzY1NjMgMi4xMzY3MTggNy42MDE1NjMgNS4xOTkyMTggNy42MDE1NjNoMTMuMTk5MjE5djUzLjc1YzAgMy42NDA2MjUgNC41IDUuMzAwNzgxIDguNSA1LjMwMDc4MXM4LjUtMS42NjAxNTYgOC41LTUuMzAwNzgxdi01My43NWgxM2MzLjA2MjUgMCA1LjE5OTIxOS0zLjEyNSA1LjE5OTIxOS03LjYwMTU2MyAwLTMuNjgzNTk0LTEuNjA1NDY5LTcuMzk4NDM3LTUuMTk5MjE5LTcuMzk4NDM3aC00My4xOTkyMTljLTMuNTkzNzUgMC01LjE5OTIxOCAzLjcxNDg0My01LjE5OTIxOCA3LjM5ODQzN3ptMCAwIi8+PC9zdmc+"); } [data-img="1"]{ content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4NCjxwYXRoIGQ9Ik00NTIsMzUxLjkzN2MtNS41MiwwLTEwLDQuNDgtMTAsMTBjMCw1LjUyLDQuNDgsMTAsMTAsMTBjNS41MiwwLDEwLTQuNDgsMTAtMTBDNDYyLDM1Ni40MTcsNDU3LjUyLDM1MS45MzcsNDUyLDM1MS45Mzd6IiAvPg0KPHBhdGggZD0iTTE4NiwzNTEuOTM3Yy01LjUyLDAtMTAsNC40OC0xMCwxMGMwLDUuNTIsNC40OCwxMCwxMCwxMHMxMC00LjQ4LDEwLTEwQzE5NiwzNTYuNDE3LDE5MS41MiwzNTEuOTM3LDE4NiwzNTEuOTM3eiIvPg0KPHBhdGggZD0iTTE5MS40NDksMzkxLjY2NmMtNS40OTktMC4zNDctMTAuMjU5LDMuODUtMTAuNiw5LjM2MWMtMS41NDYsMjQuOTE3LTIyLjc3Miw0Ni44MDYtNDkuMzc3LDUwLjkxNiBjLTUuNDU3LDAuODQ1LTkuMTk4LDUuOTUzLTguMzU1LDExLjQxMWMwLjg0NSw1LjQ2OCw1Ljk2NCw5LjE5OCwxMS40MSw4LjM1NWMzNS42NzQtNS41MTIsNjQuMTctMzUuMzY2LDY2LjI4My02OS40NDMgQzIwMS4xNTIsMzk2Ljc1MywxOTYuOTYsMzkyLjAwOCwxOTEuNDQ5LDM5MS42NjZ6Ii8+DQo8cGF0aCBkPSJNNDU3LjI5NCwzOTEuNjg3Yy01LjUyMi0wLjM1NS0xMC4yNiwzLjg0NS0xMC42MDQsOS4zNTZjLTEuNTUyLDI0Ljg0LTIyLjcyMSw0Ni43MTEtNDkuMjQsNTAuODc1IGMtNS40NTYsMC44NTYtOS4xODUsNS45NzQtOC4zMjgsMTEuNDNjMC44NjUsNS41MDksNi4wMzYsOS4xODIsMTEuNDMsOC4zMjhjMzUuNTYxLTUuNTgzLDYzLjk3Ny0zNS40MTIsNjYuMS02OS4zODUgQzQ2Ni45OTUsMzk2Ljc3OSw0NjIuODA2LDM5Mi4wMzIsNDU3LjI5NCwzOTEuNjg3eiIvPg0KPHBhdGggZD0iTTQ3NS4zNzEsMzA1Ljg2NmMtMTUuODQ4LTEwLjY4OC0yOC43NzMtMTUuMTY5LTQwLjctMTQuMTA2Yy0xMS4xMjksMC45OTItMTguOTQ0LDYuNjA4LTI1Ljg0LDExLjU2MyBjLTUuNTk4LDQuMDIzLTEwLjIxOSw3LjMzMS0xNi4xNjQsOC4zMTFDMzEzLjMyOCwyNTMuMTg1LDI2NiwxMjMuMDkxLDI2NiwyOS45MzdjMC01LjUyMi00LjQ3OC0xMC0xMC0xMGMtNS41MjIsMC0xMCw0LjQ3OC0xMCwxMCBjMCwxMi42OTctMC44ODcsMjYuMDg1LTIuNjA2LDM5Ljg4MmMtOS43NTEtMTguMjkzLTI1LjQ2My00MC4xMjMtNDkuMTk1LTUzLjgyMmMwLTAuMDAxLDAtMC4wMDEsMC0wLjAwMSBDMTQ4LjExMS0xMC42MDgsOTEuMTExLDMuOTk0LDg4LjcwNyw0LjYyOGMtMi41NzYsMC42ODEtNC43NzQsMi4zNi02LjEwNyw0LjY2OGMtMS4zMzIsMi4zMDgtMS42ODgsNS4wNTItMC45OSw3LjYyNCBjMC42NTIsMi4zOTksMTYuNTAyLDU5LjA3Myw2Mi41OTIsODUuNjc4YzIyLjI0MSwxMi44MzgsNDcuMDI4LDE2LjIyMSw2Ni45ODIsMTYuMjIxYzguOTg0LDAsMTYuOTgyLTAuNjg3LDIzLjMzMy0xLjUwNCBjLTE4LjUzNCw3NS4wMS01OC43NjMsMTUyLjgzMS0xMTUuMTc2LDE5NC4zMmMtMTMuNzA1LTIuMjU0LTIyLjE5OS0xOC4xMDktNDIuMDEyLTE5Ljg3NWMtMTEuOTI1LTEuMDY3LTI0Ljg1MiwzLjQxOS00MC43LDE0LjEwNiBDMTMuMzUxLDMyMS41NjQsMCwzNTIuOTM2LDAsMzkxLjkzN2MwLDY3LjY2NCw1NC40MiwxMjAsMTIzLDEyMGM2OC43NjMsMCwxMjMtNTIuNTA1LDEyMy0xMjAgYzAtMzkuMDAxLTEzLjM1MS03MC4zNzMtMzYuNjI5LTg2LjA3MWMtMTUuMjM3LTEwLjI3NS0yNy43NzQtMTQuNzk4LTM5LjMxMy0xNC4xODljNDIuNTg3LTQ4LjY5Nyw3MS44My0xMTUuOTc2LDg1Ljk0NS0xNzguNDA3IGMxNC4xNTQsNjIuNTQ2LDQzLjQ0MSwxMjkuNzU3LDg1Ljk4LDE3OC40MDljLTExLjU0OC0wLjYyNi0yNC4wOTgsMy45LTM5LjM1NCwxNC4xODdDMjc5LjM1MSwzMjEuNTY0LDI2NiwzNTIuOTM2LDI2NiwzOTEuOTM3IGMwLDY3LjY2NCw1NC40MiwxMjAsMTIzLDEyMGM2OC43NjMsMCwxMjMtNTIuNTA1LDEyMy0xMjBDNTEyLDM1Mi45MzYsNDk4LjY0OSwzMjEuNTY0LDQ3NS4zNzEsMzA1Ljg2NnogTTE1NC4xOTksODUuMjc2IGMtMjguMTE2LTE2LjIyOS00My4zNzktNDcuMjY3LTQ5LjcxNi02My4zNTljMTcuMDgtMi41NzksNTEuNDkxLTQuODkzLDc5LjcxOCwxMS40MDF2LTAuMDAxIGMyOC4xMiwxNi4yMzIsNDMuMzgyLDQ3LjYwOCw0OS43MTUsNjMuODc1QzIxNi43ODgsOTkuNTk3LDE4Mi40MTQsMTAxLjU2NCwxNTQuMTk5LDg1LjI3NnogTTE5OC4xODksMzIyLjQ0OCBDMjIzLjI5LDMzOS4zNzUsMjI2LDM3Ni42ODMsMjI2LDM5MS45MzdjMCw1Ny4wMDgtNDUuOTM3LDEwMC0xMDMsMTAwYy01Ny4xNjQsMC0xMDMtNDMuMTA5LTEwMy0xMDAgYzAtMTUuMjU0LDIuNzEtNTIuNTYyLDI3LjgxMS02OS40ODljMTEuNjgxLTcuODc3LDE5LjUyNi0xMC43ODUsMjUuNzc1LTEwLjc4NWMxNS41MDUsMCwyNC4yNzMsMjAuMjc0LDQ5LjQxNCwyMC4yNzQgYzE0LjI4MywwLDIzLjgzMS02Ljg2LDMxLjUwMy0xMi4zNzNDMTY1Ljk5MywzMTEuMzA4LDE3My41ODIsMzA1Ljg1NCwxOTguMTg5LDMyMi40NDh6IE0zODksNDkxLjkzNyBjLTU3LjE2NCwwLTEwMy00My4xMDktMTAzLTEwMGMwLTE1LjI1NCwyLjcxLTUyLjU2MiwyNy44MTEtNjkuNDg5YzExLjY4MS03Ljg3NywxOS41MjYtMTAuNzg1LDI1Ljc3NS0xMC43ODUgYzYuOTE2LDAsMTEuODc2LDMuNTY0LDE3LjkxMSw3LjkwMWM3LjY3Miw1LjUxMywxNy4yMiwxMi4zNzMsMzEuNTAzLDEyLjM3M2MxNC4yODMsMCwyMy44MzEtNi44NiwzMS41MDMtMTIuMzczIGMxMS40OS04LjI1NiwxOS4wNzktMTMuNzEsNDMuNjg3LDIuODg0YzI1LjEsMTYuOTI3LDI3LjgxLDU0LjIzNSwyNy44MSw2OS40ODlDNDkyLDQ0OC45NDUsNDQ2LjA2Myw0OTEuOTM3LDM4OSw0OTEuOTM3eiIvPg0KPC9zdmc+"); } [data-img="2"]{ content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIuMDAyIDUxMi4wMDIiPg0KPHBhdGggZD0iTTQyNi44NTksMTY1LjIwN2MtMjQuOTYzLTMyLjQzMy01OS4wODktNTcuMzI2LTk3LjI5Ny03MS4yNTljMi42NTctMi4xMTIsNS4yMzktNC4zMzksNy43MjktNi42ODkJYzIxLjk0My0yMC43MDYsMzUuMjA2LTQ4LjY1MiwzNy4zNDctNzguNjg4YzAuMTU5LTIuMjI3LTAuNjItNC40MTgtMi4xNDgtNi4wNDVjLTEuNTI4LTEuNjI3LTMuNjctMi41NzUtNS44OTgtMi41MjMJYy0zMC4zMzEsMC4yNTQtNTkuMTc3LDExLjg1Mi04MS4yMjQsMzIuNjU2Yy0xNC4zMzIsMTMuNTI1LTI0Ljk1OCwzMC4xMzgtMzEuMjA0LDQ4LjQwNQljLTU2Ljg3LDAuNDcyLTExMC4yNjYsMjIuODI2LTE1MC41MzEsNjMuMDljLTQwLjY5OSw0MC42OTktNjMuMTEzLDk0LjgxMS02My4xMTMsMTUyLjM2N2MwLDU3LjU1NywyMi40MTQsMTExLjY2OSw2My4xMTMsMTUyLjM2OAlzOTQuODExLDYzLjExMywxNTIuMzY4LDYzLjExM2M1Ny41NTcsMCwxMTEuNjY4LTIyLjQxNCwxNTIuMzY3LTYzLjExM3M2My4xMTMtOTQuODExLDYzLjExMy0xNTIuMzY4CUM0NzEuNDgxLDI0OC41NDMsNDU2LjA1MSwyMDMuMTM0LDQyNi44NTksMTY1LjIwN3ogTTI5Ni4zNDksNDQuMjk1YzE2Ljg4Ni0xNS45MzQsMzguMzc2LTI1LjYzNSw2MS4yODktMjcuODIzCWMtMy42MDIsMjIuNTU5LTE0LjUzMSw0My4zLTMxLjMyNyw1OS4xNWMtMTMuNjgzLDEyLjkxMi0zMC4zOTEsMjEuNzI4LTQ4LjQyOSwyNS43NzRsMjMuNzc5LTIzLjc3OQljMy4xMjUtMy4xMjQsMy4xMjUtOC4xODksMC0xMS4zMTNjLTMuMTI0LTMuMTI0LTguMTg5LTMuMTI0LTExLjMxMywwbC0yMS41NzMsMjEuNTczCUMyNzQuMTA0LDcxLjQwNiwyODMuNTAzLDU2LjQxNywyOTYuMzQ5LDQ0LjI5NXogTTI1Ni4wMDEsNDk2LjAwMmMtMTA5Ljk5NCwwLTE5OS40OC04OS40ODYtMTk5LjQ4LTE5OS40OAljMC0xMDcuOTUyLDg2LjE4OC0xOTYuMTQzLDE5My4zNy0xOTkuMzhjLTAuODk5LDQuNjY4LTEuNTI4LDkuNDEtMS44NjksMTQuMjA2Yy0wLjAwOCwwLjEwOS0wLjAwMywwLjIxNy0wLjAwNiwwLjMyNQljLTAuMDA1LDAuMTM5LTAuMDEsMC4yNzctMC4wMDgsMC40MTZjMC4wMDIsMC4wODUsMC4wMDgsMC4xNywwLjAxMiwwLjI1NWMwLjAxLDAuMjEsMC4wMjcsMC40MTksMC4wNTMsMC42MjcJYzAuMDAzLDAuMDI0LDAuMDA3LDAuMDQ4LDAuMDEsMC4wNzJjMC4yMjcsMS42NzQsMC45NzUsMy4yOTEsMi4yNjIsNC41NzhjMS41NjIsMS41NjIsMy42MDksMi4zNDMsNS42NTcsMi4zNDMJYzAuMzI2LDAsMC42NS0wLjAyNywwLjk3NC0wLjA2N2MxOS42OTMtMC4zMTIsMzguNzM1LTUuNDAyLDU1LjY2OS0xNC42OTNjMzkuOTc5LDExLjgzMyw3NS45NSwzNi41MTgsMTAxLjUzNSw2OS43NjEJYzI3LjAyLDM1LjEwNSw0MS4zMDEsNzcuMTM5LDQxLjMwMSwxMjEuNTU2QzQ1NS40ODEsNDA2LjUxNSwzNjUuOTk1LDQ5Ni4wMDIsMjU2LjAwMSw0OTYuMDAyeiIvPg0KPHBhdGggZD0iTTM2NC43NjgsMTQ4Ljc0NWMtNS4zNDktMy45NDMtMTAuOTcyLTcuNjM0LTE2LjcxNC0xMC45NzFjLTMuODItMi4yMi04LjcxNi0wLjkyMi0xMC45MzcsMi44OTcJYy0yLjIyLDMuODItMC45MjIsOC43MTcsMi44OTcsMTAuOTM3YzUuMjQyLDMuMDQ2LDEwLjM3Niw2LjQxNiwxNS4yNTksMTAuMDE2YzEuNDI5LDEuMDUzLDMuMDkyLDEuNTYxLDQuNzQxLDEuNTYxCWMyLjQ1NSwwLDQuODc3LTEuMTI2LDYuNDQ2LTMuMjUzQzM2OS4wODIsMTU2LjM3NSwzNjguMzI0LDE1MS4zNjcsMzY0Ljc2OCwxNDguNzQ1eiIvPg0KPHBhdGggZD0iTTE4Ny4yODQsNDQ5LjI5OWMtMjYuMzg1LTExLjg4Ny00OS4zOTYtMzAuNTYtNjYuNTQ1LTU0LjAwMWMtMi42MDktMy41NjUtNy42MTQtNC4zNDItMTEuMTgtMS43MzMJYy0zLjU2NiwyLjYwOC00LjM0Miw3LjYxNC0xLjczMywxMS4xOGMxOC43NzksMjUuNjcsNDMuOTgzLDQ2LjEyMSw3Mi44ODYsNTkuMTQyYzEuMDY3LDAuNDgsMi4xODMsMC43MDgsMy4yODEsMC43MDgJYzMuMDUxLDAsNS45NjQtMS43NTQsNy4yOTktNC43MTZDMTkzLjEwNyw0NTUuODUxLDE5MS4zMTMsNDUxLjExNCwxODcuMjg0LDQ0OS4yOTl6Ii8+DQo8cGF0aCBkPSJNNDI2LjY2MiwyMjkuMDI1Yy04LjYxNC0yMS43NjItMjEuMTcyLTQxLjQ1OS0zNy4zMjYtNTguNTQyYy0zLjAzNS0zLjIwOS04LjA5OC0zLjM1Mi0xMS4zMS0wLjMxNgljLTMuMjEsMy4wMzYtMy4zNTIsOC4wOTktMC4zMTYsMTEuMzFjMTQuNzQ5LDE1LjU5OCwyNi4yMTMsMzMuNTc3LDM0LjA3NSw1My40MzhjMS4yNDQsMy4xNDIsNC4yNTUsNS4wNTgsNy40NDEsNS4wNTgJYzAuOTc5LDAsMS45NzYtMC4xODEsMi45NDItMC41NjNDNDI2LjI3NiwyMzcuNzgyLDQyOC4yODgsMjMzLjEzMyw0MjYuNjYyLDIyOS4wMjV6Ii8+DQo8L3N2Zz4NCg=="); } [data-img="3"]{ content:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEwLjk0NyA1MTAuOTQ3IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJtMjU4Ljc4MSAyNjkuMjc3IDUuMDk4IDMuOTg3IDQuNjktNC40NThjMzAuMTY1LTI4LjY2MyA0Ni4zMjQtNjguOTE5IDQ0LjMzNi0xMTAuNDQ0LTguNTY4LjQxLTUuMTU4LjMxOS0xNC45OTEuMzU4bC4wMDkuMzU4YzEuNjc0IDM0Ljk1Ny0xMS4wMjQgNjguOTEtMzUuMDA2IDk0LjE3Mi00MC4xMzUtMzQuODc5LTUzLjczMS05MC4wMTEtMzcuMDE2LTEzOC4yNjkgNC41NDgtMTMuMTQ3IDE2Ljk2Ny0yMS45ODEgMzAuOTAzLTIxLjk4MSAxMi43MyAwIDI0LjM1MiA3LjM4NSAyOS42MDYgMTguODE2IDQuODM3IDEwLjUwOCA4LjIxNCAyMS42MiAxMC4wMzcgMzMuMDI3bDE0LjgxMy0yLjM2N2MtMi4wNC0xMi43NTctNS44MTUtMjUuMTgzLTExLjIyMi0zNi45MjktNy42OTQtMTYuNzM0LTI0LjY2NC0yNy41NDctNDMuMjM0LTI3LjU0Ny0yMC4zMjUgMC0zOC40NDEgMTIuODkyLTQ1LjA3NyAzMi4wNzUtMTkuNiA1Ni41OTItMS44MDggMTIwLjk3IDQ3LjA1NCAxNTkuMjAyeiIvPgo8cGF0aCBkPSJtMjQ0LjAxNSA1Ny45Ny0yLjk5Mi00Mi45N2gyOS43OTFsLTIuOTUzIDQyLjQ4IDE0Ljk2NSAxLjA0IDQuMDY3LTU4LjUyaC02MS45NWw0LjEwOSA1OS4wMTF6Ii8+CjxwYXRoIGQ9Im04NS4zNzEgMzA0LjIwMmMtMy40NjUtMjYuNjIxLTEuODc0LTUyLjE2NSA0LjcyOS03NS45MjNsLTE0LjQ1My00LjAxOGMtNy4xNDQgMjUuNzA1LTguODc3IDUzLjI1Mi01LjE1MSA4MS44NzYgNS4yNDYgNDAuMjk5IDIwLjI4NiA3OC4wMTEgNDQuNzAxIDExMi4wOTFsMTIuMTkzLTguNzM2Yy0yMi45NTgtMzIuMDQ3LTM3LjA5Ni02Ny40NzEtNDIuMDE5LTEwNS4yOXoiLz4KPHBhdGggZD0ibTQzNS4zIDIyNC4yNjItMTQuNDUzIDQuMDE4YzYuNjA0IDIzLjc1NyA4LjE5NCA0OS4zMDIgNC43MjkgNzUuOTIyLTEyLjM5NiA5NS4yMTEtODAuNTEyIDE1My4xMjItMTIwLjAwMiAxNzkuMTYxLTEuODUxIDEuMjE2LTQuNjUgMi42MzEtOC4xMDIgNC4wOTUtMjYuNjkxIDExLjMyOC01Ny4zMDggMTEuMzMtODQuMDAxLS4wMDItMy40NDgtMS40NjItNi4yNDgtMi44NzctOC4wOS00LjA4Ny0xOC40ODgtMTIuMTg5LTQ1LjQ4Mi0zMi44NjktNjkuMDg4LTYyLjE2NGwtMTEuNjggOS40MTJjMjQuODE5IDMwLjgwMSA1My4xMzEgNTIuNDk4IDcyLjUyMSA2NS4yODEgMi42NjcgMS43NTIgNi4wOTUgMy41MDggMTAuNDc5IDUuMzY2IDMwLjQwNCAxMi45MDcgNjUuMjk2IDEyLjkxNSA5NS43MTguMDAyIDQuMzg3LTEuODYgNy44MTQtMy42MTYgMTAuNDkxLTUuMzc0IDQxLjY0LTI3LjQ1NyAxMTMuNDYyLTg4LjYyIDEyNi42MjktMTg5Ljc1NCAzLjcyNi0yOC42MjQgMS45OTItNTYuMTcxLTUuMTUxLTgxLjg3NnoiLz4KPHBhdGggZD0ibTE4Ni45NjEgMTgxLjM1My04Ljk5NC0xMi4wMDRjLTI1LjE0NSAxOC44NDItNTguMjczIDI2LjUwOC05MC40MiAxOS42MDggOS43MzUtNTIuODY3IDU1LjY0OC05MS4zNTQgMTA5LjEyLTkxLjg3N2wtLjE0Ni0xNWMtNjMuMDA2LjYxOC0xMTYuOTY2IDQ3Ljc3OC0xMjQuODcgMTExLjU5OWwtLjc5NSA2LjQyMiA2LjIzNSAxLjcyOGMzOC43OCAxMC43NDQgNzkuNDQ5IDIuMzE3IDEwOS44Ny0yMC40NzZ6Ii8+CjxwYXRoIGQ9Im00MjMuNCAxODguOTU3Yy0yOC45ODUgNi4yMTEtNTkuNDA0LjcyMS04NC40MDYtMTUuNDM2bC04LjE0MSAxMi41OThjMzAuNTIgMTkuNzIzIDY4LjA3MiAyNS4zOTEgMTAzLjAwMyAxNS43MDlsNi4yMzUtMS43MjktLjc5NS02LjQyMWMtNy43OC02Mi44MTQtNjAuMTk5LTEwOS41NDktMTIxLjk5NC0xMTEuNTI0bC0uNDc5IDE0Ljk5MmM1Mi4wOTIgMS42NjcgOTYuOTQyIDM5LjQ4NyAxMDYuNTc3IDkxLjgxMXoiLz4KPHBhdGggZD0ibTE2MS40MDQgMjQzLjYzOGgxNXYxNWgtMTV6Ii8+CjxwYXRoIGQ9Im0xMjAuNjE1IDI4MC45OWgxNXYxNWgtMTV6Ii8+CjxwYXRoIGQ9Im0yMDIuMTkzIDI4MC45OWgxNXYxNWgtMTV6Ii8+CjxwYXRoIGQ9Im0yMDIuMTkzIDM2MC45OWgxNXYxNWgtMTV6Ii8+CjxwYXRoIGQ9Im0xNjEuNDA0IDMxNy42MzhoMTV2MTVoLTE1eiIvPgo8cGF0aCBkPSJtMTYxLjQwNCA0MDAuNjM4aDE1djE1aC0xNXoiLz4KPHBhdGggZD0ibTI5Ni43NzEgMjgwLjk5aDE1djE1aC0xNXoiLz4KPHBhdGggZD0ibTM3NS4zNDkgMjgwLjk5aDE1djE1aC0xNXoiLz4KPHBhdGggZD0ibTI5Ni43NzEgMzYwLjk5aDE1djE1aC0xNXoiLz4KPHBhdGggZD0ibTMzNi4wNjEgMjQzLjYzOGgxNXYxNWgtMTV6Ii8+CjxwYXRoIGQ9Im0zMzYuMDYxIDMxNy42MzhoMTV2MTVoLTE1eiIvPgo8cGF0aCBkPSJtMzM2LjA2MSA0MDAuNjM4aDE1djE1aC0xNXoiLz4KPHBhdGggZD0ibTI0Ny45ODIgMzE3LjYzOGgxNXYxNWgtMTV6Ii8+CjxwYXRoIGQ9Im0yNDcuOTgyIDQwMC42MzhoMTV2MTVoLTE1eiIvPgo8L3N2Zz4="); } [data-img="4"]{ content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIuMDk1IDUxMi4wOTUiPg0KPHBhdGggZD0iTTUwNS4yMDgsMTYwLjMzOWMtMTIuMTY2LTQ1LjMwOS0zOS43OTMtNzkuNjg0LTc3Ljc5My05Ni43OTJjLTQzLjU1OS0xOS42MTEtODUuMjA0LTExLjMzMS0xMjEuOTQ2LTQuMDI0IGMtMTIuMzI0LDIuNDUxLTI0LjE2NSw0LjgwMS0zNS40MTEsNS45ODhjNC4yNDQtMTIuMjUsMTEuMjY2LTIyLjI5NiwyMi42NTQtMzAuOTk1YzMuNTExLTIuNjgyLDQuMTgzLTcuNzAzLDEuNTAxLTExLjIxNCBjLTIuNjgzLTMuNTEyLTcuNzAzLTQuMTg0LTExLjIxNC0xLjUwMWMtMTMuNTc4LDEwLjM3Mi0yMy45MDMsMjIuNzQtMjkuNjk2LDQ0LjQ3N2MtMTQuNTA3LTAuMzU5LTMwLjE2MS0zLjQ3MS00Ni42NzctNi43NTUgYy0zNi43NDMtNy4zMDctNzguMzg4LTE1LjU4OC0xMjEuOTQ2LDQuMDI0Yy0zOCwxNy4xMDktNjUuNjI3LDUxLjQ4NC03Ny43OTMsOTYuNzkyQy0xMS40LDIyOC40NDQsNy4yNCwzMTAuMjM1LDU2Ljc0OSwzNzkuMTMgYzMzLjMyMyw0Ni4zNzEsNzAuNDg2LDc4LjcwNCwxMTAuNDU3LDk2LjEwMWMzMy44MjMsMTQuNzIxLDYzLjg5LDE2LjcwNiw4OC44NDEsMTYuNzA2czU1LjAxOS0xLjk4NSw4OC44NDEtMTYuNzA2IGMzOS45NzEtMTcuMzk3LDc3LjEzNC00OS43MywxMTAuNDU3LTk2LjEwMUM1MDQuODU0LDMxMC4yMzUsNTIzLjQ5NSwyMjguNDQ0LDUwNS4yMDgsMTYwLjMzOXogTTQ0Mi4zNTMsMzY5Ljc5MyBjLTMxLjYxOCw0My45OTgtNjYuNTU3LDc0LjUzNy0xMDMuODQ5LDkwLjc2N2MtMzEuMTMxLDEzLjU1LTU5LjE1MiwxNS4zNzYtODIuNDU2LDE1LjM3NnMtNTEuMzI1LTEuODI3LTgyLjQ1Ni0xNS4zNzYgYy0zNy4yOTItMTYuMjMtNzIuMjMxLTQ2Ljc2OS0xMDMuODQ5LTkwLjc2N0MyMy4wMDUsMzA0Ljc1NSw1LjI4NSwyMjguMDA2LDIyLjMzOSwxNjQuNDg4IGMxMC44OTctNDAuNTg0LDM1LjM3LTcxLjI1MSw2OC45MDktODYuMzUyYzE3Ljc1MS03Ljk5MiwzNS4xNjctMTAuNzkxLDUyLjI4OS0xMC43OTFjMjAuMzkxLDAsNDAuMzYyLDMuOTcxLDU5Ljk2OSw3Ljg3IGMxNi4yMiwzLjIyNSwzMS42NDUsNi4yODksNDYuNjM4LDYuOTU5Yy0xLjA0OSw3LjM5Ni0xLjcxNiwxNS42NjYtMS45NzEsMjQuOTc2Yy02LjY0Mi0xLjI3LTEzLjc3LTMuODU5LTIxLjA2Ny02LjY1OSBjLTQuMTI1LTEuNTgtOC43NTIsMC40NzgtMTAuMzM1LDQuNjA0Yy0xLjU4Myw0LjEyNSwwLjQ3OSw4Ljc1Miw0LjYwNCwxMC4zMzVjMTEuNzM2LDQuNTAyLDIzLjIxOSw4LjU0NCwzNC42NzQsOC41NDQgczIyLjkzOC00LjA0MiwzNC42NzQtOC41NDRjNC4xMjUtMS41ODMsNi4xODYtNi4yMSw0LjYwNC0xMC4zMzVjLTEuNTgzLTQuMTI1LTYuMjA5LTYuMTg1LTEwLjMzNS00LjYwNCBjLTcuMjE2LDIuNzY5LTE0LjI2Nyw1LjMzMy0yMC44NDYsNi42MThjMC4yMDYtOS4yMTYsMC43ODEtMTcuNTY2LDEuOTY0LTI1LjE4YzEzLjY4Ni0wLjk5MywyNy43NTYtMy43ODYsNDIuNDgxLTYuNzE0IGMzNi4wNy03LjE3Miw3My4zNjYtMTQuNTg5LDExMi4yNTcsMi45MjFjMzMuNTM5LDE1LjEsNTguMDExLDQ1Ljc2OCw2OC45MDksODYuMzUyIEM1MDYuODEsMjI4LjAwNiw0ODkuMDg5LDMwNC43NTUsNDQyLjM1MywzNjkuNzkzeiIvPg0KPHBhdGggZD0iTTE0NS4xMjgsNDA1LjkxMmMtMTcuMDYyLTE0LjA5Ni0zMy42Ni0zMi4zMjQtNDkuMzM0LTU0LjE3OGMtNC4xMTQtNS43MzctOC4wNDEtMTEuNjY1LTExLjY3MS0xNy42MjEgYy0yLjMwMS0zLjc3Mi03LjIyMi00Ljk2Ny0xMC45OTUtMi42NjdjLTMuNzcyLDIuMy00Ljk2Nyw3LjIyMy0yLjY2NywxMC45OTVjMy44MzcsNi4yOTQsNy45ODYsMTIuNTU4LDEyLjMzMSwxOC42MTcgYzE2LjQ3OCwyMi45NzQsMzQuMDIyLDQyLjIxNSw1Mi4xNDYsNTcuMTg4YzEuNDkxLDEuMjMyLDMuMjk2LDEuODMzLDUuMDkxLDEuODMzYzIuMzA0LDAsNC41OS0wLjk5LDYuMTcyLTIuOTA1IEMxNDkuMDE1LDQxMy43NjksMTQ4LjUzNSw0MDguNzI2LDE0NS4xMjgsNDA1LjkxMnoiLz4NCjxwYXRoIGQ9Ik00NjQuNDIyLDE2My4xMDRjLTQuMjY3LDEuMTQ2LTYuNzk3LDUuNTM1LTUuNjUxLDkuODAxYzguOTUxLDMzLjMyMyw2LjY1Myw3MS40MDItNi42NDUsMTEwLjEyMSBjLTEuNDM1LDQuMTc5LDAuNzg5LDguNzI5LDQuOTY4LDEwLjE2NWMwLjg2MSwwLjI5NSwxLjczNywwLjQzNiwyLjU5OSwwLjQzNmMzLjMyMiwwLDYuNDI2LTIuMDg1LDcuNTY2LTUuNDAzIGMxNC4zMzctNDEuNzQ1LDE2Ljc0Ni04My4wNTcsNi45NjQtMTE5LjQ2OUM0NzMuMDc4LDE2NC40ODgsNDY4LjY5MSwxNjEuOTYsNDY0LjQyMiwxNjMuMTA0eiIvPg0KPHBhdGggZD0iTTQ1Ny45NTUsMTQ3LjA0YzMuODI3LTIuMjA4LDUuMTQtNy4xLDIuOTMyLTEwLjkyN2MtNC4xMzctNy4xNzItOC45MzUtMTMuNzc1LTE0LjI1OC0xOS42MjUgYy0yLjk3My0zLjI2Ny04LjAzMy0zLjUwNi0xMS4zMDEtMC41MzNjLTMuMjY4LDIuOTc0LTMuNTA2LDguMDM0LTAuNTMzLDExLjMwMWM0LjU1Miw1LjAwMiw4LjY2OCwxMC42NzIsMTIuMjMyLDE2Ljg1MSBjMS40ODEsMi41NjgsNC4xNzEsNC4wMDQsNi45MzcsNC4wMDRDNDU1LjMyMSwxNDguMTExLDQ1Ni42OTUsMTQ3Ljc2Niw0NTcuOTU1LDE0Ny4wNHoiLz4NCjwvc3ZnPg0K"); } [data-img="5"]{ content:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTA2LjIyMyA1MDYuMjIzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJtNDIyLjAyIDUuNDEyLTUuMzAyLTUuNDEyLTI5My40MjcgMjkzLjQyOCAxMC42MDYgMTAuNjA3IDIxMy40OTUtMjEzLjQ5NWM2My4zMjcgNzAuOTU1IDYxLjY4NSAxODAuODAxLTcuMTgyIDI0OS42NjctNjkuMTQ1IDY5LjE0Ny0xNzkuMDE4IDcwLjIzNS0yNDkuNjY4IDcuMTgybDMyLjc0NS0zMi43NDUtMTAuNjA2LTEwLjYwNy0xMTIuNjc4IDExMi42NzggNS40MTIgNS4zMDNjMTE1LjQ2MiAxMTMuMTM5IDMwMC4yMTkgMTEyLjEwOSA0MTQuNDczLTIuMTM0IDExNC4xNzctMTE0LjE4OCAxMTUuMzE5LTI5OC45NiAyLjEzMi00MTQuNDcyem0tMTIuNzM5IDQwMy44NjVjLTEwNi43MDEgMTA2LjY5MS0yNzguMDk1IDEwOS4yNzYtMzg3Ljg4NSA3LjI1OWwzMy4xMzktMzMuMTM5YzQzLjM5NiAzOS43MSA5OS40MDEgNjEuMjA0IDE1OC40NTcgNjAuODQ0IDEyMC45ODctLjczIDIxNy4wOTgtOTIuMzIxIDIyOS44MDYtMjA2LjcxMmwtMTQuOTA4LTEuNjU2Yy0xMi4xNjYgMTA5LjUxNS0xMDQuMzkzIDE5My4zNzItMjE2LjM0MSAxOTMuMzcyLTU0LjYyOCAwLTEwNi4yODMtMTkuOTY2LTE0Ni40MDYtNTYuNDU2bDE0Ljc3OS0xNC43NzljMzcuOTE4IDM0LjEzNyA4NS41MDQgNTAuNzcyIDEzMy4wODIgNTAuMzkgMTA3Ljc5MS0uNzc2IDE5NC42MjItODcuNTY0IDE5NS4zOTgtMTk1LjM5OC4zNTctNDkuNTc2LTE3LjQ5MS05Ni41NC01MC4zOS0xMzMuMDgxbDE0Ljc4MS0xNC43ODFjMzcuNzkgNDEuNTMzIDU4Ljg3MiA5Ny4xNjMgNTYuMjI5IDE1Ni4yMjdsMTQuOTg0LjY3YzIuNjktNjAuMDgzLTE3LjY3My0xMjAuNjA3LTYwLjYwNC0xNjcuNTA2bDMzLjEzOC0zMy4xMzhjMTAwLjk2IDEwOC42NTQgMTAwLjQ3NCAyODAuMTQxLTcuMjU5IDM4Ny44ODR6Ii8+CjxwYXRoIGQ9Im0yMTYuMjI3IDI2Mi45MjdoMTV2MTVoLTE1eiIgdHJhbnNmb3JtPSJtYXRyaXgoLjcwNyAtLjcwNyAuNzA3IC43MDcgLTEyNS42OTEgMjM3LjM4OSkiLz4KPHBhdGggZD0ibTI3MC4zMiAyMDguODM0aDE1djE1aC0xNXoiIHRyYW5zZm9ybT0ibWF0cml4KC43MDcgLS43MDcgLjcwNyAuNzA3IC03MS41OTYgMjU5Ljg0NCkiLz4KPHBhdGggZD0ibTIxMS43NjQgMzEyLjU1OGgxNXYxNWgtMTV6IiB0cmFuc2Zvcm09Im1hdHJpeCguNzA3IC0uNzA3IC43MDcgLjcwNyAtMTYyLjA5MSAyNDguNzY4KSIvPgo8cGF0aCBkPSJtMjY1Ljg1NyAyNTguNDY0aDE1djE1aC0xNXoiIHRyYW5zZm9ybT0ibWF0cml4KC43MDcgLS43MDcgLjcwNyAuNzA3IC0xMDguMDAxIDI3MS4xNTcpIi8+CjxwYXRoIGQ9Im0zMTkuOTUyIDIwNC4zN2gxNXYxNS4wMDFoLTE1eiIgdHJhbnNmb3JtPSJtYXRyaXgoLjcwNyAtLjcwNyAuNzA3IC43MDcgLTUzLjkwNyAyOTMuNTk5KSIvPgo8L3N2Zz4="); } [data-img="6"]{ content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAuNTIyIDM2MC41MjIiPg0KPHBhdGggZD0iTTMzMC45NjQsMTUwLjczNmMtMTguMzcxLTQ4Ljg5My03OS43ODctODIuNzk1LTE1MC43MDItODIuNzk1Yy03MC45MTYsMC0xMzIuMzMyLDMzLjkwMy0xNTAuNzAzLDgyLjc5NSBDMTMuMTM4LDE1MS40NiwwLDE2NS4wNDYsMCwxODEuNjQzYzAsMTYuOTY4LDEzLjczMSwzMC43OSwzMC42NjYsMzAuOTM3YzE5LjYzLDQ3LjI0OCw4MC41ODgsODAuMDAyLDE0OS41OTYsODAuMDAyIGM2OS4wMDcsMCwxMjkuOTY1LTMyLjc1NSwxNDkuNTk2LTgwLjAwMmMxNi45MzUtMC4xNDYsMzAuNjY1LTEzLjk2OCwzMC42NjUtMzAuOTM3IEMzNjAuNTIyLDE2NS4wNDYsMzQ3LjM4NiwxNTEuNDYsMzMwLjk2NCwxNTAuNzM2eiBNMzI5LjU4NSwyMDQuNThjLTAuNjQsMC0xLjMxLTAuMDMyLTIuMDQ4LTAuMDk3IGMtMS43ODktMC4xNjUtMy40NjEsMC44OTMtNC4wOTQsMi41NzFjLTE3LjI0Nyw0NS42NDctNzYuMTI2LDc3LjUyNy0xNDMuMTgyLDc3LjUyN2MtNjcuMDU3LDAtMTI1LjkzNi0zMS44OC0xNDMuMTgyLTc3LjUyNyBjLTAuNTkyLTEuNTY3LTIuMDktMi41ODYtMy43NC0yLjU4NmMtMC4xMTcsMC0wLjIzNCwwLjAwNS0wLjM1NCwwLjAxNmMtMC43MzksMC4wNjUtMS40MDksMC4wOTctMi4wNDksMC4wOTcgQzE4LjI5LDIwNC41OCw4LDE5NC4yOTEsOCwxODEuNjQzYzAtMTIuNjQ3LDEwLjI5LTIyLjkzNywyMi45MzgtMjIuOTM3YzAuNDExLDAsMC44MiwwLjAxMiwxLjIyNywwLjAzNCBjMS43NjYsMC4wODIsMy40MjEtMS4wMTMsMy45OTctMi43MWM3LjU1OC0yMi4yODIsMjUuNzc0LTQyLjUzNCw1MS4yOTQtNTcuMDI0YzI2LjU3My0xNS4wODksNTguNjY1LTIzLjA2NCw5Mi44MDctMjMuMDY0IHM2Ni4yMzMsNy45NzYsOTIuODA2LDIzLjA2NGMyNS41MiwxNC40OTEsNDMuNzM2LDM0Ljc0Myw1MS4yOTQsNTcuMDI0YzAuNTc1LDEuNjk3LDIuMjEzLDIuNzkzLDMuOTk3LDIuNzEgYzAuNDA2LTAuMDIxLDAuODE1LTAuMDM0LDEuMjI3LTAuMDM0YzEyLjY0NywwLDIyLjkzOCwxMC4yOSwyMi45MzgsMjIuOTM3QzM1Mi41MjIsMTk0LjI5MSwzNDIuMjMyLDIwNC41OCwzMjkuNTg1LDIwNC41OHoiLz4NCjxwYXRoIGQ9Ik0yNDEuNjA0LDk2Ljk3NmMtNC41NDQtMS40NzctOS4zMDEtMi43MzEtMTQuMTM4LTMuNzI5Yy0yLjE3My0wLjQ0OC00LjI4LDAuOTQ2LTQuNzI3LDMuMTA5czAuOTQ2LDQuMjc5LDMuMTA5LDQuNzI2IGM0LjU0OSwwLjkzOCw5LjAxOCwyLjExNywxMy4yODIsMy41MDNjMC40MTEsMC4xMzMsMC44MjcsMC4xOTcsMS4yMzcsMC4xOTdjMS42ODYsMCwzLjI1NC0xLjA3NCwzLjgwMy0yLjc2NSBDMjQ0Ljg1NSw5OS45MTUsMjQzLjcwNSw5Ny42NTgsMjQxLjYwNCw5Ni45NzZ6Ii8+DQo8cGF0aCBkPSJNMjY0LjM1OSwxMDcuMDgxYy0xLjkxMS0xLjEwOS00LjM1Ny0wLjQ1OC01LjQ2NywxLjQ1M2MtMS4xMDgsMS45MTEtMC40NTgsNC4zNTgsMS40NTMsNS40NjcgYzMyLjM5MiwxOC43OSw0Mi4yMDEsNDguMTQxLDQyLjI5Nyw0OC40MzVjMC41NDYsMS42OTUsMi4xMTYsMi43NzUsMy44MDcsMi43NzVjMC40MDMsMCwwLjgxNC0wLjA2MiwxLjIyLTAuMTkxIGMyLjEwNC0wLjY3MywzLjI2NS0yLjkyNCwyLjU5MS01LjAyOUMzMDkuODM4LDE1OC42NzQsMjk5LjUyOCwxMjcuNDgyLDI2NC4zNTksMTA3LjA4MXoiLz4NCjwvc3ZnPg0K"); } [data-img="7"]{ content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIgMTkyIj4KPHBhdGggZD0iTTE3My42NTcsMjkuNjU3YTgsOCwwLDAsMCwwLTExLjMxNEMxNjQuODQsOS41MjYsMTQ4LjI3OCwxLjIsMTQ3LjU3OC44NDVhOCw4LDAsMCwwLTkuMjM1LDEuNUMxMzAuNzEzLDkuOTczLDEyNC42ODcsMTYsMTA0LDE2Yy03LjI0OCwwLTE0LjEzMi0yLjktMjEuNDIxLTUuOTY5QzcxLjI2NSw1LjI2Niw1Ny42NTktLjQ1Miw0MCw0LjM2NlYwSDI0VjY0SDQwVjQ0LjI0NGM5LjkzNS01LjksMTcuNDE1LTIuNjgxLDI5LjA4NCwyLjM1LDEwLjA4Myw0LjM0NywyMS44LDkuNCwzNi44LDguMTk0QzgzLjIsODYuMjMzLDcyLjg3OCwxMTYuMTcsNjguMTksMTM3LjI2NUExODAuMTU2LDE4MC4xNTYsMCwwLDAsNjMuNjgsMTc2SDU2djE2aDg4VjE3NkgxMzMuNjc4QzExMy4wNTIsMTEyLjg5MywxNDguNjgyLDU0LjYzMiwxNzMuNjU3LDI5LjY1N1oiLz4KPC9zdmc+Cg=="); } [data-img="8"]{ content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4NCjxwYXRoIGQ9Ik00MjQsMjQwYzAtMjguNTUyLTE4LjQxNS01Mi4xNjUtNDIuMTEzLTU1LjU2NGMxLjM3MS01LjIsMi4xMTMtMTAuNzE5LDIuMTEzLTE2LjQzNmMwLTIxLjgzMi0xMC43NzEtNDAuNzczLTI2LjQzMy01MC4wMDUgYzIuNDg4LTkuMzA3LDMuNzU0LTE4LjkyMiwzLjc1NC0yOC42NTFjMC01LjgxMS0wLjU0MS0xMS44NDctMS42NTItMTguNDUyYy0wLjU2Ni0zLjM2MS0zLjItNS45OTUtNi41NjEtNi41NjEgYy02LjYwNS0xLjExMi0xMi42NDEtMS42NTItMTguNDUyLTEuNjUyYy0yMi4xMDcsMC00My4wNTUsNi40MTQtNjAuNzQ4LDE4LjA0NmMyLjA4Mi05LjcyNSw2LjAwNC0yMS40ODQsMTIuNDMxLTMyLjA3NSBDMjk5LjQ4NiwyNi45ODUsMzE4Ljg4NiwxNiwzNDQsMTZjNC40MTgsMCw4LTMuNTgyLDgtOHMtMy41ODItOC04LThjLTMwLjY1MiwwLTU1LjMyMSwxMy45NTMtNzEuMzM5LDQwLjM1IGMtNy43MTksMTIuNzIxLTEyLjExNCwyNi4wNjktMTQuNDI5LDM3LjA0N2MtMTAuNzA3LTE2LjA1OS0yNC42OTUtMjkuNzY4LTQxLjE0My00MC4xNjZDMTk1LjExNiwyMy4zNDIsMTY5LjcsMTYsMTQzLjU4OCwxNiBjLTcuMjI1LDAtMTQuNzM4LDAuNjczLTIyLjk2OCwyLjA1OWMtMy4zNjIsMC41NjYtNS45OTYsMy4yLTYuNTYyLDYuNTYyQzExMi42NzMsMzIuODUsMTEyLDQwLjM2MywxMTIsNDcuNTg4IGMwLDMwLjQ2OSw5LjY5OCw1OS4yMjUsMjguMDY4LDgzLjMzOUMxMzIuNTY3LDE0MC44MTEsMTI4LDE1My43OTIsMTI4LDE2OGMwLDUuNzE4LDAuNzQyLDExLjIzNiwyLjExMywxNi40MzYgQzEwNi40MTUsMTg3LjgzNSw4OCwyMTEuNDQ4LDg4LDI0MGMwLDI4LjU1NywxOC40MjEsNTIuMTczLDQyLjEyNSw1NS41NjVDMTI4LjczOCwzMDAuODY3LDEyOCwzMDYuNDA3LDEyOCwzMTIgYzAsMjguNTU4LDE4LjQyMyw1Mi4xNzYsNDIuMTI5LDU1LjU2NmMtMS4zOSw1LjMwNy0yLjEyOSwxMC44NTMtMi4xMjksMTYuNDUyYzAsMjguNTU1LDE4LjQxOCw1Mi4xNyw0Mi4xMiw1NS41NjUgYy0xLjM4NCw1LjI5Ni0yLjEyLDEwLjgzLTIuMTIsMTYuNDE3YzAsMzAuODc5LDIxLjUzMyw1Niw0OCw1NnM0OC0yNS4xMjEsNDgtNTZjMC01LjU4Ny0wLjczNi0xMS4xMjEtMi4xMi0xNi40MTcgYzIzLjcwMi0zLjM5NSw0Mi4xMi0yNy4wMSw0Mi4xMi01NS41NjVjMC01LjU5OS0wLjczOS0xMS4xNDUtMi4xMjktMTYuNDUyQzM2NS41NzcsMzY0LjE3NiwzODQsMzQwLjU1OCwzODQsMzEyIGMwLTUuNTkzLTAuNzM4LTExLjEzMy0yLjEyNS0xNi40MzVDNDA1LjU3OSwyOTIuMTczLDQyNCwyNjguNTU3LDQyNCwyNDB6IE0zNjgsMTY4YzAsMjIuMDU2LTE0LjM1NSw0MC0zMiw0MHMtMzItMTcuOTQ0LTMyLTQwIHMxNC4zNTUtNDAsMzItNDBTMzY4LDE0NS45NDQsMzY4LDE2OHogTTMyOCwyNDAuMDE4YzAsMjIuMDU2LTE0LjM1NSw0MC0zMiw0MHMtMzItMTcuOTQ0LTMyLTQwYzAtNi4xMjcsMS4xNC0xMi4xNDQsMy4yOTItMTcuNTk4IGMxMS45MTctMy4zNjYsMjIuMTA5LTExLjkyNiwyOC43MDgtMjMuNTExYzYuNTk5LDExLjU4NSwxNi43OTEsMjAuMTQ1LDI4LjcwOCwyMy41MTFDMzI2Ljg2LDIyNy44NzUsMzI4LDIzMy44OTEsMzI4LDI0MC4wMTh6IE0yNTYsMzUyYy0xNy42NDUsMC0zMi0xNy45NDQtMzItNDBjMC02LjExMiwxLjEzNS0xMi4xMTQsMy4yNzctMTcuNTU4YzExLjkyMy0zLjM2MywyMi4xMjEtMTEuOTI1LDI4LjcyMy0yMy41MTUgYzYuNjAyLDExLjU5LDE2LjgsMjAuMTUyLDI4LjcyMywyMy41MTVDMjg2Ljg2NSwyOTkuODg3LDI4OCwzMDUuODg4LDI4OCwzMTJDMjg4LDMzNC4wNTYsMjczLjY0NSwzNTIsMjU2LDM1MnogTTE3NiwxMjggYzE3LjY0NSwwLDMyLDE3Ljk0NCwzMiw0MHMtMTQuMzU1LDQwLTMyLDQwcy0zMi0xNy45NDQtMzItNDBTMTU4LjM1NSwxMjgsMTc2LDEyOHogTTE4Ny4yOTIsMjIyLjQyIGMxMS45MTctMy4zNjYsMjIuMTA5LTExLjkyNiwyOC43MDgtMjMuNTExYzYuNTk5LDExLjU4NSwxNi43OTEsMjAuMTQ1LDI4LjcwOCwyMy41MTFjMi4xNTIsNS40NTUsMy4yOTIsMTEuNDcxLDMuMjkyLDE3LjU5OCBjMCwyMi4wNTYtMTQuMzU1LDQwLTMyLDQwcy0zMi0xNy45NDQtMzItNDBDMTg0LDIzMy44OTEsMTg1LjE0LDIyNy44NzQsMTg3LjI5MiwyMjIuNDJ6IE0yNTYsMTI4YzE3LjY0NSwwLDMyLDE3Ljk0NCwzMiw0MCBzLTE0LjM1NSw0MC0zMiw0MHMtMzItMTcuOTQ0LTMyLTQwUzIzOC4zNTUsMTI4LDI1NiwxMjh6IE0zNDQuNzEyLDc5LjI4OGMwLjQwOCwzLjUxNywwLjYwOSw2Ljg0MSwwLjYwOSwxMC4wNTYgYzAsNy44NjQtMC45NzYsMTUuNjM0LTIuODczLDIzLjE3NmMtMi4xMTEtMC4zMzItNC4yNi0wLjUyLTYuNDQ4LTAuNTJjLTUuOTI2LDAtMTEuNjAyLDEuMjY4LTE2Ljg0NywzLjU2OSBjMS42OTctMy4zOTIsMC43ODktNy42MTMtMi4zNTMtOS45NjljLTMuNTM0LTIuNjUyLTguNTQ5LTEuOTM1LTExLjIsMS42bC0xNS44MDYsMjEuMDc1Yy03LjMxLTguNDY1LTE2LjkzNy0xNC4xOTctMjcuNjU4LTE1LjgwMSBjMTcuODU1LTIxLjM3Niw0NC4wNjYtMzMuNzk1LDcyLjUyLTMzLjc5NUMzMzcuODcxLDc4LjY3OSwzNDEuMTk2LDc4Ljg3OSwzNDQuNzEyLDc5LjI4OHogTTEyOC45ODYsMzIuOTg2IGM1LjE0LTAuNjYyLDkuOTU3LTAuOTg2LDE0LjYwMi0wLjk4NmMyMy4wODIsMCw0NS41NDEsNi40ODUsNjQuOTUxLDE4Ljc1NWMxOC43OSwxMS44NzgsMzMuOTY0LDI4LjYyOCw0My45MTMsNDguNDUzIGMtNC4zMzQsNC44MzItOC4yODUsMTAuMDkxLTExLjgwMSwxNS43NDRjLTQuMTU5LDEuNjQyLTguMDY3LDMuOTIxLTExLjYyOSw2Ljc1NmwtNDcuMzY2LTQ3LjM2NiBjLTMuMTI0LTMuMTI0LTguMTg5LTMuMTI0LTExLjMxMywwYy0zLjEyNSwzLjEyNC0zLjEyNSw4LjE4OSwwLDExLjMxM2w0Ny44NzEsNDcuODcxYy0wLjc3NSwxLjE1NC0xLjUxNywyLjM0LTIuMjE0LDMuNTY0IEMyMDcuMzk0LDEyMS45ODMsMTkyLjY4LDExMiwxNzYsMTEyYy04Ljg2NSwwLTE3LjE3MSwyLjgzLTI0LjMwNiw3LjczOUMxMzYuMTg4LDk4Ljc0MywxMjgsNzMuODkyLDEyOCw0Ny41ODggQzEyOCw0Mi45NDMsMTI4LjMyNCwzOC4xMjUsMTI4Ljk4NiwzMi45ODZ6IE0xMDQsMjQwYzAtMjIuMDU2LDE0LjM1NS00MCwzMi00MGMwLjIxMSwwLDAuNDE3LTAuMDE2LDAuNjI0LTAuMDMxIGM2LjYxLDExLjA0OCwxNi41NCwxOS4xOTMsMjguMDkyLDIyLjQ1NEMxNjYuODYzLDIyNy44NzIsMTY4LDIzMy44ODEsMTY4LDI0MGMwLDIyLjA1Ni0xNC4zNTUsNDAtMzIsNDBTMTA0LDI2Mi4wNTYsMTA0LDI0MHogTTE0NCwzMTJjMC02LjEyLDEuMTM3LTEyLjEyOSwzLjI4NS0xNy41NzhjMTEuOTE3LTMuMzY0LDIyLjExLTExLjkyMSwyOC43MS0yMy41MDRjNi42MDIsMTEuNTk1LDE2LjgwMiwyMC4xNiwyOC43MjgsMjMuNTI0IEMyMDYuODY1LDI5OS44ODcsMjA4LDMwNS44ODgsMjA4LDMxMmMwLDIyLjA1Ni0xNC4zNTUsNDAtMzIsNDBTMTQ0LDMzNC4wNTYsMTQ0LDMxMnogTTE4NCwzODQuMDE4IGMwLTYuMTI3LDEuMTQtMTIuMTQ0LDMuMjkyLTE3LjU5OGMxMS45MTctMy4zNjYsMjIuMTA5LTExLjkyNiwyOC43MDgtMjMuNTExYzYuNTk5LDExLjU4NSwxNi43OTEsMjAuMTQ1LDI4LjcwOCwyMy41MTEgYzIuMTUyLDUuNDU1LDMuMjkyLDExLjQ3MSwzLjI5MiwxNy41OThjMCwyMi4wNTYtMTQuMzU1LDQwLTMyLDQwUzE4NCw0MDYuMDc0LDE4NCwzODQuMDE4eiBNMjU2LDQ5NmMtMTcuNjQ1LDAtMzItMTcuOTQ0LTMyLTQwIGMwLTYuMTEyLDEuMTM1LTEyLjExNCwzLjI3Ny0xNy41NThjMTEuOTIzLTMuMzYzLDIyLjEyMS0xMS45MjUsMjguNzIzLTIzLjUxNWM2LjYwMiwxMS41OSwxNi44LDIwLjE1MiwyOC43MjMsMjMuNTE1IEMyODYuODY1LDQ0My44ODcsMjg4LDQ0OS44ODgsMjg4LDQ1NkMyODgsNDc4LjA1NiwyNzMuNjQ1LDQ5NiwyNTYsNDk2eiBNMjk2LDQyNC4wMThjLTE3LjY0NSwwLTMyLTE3Ljk0NC0zMi00MCBjMC02LjEyNywxLjE0LTEyLjE0NCwzLjI5Mi0xNy41OThjMTEuOTE3LTMuMzY2LDIyLjEwOS0xMS45MjYsMjguNzA4LTIzLjUxMWM2LjU5OSwxMS41ODUsMTYuNzkxLDIwLjE0NSwyOC43MDgsMjMuNTExIGMyLjE1Miw1LjQ1NSwzLjI5MiwxMS40NzEsMy4yOTIsMTcuNTk4QzMyOCw0MDYuMDc0LDMxMy42NDUsNDI0LjAxOCwyOTYsNDI0LjAxOHogTTMzNiwzNTJjLTE3LjY0NSwwLTMyLTE3Ljk0NC0zMi00MCBjMC02LjExMiwxLjEzNS0xMi4xMTQsMy4yNzctMTcuNTU4YzExLjkyNi0zLjM2NCwyMi4xMjYtMTEuOTMsMjguNzI4LTIzLjUyNGM2LjYwMSwxMS41ODMsMTYuNzk0LDIwLjE0LDI4LjcxLDIzLjUwNCBDMzY2Ljg2MiwyOTkuODcyLDM2OCwzMDUuODgsMzY4LDMxMkMzNjgsMzM0LjA1NiwzNTMuNjQ1LDM1MiwzMzYsMzUyeiBNMzc2LDI4MGMtMTcuNjQ1LDAtMzItMTcuOTQ0LTMyLTQwIGMwLTYuMTIsMS4xMzctMTIuMTI5LDMuMjg1LTE3LjU3OGMxMS41NTItMy4yNjEsMjEuNDgyLTExLjQwNSwyOC4wOTItMjIuNDU0YzAuMjA2LDAuMDE2LDAuNDEzLDAuMDMxLDAuNjI0LDAuMDMxIGMxNy42NDUsMCwzMiwxNy45NDQsMzIsNDBTMzkzLjY0NSwyODAsMzc2LDI4MHoiLz4NCjxwYXRoIGQ9Ik0yNTYsMTUyYzMuMjYyLDAsOCw2LjIzMyw4LDE2YzAsNC40MTgsMy41ODIsOCw4LDhzOC0zLjU4Miw4LThjMC0xNy45NDQtMTAuNTQyLTMyLTI0LTMyYy00LjQxOCwwLTgsMy41ODItOCw4IFMyNTEuNTgyLDE1MiwyNTYsMTUyeiIvPg0KPHBhdGggZD0iTTMzNiwxMzZjLTQuNDE4LDAtOCwzLjU4Mi04LDhzMy41ODIsOCw4LDhjMy4yNjIsMCw4LDYuMjMzLDgsMTZjMCw0LjQxOCwzLjU4Miw4LDgsOHM4LTMuNTgyLDgtOCBDMzYwLDE1MC4wNTYsMzQ5LjQ1OCwxMzYsMzM2LDEzNnoiLz4NCjxwYXRoIGQ9Ik0xNzYsMTUyYzMuMjYyLDAsOCw2LjIzMyw4LDE2YzAsNC40MTgsMy41ODIsOCw4LDhzOC0zLjU4Miw4LThjMC0xNy45NDQtMTAuNTQyLTMyLTI0LTMyYy00LjQxOCwwLTgsMy41ODItOCw4IFMxNzEuNTgyLDE1MiwxNzYsMTUyeiIvPg0KPHBhdGggZD0iTTM5Ny42NTksMjI2LjM0Yy0xLjQ5LTEuNDktMy41NS0yLjM0LTUuNjYtMi4zNHMtNC4xNywwLjg1LTUuNjYsMi4zNGMtMS40OSwxLjQ5LTIuMzQsMy41NS0yLjM0LDUuNjYgYzAsMi4xMSwwLjg1LDQuMTcsMi4zNCw1LjY2YzEuNDksMS40OSwzLjU1LDIuMzQsNS42NiwyLjM0czQuMTctMC44NSw1LjY2LTIuMzRjMS40OS0xLjQ5LDIuMzQtMy41NSwyLjM0LTUuNjYgQzQwMCwyMjkuODksMzk5LjE0OSwyMjcuODMsMzk3LjY1OSwyMjYuMzR6Ii8+DQo8cGF0aCBkPSJNMzA2LjMzOSwyMzcuNjZjMS40OSwxLjQ5LDMuNTUsMi4zNCw1LjY2LDIuMzRzNC4xNy0wLjg1LDUuNjYtMi4zNGMxLjQ5LTEuNDksMi4zNC0zLjU1LDIuMzQtNS42NiBjMC0yLjExLTAuODUtNC4xNy0yLjM0LTUuNjZjLTEuNDktMS40OS0zLjU1LTIuMzQtNS42Ni0yLjM0cy00LjE3LDAuODUtNS42NiwyLjM0Yy0xLjQ5LDEuNDktMi4zNCwzLjU1LTIuMzQsNS42NiBDMzA0LDIzNC4xMSwzMDQuODUsMjM2LjE3LDMwNi4zMzksMjM3LjY2eiIvPg0KPHBhdGggZD0iTTIzMiwyNDBjMi4xMSwwLDQuMTctMC44NSw1LjY2LTIuMzRjMS40OS0xLjQ5LDIuMzQtMy41NSwyLjM0LTUuNjZjMC0yLjExLTAuODUtNC4xNy0yLjM0LTUuNjYgYy0xLjQ5LTEuNDktMy41NS0yLjM0LTUuNjYtMi4zNHMtNC4xNywwLjg1LTUuNjYsMi4zNGMtMS40OSwxLjQ5LTIuMzQsMy41NS0yLjM0LDUuNjZjMCwyLjExLDAuODUsNC4xNywyLjM0LDUuNjYgQzIyNy44MywyMzkuMTUsMjI5Ljg5LDI0MCwyMzIsMjQweiIvPg0KPHBhdGggZD0iTTIzMiwzODRjMi4xMSwwLDQuMTctMC44NSw1LjY2LTIuMzRjMS40OS0xLjQ5LDIuMzQtMy41NiwyLjM0LTUuNjZjMC0yLjExLTAuODUtNC4xNy0yLjM0LTUuNjYgYy0xLjQ5LTEuNDktMy41NS0yLjM0LTUuNjYtMi4zNHMtNC4xNywwLjg1LTUuNjYsMi4zNGMtMS40OSwxLjQ5LTIuMzQsMy41NS0yLjM0LDUuNjZjMCwyLjEsMC44NSw0LjE3LDIuMzQsNS42NiBDMjI3LjgzLDM4My4xNSwyMjkuODksMzg0LDIzMiwzODR6Ii8+DQo8cGF0aCBkPSJNMzE3LjY1OSwzNzAuMzRjLTEuNDktMS40OS0zLjU1LTIuMzQtNS42Ni0yLjM0cy00LjE3LDAuODUtNS42NiwyLjM0Yy0xLjQ5LDEuNDktMi4zNCwzLjU1LTIuMzQsNS42NiBjMCwyLjEsMC44NSw0LjE3LDIuMzQsNS42NmMxLjQ5LDEuNDksMy41NSwyLjM0LDUuNjYsMi4zNHM0LjE3LTAuODUsNS42Ni0yLjM0YzEuNDktMS40OSwyLjM0LTMuNTYsMi4zNC01LjY2IEMzMjAsMzczLjg5LDMxOS4xNDksMzcxLjgzLDMxNy42NTksMzcwLjM0eiIvPg0KPHBhdGggZD0iTTI3Ny42NTksNDQyLjM0Yy0xLjQ5LTEuNDktMy41NS0yLjM0LTUuNjYtMi4zNGMtMi4xLDAtNC4xNywwLjg1LTUuNjYsMi4zNGMtMS40OSwxLjQ5LTIuMzQsMy41NS0yLjM0LDUuNjYgYzAsMi4xLDAuODUsNC4xNywyLjM0LDUuNjZjMS40OSwxLjQ5LDMuNTUsMi4zNCw1LjY2LDIuMzRzNC4xNy0wLjg1LDUuNjYtMi4zNGMxLjQ5LTEuNDksMi4zNC0zLjU1LDIuMzQtNS42NiBDMjgwLDQ0NS44OSwyNzkuMTQ5LDQ0My44MywyNzcuNjU5LDQ0Mi4zNHoiLz4NCjxwYXRoIGQ9Ik0zNTcuNjU5LDI5OC4zNGMtMS40OS0xLjQ5LTMuNTUtMi4zNC01LjY2LTIuMzRzLTQuMTcsMC44NS01LjY2LDIuMzRjLTEuNDksMS40OS0yLjM0LDMuNTUtMi4zNCw1LjY2IGMwLDIuMTEsMC44NSw0LjE3LDIuMzQsNS42NmMxLjQ5LDEuNDksMy41NiwyLjM0LDUuNjYsMi4zNGMyLjExLDAsNC4xNy0wLjg1LDUuNjYtMi4zNGMxLjQ5LTEuNDksMi4zNC0zLjU2LDIuMzQtNS42NiBDMzYwLDMwMS44OSwzNTkuMTQ5LDI5OS44MywzNTcuNjU5LDI5OC4zNHoiLz4NCjxwYXRoIGQ9Ik0yODAsMzA0YzAtMi4xLTAuODUtNC4xNy0yLjM0LTUuNjZjLTEuNDktMS40OS0zLjU1LTIuMzQtNS42Ni0yLjM0cy00LjE3LDAuODUtNS42NiwyLjM0Yy0xLjQ5LDEuNDktMi4zNCwzLjU1LTIuMzQsNS42NiBjMCwyLjExLDAuODUsNC4xNywyLjM0LDUuNjZjMS40OSwxLjQ5LDMuNTYsMi4zNCw1LjY2LDIuMzRjMi4xMSwwLDQuMTctMC44NSw1LjY2LTIuMzRDMjc5LjE0OSwzMDguMTcsMjgwLDMwNi4xLDI4MCwzMDR6Ii8+DQo8cGF0aCBkPSJNMTkyLDMxMmMyLjExLDAsNC4xNy0wLjg1LDUuNjYtMi4zNGMxLjQ5LTEuNDksMi4zNC0zLjU2LDIuMzQtNS42NmMwLTIuMS0wLjg1LTQuMTctMi4zNC01LjY2IGMtMS40OS0xLjQ5LTMuNTUtMi4zNC01LjY2LTIuMzRzLTQuMTcsMC44NS01LjY2LDIuMzRjLTEuNDksMS40OS0yLjM0LDMuNTUtMi4zNCw1LjY2YzAsMi4xLDAuODUsNC4xNywyLjM0LDUuNjYgQzE4Ny44MywzMTEuMTUsMTg5Ljg5OSwzMTIsMTkyLDMxMnoiLz4NCjxwYXRoIGQ9Ik0xNTIsMjQwYzIuMTEsMCw0LjE3LTAuODUsNS42Ni0yLjM0YzEuNDktMS40OSwyLjM0LTMuNTUsMi4zNC01LjY2YzAtMi4xMS0wLjg1LTQuMTctMi4zNC01LjY2IGMtMS40OS0xLjQ5LTMuNTUtMi4zNC01LjY2LTIuMzRzLTQuMTcsMC44NS01LjY2LDIuMzRjLTEuNDksMS40OS0yLjM0LDMuNTUtMi4zNCw1LjY2YzAsMi4xMSwwLjg1LDQuMTcsMi4zNCw1LjY2IEMxNDcuODMsMjM5LjE1LDE0OS44OSwyNDAsMTUyLDI0MHoiLz4NCjwvc3ZnPg0K"); } [data-img="9"]{ content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4NCjxwYXRoIGQ9Ik0yNTcsMEMxMTcuMTA0LDAsMCwxMTMuMDI5LDAsMjU1YzAsMTQxLjE4LDExNi40NDQsMjU3LDI1NywyNTdjMTQyLjEzLDAsMjU1LTExNy4yNTcsMjU1LTI1N0M1MTIsMTE0LjA2LDM5Ny45NTEsMCwyNTcsMCB6IE0yNTcsNDgyLjFDMTMxLjgzMiw0ODIuMSwyOS45LDM4MC4xNjgsMjkuOSwyNTVDMjkuOSwxMzAuOTM1LDEzMS44MzIsMjkuOSwyNTcsMjkuOWMxMjQuMDY1LDAsMjI1LjEsMTAxLjAzNSwyMjUuMSwyMjUuMSBDNDgyLjEsMzgyLjAzNSwzODEuMDY1LDQ4Mi4xLDI1Nyw0ODIuMXoiLz4NCjxwYXRoIGQ9Ik0yNTcsNjBDMTQ5LjYxNyw2MCw2MCwxNDcuMDc1LDYwLDI1NWMwLDEwNy40OTQsODkuMTQ3LDE5NywxOTcsMTk3YzEwOC4wMjYsMCwxOTUtODkuNjkzLDE5NS0xOTcgQzQ1MiwxNDcuNDc3LDM2NC41MjMsNjAsMjU3LDYweiBNMjU3LDQyMi4xYy05MC41MjMsMC0xNjcuMS03Ni41NzctMTY3LjEtMTY3LjFjMC05MC45ODEsNzUuMDE2LTE2NS4xLDE2Ny4xLTE2NS4xIGM5MC45ODEsMCwxNjUuMSw3NC4xMTksMTY1LjEsMTY1LjFDNDIyLjEsMzQ3LjA4NCwzNDcuOTgxLDQyMi4xLDI1Nyw0MjIuMXoiLz4NCjxwYXRoIGQ9Ik0yODcsMjQwaC0xNXYtNjBoMTVjOC4yNzEsMCwxNSw2LjcyOCwxNSwxNWMwLDguMjg0LDYuNzE2LDE0Ljk5OSwxNSwxNC45OTlzMTUtNi43MTcsMTUtMTUuMDAxIEMzMzIsMTcwLjE4NiwzMTEuODEzLDE1MCwyODcsMTUwaC0xNXYtMTVjMC04LjI4NC02LjcxNi0xNS0xNS0xNXMtMTUsNi43MTYtMTUsMTV2MTVoLTE3Yy0yNC44MTMsMC00NSwyMC4xODctNDUsNDV2MzAgYzAsMjQuODEzLDIwLjE4Nyw0NSw0NSw0NWgxN3Y2MmgtMTdjLTguMjcxLDAtMTUtNi43MjktMTUtMTVjMC04LjI4NC02LjcxNi0xNS0xNS0xNXMtMTUsNi43MTYtMTUsMTVjMCwyNC44MTMsMjAuMTg3LDQ1LDQ1LDQ1IGgxN3YxNWMwLDguMjg0LDYuNzE2LDE1LDE1LDE1czE1LTYuNzE2LDE1LTE1di0xNWgxNWMyNC44MTMsMCw0NS0yMC4xODcsNDUtNDV2LTMyQzMzMiwyNjAuMTg3LDMxMS44MTMsMjQwLDI4NywyNDB6IE0yNDIsMjQwIGgtMTdjLTguMjcxLDAtMTUtNi43MjktMTUtMTV2LTMwYzAtOC4yNzEsNi43MjktMTUsMTUtMTVoMTdWMjQweiBNMzAyLDMxN2MwLDguMjcxLTYuNzI5LDE1LTE1LDE1aC0xNXYtNjJoMTUgYzguMjcxLDAsMTUsNi43MjksMTUsMTVWMzE3eiIvPg0KPC9zdmc+DQo="); } (function(){ // initial-setting var $$ = function(opt){ this.opt = opt; var start_button = document.querySelector(".btn[data-type='start']"); start_button.addEventListener("click" , (function(e){ // start if(this.opt.cnt == null){ this.opt.cnt = 0; this.set_button_value(); this.start_slot(); } // stop else{ this.stop_slot(); } }).bind(this)); window.addEventListener("keyup" , (function(e){this.keyup(e)}).bind(this)); }; // loop $$.prototype.start_slot = function(){ var boxes = document.querySelectorAll(".boxes .box"); for(var i=0; i<boxes.length; i++){ if(typeof this.opt.num[i] === "undefined"){this.opt.num[i] = 0;} if (this.opt.cnt <= i){this.opt.num[i]++;} // 数値リセット（繰り返し） if(this.opt.num[i] >= 9){this.opt.num[i] = 0;} // 表示 var img = boxes[i].querySelector(".img"); if(img){ img.setAttribute("data-img" , this.opt.num[i]); } } if(this.opt.cnt !== null && this.opt.cnt < 3){ this.cache = setTimeout((function(){this.start_slot()}).bind(this) , this.opt.spd); } }; // button-push $$.prototype.stop_slot = function(){ this.opt.cnt++; if(this.opt.cnt >= 3){ clearTimeout(this.cache); if(this.opt.num[0] == 7 && this.opt.num[1] == 7 && this.opt.num[2] == 7){ alert("スリーセブン！ やったね。 ["+ this.opt.num[0] +","+ this.opt.num[1] +","+ this.opt.num[2] +"]"); } else if(this.opt.num[0] == this.opt.num[1] && this.opt.num[1] == this.opt.num[2]){ alert("大当たり！ やったね。 ["+ this.opt.num[0] +","+ this.opt.num[1] +","+ this.opt.num[2] +"]"); } else if(this.opt.num[0] == this.opt.num[1] || this.opt.num[1] == this.opt.num[2] || this.opt.num[0] == this.opt.num[2]){ alert("惜しい！！ ["+ this.opt.num[0] +","+ this.opt.num[1] +","+ this.opt.num[2] +"]"); } else{ alert("ハズレ ["+ this.opt.num[0] +","+ this.opt.num[1] +","+ this.opt.num[2] +"]"); } this.opt.cnt = null; this.set_button_value(); } } $$.prototype.set_button_value = function(){ var value = ""; if(this.opt.cnt == null){ value = "Start"; } else{ value = "Stop"; } document.querySelector(".buttons .btn").textContent = value; }; $$.prototype.keyup = function(e){ if(e.keyCode == 13){ var btn = document.querySelector(".buttons .btn"); if(btn){ btn.click(); } } }; new $$({ cache : null, spd : 100, num : [], cnt : null }); })() htmlはbodyタグ内のみの記載にしています。

プレビュー

See the Pen Question #2 image by YugetaKoji (@geta1972) on CodePen.

さいごに

いかがだったでしょうか？ スロットの画像表示箇所は、ルーレット方式でくるくる回るアニメーションにしようと思ったんですが、思いの外大変になりそうだったので、今回は却下して、丸みを帯びた装飾を表現する程度にしておきました。 デバッグしているときに、どうしてもスリーセブンが出したくなって、気がついたら１時間ぐらいやり込んでしましましたが、こういう簡易なゲームをホームページに設置しておくのもいいかもしれませんね。 個人的には、もっとクオリティアップして、リアルなスロットを実現させたり、3x3の縦横斜めでの目が揃うようなゲーム性も有りかと考えてしまいました。 もっぱらなゲーマーな自分に気がついた記事になりましたね。