/ butter_believe_it / index.html
index.html
1 <!DOCTYPE html> 2 <html class="no-js h-100" lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <title>Butter Believe It</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <meta http-equiv="x-ua-compatible" content="ie=edge"> 9 <meta name="apple-mobile-web-app-capable" content="yes"> 10 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 11 <meta name="HandheldFriendly" content="True"> 12 <meta name="MobileOptimized" content="320"> 13 <meta http-equiv="cleartype" content="on"> 14 <meta name="author" content="biolithic"> 15 <meta name="copyright" content="biolithic 2023" /> 16 <meta name="apple-mobile-web-app-title" content="Butter Believe It"> 17 <meta name="application-name" content="Butter Believe It"> 18 <title>Butter Believe It - an unofficial introduction to Melonie Mac Go Boom compiled from Youtube comments</title> 19 <meta name="description" content="Butter Believe It"> 20 21 <meta property="og:title" content="Butter Believe It" /> 22 <meta property="og:description" content="Butter Believe It - an unofficial introduction to Melonie Mac Go Boom compiled from Youtube comments" /> 23 <meta property="og:image" content="apple-touch-icon.png" /> 24 <meta property="og:url" content="https://biolithic.github.io/butter_believe_it/"> 25 26 <meta property="twitter:title" content="Butter Believe It" /> 27 <meta property="twitter:description" content="Butter Believe It - an unofficial introduction to Melonie Mac Go Boom compiled from Youtube comments" /> 28 <meta property="twitter:image" content="apple-touch-icon.png" /> 29 <meta property="twitter:card" content="https://biolithic.github.io/butter_believe_it/"> 30 31 <meta name="msapplication-TileColor" content="#f9de69"> 32 <meta name="theme-color" content="#f9de69"> 33 <link crossorigin="use-credentials" rel="manifest" href="manifest.json" /> 34 35 <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> 36 <link rel="shortcut icon" type="image/x-icon" href="apple-touch-icon.png"> 37 <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> 38 <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> 39 <link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png"> 40 <link rel="mask-icon" href="safari-pinned-tab.svg" color="#f9de69"> 41 <link rel="icon" href="favicon.ico" sizes="any"> 42 <link rel="icon" href="icon.svg" type="image/svg+xml"> 43 44 <link rel="canonical" href="https://biolithic.github.io/butter_believe_it/"> 45 <script> 46 window.addEventListener('error', function(error) { 47 console.log(error); 48 }); 49 </script> 50 <style> 51 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 52 html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} 53 54 a { 55 color: #848d96; 56 text-decoration: none; 57 } 58 59 .body { 60 display: block; 61 overflow: scroll; 62 max-height: 100vh; 63 font-family: Inter, sans-serif; 64 height: 100%; 65 width: 100%; 66 background-color: #FFFF77; 67 } 68 69 section.gallery { 70 position: absolute; 71 top: -15px; 72 z-index: -1; 73 } 74 75 * { 76 margin: 0; 77 padding: 0; 78 box-sizing: border-box; 79 } 80 81 .cont{ 82 width: 99vw; 83 height: 100vh; 84 position:relative; 85 overflow:hidden; 86 border-top:15px solid #ffffaa; 87 border-bottom:15px solid #FFFF77; 88 border-radius: 10px; 89 filter:url("#goo"); 90 box-shadow: 0 2px 10px rgb(255 255 145 / 50%); 91 } 92 .cont .drip{ 93 height:30px; 94 width:30px; 95 border-radius: 50%; 96 background: #ffff91; 97 position:absolute; 98 top:-100%; 99 animation:falling 5s linear infinite; 100 } 101 102 svg { 103 height: 100%; 104 } 105 106 @keyframes falling{ 107 0%{ 108 top:-100%; 109 } 110 50%{ 111 top:0%; 112 } 113 80%{ 114 top:66%; 115 } 116 100%{ 117 top:100%; 118 } 119 } 120 .cont .drip:nth-child(1){ 121 border-color: #ffff91; 122 height:29px; 123 width:29px; 124 animation-delay: -0.2s; 125 background: #ffff91; 126 left:173px; 127 margin-left:60px; 128 } 129 .cont .drip:nth-child(2){ 130 border-color: #ffff91; 131 height:25px; 132 width:25px; 133 animation-delay: -0.8s; 134 background: #ffff91; 135 left:76px; 136 margin-left:60px; 137 } 138 .cont .drip:nth-child(3){ 139 border-color: #ffff91; 140 height:38px; 141 width:38px; 142 animation-delay: -0.12s; 143 background: #ffff91; 144 left:96px; 145 margin-left:60px; 146 } 147 .cont .drip:nth-child(4){ 148 border-color: #ffff91; 149 height:29px; 150 width:29px; 151 animation-delay: -0.16s; 152 background: #ffff91; 153 left:24px; 154 margin-left:60px; 155 } 156 .cont .drip:nth-child(5){ 157 border-color: #ffff91; 158 height:20px; 159 width:20px; 160 animation-delay: -1s; 161 background: #ffff91; 162 left:93px; 163 margin-left:60px; 164 } 165 .cont .drip:nth-child(6){ 166 border-color: #ffff91; 167 height:14px; 168 widows: 14px; 169 animation-delay: -1.5s; 170 background: #ffff91; 171 left:117px; 172 margin-left:60px; 173 } 174 .cont .drip:nth-child(7){ 175 border-color: #ffff91; 176 height:5px; 177 width:5px; 178 animation-delay: -1.75s; 179 background: #ffff91; 180 left:31px; 181 margin-left:60px; 182 } 183 .cont .drip:nth-child(8){ 184 border-color: #ffff91; 185 height:2px; 186 width:2px; 187 animation-delay: -2s; 188 background: #ffff91; 189 left:4px; 190 margin-left:60px; 191 } 192 .cont .drip:nth-child(9){ 193 border-color: #ffff91; 194 height:2px; 195 width:2px; 196 animation-delay: -2.4s; 197 background: #ffff91; 198 left:14px; 199 margin-left:60px; 200 } 201 .cont .drip:nth-child(10){ 202 border-color: #ffff91; 203 height:16px; 204 width:16px; 205 animation-delay: -2.8s; 206 background: #ffff91; 207 left:143px; 208 margin-left:60px; 209 } 210 .cont .drip:nth-child(11){ 211 border-color: #ffff91; 212 height:11px; 213 width:11px; 214 animation-delay: -2.9s; 215 background: #ffff91; 216 left:10px; 217 margin-left:60px; 218 } 219 .cont .drip:nth-child(12){ 220 border-color: #ffff91; 221 height:4px; 222 width:4px; 223 animation-delay: -3s; 224 background: #ffff91; 225 left:158px; 226 margin-left:60px; 227 } 228 .cont .drip:nth-child(13){ 229 border-color: #ffff91; 230 height:18px; 231 width:18px; 232 animation-delay: -3.3s; 233 background: #ffff91; 234 left:163px; 235 margin-left:60px; 236 } 237 .cont .drip:nth-child(14){ 238 border-color: #ffff91; 239 height:4px; 240 width:4px; 241 animation-delay: -3.6s; 242 background: #ffff91; 243 left:168px; 244 margin-left:60px; 245 } 246 .cont .drip:nth-child(15){ 247 border-color: #ffff91; 248 height:13px; 249 width:13px; 250 animation-delay: -3.9s; 251 background: #ffff91; 252 left:103px; 253 margin-left:60px; 254 } 255 .cont .drip:nth-child(16){ 256 border-color: #ffff91; 257 height:40px; 258 width:40px; 259 animation-delay: -3.96s; 260 background: #ffff91; 261 left:158px; 262 margin-left:60px; 263 } 264 .cont .drip:nth-child(17){ 265 border-color: #ffff91; 266 height:27px; 267 width:27px; 268 animation-delay: -4.2s; 269 background: #ffff91; 270 left:179px; 271 margin-left:60px; 272 } 273 .cont .drip:nth-child(18){ 274 border-color: #ffff91; 275 height:13px; 276 width:13px; 277 animation-delay: -4.5s; 278 background: #ffff91; 279 left:97px; 280 margin-left:60px; 281 } 282 .cont .drip:nth-child(19){ 283 border-color: #ffff91; 284 height:23px; 285 width:23px; 286 animation-delay: -4.9s; 287 background: #ffff91; 288 left:149px; 289 margin-left:60px; 290 } 291 .cont .drip:nth-child(20){ 292 border-color: #ffff91; 293 height:20px; 294 width:20px; 295 animation-delay: -5s; 296 background: #ffff91; 297 left:156px; 298 margin-left:60px; 299 } 300 301 302 303 * {box-sizing:border-box} 304 305 /* Slideshow container */ 306 .slideshow-container { 307 position: relative; 308 margin: auto; 309 } 310 311 /* Hide the images by default */ 312 .mySlides { 313 display: none; 314 } 315 316 /* Next & previous buttons */ 317 .prev, .next { 318 cursor: pointer; 319 position: absolute; 320 top: 50%; 321 width: auto; 322 margin-top: -22px; 323 padding: 16px; 324 color: white; 325 font-weight: bold; 326 font-size: 18px; 327 transition: 0.6s ease; 328 border-radius: 0 3px 3px 0; 329 user-select: none; 330 z-index: 100000; 331 } 332 333 /* Position the "next button" to the right */ 334 .next { 335 right: 0; 336 border-radius: 3px 0 0 3px; 337 } 338 339 /* On hover, add a black background color with a little bit see-through */ 340 .prev:hover, .next:hover { 341 background-color: rgba(0,0,0,0.8); 342 } 343 344 /* Caption text */ 345 .text { 346 color: #e7e7e7; 347 font-size: 4rem; 348 padding: 8px 12px; 349 position: absolute; 350 bottom: 8px; 351 width: 100%; 352 text-align: center; 353 font-family: 'Brush Script MT', cursive; 354 text-shadow: 1px 2px black; 355 max-width: 1200px; 356 } 357 358 /* Number text (1/3 etc) */ 359 .numbertext { 360 color: #f2f2f2; 361 font-size: 12px; 362 padding: 8px 12px; 363 position: absolute; 364 top: 0; 365 } 366 367 /* The dots/bullets/indicators */ 368 .dot { 369 cursor: pointer; 370 height: 15px; 371 width: 15px; 372 margin: 0 2px; 373 background-color: #bbb; 374 border-radius: 50%; 375 display: inline-block; 376 transition: background-color 0.6s ease; 377 } 378 379 .active, .dot:hover { 380 background-color: #717171; 381 } 382 383 /* Fading animation */ 384 .fade { 385 animation-name: fade; 386 animation-duration: 1.5s; 387 } 388 389 @keyframes fade { 390 from {opacity: .4} 391 to {opacity: .95} 392 } 393 394 #goBoomGallery { 395 position: absolute; 396 top: 0px; 397 background: linear-gradient(10deg, rgba(255,255,170,1) 0%, rgba(221,221,221,1) 35%, rgba(255,255,119,1) 100%); 398 opacity: .5; 399 min-height: 396px; 400 height: 91%; 401 width: -webkit-fill-available; 402 } 403 404 #about { 405 position: absolute; 406 bottom: 0px; 407 left: 5px; 408 color: #aaa; 409 z-index: 1000; 410 } 411 412 @media only screen and (max-width: 768px) { 413 #goBoomGallery { 414 max-width: 100%; 415 } 416 417 body .mySlides img { 418 width: 100%; 419 } 420 421 body .text { 422 color: #000; 423 bottom: 0px; 424 font-size: 1.8rem; 425 } 426 427 #about { 428 bottom: 15px; 429 left: 0px; 430 top: initial; 431 } 432 433 .cont { 434 height: 99vh; 435 } 436 } 437 </style> 438 </head> 439 <body class="body fade"> 440 <div id='about'> 441 <small> 442 <a href='https://www.larsenscreamery.com/services/private_label_dev.html' title='Ask for or buy MelonieGold brand butter today!' target='_blank'>MelonieGold brand butter</a> - 443 <span>All content is property of & copyright <a href='https://linktr.ee/meloniemac' target='_blank'>Melonie Mac</a> 2023. - </span> 444 <span><a href="https://linktr.ee/biolithic" title="See who is behind this and how you can join in">Credits (unofficial/fan made)</a></span> 445 </small> 446 </div> 447 448 <div class="cont"> 449 <div class="drip"></div> 450 <div class="drip"></div> 451 <div class="drip"></div> 452 <div class="drip"></div> 453 <div class="drip"></div> 454 <div class="drip"></div> 455 <div class="drip"></div> 456 <div class="drip"></div> 457 <div class="drip"></div> 458 <div class="drip"></div> 459 <div class="drip"></div> 460 <div class="drip"></div> 461 <div class="drip"></div> 462 <div class="drip"></div> 463 <div class="drip"></div> 464 <div class="drip"></div> 465 <div class="drip"></div> 466 <div class="drip"></div> 467 <div class="drip"></div> 468 <div class="drip"></div> 469 470 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 471 <defs> 472 <filter id="goo"> 473 <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> 474 <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> 475 <feBlend in="SourceGraphic" in2="goo" /> 476 </filter> 477 </defs> 478 </svg> 479 480 <div class="slideshow-container" id="goBoomGallery"> 481 <a class="prev" onclick="plusSlides(-1)">❮</a> 482 <a class="next" onclick="plusSlides(1)">❯</a> 483 </div> 484 485 <script> 486 window.slideIndex = 1; 487 function plusSlides(n) { 488 showSlides(window.slideIndex += n); 489 } 490 491 function currentSlide(n) { 492 showSlides(window.slideIndex = n); 493 } 494 495 function showSlides(n) { 496 let i; 497 let slides = document.getElementsByClassName("mySlides"); 498 if (n > slides.length) {window.slideIndex = 1} 499 if (n < 1) {window.slideIndex = slides.length} 500 for (i = 0; i < slides.length; i++) { 501 slides[i].style.display = "none"; 502 } 503 slides[window.slideIndex-1].style.display = "block"; 504 } 505 506 document.addEventListener("DOMContentLoaded", function() { 507 508 (async () => { 509 let url = window.location.origin + "/butter_believe_it/goboom.json"; 510 let response = await fetch(url); 511 let videos = await response.json(); 512 var videosLength = videos.length; 513 514 for (let i = 0; i < videosLength; i++) { 515 var ii = i + 1; 516 var g = document.getElementById("goBoomGallery"); 517 g.insertAdjacentHTML("beforeend", "<div class='mySlides fade'><h2 class='text'>" + videos[i].quote + "</h2><a href='https://www.youtube.com/watch?v=" + videos[i].url + "' target='_blank'><img src='" + window.location.origin + "/butter_believe_it/images/" + videos[i].url + ".png' /></a</div>"); 518 } 519 520 showSlides(window.slideIndex); 521 setInterval(function () { plusSlides(1); }, 7000); 522 })(); 523 524 if ("serviceWorker" in navigator) { 525 navigator.serviceWorker 526 .register( "sw.js") 527 .then(function() { 528 console.log( "Service Worker Registered" ); 529 }) 530 .catch(function( err ) { 531 console.log( "Service Worker Failed to Register", err ); 532 }); 533 } 534 }); 535 </script> 536 </body> 537 </html>