init music

vihan85 · Jul 7, 2022 · bde21ff · bde21ff
1 parent a06482f
commit bde21ff
Show file tree

Hide file tree

Showing 19 changed files with 986 additions and 100 deletions.
diff --git a/ES6/import/app.js b/ES6/import/app.js
@@ -0,0 +1,7 @@
+import case1 from './case1.js'
+import { case2 as loc, type3 } from './case2.js'
+
+console.log('case2: ', loc);
+console.log('type3: ', type3);
+
+case1('test logger')
diff --git a/ES6/import/case1.js b/ES6/import/case1.js
@@ -0,0 +1,6 @@
+export default function case1(value) {
+    console.log(value)
+}
+
+// cach 2
+// export default logger
diff --git a/ES6/import/case2.js b/ES6/import/case2.js
@@ -0,0 +1,6 @@
+export function case2(value) {
+    console.log(value)
+}
+export const type1 = 'type1';
+export const type2 = 'type2';
+export const type3 = 'type3';
diff --git a/ES6/import/index.html b/ES6/import/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    TEST IMPORT
+    <script type="module" src="./app.js"></script>
+</body>
+</html>
diff --git a/ES6/import/logger.js b/ES6/import/logger.js
@@ -0,0 +1,6 @@
+export function logger(value) {
+    console.log(value)
+}
+export const type1 = 'type1';
+export const type2 = 'type2';
+export const type3 = 'type3';
diff --git a/F8-Musicplayer/app.css b/F8-Musicplayer/app.css
@@ -0,0 +1,189 @@
+:root {
+    --primary-color: #ec1f55;
+    --text-color: #333;
+  }
+
+  * {
+    padding: 0;
+    margin: 0;
+    box-sizing: inherit;
+  }
+
+  body {
+    background-color: #f5f5f5;
+  }
+
+  html {
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+  }
+
+  .player {
+    position: relative;
+    max-width: 480px;
+    margin: 0 auto;
+  }
+
+  .player .icon-pause {
+    display: none;
+  }
+
+  .player.playing .icon-pause {
+    display: inline-block;
+  }
+
+  .player.playing .icon-play {
+    display: none;
+  }
+
+  .dashboard {
+    padding: 16px 16px 14px;
+    background-color: #fff;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    max-width: 480px;
+    border-bottom: 1px solid #ebebeb;
+  }
+
+  /* HEADER */
+  header {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  header h4 {
+    color: var(--primary-color);
+    font-size: 12px;
+  }
+
+  header h2 {
+    color: var(--text-color);
+    font-size: 20px;
+  }
+
+  /* CD */
+  .cd {
+    display: flex;
+    margin: auto;
+    width: 200px;
+  }
+
+  .cd-thumb {
+    width: 100%;
+    padding-top: 100%;
+    border-radius: 50%;
+    background-color: #333;
+    background-size: cover;
+    margin: auto;
+  }
+
+  /* CONTROL */
+  .control {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 18px 0 8px 0;
+  }
+
+  .control .btn {
+    color: #666;
+    padding: 18px;
+    font-size: 18px;
+  }
+
+  .control .btn.active {
+    color: var(--primary-color);
+  }
+
+  .control .btn-toggle-play {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    font-size: 24px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+  }
+
+  .progress {
+    width: 100%;
+    -webkit-appearance: none;
+    height: 6px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: 0.2s;
+    transition: opacity 0.2s;
+  }
+
+  .progress::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 12px;
+    height: 6px;
+    background-color: var(--primary-color);
+    cursor: pointer;
+  }
+
+  /* PLAYLIST */
+  .playlist {
+    margin-top: 408px;
+    padding: 12px;
+  }
+
+  .song {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    background-color: #fff;
+    padding: 8px 16px;
+    border-radius: 5px;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .song.active {
+    background-color: var(--primary-color);
+  }
+
+  .song:active {
+    opacity: 0.8;
+  }
+
+  .song.active .option,
+  .song.active .author,
+  .song.active .title {
+    color: #fff;
+  }
+
+  .song .thumb {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background-size: cover;
+    margin: 0 8px;
+  }
+
+  .song .body {
+    flex: 1;
+    padding: 0 16px;
+  }
+
+  .song .title {
+    font-size: 18px;
+    color: var(--text-color);
+  }
+
+  .song .author {
+    font-size: 12px;
+    color: #999;
+  }
+
+  .song .option {
+    padding: 16px 8px;
+    color: #999;
+    font-size: 18px;
+  }
+