77 lines
1.4 KiB
Svelte
77 lines
1.4 KiB
Svelte
<script>
|
|
export let desc
|
|
export let url
|
|
|
|
let icon = "<i class='nf nf-md-clipboard_multiple'></i>"
|
|
let audio
|
|
|
|
function copy() {
|
|
audio.play()
|
|
navigator.clipboard.writeText(url)
|
|
icon = "<i class='nf nf-md-clipboard_check'></i>"
|
|
setTimeout(()=>{
|
|
icon = "<i class='nf nf-md-clipboard_multiple'></i>"
|
|
}, 500)
|
|
}
|
|
</script>
|
|
|
|
<main>
|
|
<audio bind:this={audio} preload="auto">
|
|
<source src="/click.wav" type="audio/mpeg" />
|
|
</audio>
|
|
<div>
|
|
<h1><slot></slot></h1>
|
|
<p>{desc}</p>
|
|
</div>
|
|
<div>
|
|
<button on:click={copy}>{@html icon}</button>
|
|
<a href="{url}"><i class="nf nf-oct-link_external"></i></a>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 30px 30px 30px 30px;
|
|
background: var(--dark-two);
|
|
border-radius: 7px 7px 0px 0px;
|
|
box-shadow: var(--box-shadow);
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: none;
|
|
color: white;
|
|
gap: 100px;
|
|
transition: .4s;
|
|
}
|
|
|
|
div h1 {
|
|
animation-name: colorAnimation;
|
|
animation-duration: 10s;
|
|
animation-iteration-count: infinite;
|
|
font-size: 30px;
|
|
}
|
|
|
|
div p {
|
|
margin-top: 10px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
a, button {
|
|
text-align: center;
|
|
font-size: 30px;
|
|
text-decoration: none;
|
|
color: white;
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a:hover, button:hover{
|
|
animation-name: colorAnimation;
|
|
animation-duration: 5s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
</style>
|