Skip to content

Instantly share code, notes, and snippets.

@Ridhookas
Ridhookas / index.html
Created May 31, 2023 12:58
Self-Destruct Button
<div class="grid"></div>
<div class="warning"></div>
<div class="base">
<button id="activate">
<span></span>
</button>
</div>
@Ridhookas
Ridhookas / index.html
Created May 31, 2023 12:58
Self-Destruct Button
<div class="grid"></div>
<div class="warning"></div>
<div class="base">
<button id="activate">
<span></span>
</button>
</div>
@Ridhookas
Ridhookas / index.html
Created May 31, 2023 12:57
Self-Destruct Button
<div class="grid"></div>
<div class="warning"></div>
<div class="base">
<button id="activate">
<span></span>
</button>
</div>
@Ridhookas
Ridhookas / index.html
Last active May 11, 2023 11:43
Self-Destruct
<div class="grid"></div>
<div class="warning"></div>
<div class="base">
<button id="activate">
<span></span>
</button>
</div>
@Ridhookas
Ridhookas / index.html
Created May 10, 2023 01:13
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 7, 2023 02:33
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 7, 2023 02:18
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 7, 2023 02:10
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">