multimedia_paradise 1.1.314

data/lib/multimedia_paradise/www/cassette/cassette.cgi

@@ -0,0 +1,723 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/multimedia_paradise/lib/multimedia_paradise/www/cassette/cassette.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+
+english(:capitlaize) {
+created_on '27.07.2022' # Wednesday.
+autoextend
+ruby_favicon
+
+main_css '
+@import url(\'https://fonts.googleapis.com/css?family=Roboto:500,700\');
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+body {
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+  background: black;
+  animation: static 2s steps(1) infinite;
+}
+.grain {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  animation: static 2s steps(1) infinite;
+  opacity: 0.4;
+  z-index: 11;
+}
+@keyframes static {
+  0 {
+    background-position: 4900% 4500%;
+  }
+  1 {
+    background-position: 5800% 2200%;
+  }
+  2 {
+    background-position: 1400% 6500%;
+  }
+  3 {
+    background-position: 3400% 2000%;
+  }
+  4 {
+    background-position: 6700% 4300%;
+  }
+  5 {
+    background-position: 7500% 200%;
+  }
+  6 {
+    background-position: 3700% 9800%;
+  }
+  7 {
+    background-position: 8800% 1800%;
+  }
+  8 {
+    background-position: 4000% 9500%;
+  }
+  9 {
+    background-position: 8700% 2500%;
+  }
+  10 {
+    background-position: 7500% 6600%;
+  }
+  11 {
+    background-position: 200% 1200%;
+  }
+  12 {
+    background-position: 6900% 6000%;
+  }
+  13 {
+    background-position: 7500% 400%;
+  }
+  14 {
+    background-position: 9000% 800%;
+  }
+  15 {
+    background-position: 7200% 3300%;
+  }
+  16 {
+    background-position: 4400% 1700%;
+  }
+  17 {
+    background-position: 4700% 7700%;
+  }
+  18 {
+    background-position: 3300% 400%;
+  }
+  19 {
+    background-position: 4200% 8600%;
+  }
+  20 {
+    background-position: 100% 4500%;
+  }
+  21 {
+    background-position: 500% 700%;
+  }
+  22 {
+    background-position: 6400% 3300%;
+  }
+  23 {
+    background-position: 500% 600%;
+  }
+  24 {
+    background-position: 500% 7400%;
+  }
+  25 {
+    background-position: 2500% 6600%;
+  }
+  26 {
+    background-position: 1200% 1100%;
+  }
+  27 {
+    background-position: 9300% 1000%;
+  }
+  28 {
+    background-position: 4400% 800%;
+  }
+  29 {
+    background-position: 7400% 4600%;
+  }
+  30 {
+    background-position: 700% 1100%;
+  }
+  31 {
+    background-position: 9000% 5100%;
+  }
+  32 {
+    background-position: 1000% 3500%;
+  }
+  33 {
+    background-position: 9300% 3900%;
+  }
+  34 {
+    background-position: 5500% 7900%;
+  }
+  35 {
+    background-position: 7100% 9500%;
+  }
+  36 {
+    background-position: 6800% 2700%;
+  }
+  37 {
+    background-position: 9100% 1700%;
+  }
+  38 {
+    background-position: 9800% 1900%;
+  }
+  39 {
+    background-position: 7800% 2100%;
+  }
+  40 {
+    background-position: 9600% 8100%;
+  }
+  41 {
+    background-position: 3900% 300%;
+  }
+  42 {
+    background-position: 2500% 5600%;
+  }
+  43 {
+    background-position: 3000% 100%;
+  }
+  44 {
+    background-position: 9900% 3800%;
+  }
+  45 {
+    background-position: 7700% 8900%;
+  }
+  46 {
+    background-position: 6900% 3500%;
+  }
+  47 {
+    background-position: 1700% 9900%;
+  }
+  48 {
+    background-position: 1100% 8200%;
+  }
+  49 {
+    background-position: 2500% 5600%;
+  }
+  50 {
+    background-position: 4700% 3700%;
+  }
+  51 {
+    background-position: 6500% 8700%;
+  }
+  52 {
+    background-position: 900% 1600%;
+  }
+  53 {
+    background-position: 1200% 7100%;
+  }
+  54 {
+    background-position: 3200% 8900%;
+  }
+  55 {
+    background-position: 3600% 7600%;
+  }
+  56 {
+    background-position: 6400% 5800%;
+  }
+  57 {
+    background-position: 3000% 9200%;
+  }
+  58 {
+    background-position: 7600% 9000%;
+  }
+  59 {
+    background-position: 7100% 6400%;
+  }
+  60 {
+    background-position: 6500% 6300%;
+  }
+  61 {
+    background-position: 9300% 5700%;
+  }
+  62 {
+    background-position: 9200% 900%;
+  }
+  63 {
+    background-position: 8300% 6000%;
+  }
+  64 {
+    background-position: 9900% 2100%;
+  }
+  65 {
+    background-position: 4000% 4900%;
+  }
+  66 {
+    background-position: 3200% 4900%;
+  }
+  67 {
+    background-position: 6100% 2000%;
+  }
+  68 {
+    background-position: 7500% 2100%;
+  }
+  69 {
+    background-position: 9700% 2000%;
+  }
+  70 {
+    background-position: 1100% 8000%;
+  }
+  71 {
+    background-position: 300% 2300%;
+  }
+  72 {
+    background-position: 3400% 7200%;
+  }
+  73 {
+    background-position: 8800% 8900%;
+  }
+  74 {
+    background-position: 6200% 6700%;
+  }
+  75 {
+    background-position: 2800% 6800%;
+  }
+  76 {
+    background-position: 5500% 8700%;
+  }
+  77 {
+    background-position: 6600% 4500%;
+  }
+  78 {
+    background-position: 100% 5800%;
+  }
+  79 {
+    background-position: 500% 8700%;
+  }
+  80 {
+    background-position: 6200% 5000%;
+  }
+  81 {
+    background-position: 6300% 800%;
+  }
+  82 {
+    background-position: 4000% 4800%;
+  }
+  83 {
+    background-position: 9700% 6200%;
+  }
+  84 {
+    background-position: 9200% 9200%;
+  }
+  85 {
+    background-position: 5800% 3100%;
+  }
+  86 {
+    background-position: 7300% 100%;
+  }
+  87 {
+    background-position: 1500% 8400%;
+  }
+  88 {
+    background-position: 3500% 7500%;
+  }
+  89 {
+    background-position: 5200% 8300%;
+  }
+  90 {
+    background-position: 6800% 900%;
+  }
+  91 {
+    background-position: 3900% 2400%;
+  }
+  92 {
+    background-position: 5800% 4900%;
+  }
+  93 {
+    background-position: 400% 9800%;
+  }
+  94 {
+    background-position: 8600% 8800%;
+  }
+  95 {
+    background-position: 1600% 4100%;
+  }
+  96 {
+    background-position: 4800% 5200%;
+  }
+  97 {
+    background-position: 300% 4100%;
+  }
+  98 {
+    background-position: 9800% 1100%;
+  }
+}
+a {
+  position: fixed;
+  bottom: 0;
+  text-align: center;
+  width: 100%;
+  padding: 10px;
+  font-family: "Roboto", sans-serif;
+  color: rgba(0, 0, 0, 0.3);
+  z-index: 12;
+}
+.cassette {
+  width: 554px;
+  height: 350px;
+  background: #4b4b56;
+  border-radius: 10px;
+  border: 4px solid #353535;
+  position: relative;
+}
+@media (max-width: 600px) {
+  .cassette {
+    width: 300px;
+    height: 190px;
+    font-size: 0.55em;
+  }
+}
+.cassette:after {
+  display: block;
+  content: \'\';
+  width: 104%;
+  height: 30%;
+  margin-left: -2%;
+  background: #4b4b56;
+  border-radius: 10px;
+  bottom: 7%;
+  position: absolute;
+  z-index: -1;
+  border: 4px solid #353535;
+}
+.cassette:before {
+  display: block;
+  content: \'\';
+  width: 89%;
+  height: 4px;
+  margin: auto;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  top: 3%;
+  position: relative;
+}
+.cassette .label {
+  width: 90%;
+  height: 64%;
+  position: relative;
+  margin: auto;
+  top: 7%;
+  border-radius: 8px;
+  box-shadow: inset 0 0 0 4px #353535;
+  background: linear-gradient(#e6584c 8%, #f8f8f8 8%, #f8f8f8 30%, #484848 30%, #484848 31.5%, #f8f8f8 31.5%, #f8f8f8 36%, #484848 36%, #484848 37.5%, #f8f8f8 37.5%, #f8f8f8 39%, #484848 39%, #484848 40.5%, #f8f8f8 40.5%, #f8f8f8 42%, #484848 42%, #484848 43.5%, #f8f8f8 43.5%, #f8f8f8 45%, #484848 45%, #484848 46.5%, #f8f8f8 46.5%, #f8f8f8 48%, #484848 48%, #484848 49.5%, #f8f8f8 49.5%, #f8f8f8 51%, #484848 51%, #484848 52.5%, #f8f8f8 52.5%, #f8f8f8 54%, #484848 54%, #484848 55.5%, #f8f8f8 55.5%, #f8f8f8 57%, #484848 57%, #484848 58.5%, #f8f8f8 58.5%, #f8f8f8 60%, #484848 60%, #484848 61.5%, #f8f8f8 61.5%, #f8f8f8 63%, #484848 63%, #484848 64.5%, #f8f8f8 64.5%, #f8f8f8 66%, #484848 66%, #484848 67.5%, #f8f8f8 67.5%, #f8f8f8 69%, #484848 69%, #484848 70.5%, #f8f8f8 70.5%, #f8f8f8 72%, #484848 72%, #484848 73.5%, #f8f8f8 73.5%, #f8f8f8 75%, #484848 75%, #484848 76.5%, #f8f8f8 76.5%, #f8f8f8 78%, #484848 78%, #484848 79.5%, #f8f8f8 79.5%, #f8f8f8 81%, #484848 81%, #484848 82.5%);
+}
+.cassette .label:before {
+  position: absolute;
+  display: block;
+  top: 12%;
+  left: 3%;
+  content: \'B\';
+  padding: 3px;
+  text-align: center;
+  width: 1.3em;
+  height: 1.3em;
+  color: #f8f8f8;
+  font-weight: bold;
+  font-size: 1.4em;
+  background: #4b4b56;
+  border-radius: 1px;
+}
+.cassette .label:after {
+  position: absolute;
+  display: block;
+  content: \'N.R. [\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0] ☐\fe0e IN ☒\fe0e OUT\';
+  font-weight: 700;
+  font-family: "Roboto", sans-serif;
+  font-size: 0.9em;
+  top: 22%;
+  right: 3%;
+  color: #4b4b56;
+}
+.cassette .label .cutout {
+  width: 70%;
+  height: 46%;
+  position: relative;
+  margin: auto;
+  top: 36%;
+  background: #4b4b56;
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 4px #353535;
+}
+.cassette .label .cutout:before {
+  position: absolute;
+  display: block;
+  content: \'The Beatles - Best of\';
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.85em;
+  font-weight: 500;
+  font-family: "Roboto", sans-serif;
+  bottom: -25%;
+}
+.cassette .label .cutout:after {
+  position: absolute;
+  display: block;
+  content: \'A 60\';
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 1.5em;
+  font-weight: bold;
+  top: 100%;
+  right: 0;
+  background: #e6584c;
+  background-image: linear-gradient(90deg, #e6584c 44%, rgba(255, 255, 255, 0.8) 44%, rgba(255, 255, 255, 0.8) 45%, #e6584c 45%);
+  height: 36%;
+  padding: 1.2% 5%;
+  box-shadow: inset 0 0 0 8px #e6584c;
+  font-family: "Roboto", sans-serif;
+}
+.cassette .label .cutout .reel_hole {
+  position: absolute;
+  background: #adadad;
+  width: 20%;
+  top: 15%;
+  border: 3px solid #353535;
+  box-shadow: 0 0 0 3px #4b4b56, 0 0 0 5px #353535;
+  border-radius: 50%;
+  right: 5.5%;
+}
+.cassette .label .cutout .reel_hole:after {
+  content: \'\';
+  display: block;
+  padding-bottom: 100%;
+  box-shadow: inset 0 0 0 6px #adadad;
+  background: #353535;
+  border-radius: 50%;
+}
+.cassette .label .cutout .reel_hole:before {
+  position: absolute;
+  display: block;
+  content: \'\';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  background: #8fe2ec;
+  transform: scale(0.75);
+  z-index: 10;
+}
+.cassette .label .cutout .reel_hole:first-of-type {
+  left: 5.5%;
+}
+.cassette .label .cutout .reel_hole .gear {
+  position: absolute;
+  width: 14%;
+  height: 86%;
+  background: #8fe2ec;
+  top: 50%;
+  left: 50%;
+  margin-left: -7%;
+  margin-top: -43%;
+  box-shadow: 0 0 0 2px #353535;
+  animation: gears 3.5s linear infinite alternate;
+}
+.cassette .label .cutout .reel_hole .gear:before, .cassette .label .cutout .reel_hole .gear:after {
+  display: block;
+  content: \'\';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #8fe2ec;
+  top: 0;
+  left: 0;
+  box-shadow: 0 0 0 2px #353535;
+  transform: rotate(240deg);
+}
+.cassette .label .cutout .reel_hole .gear:after {
+  transform: rotate(120deg);
+  width: 220%;
+  top: 2%;
+  left: -75%;
+  background: none;
+  box-shadow: -2px -2px 0 0 #353535;
+  background-image: linear-gradient(90deg, #8fe2ec calc(50% - 1px), #353535 calc(50% - 1px), #353535 calc(50% + 1px), #e6584c calc(50% + 2px)), linear-gradient(#8fe2ec calc(100% - 2px), #353535 calc(100% - 2px));
+  background-size: 100% 50%, 50% 100%;
+  background-repeat: no-repeat;
+}
+@keyframes gears {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(2160deg);
+  }
+}
+.cassette .label .cutout .window {
+  position: absolute;
+  background: #8fe2ec;
+  width: 40%;
+  height: 68%;
+  top: 15%;
+  left: 30%;
+  border: 3px solid #353535;
+  overflow: hidden;
+}
+.cassette .label .cutout .window:after {
+  display: block;
+  position: absolute;
+  background: linear-gradient(transparent 13%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0.4) 24%, transparent 24%, transparent 34%, rgba(255, 255, 255, 0.4) 34%, rgba(255, 255, 255, 0.4) 50%, transparent 50%);
+  content: \'\';
+  width: 100%;
+  height: 100%;
+}
+.cassette .label .cutout .window .spool {
+  position: absolute;
+  top: -22%;
+  width: 70%;
+  background: #adadad;
+  border: 3px solid #353535;
+  border-radius: 50%;
+  box-shadow: 0 0 0 10px #626262, 0 0 0 13px #353535;
+}
+.cassette .label .cutout .window .spool:after {
+  content: \'\';
+  display: block;
+  padding-bottom: 100%;
+}
+.cassette .label .cutout .window .spool:first-of-type {
+  left: -64%;
+  animation: spooling 3.5s linear infinite alternate;
+}
+.cassette .label .cutout .window .spool:last-of-type {
+  right: -64%;
+  animation: spooling 3.5s linear infinite alternate-reverse;
+}
+@keyframes spooling {
+  from {
+    box-shadow: 0 0 0 0.5em #626262, 0 0 0 calc(0.5em + 3px) #353535;
+  }
+  to {
+    box-shadow: 0 0 0 5em #626262, 0 0 0 calc(5em + 3px) #353535;
+  }
+}
+.cassette .head {
+  width: 60%;
+  height: 25.5%;
+  position: absolute;
+  margin-left: 20%;
+  bottom: -4%;
+}
+.cassette .head:before, .cassette .head:after {
+  display: block;
+  content: \'\';
+  width: 70%;
+  height: 100%;
+  position: absolute;
+  background: #4b4b56;
+  border: 4px solid #353535;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
+  background-repeat: no-repeat;
+  background-position: 15% 8%;
+  background-size: 100% 4px;
+}
+.cassette .head:before {
+  transform: skew(-15deg);
+  left: -8%;
+  border-right: none;
+  border-radius: 10px 0 0 10px;
+  box-shadow: inset 6px 0 0 0 #4b4b56;
+}
+.cassette .head:after {
+  transform: skew(15deg);
+  right: -8%;
+  border-left: none;
+  border-radius: 0 10px 10px 0;
+  box-shadow: inset -6px 0 0 0 #4b4b56;
+}
+
+.cassette
+.screw:before {
+  content: \'\20e0\fe0e\';
+  font-size: 1.1em;
+  color: #353535;
+  font-weight: bold;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+.cassette .screw.i2 {
+  right: 1%;
+}
+.cassette .screw.i2:before {
+  transform: rotate(90deg);
+}
+.cassette .screw.i3 {
+  bottom: 1%;
+}
+.cassette .screw.i3:before {
+  transform: rotate(-30deg);
+}
+.cassette .screw.i4 {
+  right: 1%;
+  bottom: 1%;
+}
+.cassette .screw.i4:before {
+  transform: rotate(-90deg);
+}
+.cassette .screw.i5 {
+  left: calc(50% + 0.5em);
+  bottom: 9%;
+}
+.cassette .screw.i5:before {
+  transform: rotate(45deg);
+}
+.cassette .hole {
+  width: 5%;
+  background: #8fe2ec;
+  position: absolute;
+  border-radius: 50%;
+  border: 3px solid #353535;
+  bottom: 0;
+  left: 50%;
+  margin-left: -2.5%;
+}
+.cassette .hole:after {
+  content: \'\';
+  display: block;
+  padding-bottom: 100%;
+}
+.cassette .hole.i1 {
+  bottom: 0%;
+  left: 28%;
+}
+.cassette .hole.i2 {
+  bottom: 2%;
+  left: 38%;
+}
+.cassette .hole.i3 {
+  bottom: 0%;
+  left: 72%;
+}
+.cassette .hole.i4 {
+  bottom: 2%;
+  left: 62%;
+}
+'
+body_css_class 'mar0px s2px padt2px VERDANAs'
+body_css_style 'background-color: black'
+font_size 'def'
+
+doc('mar0px pad0px s0_6em') {
+  ee '
+<div class="grain">
+</div>
+<div class="cassette">
+  <div class="head">
+  </div>
+  <div class="label">
+    <div class="cutout">
+      <div class="reel_hole">
+        <div class="gear">
+        </div>
+      </div>
+      <div class="reel_hole">
+        <div class="gear">
+        </div>
+      </div>
+      <div class="window">
+        <div class="spool">
+        </div>
+        <div class="spool">
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  
+  
+<div class="accents">
+<div class="hole i1"></div>
+<div class="hole i2"></div>
+<div class="hole i3"></div>
+<div class="hole i4"></div>
+</div>
+</div>
+'
+}}