<div id="case">
  <div id="bezel">
    <div id="tube">
      <code id='screen'>10 PRINT CHR$(205.5+RND(1)); : GOTO 10
      RUN
      </code>
    </div>
  </div>
  <div id="bottom-panel">
    <div id="badge">
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 212.57 27.72">
        <defs>
          <linearGradient id="chrome" x1="0" y1="-5%" x2="100%" y2="5%">
            <stop offset="0%" style="stop-color:#ccc;stop-opacity:1" />
            <stop offset="33%" style="stop-color:#999;stop-opacity:1" />
            <stop offset="33.5%" style="stop-color:#666;stop-opacity:1" />
            <stop offset="60%" style="stop-color:#ccc;stop-opacity:1" />
            <stop offset="60.5%" style="stop-color:#666;stop-opacity:1" />
            <stop offset="65%" style="stop-color:#999;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#ccc;stop-opacity:1" />
          </linearGradient>
        </defs>
        <path d="M187.25 7.67h-3.96v11.36h4.13v-5.94c0-1.55.95-2.33 2.67-2.33s2.15.52 2.24 1.98h3.88c0-3.87-.52-5.34-4.65-5.34-2.5 0-3.36.52-4.31 2.41V7.67zM24.73 14.5h-6.65v5.45h11.96l-5.31-5.45zm5.31-6.58H18.08v5.45h6.58l5.38-5.45zm176.24 8.87c-3.96 0-4.56-.35-4.56-2.33h10.85c-.17-5.51-.17-6.8-7.49-6.8-6.2 0-7.58 1.12-7.58 6.03 0 4.56 1.81 5.68 6.8 5.77 5.6 0 8.27-.26 8.27-3.96h-4.05c-.17.87-.51 1.29-2.24 1.29zm-4.65-4.73c.17-1.21.52-1.64 3.27-1.64 3.02 0 3.45.17 3.62 1.64h-6.89zm-153.97.43h4.13c-.34-3.88-1.46-4.82-7.23-4.82-6.54 0-8.01 1.03-8.01 5.86 0 4.82 1.38 5.94 7.49 5.94 6.46 0 7.75-.86 7.75-4.91h-4.13c0 1.12-.43 1.64-3.62 1.64-2.76 0-3.36-.69-3.36-2.93 0-2.15.6-2.15 3.88-2.15 2.41-.01 2.84.25 3.1 1.37zm96.02.69c0-4.65-1.38-5.6-8.01-5.6-7.15 0-8.01 1.2-8.01 6.03 0 4.82 1.2 5.86 8.01 5.86 7.23 0 8.01-1.21 8.01-6.29zm-11.8.26c0-2.33.52-2.58 3.53-2.58 3.36 0 3.96.08 3.96 2.58 0 2.33-.43 2.76-3.62 2.76-3.44-.01-3.87-.35-3.87-2.76zm48.91-.26c0-4.65-1.29-5.6-7.92-5.6-7.06 0-7.92 1.12-7.92 5.94 0 4.91 1.2 5.94 7.92 5.94 7.23.01 7.92-1.2 7.92-6.28zm-11.71.26c0-2.33.52-2.58 3.53-2.58 3.36 0 3.96.08 3.96 2.58 0 2.33-.43 2.76-3.62 2.76-3.44-.01-3.87-.35-3.87-2.76zm-98.94-.26c0-4.65-1.29-5.6-7.92-5.6-7.15 0-8.01 1.12-8.01 5.94 0 4.91 1.21 5.94 8.01 5.94 7.23.01 7.92-1.2 7.92-6.28zm-11.63.26c0-2.33.52-2.58 3.45-2.58 3.36 0 3.96.08 3.96 2.58 0 2.33-.43 2.76-3.62 2.76-3.36-.01-3.79-.35-3.79-2.76zm99.55-10.6v6.63c-.95-1.29-1.81-1.98-5.25-1.98-5.51 0-6.54 1.46-6.54 5.94 0 4.57 1.46 5.85 6.8 5.85 3.36 0 4.39-.86 5.17-2.32v2.06h4.13V2.83l-4.31.01zm-3.02 7.93c2.32 0 3.1.34 3.1 2.15 0 2.76-.17 3.02-3.44 3.02s-4.13-.09-4.13-2.41c0-2.68 1.03-2.76 4.47-2.76zM17.71 7.55V.53C16.29.16 15.32.01 13.9.01 6.5.01 0 6.21 0 13.91c0 7.92 6.57 13.82 13.97 13.82 1.35 0 2.09-.15 3.74-.6v-7.17c-1.64.82-2.46 1.05-3.81 1.05-4.11 0-7.25-3.44-7.25-7.25 0-3.96 3.06-7.32 7.17-7.32 1.42-.01 2.62.36 3.89 1.11zm58.97.12h-3.87v11.36h4.13v-5.86c0-1.72.86-2.32 3.19-2.32 2.15 0 2.76.77 2.76 2.93v5.25h4.22V13c0-1.64 1.29-2.15 3.27-2.15 1.9 0 2.76.52 2.76 2.15v6.03h4.13v-6.72c0-3.36-2.07-4.91-5.85-4.91-3.27 0-4.48 1.21-4.91 2.5-.86-1.46-2.07-2.5-5.34-2.5-3.1 0-3.96 1.03-4.48 2.93l-.01-2.66zm27.82 0h-3.88v11.36h4.13v-5.86c0-1.72 1.03-2.32 3.1-2.32 2.15 0 2.76.69 2.76 2.93v5.25h4.22V13c0-1.64 1.21-2.15 3.19-2.15 1.89 0 2.84.6 2.84 2.15v6.03h4.13v-6.72c0-3.36-2.07-4.91-5.85-4.91-3.27 0-4.39 1.12-4.91 2.5-.86-1.46-2.07-2.5-5.34-2.5-3.01 0-3.79 1.03-4.39 2.93V7.67z" fill="url(#chrome)"/>
      </svg>
      <div id="power">POWER</div>
    </div>
    <div id="ident">
      <div>Video Monitor</div>
      <div>Model 1702</div>
    </div>
    <div id="power-btn"></div>
    <div id="door"></div>
    <div id="video"></div>
    <div id="audio"></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Syncopate:700&display=swap');
@font-face {
  font-family: 'C64';
  src:  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/C64_Pro-STYLE.woff') format('woff2'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/C64_Pro-STYLE.woff2') format('woff');
}

$fore: #887ecb;
$back: #50459b;
$dbeige: rgb(73, 65, 48);
$beige: rgb(215,200,190);
$gray: rgb(51,50,48);

:root {
  background-color: #111;
  background-image: radial-gradient(
    circle,
    #222,
    #111
  );
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#case {
  position: relative;
  padding: 3vmin 3vmin;
  background-color: $beige;
  border-radius: 1.25vmin;
  border-top: 0.25vmin solid lighten($beige, 10%);
  border-bottom: 0.75vmin solid darken($beige, 20%);
  box-shadow:
    inset 0 1vmin 2vmin darken($beige, 20%);
}

#bezel {
  border-radius: 0.5vmin;
  background-image: 
    linear-gradient(to right, 
      darken($gray, 5%),
      $gray,
      lighten($gray, 2%),
      $gray,
      darken($gray, 5%)
    );
  padding: 8vmin;
  position: relative;
  border-left: 2px solid darken($gray, 15%);
  border-right: 2px solid darken($gray, 15%);
  border-top: 1px solid lighten($gray, 35%);
  border-bottom: 3px solid darken($gray, 15%);
  box-shadow:
    0 -1vmin 0.25vmin 0.5vmin darken($beige, 15%),
    0 1vmin 0 0.5vmin lighten($beige, 10%);
  
  &::before {
    content: '';
    position: absolute;
    top: 3vmin; left: 3vmin; 
    right: 3vmin; bottom: 3vmin;
    border: 1px solid $gray;
    border-left-color: darken($gray, 10%);
    border-right-color: darken($gray, 10%);
    border-radius: 1vmin;
    box-shadow: 
      inset 0 -1.5vmin 2vmin -0.05vmin darken($gray, 10%),
      inset 0 1.5vmin 2vmin -0.05vmin darken($gray, 10%);
  }
}

#tube {
  box-shadow: 
    0 -3px 2px darken($gray, 8%),
    0 2px 0 -1px lighten($gray, 30%),
    0 3px lighten($gray, 10%);
  $margin: 6vmin;
  color: $fore;  
  background-color: $back;
  padding: 2px;
  font-size: 2vmin;
  font-family: C64;
  line-height: 1.11;
  border: $margin solid $fore;
  position: relative;
  border-radius: 2vmin;
  
  &::before, &::after {
    border-radius: 2vmin;
    position: absolute;
    content: '';
    top: $margin * -1;
    left: $margin * -1;
    right: $margin * -1;
    bottom: $margin * -1;
  }
  
  //scanlines
  &::before {
    @keyframes scanlines {
      from { background-position: 0 0px; }
      to { background-position: 0 4px; }
    }
    
    animation: scanlines 16ms infinite steps(4, start);
    mix-blend-mode: overlay;
    background-size:
      1vw 3px;
    background-image: 
      linear-gradient(to bottom,
        transparent 2px,
        rgba(mix(black, $back), 0.6) 2px,
        rgba(mix(black, $back), 0.9) 3px
      )
  }
  
  // glare
  &::after {
      box-shadow: 
        inset 0 0 1vmin 0.25vmin rgba(black, 0.85),
        0 0 10vmin -2vmin $back,
        0 0 10vmin -5vmin darken($back, 20%);
    background-blend-mode: multiply, normal, screen;
    background-image:
      radial-gradient(
        ellipse closest-corner,
        transparent 70%,
        rgba($back, 0.7),
      ),
      linear-gradient(
        85deg, 
        rgba(darken($back, 20%), 0.2) 0%,
        rgba(white, 0) 64.5%,
        rgba(mix(#bbb, $fore, 75%), 0.05) 74.5%,
        rgba(mix(#fff, $fore, 90%), 0.05) 75%, 
        rgba(mix(#eee, $fore, 75%), 0.07) 85%,
        rgba(white, 0) 85.5%,
      )
  }
}

#screen {
  display: block;
  width: 72vmin ;
  height: 53vmin;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  user-select: none;
}

#bottom-panel {
  position: absolute;
  top: 100.9%;
  left: 1vmin; right: 1vmin;
  height: 16vmin;
  background-color: $beige;
  border-radius-bottom-left: 1rem;
  border-left: 0.25vmin solid darken($beige, 5%);
  border-right: 0.25vmin solid darken($beige, 5%);
  background-image:
    linear-gradient(
      to bottom,
      darken($beige, 40%) 0%,
      lighten($beige, 15%) 1.25vmin,
      lighten($beige, 10%) 6.5vmin,
      rgba($beige,0) 7.25vmin
    );
  perspective: 12in;
}

#badge {
  position: absolute;
  z-index: 1;
  top: -1vmin;
  height: 7vmin;
  left: 33vmin;
  right: 33vmin;
  background-image: 
    linear-gradient(-10deg, 
      $dbeige,
      darken($dbeige, 7%)
    );
  border-left: 0.25vmin solid $beige;
  border-right: 0.25vmin solid $beige;
  
  svg {
    width: 18vmin;
    position: absolute;
    top: 51%;
    left: 1vmin;
    transform: translate(0, -50%);
  }
  // rainbow
  &::after {
    content: '';
    position: absolute;
    top: 0.5vmin;
    bottom: 0.5vmin;
    right: 8vmin;
    width: 10vmin;
    opacity: 0.5;
    background-image: linear-gradient(
      to bottom,
      red 0%, 
      red 15%, transparent 15%, 
      transparent 21.25%, orange 21.25%, 
      orange 36.25%, transparent 36.25%, 
      transparent 42.5%, yellow 42.5%, 
      yellow 57.5%, transparent 57.5%,  
      transparent 63.75%, limegreen 63.75%, 
      limegreen 78.75%, transparent 78.75%, 
      transparent 85%, cyan 85%, 
      cyan 100%
    )
  }
  
  #power {
    position: absolute;
    right: 2vmin;
    top: 0;
    bottom: 0;
    width: 5vmin;
    background-color: black;
    color: #666;
    font: normal 0.75vmin system-ui, sans-serif;
    text-align: center;
    line-height: 11vmin;
  }
}

#ident {
  line-height: 1.5;
  position: absolute;
  top: 1vmin;
  right: 13vmin;
  height: 5vmin;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Syncopate', sans-serif;
  font-size: 1.25vmin;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba($gray, 0.85);
  text-shadow: 
    -1px -1px lighten($beige, 30%),
    1px 1px darken($beige, 10%);
  border-radius: 0.333vmin;
  border-top: 1px solid lighten($beige, 5%);
  border-left: 1px solid lighten($beige, 25%);
  box-shadow: 0.25vmin 0.25vmin 0.25vmin darken($beige, 10%);
  padding: 0 3vmin 0 1vmin;
  transform: skewx(3.5deg);
}

#door {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 83vmin;
  height: 7.5vmin;
  border-top: 4px groove lighten($beige, 7.5%);
  border-right: 2px groove lighten($beige, 5%);
}

#video, #audio {
  font: normal 1vmin system-ui, sans-serif; 
  color: darken($beige, 50%);
  position: absolute;
  top: 9vmin;
  width: 5vmin; height: 5vmin;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid black;
  border-color: lighten($beige, 5%) darken($beige, 10%) darken($beige, 10%) lighten($beige, 5%);
  background-image:
    radial-gradient(circle, darken($beige, 35%), rgba(black, 0.0));
  box-shadow: 
    inset -0.5vmin -0.5vmin 0.5vmin -0.5vmin white,
    inset -1vmin -1vmin 2vmin -1vmin lighten($beige, 10%),
    
    inset 0.5vmin 0.5vmin 0.5vmin -0.5vmin rgba(0,0,0, 0.5),
    inset 1vmin 1vmin 1vmin darken($beige, 35%);
  
  &::before {
    content: '';
    position: absolute;
    top: 0.75vmin; left: 0.75vmin;
    bottom: 0.75vmin; right: 0.75vmin;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 
      0 0.25vmin 0.1vmin rgba(black, 0.4),
      0 0 0.75vmin darken($beige, 60%);
    background-image:
      radial-gradient(
        circle at 50% 45%,
        rgba(black, 0) 64%, rgba(black, 0.4) 70%,
      ),
      radial-gradient(
        circle 3.75vmin at 50% 85%,
        rgba(white, 0) 64%, rgba(white, 0.4) 70%,
      ),
      radial-gradient(
        circle,
        rgba(black, 0.8), rgba(black, 0.8) 15%, 
        rgba(black, 0.0) 40%,
        rgba(black, 0.0) 45%,
        darken(silver, 10%) 45%,
        silver 50%, black,
      );
  }
  
  &::after {
    position: absolute;
    bottom: -2em;
    left: 0; right: 0;
    text-align: center;
  }
}

#video { 
  right: 15vmin; 
  &::before { background-color: yellow; } 
  &::after { content: 'VIDEO'; }
}
#audio { 
  right: 9vmin; 
  &::before { background-color: white; }
  &::after { content: 'AUDIO'; }
}

#power-btn {
  font: normal 1vmin system-ui, sans-serif; 
  color: darken($beige, 30%);
  position: absolute;
  
  width: 6.8vmin;
  height: 3.8vmin;
  right: 2.6vmin;
  top: 1.5vmin;
  background-color: black;
  border: 1px solid darken($beige, 25%);
  
  &::before {
    content: '';
    position: absolute;
    top: 2px; left: 1px; 
    right: 1px; bottom: 1px;
    border-radius: 2px;
    background-image: 
      linear-gradient(
        to bottom,
        lighten(mix($beige, $gray), 10%),
        mix($beige, $gray) 2px,
        lighten(mix($beige, $gray), 15%)
      );

    box-sizing: border-box;
    border-top: 0.5vmin solid mix($beige, $gray);
    border-bottom: 3px solid darken(mix($beige, $gray), 15%);
    border-right: 1px solid darken(mix($beige, $gray), 10%);
    border-left: 1px solid darken(mix($beige, $gray), 10%);
  }
  
  &::after { 
    content: 'POWER'; 
    position: absolute;
    top: calc(100% + 0.5vmin);
    left: 0; right: 0; text-align: center;
  }
}

// 10 PRINT CHR$(205.5+RND(1)); : GOTO 10
setInterval(() => PRINT(STR$(205.5 + RND(1))), 20)

// support
const stdout = document.getElementById('screen');
const PRINT = (str) => { stdout.innerHTML += str; stdout.scrollTop = stdout.scrollHeight };
const STR$ = (val) => String.fromCodePoint((9380 + val)>>>0);
const RND = (range) => Math.random() * range;