Started designing HTML/CSS for receive mode

share/static/css/style.css

@@ -45,10 +45,11 @@ header .right ul li {
   font-size: 1rem;
 }
 
-header .button {
+.button {
   color: #ffffff;
   background-color: #4e064f;
   padding: 10px;
+  border: 0;
   border-radius: 5px;
   text-decoration: none;
   margin-left: 1rem;
@@ -86,3 +87,31 @@ table.file-list td img {
 table.file-list td:last-child {
   width: 100%;
 }
+
+.upload-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+.upload {
+  text-align: center;
+}
+
+.upload img {
+  width: 120px;
+  height: 120px;
+}
+
+.upload .upload-header {
+  font-size: 30px;
+  font-weight: normal;
+  color: #666666;
+  margin: 0 0 10px 0;
+}
+
+.upload .upload-description {
+  color: #666666;
+  margin: 0 0 20px 0;
+}

share/templates/receive.html

@@ -12,5 +12,17 @@
         <h1>OnionShare</h1>
     </header>
 
+    <div class="upload-wrapper">
+      <div class="upload">
+        <p><img class="logo" src="/static/img/logo_large.png" title="OnionShare"></p>
+        <p class="upload-header">Send Files</p>
+        <p class="upload-description">Select the files you want to send, then click "Send Files"...</p>
+        <form method="post" enctype="multipart/form-data" action="/{{ slug }}/">
+           <p><input type="file" multiple /></p>
+           <p><input type="submit" class="button" value="Upload Files" /></p>
+        </form>
+      </div>
+    </div>
+
   </body>
 </html>