Skip to content

Commit dafb53a

Browse files
foxeddevfoxeddev
committed
Merge branch 'credits'
2 parents ddf6e9f + dbadf7b commit dafb53a

1 file changed

Lines changed: 155 additions & 95 deletions

File tree

‎src/routes/+page.svelte‎

Lines changed: 155 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -4,113 +4,173 @@
44
55
let copied = false;
66
7-
function copy(text: string) {
8-
navigator.clipboard.writeText(text);
9-
}
10-
117
function handleCopy() {
12-
copy('pip install beet');
8+
navigator.clipboard.writeText('pip install beet');
139
copied = true;
1410
1511
setTimeout(() => {
1612
copied = false;
1713
}, 5000);
1814
}
15+
16+
import { onMount, tick } from 'svelte';
17+
18+
let el: HTMLPreElement;
19+
let visible = false;
20+
let output = '';
21+
22+
const text = `$ beet build
23+
24+
Building project...
25+
26+
Maintainers:
27+
* vberlier
28+
* rx
29+
* edayot
30+
* misode
31+
32+
Contributors:
33+
* ritikshah
34+
* MichaelBrunn3r
35+
* TheNuclearNexus
36+
* Tracktark
37+
* Newtbytes
38+
* and more!
39+
40+
Website:
41+
* FoxedDev
42+
43+
Done!`;
44+
45+
async function typewriter() {
46+
for (const char of text) {
47+
const stickToBottom = window.scrollY + window.innerHeight >= document.body.scrollHeight - 25;
48+
49+
output += char;
50+
51+
if (stickToBottom) {
52+
await tick(); // wait for DOM update
53+
window.scrollTo(0, document.body.scrollHeight);
54+
}
55+
56+
await new Promise((r) => setTimeout(r, Math.random() * 50));
57+
}
58+
}
59+
60+
onMount(() => {
61+
const observer = new IntersectionObserver(
62+
([entry]) => {
63+
if (entry.isIntersecting && !visible) {
64+
visible = true;
65+
observer.disconnect();
66+
typewriter();
67+
}
68+
},
69+
{ threshold: 0.3 }
70+
);
71+
72+
observer.observe(el);
73+
});
1974
</script>
2075

21-
<div
22-
class="space-y-8 md:space-y-20 selection:bg-primary bg-radial-[at_50%_90%] from-accent to-75% to-background py-4 md:py-6 xl:py-20 w-full min-h-screen"
23-
>
24-
<div>
25-
<h1
26-
class="text-foreground xl:text-[12rem] text-9xl text-center leading-30 md:leading-none tracking-wider"
27-
>
28-
Meet <span class="font-bold text-primary selection:text-accent">Beet</span>
29-
</h1>
30-
<h2 class="font-medium text-secondary text-2xl md:text-4xl text-center tracking-wider">
31-
The Minecraft pack development kit
32-
</h2>
33-
</div>
34-
35-
<div class="flex md:flex-row flex-col justify-center gap-2 md:gap-8 m-auto w-fit">
36-
<div class="flex bg-background">
37-
<p
38-
class="absolute py-3 md:py-4 pl-4 md:pl-8 outline-0 font-mono text-foreground text-md md:text-2xl pointer-events-none select-none"
76+
<div id="body" class="selection:bg-primary bg-radial-[at_50%_90%] from-accent to-75% to-background">
77+
<header class="space-y-8 md:space-y-20 py-4 md:py-6 xl:py-20 w-full h-screen">
78+
<div>
79+
<h1
80+
class="text-foreground xl:text-[12rem] text-9xl text-center leading-30 md:leading-none tracking-wider"
3981
>
40-
$
41-
</p>
42-
<input
43-
type="text"
44-
value="pip install beet"
45-
readonly
46-
class="py-3 md:py-4 pl-8 md:pl-16 outline-0 font-mono text-foreground text-md md:text-2xl"
47-
/>
48-
<button
49-
class="relative bg-primary size-12 md:size-16 overflow-hidden font-sans text-foreground text-2xl hover:-translate-y-2 hover:translate-x-2 active:-translate-y-1 active:translate-x-1 duration-75 cursor-pointer"
50-
onclick={handleCopy}
51-
title="Copy"
52-
>
53-
{#if !copied}
54-
<svg
55-
xmlns="http://www.w3.org/2000/svg"
56-
width="24"
57-
height="24"
58-
viewBox="0 0 24 24"
59-
class="top-3 md:top-4 left-3 md:left-4 absolute size-6 md:size-8"
60-
transition:fly={{ y: '100%' }}
61-
>
62-
<g fill="none" stroke="currentColor" stroke-width="1.5">
63-
<path
64-
d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
65-
/>
82+
Meet <span class="font-bold text-primary selection:text-accent">Beet</span>
83+
</h1>
84+
<h2 class="font-medium text-secondary text-2xl md:text-4xl text-center tracking-wider">
85+
The Minecraft pack development kit
86+
</h2>
87+
</div>
88+
89+
<div class="flex md:flex-row flex-col justify-center gap-2 md:gap-8 m-auto w-fit">
90+
<div class="flex bg-background">
91+
<p
92+
class="absolute py-3 md:py-4 pl-4 md:pl-8 outline-0 font-mono text-foreground text-md md:text-2xl pointer-events-none select-none"
93+
>
94+
$
95+
</p>
96+
<input
97+
type="text"
98+
value="pip install beet"
99+
readonly
100+
class="py-3 md:py-4 pl-8 md:pl-16 outline-0 font-mono text-foreground text-md md:text-2xl"
101+
/>
102+
<button
103+
class="relative bg-primary size-12 md:size-16 overflow-hidden font-sans text-foreground text-2xl hover:-translate-y-2 hover:translate-x-2 active:-translate-y-1 active:translate-x-1 duration-75 cursor-pointer"
104+
onclick={handleCopy}
105+
title="Copy"
106+
>
107+
{#if !copied}
108+
<svg
109+
xmlns="http://www.w3.org/2000/svg"
110+
width="24"
111+
height="24"
112+
viewBox="0 0 24 24"
113+
class="top-3 md:top-4 left-3 md:left-4 absolute size-6 md:size-8"
114+
transition:fly={{ y: '100%' }}
115+
>
116+
<g fill="none" stroke="currentColor" stroke-width="1.5">
117+
<path
118+
d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
119+
/>
120+
<path
121+
d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3"
122+
/>
123+
</g>
124+
</svg>
125+
{/if}
126+
{#if copied}
127+
<svg
128+
xmlns="http://www.w3.org/2000/svg"
129+
width="24"
130+
height="24"
131+
viewBox="0 0 24 24"
132+
class="top-3 md:top-4 left-3 md:left-4 absolute size-6 md:size-8"
133+
transition:fly={{ y: '-100%' }}
134+
>
66135
<path
67-
d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3"
136+
fill="none"
137+
stroke="currentColor"
138+
stroke-linecap="round"
139+
stroke-linejoin="round"
140+
stroke-width="1.5"
141+
d="m7 12.9l3.143 3.6L18 7.5"
68142
/>
69-
</g>
70-
</svg>
71-
{/if}
72-
{#if copied}
73-
<svg
74-
xmlns="http://www.w3.org/2000/svg"
75-
width="24"
76-
height="24"
77-
viewBox="0 0 24 24"
78-
class="top-3 md:top-4 left-3 md:left-4 absolute size-6 md:size-8"
79-
transition:fly={{ y: '-100%' }}
80-
>
81-
<path
82-
fill="none"
83-
stroke="currentColor"
84-
stroke-linecap="round"
85-
stroke-linejoin="round"
86-
stroke-width="1.5"
87-
d="m7 12.9l3.143 3.6L18 7.5"
88-
/>
89-
</svg>
90-
{/if}
91-
</button>
92-
</div>
93-
<a
94-
class="flex justify-center items-center gap-1 md:gap-2 bg-accent px-4 md:px-8 py-3 md:py-4 font-sans text-foreground text-md md:text-2xl text-center hover:-translate-y-2 hover:translate-x-2 active:-translate-y-1 active:translate-x-1 duration-75 cursor-pointer"
95-
href="https://mcbeet.dev/"
96-
>
97-
Docs
98-
<svg
99-
xmlns="http://www.w3.org/2000/svg"
100-
width="14"
101-
height="14"
102-
viewBox="0 0 14 14"
103-
class="size-4 md:size-6"
143+
</svg>
144+
{/if}
145+
</button>
146+
</div>
147+
<a
148+
class="flex justify-center items-center gap-1 md:gap-2 bg-accent px-4 md:px-8 py-3 md:py-4 font-sans text-foreground text-md md:text-2xl text-center hover:-translate-y-2 hover:translate-x-2 active:-translate-y-1 active:translate-x-1 duration-75 cursor-pointer"
149+
href="https://mcbeet.dev/"
104150
>
105-
<path
106-
fill="currentColor"
107-
fill-rule="evenodd"
108-
d="M2 1.625A.375.375 0 0 0 1.625 2v10c0 .207.168.375.375.375h10a.375.375 0 0 0 .375-.375V8a.625.625 0 1 1 1.25 0v4c0 .898-.727 1.625-1.625 1.625H2A1.625 1.625 0 0 1 .375 12V2C.375 1.103 1.103.375 2 .375h4a.625.625 0 1 1 0 1.25zM8.375 1c0-.345.28-.625.625-.625h4c.345 0 .625.28.625.625v4a.625.625 0 1 1-1.25 0V2.509L7.442 7.442a.625.625 0 1 1-.884-.884l4.933-4.933H9A.625.625 0 0 1 8.375 1"
109-
clip-rule="evenodd"
110-
/>
111-
</svg>
112-
</a>
113-
</div>
151+
Docs
152+
<svg
153+
xmlns="http://www.w3.org/2000/svg"
154+
width="14"
155+
height="14"
156+
viewBox="0 0 14 14"
157+
class="size-4 md:size-6"
158+
>
159+
<path
160+
fill="currentColor"
161+
fill-rule="evenodd"
162+
d="M2 1.625A.375.375 0 0 0 1.625 2v10c0 .207.168.375.375.375h10a.375.375 0 0 0 .375-.375V8a.625.625 0 1 1 1.25 0v4c0 .898-.727 1.625-1.625 1.625H2A1.625 1.625 0 0 1 .375 12V2C.375 1.103 1.103.375 2 .375h4a.625.625 0 1 1 0 1.25zM8.375 1c0-.345.28-.625.625-.625h4c.345 0 .625.28.625.625v4a.625.625 0 1 1-1.25 0V2.509L7.442 7.442a.625.625 0 1 1-.884-.884l4.933-4.933H9A.625.625 0 0 1 8.375 1"
163+
clip-rule="evenodd"
164+
/>
165+
</svg>
166+
</a>
167+
</div>
114168

115-
<img src={logo} alt="" class="bottom-0 left-1/2 fixed size-48 md:size-96 -translate-x-1/2" />
169+
<img src={logo} alt="" class="bottom-0 left-1/2 absolute size-48 md:size-96 -translate-x-1/2" />
170+
</header>
171+
<footer class="space-y-8 md:space-y-20 py-4 md:py-6 xl:py-20">
172+
<pre
173+
class="bg-background/75 m-auto p-8 font-mono text-foreground text-md leading-snug prose"
174+
bind:this={el}>{output}</pre>
175+
</footer>
116176
</div>

0 commit comments

Comments
 (0)