Merge pull request #19 from pldubouilh/kb-upload

kb upload

.gitignore

@@ -7,6 +7,7 @@ gossa-linux-arm
 gossa-linux-arm64
 gossa-mac
 gossa-windows.exe
+gossa_test.go
 
 .vscode
 fixture/*

Makefile

@@ -1,8 +1,11 @@
-run:
+build:
 	make embed
 	go vet && go fmt
 	CGO_ENABLED=0 go build gossa.go
 	rm gossa.go
+
+run:
+	make build
 	./gossa fixture
 
 watch:
@@ -13,13 +16,12 @@ embed:
 	cp src/main.go gossa.go
 	perl -pe 's/template_will_be_here/`cat src\/template.go`/ge' -i gossa.go
 	perl -pe 's/css_will_be_here/`cat src\/style.css`/ge' -i gossa.go
-	perl -pe 's/theme_will_be_here/`cat src\/theme.css`/ge' -i gossa.go
 	perl -pe 's/js_will_be_here/`cat src\/script.js`/ge' -i gossa.go
 	perl -pe 's/favicon_will_be_here/`base64 -w0 src\/favicon.png`/ge' -i gossa.go
 
 ci:
 	timeout 10 make run &
-	cp src/gossa_test.go . && sleep 5 && go test; rm gossa gossa_test.go
+	cp src/gossa_test.go . && sleep 5 && go test
 
 ci-watch:
 	ls src/* | entr -rc make ci
@@ -40,6 +42,7 @@ build-all:
 
 clean:
 	-rm gossa.go
+	-rm gossa_test.go
 	-rm gossa
 	-rm gossa-linux64
 	-rm gossa-linux-arm

docker/caddy.Dockerfile

@@ -6,7 +6,7 @@ RUN curl -L -o caddy.tar.gz "https://github.com/mholt/caddy/releases/download/v0
 RUN tar xvzf caddy.tar.gz && mv caddy /caddy
 
 # download and prepare gossa
-RUN curl -L -o /gossa "https://github.com/pldubouilh/gossa/releases/download/v0.0.4/gossa-linux64"
+RUN curl -L -o /gossa "https://github.com/pldubouilh/gossa/releases/download/v0.0.7/gossa-linux64"
 RUN chmod +x /gossa /caddy
 
 # Caddy config:

docker/download.Dockerfile

@@ -1,5 +1,5 @@
 FROM alpine
 EXPOSE 8001
-RUN wget https://github.com/pldubouilh/gossa/releases/download/v0.0.4/gossa-linux64 && mv gossa-linux64 /gossa && chmod +x /gossa
+RUN wget https://github.com/pldubouilh/gossa/releases/download/v0.0.7/gossa-linux64 && mv gossa-linux64 /gossa && chmod +x /gossa
 ENTRYPOINT [ "/gossa", "-h", "0.0.0.0", "/shared" ]
 

readme.md

@@ -1,60 +1,60 @@
 gossa
 =============
 
-![e](https://user-images.githubusercontent.com/760637/45410804-f2c00e80-b672-11e8-8c2b-51d7fc0915aa.gif)
+![e](https://user-images.githubusercontent.com/760637/52522293-942fa880-2c83-11e9-9f79-0a5b922bcc7f.gif)
 
 [![Build Status](https://travis-ci.org/pldubouilh/gossa.svg?branch=master)](https://travis-ci.org/pldubouilh/gossa)
 
 🎶 A fast and simple webserver for your files, that's dependency-free and with under 210 lines for the server code, easily code-reviewable.
 
 ### features
-  * browse through files/directories
-  * upload with drag-and-drop
-  * move/rename/delete files
-  * browse through pictures with a full-screen carousel
-  * stream videos directly from the browser
-  * simple keyboard navigation/shortcuts
-  * fast ; fills my 80MB/s AC wifi link
+  * 🔍 files/directories browser
+  * 📩 drag-and-drop file uploader
+  * 🗺️ files handling - move/rename/delete
+  * 📸 picture browser
+  * 📽️ video streaming from the browser
+  * ✍️ simple text editor
+  * ⌨️ keyboard shortcuts
+  * 🥂 speed - showed rates above 100MB/s
 
 ### built blobs
 built blobs are available on the [release page](https://github.com/pldubouilh/gossa/releases).
 
 ### run
 ```sh
-# build
+# build (or download release from github)
 make
 
 # run
 ./gossa -h 192.168.100.33 ~/storage
 ```
 
-### keyboard shortcuts
-|shortcut | action|
-|-------------|-------------|
-|Arrows/Enter | browse through files/directories and pictures|
-|Ctrl/Meta + C | copy URL to clipboard|
-|Ctrl/Meta + B | toggle theme (dark/clear)|
-|\<any letter\> | search|
-|Ctrl/Meta + E | rename file/folder|
-|Ctrl/Meta + Del | delete file/folder|
-|Ctrl/Meta + D | create a new directory|
-|Ctrl/Meta + X | cut selected path|
-|Ctrl/Meta + V | paste previously selected paths to directory|
-
 ### ui shortcuts
 |shortcut | action|
 | ------------- |-------------|
 |click new folder icon | create new folder|
-|click images icon | toggle image carousel|
+|click pad icon | open file editor|
 |click file icon  | rename item|
 |double click file icon | delete item|
 |drag-and-drop item on UI | move item|
 |drag-and-drop external item | upload file/folders|
 
+### keyboard shortcuts
+|shortcut | action|
+|-------------|-------------|
+|Arrows/Enter | browse through files/directories and pictures|
+|Ctrl/Meta + C | copy URL to clipboard|
+|Ctrl/Meta + E | rename file/folder|
+|Ctrl/Meta + Del | delete file/folder|
+|Ctrl/Meta + U | upload new file/folder|
+|Ctrl/Meta + D | create a new directory|
+|Ctrl/Meta + X | cut selected path|
+|Ctrl/Meta + V | paste previously selected paths to directory|
+|\<any letter\> | search|
+
 ### using with docker
 multiple dockerfiles are provided in the `docker` folder. to simply get started just have a look below
 
-
 ```sh
 # build
 cd docker

src/main.go

@@ -164,7 +164,7 @@ func rpc(w http.ResponseWriter, r *http.Request) {
 	} else if payload.Call == "mv" {
 		err = os.Rename(payload.Args[0], payload.Args[1])
 	} else if payload.Call == "rm" {
-		err = os.Remove(payload.Args[0])
+		err = os.RemoveAll(payload.Args[0])
 	}
 
 	logVerb("RPC", err, payload)

src/script.js

@@ -8,6 +8,7 @@ function cancelDefault (e) {
 
 const warningMsg = () => 'Leaving will interrupt transfer?\n'
 const rmMsg = () => !confirm('Remove file?\n')
+const ensureMove = () => !confirm('move items?')
 
 const barName = document.getElementById('dlBarName')
 const barPc = document.getElementById('dlBarPc')
@@ -15,12 +16,15 @@ const barDiv = document.getElementById('progress')
 const upGrid = document.getElementById('drop-grid')
 const pics = document.getElementById('pics')
 const picsHolder = document.getElementById('picsHolder')
-const icHolder = document.getElementById('icHolder')
 const manualUpload = document.getElementById('clickupload')
 const okBadge = document.getElementById('ok')
 const sadBadge = document.getElementById('sad')
 const pageTitle = document.head.querySelector('title')
 const pageH1 = document.body.querySelector('h1')
+const editor = document.getElementById('text-editor')
+const crossIcon = document.getElementById('quitAll')
+const toast = document.getElementById('toast')
+const table = document.querySelector('table')
 
 // helpers
 let allA
@@ -40,10 +44,9 @@ manualUpload.addEventListener('change', () => Array.from(manualUpload.files).for
 function browseTo (href, flickerDone, skipHistory) {
   fetch(href, { credentials: 'include' }).then(r => r.text().then(t => {
     const parsed = new DOMParser().parseFromString(t, 'text/html')
-    const table = parsed.querySelectorAll('table')[0].innerHTML
-    document.body.querySelectorAll('table')[0].innerHTML = table
+    table.innerHTML = parsed.querySelector('table').innerHTML
 
-    const title = parsed.head.querySelectorAll('title')[0].innerText
+    const title = parsed.head.querySelector('title').innerText
     // check if is current path - if so skip following
     if (pageTitle.innerText !== title) {
       pageTitle.innerText = title
@@ -63,19 +66,38 @@ function browseTo (href, flickerDone, skipHistory) {
 }
 
 window.onClickLink = e => {
-  if (e.target.innerText.endsWith('/')) {
-    storeLastArrowSrc(e.target.href)
+  storeLastArrowSrc(e.target.href)
+
+  // follow dirs
+  if (isFolder(e.target)) {
     browseTo(e.target.href)
     return false
-  } else if (picsOn(true, e.target.href)) {
+  // enable notepad if relevant
+  } else if (isTextFile(e.target.innerText) && !isEditorMode()) {
+    displayPad(e.target)
+    return false
+  // toggle picture carousel
+  } else if (isPic(e.target.href) && !isPicMode()) {
+    picsOn(e.target.href)
     return false
   }
+
+  // else just click link
   return true
 }
 
+let softStatePushed
+function pushSoftState (d) {
+  if (softStatePushed) { return }
+  softStatePushed = true
+  history.pushState({}, '', encodeURI(d))
+}
+
 const refresh = () => browseTo(location.href, true)
 
-const prevPage = (url, skipHistory) => picsOff() || browseTo(url, false, skipHistory)
+const softPrev = () => history.replaceState({}, '', decodeURI(location.href.split('/').slice(0, -1).join('/') + '/'))
+
+const prevPage = (url, skipHistory) => window.quitAll() || browseTo(url, false, skipHistory)
 
 window.onpopstate = () => prevPage(location.href, true)
 
@@ -100,7 +122,7 @@ let totalUploads = 0
 let totalUploadsSize = 0
 let totalUploadedSize = []
 
-const dupe = test => allA.find(a => a.innerText.replace('/', '') === test)
+const dupe = test => allA.find(a => a.innerHTML.replace('/', '') === test)
 const isDupe = t => dupe(t) ? alert(t + ' already already exists') || true : false
 
 function shouldRefresh () {
@@ -113,6 +135,7 @@ function shouldRefresh () {
     totalUploadsSize = 0
     totalUploadedSize = []
     barDiv.style.display = 'none'
+    table.classList.remove('uploading-table')
     refresh()
   }
 }
@@ -129,6 +152,7 @@ function postFile (file, path) {
   path = decodeURI(location.pathname).slice(0, -1) + path
   window.onbeforeunload = warningMsg
 
+  table.classList.add('uploading-table')
   barDiv.style.display = 'block'
   totalUploads += 1
   totalUploadsSize += file.size
@@ -172,39 +196,43 @@ function pushEntry (entry) {
 }
 
 // Move files and folders
-const isTextEvent = e => e.dataTransfer.items[0].type === 'text/plain'
-
 const isFolder = e => e && e.href && e.innerText.endsWith('/')
 
-const resetBackgroundLinks = () => { allA.forEach(a => { a.parentElement.style.backgroundColor = 'unset' }) }
+const setBackgroundLinks = t => { t.classList.add('highlight') }
 
-const setBackgroundLinks = t => { t.style.backgroundColor = 'rgba(123, 123, 123, 0.2)' }
+const getLink = () => document.querySelector('.highlight') || {}
 
-const getLink = e => e.target.parentElement.querySelectorAll('a.list-links')[0]
+const resetBackgroundLinks = () => { try { getLink().classList.remove('highlight') } catch(e) { /* */ } } // eslint-disable-line
+
+// Not the nicest - sometimes, upon hover, firefox reports nodeName === '#text', and chrome reports nodeName === 'A'...
+const getClosestRow = t => t.nodeName === '#text' ? t.parentElement.parentElement : t.nodeName === 'A' ? t.parentElement : t
+
+let draggingSrc
 
 upGrid.ondragleave = e => {
   cancelDefault(e)
   upGrid.style.display = 'none'
 }
 
+// Handle hover
 document.ondragenter = e => {
-  if (isPicMode()) { return }
+  if (isEditorMode() || isPicMode()) { return }
   cancelDefault(e)
-
   resetBackgroundLinks()
 
-  if (isTextEvent(e) && (isFolder(e.target) || isFolder(e.target.firstChild))) {
-    const t = getLink(e)
-    if (!t) return
-    setBackgroundLinks(t.parentElement)
-  }
-
-  if (!isTextEvent(e)) {
+  // Display upload grid when uploading new elements
+  if (!draggingSrc) {
     upGrid.style.display = 'flex'
     e.dataTransfer.dropEffect = 'copy'
+  // Or highlight entry if drag and drop
+  } else if (draggingSrc) {
+    const t = getClosestRow(e.target)
+    isFolder(t.firstChild) && setBackgroundLinks(t)
   }
 }
 
+document.ondragstart = e => { draggingSrc = e.target.innerHTML }
+
 document.ondragend = e => resetBackgroundLinks()
 
 document.ondragover = e => {
@@ -212,27 +240,108 @@ document.ondragover = e => {
   return false
 }
 
-// Handle drop - upload or move
+// Handle drop
 document.ondrop = e => {
   cancelDefault(e)
   upGrid.style.display = 'none'
-  resetBackgroundLinks()
+  let t = getLink().firstChild
 
-  if (isTextEvent(e)) {
-    const t = e.target.classList.contains('fav') ? e.target : getLink(e)
-    if (!t || !t.innerText.endsWith('/')) return
-    e.dataTransfer.items[0].getAsString(s => {
-      const root = decodeURIComponent(s.replace(location.href, ''))
-      const dest = t.innerText + root
-      mvCall(prependPath(root), prependPath(dest), refresh)
-    })
-  } else {
+  // move to a folder
+  if (draggingSrc && t) {
+    const dest = t.innerHTML + draggingSrc
+    ensureMove() || mvCall(prependPath(draggingSrc), prependPath(dest), refresh)
+  // ... or upload
+  } else if (e.dataTransfer.items.length) {
     Array.from(e.dataTransfer.items).forEach(pushEntry)
   }
 
+  resetBackgroundLinks()
+  draggingSrc = null
   return false
 }
 
+// Notepad
+function saveText (cbok, cberr) {
+  const formData = new FormData()
+  formData.append(fileEdited, editor.innerText)
+  fetch(location.origin + '/post', {
+    method: 'POST',
+    credentials: 'include',
+    body: formData,
+    headers: new Headers({ 'gossa-path': encodeURIComponent(decodeURI(location.pathname)) })
+  }).then(() => {
+    toast.style.display = 'none'
+    cbok && cbok()
+  }).catch(() => {
+    toast.style.display = 'block'
+    cberr && cberr()
+  })
+}
+
+const isEditorMode = () => editor.style.display === 'block'
+const textTypes = ['.txt', '.rtf', '.md', '.log']
+const isTextFile = src => src && textTypes.find(type => src.toLocaleLowerCase().includes(type))
+let fileEdited
+
+function padOff () {
+  if (!isEditorMode()) { return }
+
+  saveText(() => {
+    clearInterval(window.padTimer)
+    window.onbeforeunload = null
+    resetView()
+    softPrev()
+    refresh()
+  }, () => {
+    alert('cant save!\r\nleave window open to resume saving\r\nwhen connection back up')
+  })
+
+  return true
+}
+
+async function displayPad (a) {
+  if (a) {
+    try {
+      fileEdited = a.innerHTML
+      const f = await fetch(a.href, {
+        credentials: 'include',
+        headers: new Headers({
+          'pragma': 'no-cache',
+          'cache-control': 'no-cache'
+        })
+      })
+      editor.innerText = await f.text()
+    } catch (error) {
+      return alert('cant read file')
+    }
+  } else {
+    fileEdited = prompt('new filename', '')
+    if (!fileEdited) { return }
+    fileEdited = isTextFile(fileEdited) ? fileEdited : fileEdited + '.txt'
+    editor.innerText = ''
+    saveText()
+    storeLastArrowSrc(location.href + fileEdited)
+  }
+
+  console.log('editing file', fileEdited)
+  editor.style.display = crossIcon.style.display = 'block'
+  table.style.display = 'none'
+  editor.focus()
+  window.onbeforeunload = warningMsg
+  window.padTimer = setInterval(saveText, 5000)
+  pushSoftState(fileEdited)
+}
+
+window.displayPad = displayPad
+
+// quit pictures or editor
+function resetView () {
+  table.style.display = 'table'
+  editor.style.display = pics.style.display = crossIcon.style.display = 'none'
+}
+
+window.quitAll = () => picsOff() || padOff()
+
 // Mkdir icon
 window.mkdirBtn = function () {
   const folder = prompt('new folder name', '')
@@ -258,7 +367,7 @@ window.rename = (e, commit) => {
     return
   }
 
-  const orig = e.key ? getASelected().innerText : getBtnA(e).innerText
+  const orig = e.key ? getASelected().innerHTML : getBtnA(e).innerHTML
   const chg = prompt('rename to', orig)
   if (chg && !isDupe(chg)) {
     mvCall(prependPath(orig), prependPath(chg), refresh)
@@ -341,32 +450,23 @@ function setImage () {
   history.replaceState({}, '', encodeURI(src.split('/').pop()))
 }
 
-function picsOn (ifImgSelected, href) {
-  href = href || getASelected().href
-
-  if (isPicMode() || (ifImgSelected && !isPic(href))) {
-    return false
-  }
-
-  if (isPic(href)) {
-    imgsIndex = allImgs.findIndex(el => el.includes(href))
-  }
-
+function picsOn (href) {
+  imgsIndex = allImgs.findIndex(el => el.includes(href))
   setImage()
+  table.style.display = 'none'
+  crossIcon.style.display = 'block'
   pics.style.display = 'flex'
+  pushSoftState(href.split('/').pop())
   return true
 }
 
-function picsOff (skip) {
+function picsOff () {
   if (!isPicMode()) { return }
-
-  history.replaceState({}, '', encodeURI(location.href.split('/').slice(0, -1).join('/') + '/'))
-  pics.style.display = 'none'
+  resetView()
+  softPrev()
   return true
 }
 
-window.picsToggle = () => isPicMode() ? picsOff() : picsOn()
-
 function picsNav (down) {
   if (!isPicMode()) { return false }
 
@@ -384,11 +484,11 @@ function picsNav (down) {
 let cuts = []
 function onPaste () {
   if (!cuts.length) { return refresh() }
+  const a = getASelected()
   const root = cuts.pop()
-  const pwd = decodeURIComponent(location.pathname)
-  const isFolderDest = getASelected().innerText.endsWith('/')
   const filename = root.split('/').pop()
-  const dest = isFolderDest ? pwd + getASelected().innerText : pwd
+  const pwd = decodeURIComponent(location.pathname)
+  const dest = isFolder(a) ? pwd + a.innerHTML : pwd
   mvCall(root, dest + filename, onPaste)
 }
 
@@ -419,48 +519,66 @@ function setCursorToClosestTyped () {
 }
 
 document.body.addEventListener('keydown', e => {
+  if (e.code === 'Escape') {
+    return resetBackgroundLinks() || picsOff() || padOff()
+  }
+
+  if (isEditorMode()) { return }
+
+  if (isPicMode()) {
+    switch (e.code) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        return prevent(e) || picsNav(false)
+
+      case 'Enter':
+      case 'Tab':
+      case 'ArrowRight':
+      case 'ArrowDown':
+        return prevent(e) || picsNav(true)
+    }
+    return
+  }
+
   switch (e.code) {
     case 'Tab':
     case 'ArrowDown':
-      return prevent(e) || picsNav(true) || moveArrow(true)
+      return prevent(e) || moveArrow(true)
 
     case 'ArrowUp':
-      return prevent(e) || picsNav(false) || moveArrow(false)
+      return prevent(e) || moveArrow(false)
 
     case 'Enter':
     case 'ArrowRight':
-      return prevent(e) || picsOn(true) || picsNav(true) || getASelected().click()
+      return prevent(e) || getASelected().click()
 
     case 'ArrowLeft':
-      return prevent(e) || picsNav(false) || prevPage(location.href + '../')
-
-    case 'Escape':
-      return prevent(e) || resetBackgroundLinks() || picsOff()
+      return prevent(e) || prevPage(location.href + '../')
   }
 
   // Ctrl keys
   if (e.ctrlKey || e.metaKey) {
     switch (e.code) {
       case 'KeyC':
-        return prevent(e) || isPicMode() || cpPath()
+        return prevent(e) || cpPath()
 
       case 'KeyX':
         return prevent(e) || onCut()
 
       case 'KeyV':
-        return prevent(e) || !confirm('move items?') || onPaste()
+        return prevent(e) || ensureMove() || onPaste()
 
       case 'Backspace':
-        return prevent(e) || isPicMode() || window.rm(e)
+        return prevent(e) || window.rm(e)
 
       case 'KeyE':
-        return prevent(e) || isPicMode() || window.rename(e)
+        return prevent(e) || window.rename(e)
 
       case 'KeyD':
-        return prevent(e) || isPicMode() || window.mkdirBtn()
+        return prevent(e) || window.mkdirBtn()
 
-      case 'KeyB':
-        return prevent(e) || toggleTheme() // eslint-disable-line
+      case 'KeyU':
+        return prevent(e) || manualUpload.click()
     }
   }
 
@@ -476,9 +594,8 @@ document.body.addEventListener('keydown', e => {
 function init () {
   allA = Array.from(document.querySelectorAll('a.list-links'))
   allImgs = allA.map(el => el.href).filter(isPic)
-  document.getElementsByClassName('icon-large-images')[0].style.display = allImgs.length > 0 ? 'inline-block' : 'none'
 
-  imgsIndex = 0
+  imgsIndex = softStatePushed = 0
   restoreCursorPos()
   console.log('Browsed to ' + location.href)
 

src/style.css

@@ -23,17 +23,20 @@
 }
 
 html {
+  color: #dfe6e9;
+  background-color: #2d3436;
   font-size: 1.5em;
   overflow-x: hidden;
 }
 
 a {
+  color: #dfe6e9;
   text-decoration: none;
   background-color: transparent !important;
 }
 
 a.linkSelected {
-  border-bottom: .01em solid #2d3436;
+  border-bottom: .01em solid #dfe6e9;
 }
 
 tr {
@@ -48,6 +51,10 @@ div, i {
   background-size: cover !important;
 }
 
+.highlight {
+  background-color: rgba(123, 123, 123, 0.5);
+}
+
 .icon {
   height: 25px;
   width: 25px;
@@ -67,6 +74,7 @@ div, i {
   font-size: 1.15em;
   font-weight: bold;
   padding-left: .5em;
+  filter: invert(100%) !important;
 }
 
 table {
@@ -119,11 +127,20 @@ h1 {
   margin-left: 5px;
 }
 
+#toast {
+  top: 7px;
+  position: absolute;
+  right: 70px;
+  font-style: italic;
+  width: intrinsic;
+  width: -moz-max-content;
+  width: -webkit-max-content;
+}
 
-#picsToggleCinema {
+#quitAll {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoElEQVRYhe2Wuw3AIAxEbZRRMwFlJiBLMCBDcClCCwq2gRRc7/cO8RFEOzt/DAAPIABwBixXWL5nKOBN1JQo8lhYQTooKqFmaAAWCxCDzOQSoLm8BzxM/kUwXN4STZM3SsyTV0qo5HMaW2bpFiw9hEuv4dKHqAdsXkICNCuhAalLWKxCxcDEL9lRmU1EdBPRxcxZWoCZM4Cz8JKUs7MzNA81r4TL7qAyXAAAAABJRU5ErkJggg==");
   position: fixed;
-  left: 20px;
+  right: 20px;
   top: 20px;
   width: 2em;
   height: 2em;
@@ -131,6 +148,10 @@ h1 {
   z-index: 101;
 }
 
+.uploading-table {
+  padding-bottom: 80px;
+}
+
 #progress {
   width: 99%;
   left: 0.5%;
@@ -140,6 +161,7 @@ h1 {
   padding-bottom: 10px;
   max-height: 50%;
   overflow-x: hidden;
+  background-color: #2d3436;
 }
 
 #dlBarName {
@@ -175,10 +197,34 @@ h1 {
   font-size: 4em;
   font-family: Helvetica;
   color: green;
-  opacity: 0.8;
-  background-color: rgba(123, 123, 123, 0.2)
+  opacity: 1;
+  background-color: rgba(123, 123, 123, 0.2);
+  padding: 20px;
 }
 
+#drop-grid::after {
+  content: "Drop here to upload";
+}
+
+#text-editor {
+  font-family: monospace;
+  background-color: #2d3436;
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  z-index: 100;
+  overflow-y: auto;
+  word-wrap: anywhere;
+  padding: 20px;
+  outline: none;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  border-bottom: 20px #2d3436 solid;
+}
+
+
 #pics {
   user-select: none;
   -webkit-tap-highlight-color: transparent;
@@ -226,10 +272,6 @@ h1 {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJFBMVEUAAACZmQAICAj4+Pj//5nMzGb/+/AAAAD/zJkzMwAAAP////+gebovAAAAAXRSTlMAQObYZgAAAAFiS0dECx/XxMAAAAAHdElNRQfiBhgXAy5jJ3EAAAAA1klEQVQoz42RMQ7CMBAEQ0mZIIp0/AGecJFO7kC2FKXmATxikaxUtPS48Ss5XxwnoWI7j3f3fHJV/aFa1KzOuwsRdacFHCjpthjuChbL0U261ipJnDd65IokJhCaGTCzEOZ25SAwaAUgASoOyFFzxWEsEkQGz2BskFJfHMMwWB07AVAXg/QwZscYPzHqXAVicDE4eJ47QOOoHexzhINxQRxIEVkC6I217OGLg9DLIn7qkHHEWiAvEwAdJyQlNKK3gKfcITuxZjzrO+qt2mr/3uj1z1//6AsSG3mwAQQN9wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNi0yNFQyMzowMzo0Ni0wNDowMFfZ8nYAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDYtMjRUMjM6MDM6NDYtMDQ6MDAmhErKAAAAAElFTkSuQmCC");
 }
 
-.icon-large-images {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJ1BMVEUAAACAgIAAAAD////AwMAAgIAAAIAA////AP8AgAD//wCAgACAAICCVHrWAAAAAXRSTlMAQObYZgAAAAFiS0dEAxEMTPIAAAAHdElNRQfiBhoANySLuBaXAAAAvUlEQVQoz2NgIB0IogIhBmFjFOBEpkAoDCRDBcLDw91LSkpKS2ECISXlIODuDlfhXl5eDBQpgQlElFcWmy+fWQ5XEVm+07y4cs/0CrjArpmbzW1m7twJE4ieOXv2zpOT5syEq5i0U3P2zJnamnAVJzXnZGaqTZsEV5E0U81l1apVK+DWLlm1xGuVl5cX3KVA9hIgWA1X4bF6xa5dXVta4Cq2tLR4e3t4e8AE0mAgmcwgFHFBAU4MSmiAjLgGACNod0RkBHb1AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTA2LTI2VDAwOjU1OjM2LTA0OjAw+lGqagAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wNi0yNlQwMDo1NTozNi0wNDowMIsMEtYAAAAASUVORK5CYII=");
-}
-
 .icon-large-sad-server {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAHlBMVEUAAACAgIDAwMAAAAD///8A/wAAgAD/AACAgAD//wAxEuVaAAAAAXRSTlMAQObYZgAAAAFiS0dEBI9o2VEAAAAHdElNRQfiBhoALCLL7Xg4AAAAy0lEQVQ4y+WSPQ7CMAyFHbUSa38G5iLBHCkXKBUnQOICDMwgBnMDuEJvi00TKM3L0IWFN/rLs/zsEP2BSiCtm1WsxgqoAChtwqAAGgSYXaztC3So0xywPuwx2JyOM1uNwWRN1RtMUnQ/alVTAtgEqPWw6OJ6WHJA358lGx7GMs0swHwWsGCeAikJEAwst8d9bCh8kCVzz3zxQQpDbe53x6qwyDYnm/lQ0oevIaHNPj2dAEdIHM8aBgbDDgZo0dDQokWwEV8DlqE0sjwBakRwyV+dKtoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDYtMjZUMDA6NDQ6MzQtMDQ6MDBDgg+9AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTA2LTI2VDAwOjQ0OjM0LTA0OjAwMt+3AQAAAABJRU5ErkJggg==");
 }
@@ -238,6 +280,10 @@ h1 {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAElBMVEUAAAAAAAAAgACAgID////AwMAbJqpVAAAAAXRSTlMAQObYZgAAAAFiS0dEBI9o2VEAAAAHdElNRQfiBhoANRyRjMyLAAAArElEQVQoz22R0Q3EIAiGNbfAeU4gad+9sMGFLtC4/yyngBaa+tCELz+fFkJ4PimltyljAoCSrvoDfBbRGkC74qyh3AIauQIacaCajo1+ANmARqcHRP2T61LsdIgkWoUFrICCC7Bigo1OUUzQK1GslkaiGIDfsZMoICvokcODXRTjpXpvU0W9/T5WP7GhcDNF9EPN3GH2ooEQvrI51EAIL+y7zbgCg/Cx68eZ/wNuLjeFQzbY1AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNi0yNlQwMDo1MzoyOC0wNDowMGvaoe4AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDYtMjZUMDA6NTM6MjgtMDQ6MDAahxlSAAAAAElFTkSuQmCC");
 }
 
+.icon-large-pad {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAGFBMVEUAAAAAAACAgID////AwMAAAL8AAP///wCsLlssAAAAAXRSTlMAQObYZgAAAAFiS0dEAxEMTPIAAAAHdElNRQfiBhoAOCQMIApYAAAAvUlEQVQoz22Ryw7CIBREqYl7xlb3Pj7APpQ1iaZbXcjaxBTXhCi/bx+2XBomd8PJDDcMjCUc43DWab8rpunIIi/TcbYyCkovKdltBpbPGVAtuHjJqz6GDvUOI1d9DiPqpcMt6tsEkXyjwy04NWEkhWooEMD6wUnEGuBOHidEBXACrKsNuuf/A7Wr3AekD2trB1JQe4MzUvqIK4BMeofIV0OFIzBpOYG+qmxoLNJ6DNCSow528I6s//4EXu3xB1FNX4O6vHKSAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTA2LTI2VDAwOjU2OjM2LTA0OjAwEWYRaQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wNi0yNlQwMDo1NjozNi0wNDowMGA7qdUAAAAASUVORK5CYII=");
+}
+
 .icon-large-upload {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAXVBMVEUAAAAzzDPM/8z///8z/2YzmQAzZgAzZv8Amf8AAAAzzP+ZzP8AgADM//8z//8AMwAzzGaZmQD4+Pj//5kAZgD/zGYzmTP/zJmAgAAzMwDMZjPMmTP//wBmMwDwyqYv7S31AAAAAXRSTlMAQObYZgAAAAFiS0dEAxEMTPIAAAAHdElNRQfiBhoAOCALTc5BAAAB3klEQVRIx5WUCZKDIBBFAQXEbTTRQbPM/Y85TQMKClm+piplvcdv0YSQINSFfBQAWcHKsqSUc/EBbmnAgedCyje8Xxxxw782LI+zCPORVSWlesPj4qKqETdC3nA8R76uasBr+cJoCmHGdzwadSsxaaPpCiHcPJ6naLQqw3d9J2jEix/AW540msIYZnMMX/et5xnPCNjQC+SrvoUvlh8GzlWW73tcH+YRdk+tIFRqoq6jwPf+Diph5mcjJiEAThkNeQb4MF6uJmej6ShjrJymnR+GjU8YDfLwJk2Wr9DY+LNBi4DHSMHGOcjo418k5Es+TY6vxO94SUU5oUQDXg1QpDlEOBFEu3MOjJKCsfioUNBe0fNqBcfTZaMWdYkKXMUmIF8uAbSo0zx7A+GH9SPDwNqegWD4Oc6yx1dsAuHw61ku2ShsCRoImY4T6fCYlZ0oEMjEl8NG7rd6nVd9bAAjbrCOb1i1PgkkELR7VnpveCV4OLiH1W9dpiGaR5sGH5IQjvPgJKn/Disc9ke755UXzjQ23NTdJRb0NZ5ne16Pp8+HDSEYCPbFvMb0cfuTu3QwcoKOnpf+umFPRpjzSQpkzYe8z/OuPqC+E+5hbhAVXUmsGebx93eLLjzf1L1i/gHK3l4JVuA9nAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNi0yNlQwMDo1NjozMi0wNDowMOUpNXoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDYtMjZUMDA6NTY6MzItMDQ6MDCUdI3GAAAAAElFTkSuQmCC");
   margin-bottom: 3px;

src/template.go

@@ -2,36 +2,32 @@
 <html>
 <head>
     <meta charset="utf-8">
+    <meta name="theme-color" content="#070909">
+    <meta name="msapplication-navbutton-color" content="#070909">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="viewport" content="width=device-width">
     <title>{{.Title}}</title>
     <link href="data:image/png;base64,favicon_will_be_here" rel="icon" type="image/png" />
     <style type="text/css">css_will_be_here</style>
-    <style type="text/css" id="theme">theme_will_be_here</style>
-    <script>
-        const theme = document.getElementById('theme')
-        const themeNow = () => localStorage.getItem('theme')
-        const setTheme = () => { theme.disabled = themeNow() === 'regular' }
-        const toggleTheme = () => localStorage.setItem('theme', (themeNow() === 'regular' ? 'alt' : 'regular')) || setTheme()
-        setTheme()
-    </script>
     <script>window.onload = function () { js_will_be_here }</script>
 </head>
 
 <body>
-    <div id="drop-grid"> Drop here to upload </div>
+    <div style="display: none;" onclick="window.quitAll()" id="quitAll"><i style="display: none;" id="toast">cant reach server</i></div>
+    <div style="display: none;" contenteditable="true" id="text-editor"></div>
+    <div id="drop-grid"></div>
     <input type="file" id="clickupload" style="display:none"/>
 
     <h1>.{{.Title}}</h1>
 
     <div id="icHolder">
         <div style="display:none;" onclick="document.getElementById('clickupload').click()" class="ic icon-large-upload manualUp"></div>
-        <div style="display:none;" class="ic icon-large-images" onclick="window.picsToggle()"></div>
+        <div onclick="window.displayPad()" class="ic icon-large-pad"></div>
         <div class="ic icon-large-folder" onclick="window.mkdirBtn()"></div>
     </div>
 
-    <div id="pics" style="display:none;">
-        <div onclick="window.picsToggle()" id="picsToggleCinema"></div> <img onclick="window.picsNav()" id="picsHolder" />
-    </div>
+    <div id="pics" style="display:none;"> <img onclick="window.picsNav()" id="picsHolder" /></div>
 
     <table>
     {{range .RowsFolders}}

src/theme.css

@@ -1,12 +0,0 @@
-html, a {
-    background-color: #2d3436;
-    color: #dfe6e9;
-}
-
-.arrow {
-    filter: invert(100%) !important;
-}
-
-a.linkSelected {
-  border-bottom: .01em solid #dfe6e9;
-}