dummyterminal

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

by Nicholas Berlette

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css">
<link rel="stylesheet" href="https://nb-static.s3-us-west-2.amazonaws.com/fonts/css/operator-mono.css">
<link rel="stylesheet" href="https://nb-static.s3-us-west-2.amazonaws.com/fonts/css/gotham-narrow.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<div id="wrapper" class="light">


  <div class="content">
  
    <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"><code class="sh">cd my-app &amp;&amp; yarn add next</code><code class="sh"><em>✓ Next.js installed with warnings</em></code></pre>
        
        <div class="border-t border-white border-opacity-10 font-mono text-xs p-4 space-y-2 console-problems">
          <h3 id="problems-title">Fix 1 Problem:</h3>
          <ul class="leading-5">
            <li class="flex min-w-0 pt-2">
              <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-none text-amber-400">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
              </svg>
              <p class="truncate ml-1"><span class="not-italic">'block'</span> applies the same CSS property as <span class="not-italic">'flex'</span>.</p>
              <p class="hidden sm:block flex-none opacity-50 not-italic">&nbsp;
                <!-- --><span class="underline">cssConflict</span> [1, 54]</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
colorSchemeChange(userTheme => {
	let storedTheme = localStorage.getItem('theme')
  if (userTheme !==...

CSS

/*  dummyterminal.css   */
/*  Nicholas Berlette <[email protected]>  */

:root {
  
  --body-padding: 1em 0em;
  --wrapper-padding: 5em 0 4em 0;
  --window-width: 500px;
  --window-height: 420px;
  --window-border-radius: 6px;
  
  --top-bar-height: 2.4em;
  --top-bar-border-radius: 6px 6px 0 0;
  
  --window-buttons-margin: 1.1em 1em 0 0;
  --window-buttons-padding: 0;
  --window-buttons-top: 0em;
  --window-buttons-left: -0.25em;
  --window-buttons-z-index: 1500;
  --window-buttons-border-radius: 60%;
 
  --btn-theme-size: 4.8em;
  --btn-theme-position: absolute;
  --btn-theme-top-active: 5%;
  --btn-theme-right-active: 15%;
  --btn-theme-top-inactive: -40em;
   
  --prism-padding: 2ch;
  --prism-code-padding: 2px 0 !important;
  --prism-code-margin: 0 !important;
  
  --console-problems-h3-margin: 0 0 0.5em 0;
  
  /* fonts */
  --body-font-weight: 300;
  --body-font: 0.63em/2em Roboto, Helvetica Neue, Helvetica, sans-serif;
  --top-bar-font: 1.5em/2.3em Helvetica Neue, Helvetica, sans-serif;
  
  --prism-font: 1.3em/1.3em 'monolisa', 'operator mono ssm a', monospace;
  --prism-font-weight: 200 !important;
  --prism-direction: ltr;
  --prism-text-align: left;
  --prism-white-space: pre;
  --prism-word-spacing: normal;
  --prism-word-break: normal;
  --prism-tab-size: 2;
  --prism-hyphens: none;
  
  --prism-code-font: 1.1em/1.35em operator mono ssm a, monospace;
  --prism-code-font-weight: 200 !important;
  --prism-code-before-sh: "$ ";
  
  --console-problems-font: 1.4em/1.5em operator mono ssm a, Inter, Helvetica Neue, sans-serif;
  --console-problems-letter-spacing: -0.025em;
  --console-problems-h3-font: 1.8em gotham narrow ssm a;
  --console-problems-h3-text-transform: uppercase;
  --console-problems-font-weight: 700;
  --console-problems-h3-text-decoration: underline;
}

.light,
:root {
  --global-caret-color: transparent !important;
  --body-text-color: #222;
  --body-background-color: #eee;
  
  --top-bar-content: "Color scheme switches...

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');
  }
})