Skip to content

Instantly share code, notes, and snippets.

@Ridhookas
Ridhookas / index.html
Created May 7, 2023 02:06
Mini Music Player - VueJS
<div class="wrapper" id="app">
<div class="player">
<div class="player__top">
<div class="player-cover">
<transition-group :name="transitionName">
<div class="player-cover__item" v-if="$index === currentTrackIndex" :style="{ backgroundImage: `url(${track.cover})` }" v-for="(track, $index) in tracks" :key="$index"></div>
</transition-group>
</div>
<div class="player-controls">
<div class="player-controls__item -favorite" :class="{ active : currentTrack.favorited }" @click="favorite">
@Ridhookas
Ridhookas / index.html
Created May 2, 2023 12:44
Mini Music Player - VueJS
<div class="wrapper" id="app">
<div class="player">
<div class="player__top">
<div class="player-cover">
<transition-group :name="transitionName">
<div class="player-cover__item" v-if="$index === currentTrackIndex" :style="{ backgroundImage: `url(${track.cover})` }" v-for="(track, $index) in tracks" :key="$index"></div>
</transition-group>
</div>
<div class="player-controls">
<div class="player-controls__item -favorite" :class="{ active : currentTrack.favorited }" @click="favorite">
@Ridhookas
Ridhookas / index.html
Created May 2, 2023 12:44
Mini Music Player - VueJS
<div class="wrapper" id="app">
<div class="player">
<div class="player__top">
<div class="player-cover">
<transition-group :name="transitionName">
<div class="player-cover__item" v-if="$index === currentTrackIndex" :style="{ backgroundImage: `url(${track.cover})` }" v-for="(track, $index) in tracks" :key="$index"></div>
</transition-group>
</div>
<div class="player-controls">
<div class="player-controls__item -favorite" :class="{ active : currentTrack.favorited }" @click="favorite">
@Ridhookas
Ridhookas / index.html
Created May 2, 2023 12:25
Mini Music Player - VueJS
<div class="wrapper" id="app">
<div class="player">
<div class="player__top">
<div class="player-cover">
<transition-group :name="transitionName">
<div class="player-cover__item" v-if="$index === currentTrackIndex" :style="{ backgroundImage: `url(${track.cover})` }" v-for="(track, $index) in tracks" :key="$index"></div>
</transition-group>
</div>
<div class="player-controls">
<div class="player-controls__item -favorite" :class="{ active : currentTrack.favorited }" @click="favorite">
@Ridhookas
Ridhookas / index.html
Created May 2, 2023 12:25
Mini Music Player - VueJS
<div class="wrapper" id="app">
<div class="player">
<div class="player__top">
<div class="player-cover">
<transition-group :name="transitionName">
<div class="player-cover__item" v-if="$index === currentTrackIndex" :style="{ backgroundImage: `url(${track.cover})` }" v-for="(track, $index) in tracks" :key="$index"></div>
</transition-group>
</div>
<div class="player-controls">
<div class="player-controls__item -favorite" :class="{ active : currentTrack.favorited }" @click="favorite">
@Ridhookas
Ridhookas / index.html
Created May 2, 2023 12:24
Mini Music Player - VueJS
<div class="wrapper" id="app">
<div class="player">
<div class="player__top">
<div class="player-cover">
<transition-group :name="transitionName">
<div class="player-cover__item" v-if="$index === currentTrackIndex" :style="{ backgroundImage: `url(${track.cover})` }" v-for="(track, $index) in tracks" :key="$index"></div>
</transition-group>
</div>
<div class="player-controls">
<div class="player-controls__item -favorite" :class="{ active : currentTrack.favorited }" @click="favorite">
@Ridhookas
Ridhookas / index.html
Created April 30, 2023 14:42
Yet another slider
<div id="main">
<h1>something</h1>
<div class="content">
<p>You can press <kbd>▲</kbd> <kbd>▼</kbd> on your keyboard or swipe up/down to navigate. Mouse wheel works too.</p>
<p><a href="https://codepen.io/theseventh" target="_blank">codepen</a> // <a href="https://twitter.com/the_seventh_kek" target="_blank">twitter</a>
</div>
<div class="buttons">
<button class="next" onclick="go(-1)"></button>
<button class="prev" onclick="go(1)"></button>
</div>
@Ridhookas
Ridhookas / index.html
Created April 30, 2023 14:41
Yet another slider
<div id="main">
<h1>something</h1>
<div class="content">
<p>You can press <kbd>▲</kbd> <kbd>▼</kbd> on your keyboard or swipe up/down to navigate. Mouse wheel works too.</p>
<p><a href="https://codepen.io/theseventh" target="_blank">codepen</a> // <a href="https://twitter.com/the_seventh_kek" target="_blank">twitter</a>
</div>
<div class="buttons">
<button class="next" onclick="go(-1)"></button>
<button class="prev" onclick="go(1)"></button>
</div>
@Ridhookas
Ridhookas / index.html
Created April 30, 2023 14:41
Yet another slider
<div id="main">
<h1>something</h1>
<div class="content">
<p>You can press <kbd>▲</kbd> <kbd>▼</kbd> on your keyboard or swipe up/down to navigate. Mouse wheel works too.</p>
<p><a href="https://codepen.io/theseventh" target="_blank">codepen</a> // <a href="https://twitter.com/the_seventh_kek" target="_blank">twitter</a>
</div>
<div class="buttons">
<button class="next" onclick="go(-1)"></button>
<button class="prev" onclick="go(1)"></button>
</div>
@Ridhookas
Ridhookas / index.html
Created April 28, 2023 09:48
Jake (Adventure Time) in pure CSS
<div class="jake">
<div class="face">
<div class="eye">
<div class="cheek-left"></div>
</div>
<div class="eye">
<div class="cheek-right"></div>
</div>
<div class="mustache">