diff --git a/public/cloud.html b/public/cloud.html
index e3c792f..3019b51 100644
--- a/public/cloud.html
+++ b/public/cloud.html
@@ -3,58 +3,117 @@
 <head>
     <title>Cloud Upload Icon</title>
     <style>
-        .cloud-icon {
+        #box {
+            width: 20rem;
+            height: 5rem;
+            backdrop-filter: blur(5px);
+            background-color: rgb(252, 252, 252);
+            border-radius: 1em;
+            border: 1px solid rgb(241, 241, 241);
             position: relative;
-            width: 100px;
-            height: 100px;
-            border-radius: 50%;
-            background-color: #fff;
-            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
+            user-select: none;
+            cursor: pointer;
+            margin: 1rem 2rem;
+        }
+        #box:hover > #drop {
+            display: block;
         }
 
-        .cloud-icon::before,
-        .cloud-icon::after {
+        #cloud {
+            width: 82px;
+            height: 30px;
+            background: #e7f4fd;
+            background: -webkit-linear-gradient(top,#e7f4fd 5%,#ceedfd 100%);
+            border-radius: 25px;
+            position: relative;
+            margin: 33px auto 5px;
+        }
+        #cloud:before {
+            width: 45px;
+            height: 45px;
+            top: -22px;
+            right: 12px;
+            border-radius: 50px;
+        }
+        #cloud:after {
+            width: 25px;
+            height: 25px;
+            top: -12px;
+            left: 12px;
+            border-radius: 25px;
+        }
+        #cloud:before,
+        #cloud:after {
             content: "";
+            background: #e7f4fd;
             position: absolute;
-            background-color: #fff;
+            z-index: -1;
+        }
+        #cloud span {
+            width: 87px;
+            position: absolute;
+            bottom: -2px;
+            background: #000;
+            z-index: -1;
+            box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
             border-radius: 50%;
-            opacity: 0.7;
-            animation: cloud 2s ease-in-out infinite;
         }
 
-        .cloud-icon::before {
-            width: 80px;
-            height: 80px;
-            top: -30px;
-            left: -30px;
-        }
-
-        .cloud-icon::after {
-            width: 100px;
-            height: 100px;
-            top: -50px;
-            right: -50px;
-            animation-delay: 1s;
-        }
-
-        @keyframes cloud {
-            0% {
-                transform: translate(0, 0);
-            }
-            50% {
-                transform: translate(10px, -10px);
-            }
-            100% {
-                transform: translate(0, 0);
-            }
+        #drop {
+            width: 100%;
+            color: #999;
+            line-height: 5rem;
+            text-align: center;
+            position: absolute;
+            top: 0;
+            display: none;
         }
     </style>
+    <script>
+        onload = () => {
+            const file = document.createElement('input')
+            file.type = 'file'
+            file.onchange = event => {
+                for (const i of file.files) {
+                    console.log('已获取文件：', i)
+                }
+                file.value = null
+            }
+
+            box.onclick = () => file.click()
+
+            let dragStats = 0
+            document.ondragover = e => {
+                e.preventDefault()
+                if(dragStats) return
+                drop.style.display = 'block'
+            }
+
+            document.ondragleave = e => {
+                e.preventDefault()
+                if(dragStats) return
+                dragStats = setTimeout(() => {
+                    dragStats = 0
+                    drop.style.display = ''
+                }, 1000)
+            }
+
+            document.ondrop = e => {
+                e.preventDefault()
+                dragStats = 0
+                drop.style.display = ''
+                const files = e.dataTransfer.files
+                for (const i of files) {
+                    console.log('已获取文件：', i)
+                }
+            }
+        }
+    </script>
 </head>
 <body>
-    <div class="cloud-icon"></div>
+    <div id="box">
+        <div id="cloud"><span></span></div>
+        <span id="drop">点击或拖拽音乐到此处共享您的音乐</span>
+    </div>
 </body>
 </html>
diff --git a/public/weigets.js b/public/weigets.js
index ef73bd7..4b39fa9 100644
--- a/public/weigets.js
+++ b/public/weigets.js
@@ -73,7 +73,7 @@ export function UploadMusic(options) {
             input.click()
         },
         children: [
-            // 绘制一个云朵上传图标(放弃了...)
+            // 绘制一个云朵上传图标(别放弃...还有我呢!)
             createElement({
                 style: {
                     position: 'absolute',
