init

assets/app.js

@@ -0,0 +1,57 @@
+window.onload = function () {
+  // auto-submit by click file input
+  document.getElementById('upload_files').onchange = (e) => {
+    upload_files(e.target);
+  };
+};
+
+function upload_files(files_upload) {
+  let form_data = new FormData();
+  let upload_button = document.getElementById('upload_button');
+
+  update_upload_status(`Загружается ${files_upload.files.length} файл(а, ов)`);
+  for (var i = 0; i < files_upload.files.length; i++) {
+    form_data.append('files', files_upload.files[i]);
+  }
+  upload_button.classList.add('d-none');
+  files_upload.value = null;
+
+  let request = new XMLHttpRequest();
+  request.open('POST', '/upload');
+
+  request.upload.addEventListener('progress', function (e) {
+    let percent_completed = (e.loaded / e.total) * 100;
+    change_upload_state(Math.floor(percent_completed));
+  });
+
+  request.addEventListener('load', function (e) {
+    update_upload_status();
+    upload_button.classList.remove('d-none');
+  });
+
+  request.send(form_data);
+}
+
+function change_upload_state(percent_completed) {
+  let upload_state = document.getElementById('upload_state');
+  upload_state.classList.remove('d-none');
+
+  if (percent_completed == 100) {
+    upload_state.childNodes[1].style.width = '0%';
+    upload_state.setAttribute('aria-valuenow', 0);
+    upload_state.classList.add('d-none');
+
+    update_upload_status('Сохранение файлов...');
+
+    return;
+  } else {
+    upload_state.childNodes[1].style.width = `${percent_completed}%`;
+    upload_state.setAttribute('aria-valuenow', percent_completed);
+  }
+}
+
+function update_upload_status(message = '') {
+  let upload_status = document.getElementById('upload_status');
+
+  upload_status.innerText = message;
+}

assets/styles.css

@@ -0,0 +1,34 @@
+@import url('/bootstrap.min.css');
+
+body {
+	text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
+	box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
+}
+
+.cover-container { max-width: 42em; }
+
+.btn-light,
+.btn-light:hover,
+.btn-light:focus {
+	color: #333;
+	text-shadow: none;
+}
+
+.nav-masthead .nav-link {
+	color: rgba(255, 255, 255, .5);
+	border-bottom: .25rem solid transparent;
+}
+
+.nav-masthead .nav-link:hover,
+.nav-masthead .nav-link:focus {
+	border-bottom-color: rgba(255, 255, 255, .25);
+}
+
+.nav-masthead .nav-link + .nav-link {
+	margin-left: 1rem;
+}
+
+.nav-masthead .active {
+	color: #fff;
+	border-bottom-color: #fff;
+}