diff --git a/app/src/components/UploadLayer.vue b/app/src/components/UploadLayer.vue index 4dbd1057f1fad05944cca048eda548b7cb74916e..41bfe5e2514198fe84ef4055675c8d11df5f903c 100644 --- a/app/src/components/UploadLayer.vue +++ b/app/src/components/UploadLayer.vue @@ -12,7 +12,69 @@ /> <!-- --> <p>Drop media here to upload.</p> - + <svg + class="icon" + xmlns="http://www.w3.org/2000/svg" + width="50" + height="50" + > + <g> + <circle cx="6.5" cy="30.5" r="5.5" fill="grey" /> + <circle cx="40.5" cy="30.5" r="5.5" fill="grey" /> + <circle cx="17.5" cy="27.5" r="8.5" fill="grey" /> + <circle cx="28.5" cy="25.5" r="10.5" fill="grey" /> + <rect + fill-rule="evenodd" + clip-rule="evenodd" + x="6" + y="31" + width="35" + height="5" + fill="grey" + /> + <circle + cx="9.5" + cy="25.5" + r="4.5" + fill="white" + stroke="grey" + stroke-width="2" + /> + <circle + cx="43.5" + cy="25.5" + r="4.5" + fill="white" + stroke="grey" + stroke-width="2" + /> + <circle + cx="20.5" + cy="22.5" + r="7.5" + fill="white" + stroke="grey" + stroke-width="2" + /> + <circle + cx="31.5" + cy="20.5" + r="9.5" + fill="white" + stroke="grey" + stroke-width="2" + /> + <rect x="9" y="23" width="35" height="6" fill="white" /> + <rect x="9" y="23" width="12" height="5" fill="white" /> + <rect x="18" y="21" width="9" height="6" fill="white" /> + <rect x="17" y="17" width="21" height="5" fill="white" /> + <rect x="21" y="18" width="10" height="4" fill="white" /> + <path + d="M30.5303 15.4697C30.2374 15.1768 29.7626 15.1768 29.4697 15.4697L24.6967 20.2426C24.4038 20.5355 24.4038 21.0104 24.6967 21.3033C24.9896 21.5962 25.4645 21.5962 25.7574 21.3033L30 17.0607L34.2426 21.3033C34.5355 21.5962 35.0104 21.5962 35.3033 21.3033C35.5962 21.0104 35.5962 20.5355 35.3033 20.2426L30.5303 15.4697ZM30.75 28L30.75 16L29.25 16L29.25 28L30.75 28Z" + fill="grey" + /> + </g> + </svg> <textarea id="ipfshash" v-model="copytext"></textarea> <div class="btn-row"> <button v-on:click.prevent="copyDone()" id="copyme" hidden> @@ -35,7 +97,69 @@ /> <!-- --> <p>Drop media here to upload.</p> - + <svg + class="icon" + xmlns="http://www.w3.org/2000/svg" + width="50" + height="50" + > + <g> + <circle cx="6.5" cy="30.5" r="5.5" fill="grey" /> + <circle cx="40.5" cy="30.5" r="5.5" fill="grey" /> + <circle cx="17.5" cy="27.5" r="8.5" fill="grey" /> + <circle cx="28.5" cy="25.5" r="10.5" fill="grey" /> + <rect + fill-rule="evenodd" + clip-rule="evenodd" + x="6" + y="31" + width="35" + height="5" + fill="grey" + /> + <circle + cx="9.5" + cy="25.5" + r="4.5" + fill="white" + stroke="grey" + stroke-width="2" + /> + <circle + cx="43.5" + cy="25.5" + r="4.5" + fill="white" + stroke="grey" + stroke-width="2" + /> + <circle + cx="20.5" + cy="22.5" + r="7.5" + fill="white" + stroke="grey" + stroke-width="2" + /> + <circle + cx="31.5" + cy="20.5" + r="9.5" + fill="white" + stroke="grey" + stroke-width="2" + /> + <rect x="9" y="23" width="35" height="6" fill="white" /> + <rect x="9" y="23" width="12" height="5" fill="white" /> + <rect x="18" y="21" width="9" height="6" fill="white" /> + <rect x="17" y="17" width="21" height="5" fill="white" /> + <rect x="21" y="18" width="10" height="4" fill="white" /> + <path + d="M30.5303 15.4697C30.2374 15.1768 29.7626 15.1768 29.4697 15.4697L24.6967 20.2426C24.4038 20.5355 24.4038 21.0104 24.6967 21.3033C24.9896 21.5962 25.4645 21.5962 25.7574 21.3033L30 17.0607L34.2426 21.3033C34.5355 21.5962 35.0104 21.5962 35.3033 21.3033C35.5962 21.0104 35.5962 20.5355 35.3033 20.2426L30.5303 15.4697ZM30.75 28L30.75 16L29.25 16L29.25 28L30.75 28Z" + fill="grey" + /> + </g> + </svg> <textarea id="ipfshash" v-model="copytext"></textarea> <div class="btn-row"> <button v-on:click.prevent="copyDone()" id="copyme" hidden> @@ -272,6 +396,10 @@ export default { </script> <style lang="css" scoped> +.icon { + margin-top: -1.5em; + margin-left: 4.5em; +} .fileInput { display: none; }