dummyterminal

filthy little front-end dummy terminal example. theme switcher works though

by Nicholas Berlette

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css">
<div id="wrapper" class="light">
  
  
  <div class="content">
<button id="btn-toggle-theme-dark" class="btn-toggle-theme bg-gray-200 focus:ring-gray-200 rounded-full h-7 w-7 mr-4 focus:outline-none focus:ring-2 focus:ring-opacity-50"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 mx-auto"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg></button>
  <button id="btn-toggle-theme-light" class="btn-toggle-theme bg-gray-700 focus:ring-gray-700 rounded-full h-7 w-7 mr-4 focus:outline-none focus:ring-2 focus:ring-opacity-50"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 mx-auto"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
  </button>
      <div class="container">
        <ul class="window-buttons">
          <li class="btn-close"></li>
          <li class="btn-minimize"></li>
          <li class="btn-zoom"></li>
        </ul>
        <div class="window">
            <pre class="prism">
<p>cd my-app &amp;&amp; yarn add next<br>
<em>✓ Next.js installed successfully!</em></p>
            </pre>
        </div>
      </div>

  </div>
</div>
<script type="text/javascript">
  const loadTheme = () => {
    let theme = localStorage.getItem('theme') || 'dark';
    $('#wrapper').attr('class', theme)
  }
  loadTheme()
</script>

CSS

:root {
  --body-font-family: Roboto, Helvetica Neue, Helvetica, sans-serif;
  --body-font-weight: 300;
  --body-font-size: 18px;
  --body-line-height: 28.8px;
  --body-padding: 0em;
  --window-width: 350px;
  --window-height: 330px;
  --window-border-radius: 6px;
  --top-bar-font: 16px/2.2em Helvetica Neue, Helvetica, sans-serif;
  --top-bar-text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  --top-bar-height: 36px;
  --top-bar-border-radius: 6px 6px 0 0;
  --window-prism-font: 13px/.9 'Operator Mono', Roboto Mono, monospace;
  --btn-theme-size: 24px;
}

.light,
:root {
  --body-text-color: #222;
  --body-background-color: #eeeeee;
  --top-bar-text-color: #555;
  --top-bar-gradient: linear-gradient(#f0f0f0, #dedede);
  --top-bar-box-shadow: inset 0 2px 2px -2px #fff, 0 1px rgba(0, 0, 0, .25);
  --top-bar-content: "it look good but don't do shit";
  --window-background-color: #fff;
  --window-border-color: #ccc #ccc #aaa #ccc;
  --window-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.05), 0 20px 42px rgba(0, 0, 0, .2);
  --btn-theme-control-color: rgba(0, 0, 0, 0.8);

}

.dark {
  --body-text-color: #ccc;
  --body-background-color: #333146;
  --top-bar-text-color: #bbb;
  --top-bar-gradient: linear-gradient(#2f2f2f, #20262e);
  --top-bar-box-shadow: inset 0 1px 0px 0px rgba(255, 255, 255, 0.25), 0 1px rgba(0, 0, 0, .4);
  --top-bar-content: "Dark Theme";
  --window-background-color: #222;
  --window-border-color: transparent;
  --window-text-color: #ccc;
  --window-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.15),
    0 20px 42px rgba(0, 0, 0, .25);
  --btn-theme-control-color: rgba(255, 255, 255, 0.8);
}

* {
  box-sizing: border-box;
  border: none;
  margin: 0;
  padding: 0;
  caret-color: transparent !important;
}

body {
  font-family: var(--body-font-family, sans-serif);
  font-weight: var(--body-font-weight, 300);
  color: var(--body-text-color, #222);
  font-size: var(--body-font-size, 18px);
  line-height: var(--body-line-height, 28.8px);
 ...

JavaScript

$('.btn-toggle-theme').on("click", function(e) {
  if ($('#wrapper').hasClass('dark')) {
    $('#wrapper').removeClass('dark').addClass('light');
    localStorage.setItem('theme', 'light');
  } else {
    $('#wrapper').removeClass('light').addClass('dark');
    localStorage.setItem('theme', 'dark');
  }
});