add 'load db' illustration and animation #19

src/assets/styles/buttons.css

@@ -5,6 +5,7 @@ button {
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
+  font-family: Open-Sans, Helvetica, Arial, sans-serif;
 }
 
 button:focus {

src/components/DbUpload.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="db-upload-container">
     <label for="assetsFieldHandle">
-      <div class="drop-area" @dragover="dragover" @dragleave="dragleave" @drop="drop">
+      <div
+        class="drop-area"
+        @dragover.prevent="$emit('dragover')"
+        @dragleave="$emit('dragleave')"
+        @drop="drop"
+      >
         <input
           type="file"
           id="assetsFieldHandle"
@@ -31,22 +36,10 @@ export default {
           }
         })
     },
-    dragover (event) {
-      event.preventDefault()
-      // TODO: Add some visual stuff to show the user can drop its files
-      if (!event.currentTarget.classList.contains('bg-green-300')) {
-        event.currentTarget.classList.remove('bg-gray-100')
-        event.currentTarget.classList.add('bg-green-300')
-      }
-    },
-    dragleave (event) {
-      // Clean up
-      event.currentTarget.classList.add('bg-gray-100')
-      event.currentTarget.classList.remove('bg-green-300')
-    },
     drop (event) {
       event.preventDefault()
       this.$refs.file.files = event.dataTransfer.files
+      this.$emit('drop')
       this.loadDb()
         .then(() => {
           // Clean up

src/views/Home.vue

@@ -1,7 +1,32 @@
 <template>
   <div id="dbloader-container">
-    <h1>Sqliteviz</h1>
+    <db-upload @dragover="state='dragover'" @dragleave="state=''" @drop="state='drop'"/>
-    <db-upload />
+    <div id="img-container">
+      <img id="drop-file-top-img" :src="require('@/assets/images/dropFileTop.png')" />
+      <img
+        id="left-arm-img"
+        :class="{'swing': state === 'dragover'}"
+        :src="require('@/assets/images/leftArm.png')"
+      />
+      <img
+        id="file-img"
+        :class="{
+          'swing': state === 'dragover',
+          'fly': state === 'drop',
+        }"
+        :src="require('@/assets/images/file.png')"
+      />
+      <img id="drop-file-bottom-img" :src="require('@/assets/images/dropFileBottom.png')" />
+      <img id="body-img" :src="require('@/assets/images/body.png')" />
+      <img
+        id="right-arm-img"
+        :class="{'swing': state === 'dragover'}"
+        :src="require('@/assets/images/rightArm.png')"
+      />
+    </div>
+    <div id="note">
+      Sqliteviz is fully client-side. Your database never leaves your computer.
+    </div>
     <button id ="skip" class="secondary" @click="$router.push('/editor')">
       Skip database loading for now
     </button>
@@ -13,7 +38,12 @@ import dbUpload from '@/components/DbUpload'
 
 export default {
   name: 'Home',
-  components: { dbUpload }
+  components: { dbUpload },
+  data () {
+    return {
+      state: ''
+    }
+  }
 }
 </script>
 
@@ -24,21 +54,106 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
 }
 
-h1 {
+#note {
-  color: var(--color-accent);
+  position: absolute;
+  bottom: calc(15% + 36px);
+  font-size: 13px;
+  color: var(--color-text-base);
 }
-
 #skip {
   position: absolute;
-  bottom: 50px;
+  bottom: 5%;
+}
+>>>.db-upload-container {
+  position: absolute;
+  top: 10%;
+}
+#img-container {
+  position: absolute;
+  top: calc(10% + 50px);
+  width: 450px;
+  height: 338px;
+  pointer-events: none;
+}
+#drop-file-top-img {
+  width: 450px;
+  height: 171px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+#drop-file-bottom-img {
+  width: 450px;
+  height: 167px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+#body-img {
+  width: 74px;
+  position: absolute;
+  top: 94.05px;
+  left: 46px;
+}
+#right-arm-img {
+  width: 106px;
+  position: absolute;
+  top: 110.05px;
+  left: 78px;
+}
+#left-arm-img {
+  width: 114px;
+  position: absolute;
+  top: 69.05px;
+  left: 69px;
+}
+#file-img {
+  width: 125px;
+  position: absolute;
+  top: 15.66px;
+  left: 152px;
 }
 
 >>>.drop-area {
-  width: 628px;
+  width: 706px;
-  height: 490px;
+  height: 482px;
   padding: 0 150px;
+  position: relative;
+}
+
+>>>.drop-area .text {
+  position: absolute;
+  bottom: 42px;
+  max-width: 300px;
+}
+
+.swing {
+    animation: swing ease-in-out 0.6s infinite alternate;
+}
+#left-arm-img.swing {
+  transform-origin: 9px 83px;
+}
+#right-arm-img.swing {
+  transform-origin: 0 56px;
+}
+#file-img.swing {
+   transform-origin: -74px 139px;
+}
+@keyframes swing {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(-7deg); }
+}
+
+#file-img.fly {
+  animation: fly ease-in-out 1s 1 normal;
+  transform-origin: center center;
+  top: 183px;
+  left: 225px;
+  transition: top 1s ease-in-out, left 1s ease-in-out;
+}
+@keyframes fly {
+    100% { transform: rotate(360deg) scale(0.5); }
 }
 </style>