<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   /** base styles **/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  background: url("https://cdn.arnellebalane.com/images/codepen-day41/background.png") center center no-repeat;
  background-size: cover;
}
ul {
  list-style: none;
}
.hidden {
  display: none !important;
}
/** base widget **/
.widget {
  display: flex;
  flex-direction: column;
  width: 35rem;
  height: 48rem;
  background-color: #fff;
}
/** widget header **/
.widget__header {
  display: flex;
  flex-shrink: 0;
  padding: 3rem;
  background-color: #333;
}
#browse {
  position: fixed;
  top: 200vh;
}
#upload {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border: 1px dashed #484848;
  margin-left: 3rem;
  font-size: 0;
  background: transparent url("https://cdn.arnellebalane.com/images/codepen-day41/upload.png") center center no-repeat;
  cursor: pointer;
}
#upload[data-action="browse"] {
  background-image: url("https://cdn.arnellebalane.com/images/codepen-day41/plus.png");
  background-size: 45%;
}
/** upload destination dropdown **/
.ce-select-container {
  width: 100%;
}
.ce-select-widget {
  padding: 0 2rem;
  color: #fff;
  background-color: rgba(255,255,255,0.05);
  border-radius: 2px;
}
.ce-select-value {
  font-weight: bold;
  line-height: 6rem;
}
.ce-select-toggle {
  border-color: #646464;
  border-width: 2px;
}
.ce-select-dropdown {
  top: 6rem;
}
.ce-select-option {
  padding: 1rem 2rem;
}
/** files list **/
.files-list {
  padding: 3rem;
  overflow: auto;
}
/** file widget **/
.file {
  display: flex;
  flex-wrap: wrap;
}
.file:not(:last-of-type) {
  margin-bottom: 3rem;
}
.file__thumbnail {
  width: 4.5rem;
  height: 3.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.file__details {
  margin-left: 1rem;
}
.file__name {
  font-size: 1.6rem;
  word-wrap: break-word;
  color: #333;
}
progress {
  flex-shrink: 0;
  width: 100%;
}
/** upload info **/
.upload-info {
  margin-top: 0.5rem;
  font-size: 1.4rem;
}
.upload-status {
  color: #666;
}
.upload-speed {
  margin-left: 0.5rem;
  color: #999;
}
.upload-speed::before {
  content: "( ";
}
.upload-speed::after {
  content: " )";
}
.upload-progress {
  -webkit-appearance: none;
  height: 2px;
  margin-top: 2rem;
}
.upload-progress::-webkit-progress-bar {
  background-color: #e5e5e5;
}
.upload-progress::-webkit-progress-value {
  background-color: #a3d39c;
}
  </style>
 </head>
 <body translate="no">
  <div class="widget">
   <header class="widget__header">
    <input id="browse" multiple="multiple" type="file"/>
    <select class="ce-select" id="destination" name="destination">
     <option value="1">
      100 Days UI Challenge
     </option>
     <option value="2">
      Pictures
     </option>
     <option value="3">
      Documents
     </option>
    </select>
    <button data-action="browse" id="upload">
     Upload Files
    </button>
   </header>
   <ul class="files-list">
   </ul>
  </div>
  <li class="file" data-file-id="{{ id }}">
   <img alt="{{ name }}" class="file__thumbnail" src="{{ thumbnail }}"/>
   <div class="file__details">
    <h3 class="file__name">
     {{ name }}
    </h3>
    <p class="upload-info">
     <span class="upload-status">
      {{ size }}
     </span>
     <span class="upload-speed">
      {{ speed }}
     </span>
    </p>
   </div>
   <progress class="upload-progress" max="100" min="0" value="{{ progress }}">
   </progress>
  </li>
 </body>
</html>
