80's Computer User Interface

80-s-computer-user-interface.markdown

80's Computer User Interface

A Pen by Leetcodes on CodePen.

License.

index.html

<div class="screen">
<section class="buttonGroup">
  <h2>CSS 1981</h2>
  <button value="Placebo Button"></button>
  <button value="Rockets"></button>
  <button value="Smoke Screen"></button>
  <button value="Booster Rockets"></button>
  <section class="setButtons">
    <button value="Destroy"></button>
    <button value="Deploy"></button>
  </section>
  <button value="Retrograde Torpedoes"></button>
  <button value="Science Canon"></button>
</section>

<section class="buttonGroup">
  <h2>MEDIA</h2>
  <section class="imageDisplay">
   <div class="aspect">
     
    <iframe id="iframeVideo" width="100%" height="100%" src="https://www.youtube.com/embed/pNqfq-R2XFk?rel=0&amp;autoplay=0&showinfo=0&controls=0" frameborder="0" allowfullscreen='false'></iframe>
    </div>
  </section>
     <p>Oliver - Mechanical</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet est nisl. Mauris euismod vel quam eu tincidunt. Sed dapibus justo id dapibus tempor. Pellentesque a libero sed risus congue ultrices. Quisque at congue massa. Duis feugiat ligula non nisi semper tempus. Duis blandit lacus sed diam blandit, id faucibus nunc viverra. Morbi consequat consequat facilisis. Sed in felis vitae nibh venenatis finibus sed et dolor. Sed vulputate molestie est ac tristique. Vestibulum et aliquam velit, in convallis nisl. Vivamus pellentesque venenatis urna eget suscipit.
<hr />     
Sed rhoncus a leo congue sollicitudin. Fusce risus tortor, rutrum id egestas at, elementum in dui. Fusce bibendum purus eu turpis vestibulum, eget aliquet ante pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce egestas, mauris eu vehicula placerat, lacus mi hendrerit lacus, ac rhoncus arcu purus eget odio. Aliquam commodo mattis lorem vitae porttitor.</p>
</section>
  
<section class="buttonGroup">
  <h1>Scanning</h2>
  <div class="visual1">
  </div>
  
  <div class="visual2">
  </div>
  
  <section class="setButtons">
    <button value="1"></button>
    <button value="2"></button>
    <button value="3"></button>
    <button value="4"></button>
    <button value="x"></button>
    <button value="x"></button>
    <button value="x"></button>
    <button value="x"></button>
    <button value="x"></button>
    <button value="x"></button>
  </section>
  
  <section>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet est nisl. Mauris euismod vel quam eu tincidunt. Sed dapibus justo id dapibus tempor. Pellentesque a libero sed risus congue ultrices. Quisque at congue massa. Duis feugiat ligula non nisi semper tempus. Duis blandit lacus sed diam blandit, id faucibus nunc viverra. Morbi consequat consequat facilisis. Sed in felis vitae nibh venenatis finibus sed et dolor. Sed vulputate molestie est ac tristique. Vestibulum et aliquam velit, in convallis nisl. Vivamus pellentesque venenatis urna eget suscipit.
<hr />     
Sed rhoncus a leo congue sollicitudin. Fusce risus tortor, rutrum id egestas at, elementum in dui. Fusce bibendum purus eu turpis vestibulum, eget aliquet ante pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce egestas, mauris eu vehicula placerat, lacus mi hendrerit lacus, ac rhoncus arcu purus eget odio. Aliquam commodo mattis lorem vitae porttitor.</p>
  </section>
</section>

</div>

script.js

$(document).ready(function(){
  
  $("button").hide();
  $("button").each(function(i) {
      var name = $(this).attr('value');
      $(this).delay(i*100).slideDown(60);
      $(this).html(name);
  });
  
  $("button").click(function(){
    var name = $(this).attr('value');
    if (name=="") {
    } else {
      console.log('else')
    }
    
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

body, html {
  font-family: 'Share Tech Mono', monospace;
  background-color: #121;
  box-shadow: inset 0 0 200px #020;
  height: 100%;
  background: linear-gradient(to bottom, #001100 0%, #111311 100%);
  color: #0f0;
  font-size: 16px;
}

::selection {
  background-color:green;
}

.visual2 {
  width: 100%;
  height: 200px;
  border: 1px solid green;
  position: relative;
  margin-bottom: 10px;
}
.visual2:before, .visual2:after {
  content: "";
  width: 100px;
  height: 100px;
  border: 1px solid #0f0;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  animation: spin 4s infinite linear;
}

.visual2:before{
  animation: spin 2s infinite linear;
}
.visual2:after{
  animation: spin 4s infinite linear alternate;
}

.visual1 {
  width: 100%;
  height: 200px;
  border: 1px solid green;
  position: relative;
  margin-bottom: 10px;
}

.visual1:after, .visual1:before {
  position:absolute;
  top: 0;
  left: 0;
}

.visual1:after {
  content: "";
  display: block;
  border-bottom: 1px solid green;
  width: 100%;
  height: 1%;
  animation: scan 5s infinite  linear;
}
.visual1:before {
  content: "";
  display: block;
  border-right: 1px solid green;
  height: 100%;
  width: 1%;
  animation: scan 0.3s infinite alternate linear;
}


h1,h2,h3,h4,h5,h6 {
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  text-transform: uppercase;
  margin: 10px;
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  float:none;
  clear:both;
}

h2:before, h2:after, h1:before, h1:after, h3:before, h3:after {
  content:" ✱ ✱ ";
}


/*Gradent Elements*/
button:hover, hr, img {
  background: repeating-linear-gradient(0deg, #0c0, #0c0 1px, #050 1px, #050 2px);
  
  
}

body {
  padding: 20px;
  animation: twitch 0.5s infinite;
  background: repeating-linear-gradient(0deg, #000, #000 2px, #020 2px, #020 4px);
}

.screen {
  font-family: 'Share Tech Mono', monospace;
  display: flex;
  animation: flicker 0.001s infinite;
  mix-blend-mode: screen;
  
}

button {
  
}

section {
  margin-bottom: 10px;
}

button {
  font-family: 'Share Tech Mono', monospace;
  color: #0f0;
  background: transparent;
  padding: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  width: 100%;
  margin: 0 10px 10px 0;
  outline:none;
  
  border: 1px solid #0f0;
  box-shadow: 0 0 10px rgba(0,255,0,0.5), rgba(0,255,0,0.5);
  cursor: pointer;
}

button:hover {
  animation: flicker2 0.1s infinite alternate;
  color: #000;
  border: 1px solid transparent;
  box-shadow: 0 0 40px #0A0, inset 0 0 40px #0A0;
}

button:active {
  font-weight: bold;
}

button:visited {
  font-weight: bold;
  border: 1px solid blue;
}

.imageDisplay {
  text-align: center;
  width: 100%;
  border: 2px solid #0f0;
  position: relative;
  overflow: hidden;
  mix-blend-mode: multiply;
}

.imageDisplay video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #0f0;
}

.imageDisplay div {
  position: relative;
  width: 100%;
  background-color: #000;
  box-shadow: 0 0 80px #0A0, inset 0 0 150px 50px #090;
  
  background: repeating-linear-gradient(0deg, #050, #050 1px, #010 1px, #010 2px);
  
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  
  
}

#firstVideo {
  font-family: 'Share Tech Mono', monospace;
}

#firstVideo:after {
  content: "";
  
}

.imageDisplay:after {
  padding-top: 56.25%;
  display: block;
  content: "";
}

.imageDisplay div img {
  border-radius: 50%;
  border: 1px solid #000;
  margin: 0 auto;
  align: center;
  background-color: #0f0;
}

iframe#iframeVideo {
  mix-blend-mode: overlay;
}

.buttonGroup {
  width: 33.3%;
  padding: 0 10px;
}

.buttonGroup hr {
  position: relative;
  height: 1em;
  color: #0f0;
  border-color:#0f0;
  background-color:#0f0;
}

.buttonGroup hr:after {
  content: "✱✱✱✱✱✱✱✱✱✱✱✱✱✱✱✱✱✱✱";
  position: absolute;
  top: 0;
  left: 0;
  color:#000;
  text-align: center;
  width: 100%;
  z-index: 10;
}

.bgVideo {
  top: 50%; 
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

.bgVideo iframe {
  width: 100%;
  height: 100%;
  
}

.buttonGroup p {
  margin-bottom: 1em;
}

.setButtons {
  display: flex;
}

.setButtons button {
  width: 100%;
}

.setButtons button:first-child {
  width: 100%;
  margin-left: 0;
}

.setButtons button:last-child {
  width: 100%;
  margin-right: 0;
}





@keyframes flicker {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blipIn {
  0% {
    height: 0;
  }
  100% {
    height: auto;
  }
}

@keyframes spin {
  0% {
    transform: rotate3d(0,1,1,360deg);;
  }
  100% {
    transform: rotate3d(360deg);
  }
}

@keyframes scan {
  0% {
  }
  100% {
    height: 100%;
    width: 100%;
  }
}

@keyframes twitch {
  0% {
    padding: 20px;
  }
  50% {
    padding: 20px;
  }
  51% {
    padding: 19px;
  }
  50% {
    padding: 20px;
  }
  100% {
    padding: 20px;
  }
}

@media screen and (max-width: 700px) {
  
     .screen {
        display: block;
    }
    .buttonGroup {
      width: auto;
      padding: 0 10px;
    }
}

styles

<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet" />