fullscreen option

static/scripts/bundle.js

@@ -945,9 +945,18 @@ const text = document.querySelector(`#text`)
 const fileInput = document.querySelector(`#file`)
 const output = document.querySelector(`#output`)
 const shareUrl = document.querySelector(`#share-url`)
+const termNode = document.getElementById('terminal')
 
 let term = null
 
+const urlParams = window.location.search.substr(1).split('&')
+  .map(x => x.split('='))
+  .reduce((obj, x) => (obj[x[0]] = x[1], obj), {})
+
+if ('f' in urlParams) {
+  document.body.classList.add('fullscreen')
+}
+
 function setClipboard(element) {
   const clipboard = new Clipboard(element)
 
@@ -1073,17 +1082,26 @@ ws.addEventListener('message', event => {
         disableStdin: true,
         cursorBlink: true
       })
-      termNode = document.getElementById('terminal')
       termNode.style.display = 'block'
       term.open(termNode)
       term.fit()
       window.addEventListener('resize', () => {
         term.fit()
       })
+
+      let p = window.location.pathname
+      let q = window.location.search
+      const fsUrl = `${p}${q}${q.length ? '&' : '?'}f=1`
+      const a = document.createElement('a')
+      a.href = fsUrl
+      a.textContent = 'full screen'
+      a.className = 'terminal-full-screen'
+      termNode.appendChild(a)
     }
 
     const text = new window.TextDecoder('utf-8').decode(new Uint8Array(arrayBuffer))
     term.write(`${text}\r`)
+
     return false
   }
 

static/scripts/client.js

@@ -17,9 +17,18 @@ const text = document.querySelector(`#text`)
 const fileInput = document.querySelector(`#file`)
 const output = document.querySelector(`#output`)
 const shareUrl = document.querySelector(`#share-url`)
+const termNode = document.getElementById('terminal')
 
 let term = null
 
+const urlParams = window.location.search.substr(1).split('&')
+  .map(x => x.split('='))
+  .reduce((obj, x) => (obj[x[0]] = x[1], obj), {})
+
+if ('f' in urlParams) {
+  document.body.classList.add('fullscreen')
+}
+
 function setClipboard(element) {
   const clipboard = new Clipboard(element)
 
@@ -145,17 +154,26 @@ ws.addEventListener('message', event => {
         disableStdin: true,
         cursorBlink: true
       })
-      termNode = document.getElementById('terminal')
       termNode.style.display = 'block'
       term.open(termNode)
       term.fit()
       window.addEventListener('resize', () => {
         term.fit()
       })
+
+      let p = window.location.pathname
+      let q = window.location.search
+      const fsUrl = `${p}${q}${q.length ? '&' : '?'}f=1`
+      const a = document.createElement('a')
+      a.href = fsUrl
+      a.textContent = 'full screen'
+      a.className = 'terminal-full-screen'
+      termNode.appendChild(a)
     }
 
     const text = new window.TextDecoder('utf-8').decode(new Uint8Array(arrayBuffer))
     term.write(`${text}\r`)
+
     return false
   }
 

static/styles/main.css

@@ -10,6 +10,24 @@ body {
   padding: 25px;
 }
 
+body::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+body::-webkit-scrollbar-track {
+  background: #eee;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border: 1px solid #ddd;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+  background-color: #ccc;
+}
+
 #site-container {
   max-width: 1200px;
   margin: 0 auto;
@@ -243,18 +261,58 @@ a:hover {
 }
 
 #terminal {
-  margin-bottom: 20px;
+  position: relative;
+  margin-bottom: 25px;
   min-height: 400px;
   resize: vertical;
   background: #000;
-  padding: 1rem;
   display: none;
 }
 
 .terminal {
   font-family: "Menlo", "DejaVu Sans Mono", "Lucida Console", monospace;
 }
 
+.terminal-full-screen {
+  position: absolute;
+  right: 20px;
+  bottom: -15px;
+  font-size: 0.7em;
+}
+
+.xterm-viewport::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+.xterm-viewport::-webkit-scrollbar-track {
+  background: #555;
+}
+
+.xterm-viewport::-webkit-scrollbar-thumb {
+  background-color: #777;
+  border: 1px solid #777;
+}
+
+.xterm-viewport::-webkit-scrollbar-thumb:hover {
+  background-color: #999;
+}
+
+body.fullscreen {
+  overflow: hidden;
+}
+
+body.fullscreen #terminal {
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  margin: 0;
+}
+
 @media (max-width: 760px) {
   #header {
     flex-direction: column;