Skip to content

Commit

Permalink
player actions added
Browse files Browse the repository at this point in the history
  • Loading branch information
@muhammed
muhammed committed Aug 11, 2019
1 parent c05df01 commit 396a687
Show file tree
Hide file tree
Showing 6 changed files with 376 additions and 47 deletions.
71 changes: 69 additions & 2 deletions css/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/main.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

70 changes: 68 additions & 2 deletions css/main.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
body {
// background: #e1e7ec;
background: #dfe7ef;
font-family: "Bitter", serif;
}

* {
Expand Down Expand Up @@ -30,7 +31,8 @@ body {
background: #eef3f7;
width: 410px;
height: 480px;
box-shadow: 0px 55px 75px -10px rgba(76, 70, 124, 0.5);
// box-shadow: 0px 55px 75px -10px rgba(76, 70, 124, 0.5);
box-shadow: 0px 55px 105px 10px rgba(76, 70, 124, 0.35);
border-radius: 15px;
padding: 30px;

Expand All @@ -50,6 +52,9 @@ body {
height: 100%;
object-fit: cover;
border-radius: 15px;
box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
user-select: none;
pointer-events: none;
}
}

Expand All @@ -76,9 +81,70 @@ body {
&.-xl {
margin-bottom: 0;
font-size: 95px;
filter: drop-shadow(0 2px 8px rgba(172, 184, 204, 0.3));
// filter: drop-shadow(0 2px 8px rgba(172, 184, 204, 0.3));
filter: drop-shadow(0 9px 6px rgba(172, 184, 204, 0.35));
color: #fff;
}
}
}
}
[v-cloak] {
display: none;
}
[v-cloak] > * {
display: none;
}
.progress {
width: 100%;
margin-top: -20px;
&__top {
display: flex;
align-items: flex-end;
justify-content: space-between;
}

&__duration {
color: #71829e;
font-weight: 700;
font-size: 20px;
opacity: 0.7;
}
&__time {
margin-top: 2px;
color: #71829e;
font-weight: 700;
font-size: 16px;
opacity: 0.7;
}
}
.progress__bar {
height: 6px;
width: 100%;
cursor: pointer;
background-color: #d0d8e6;
display: inline-block;
border-radius: 10px;
}
.progress__current {
height: inherit;
width: 0%;
background-color: #a3b3ce;
border-radius: 10px;
}

.album-info {
color: #71829e;
flex: 1;
padding-right: 60px;

&__name {
font-size: 22px;
font-weight: bold;
margin-bottom: 12px;
}
&__track {
font-weight: 400;
font-size: 20px;
opacity: 0.7;
}
}
Binary file added img/1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
98 changes: 66 additions & 32 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
<link rel="stylesheet" href="./css/main.css">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap&subset=latin-ext"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://meyerweb.com/eric/tools/css/reset/reset.css"
/>
<link rel="stylesheet" href="./css/main.css" />
<title>Mini Player</title>
</head>
<body>
</head>
<body>
<div class="wrapper" id="app">
<div class="player">
<div class="player__top">
<div class="player-cover">
<img src="https://images.unsplash.com/photo-1454372021569-4610db51e2e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="" class="player-cover__img">
</div>
<div class="player-controls">
<div class="player-controls__item">
<svg class="icon"><use xlink:href="./img/icons.svg#icon-heart"></use></svg>
</div>
<div class="player-controls__item">
<svg class="icon"><use xlink:href="./img/icons.svg#icon-share"></use></svg>
</div>
<div class="player-controls__item">
<svg class="icon"><use xlink:href="./img/icons.svg#icon-infinity"></use></svg>
</div>
<div class="player-controls__item">
<svg class="icon"><use xlink:href="./img/icons.svg#icon-shufle"></use></svg>
</div>
<div class="player-controls__item -xl">
<svg class="icon"><use xlink:href="./img/icons.svg#icon-play"></use></svg>
</div>
</div>
<div class="player">
<div class="player__top">
<div class="player-cover">
<img src="./img/1.png" alt="" class="player-cover__img" />
</div>
<div class="player-controls">
<div class="player-controls__item">
<svg class="icon">
<use xlink:href="./img/icons.svg#icon-heart-o"></use>
</svg>
</div>
<div class="player-controls__item">
<svg class="icon">
<use xlink:href="./img/icons.svg#icon-share"></use>
</svg>
</div>
<div class="player-controls__item">
<svg class="icon">
<use xlink:href="./img/icons.svg#icon-infinity"></use>
</svg>
</div>
<div class="player-controls__item">
<svg class="icon">
<use xlink:href="./img/icons.svg#icon-shufle"></use>
</svg>
</div>
<div class="player-controls__item -xl js-play" @click="play">
<svg class="icon">
<use xlink:href="./img/icons.svg#icon-play"></use>
</svg>
</div>
</div>
</div>
<div class="progress" ref="progress" @click="clickProgress">
<div class="progress__top">
<div class="album-info">
<div class="album-info__name">Muhammed Erdem</div>
<div class="album-info__track">Back Home</div>
</div>
<div class="progress__duration">{{ duration }}</div>
</div>
<div class="progress__bar">
<div class="progress__current" :style="{ width : barWidth }"></div>
</div>
<div class="progress__time">{{ currentTime }}</div>
<!-- <span class="circle-con">
<div class="circle" :style="{ marginLeft : circleLeft }"></div>
</span> -->
</div>
<div v-cloak></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="./scripts/script.js"></script>
</body>
</html>
</body>
</html>
Loading

0 comments on commit 396a687

Please sign in to comment.