Skip to content

Commit

Permalink
chore: wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisbbreuer
chrisbbreuer committed Jan 29, 2025
1 parent 7f02416 commit 227f4b8
Show file tree
Hide file tree
Showing 2 changed files with 168 additions and 34 deletions.
101 changes: 84 additions & 17 deletions resources/layouts/404.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ const searchQuery = ref('')
const handleSearch = (e) => {
e.preventDefault()
// Implement search functionality here
console.log('Searching for:', searchQuery.value)
}
Expand All @@ -17,19 +16,12 @@ const goBack = () => {
</script>

<template>
<!-- <div v-if="isLoading" class="min-h-screen flex items-center justify-center">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-slate-500"></div>
</div> -->

<!-- <div v-else class="min-h-screen flex flex-col lg:flex-row"> -->
<div class="min-h-screen flex flex-col lg:flex-row">
<div class="min-h-screen flex flex-col lg:flex-row bg-gradient-to-br from-slate-50 to-slate-100">
<!-- Left side content -->
<div class="w-full lg:w-1/2 flex items-center justify-center p-8 bg-gradient-to-br from-slate-50 to-slate-100">
<div class="w-full lg:w-1/2 flex items-center justify-center p-8">
<div class="max-w-xl w-full">
<div class="flex items-center justify-between mb-16">
<div class="flex items-center space-x-2">
<!-- <div class="h-8 w-8 bg-blue-500 rounded-lg flex items-center justify-center">
</div> -->
<h1 class="text-xl font-bold text-slate-900">Your App</h1>
</div>
</div>
Expand All @@ -42,7 +34,7 @@ const goBack = () => {
404
</p>
<p class="text-xl text-slate-600 mb-8">
We can’t seem to find the page you’re looking for.
We can't seem to find the page you're looking for.
</p>

<div class="flex sm:flex-row gap-4">
Expand Down Expand Up @@ -76,12 +68,71 @@ const goBack = () => {
</div>

<!-- Right side SVG -->
<div class="w-full lg:w-1/2 h-screen bg-white">
<img
src="/svgs/404.svg"
alt="404 illustration"
class="w-full h-full object-cover"
/>
<div class="w-full lg:w-1/2 h-[100vh] relative overflow-hidden flex items-center justify-center">
<svg class="w-full h-full" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="a" x1="50.31%" x2="50%" y1="74.74%" y2="0%">
<stop offset="0" stop-color="#ffe98a"/>
<stop offset=".677" stop-color="#b63e59"/>
<stop offset="1" stop-color="#68126f"/>
</linearGradient>
<circle id="b" cx="603" cy="682" r="93"/>
<filter id="c" height="203.2%" width="203.2%" x="-51.6%" y="-51.6%">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="32"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter>
<linearGradient id="d">
<stop offset="0" stop-color="#f7eab9"/>
<stop offset="1" stop-color="#e5765e"/>
</linearGradient>
<linearGradient id="e" x1="49.48%" x2="49.87%" xlink:href="#d" y1="11.66%" y2="77.75%"/>
<linearGradient id="f">
<stop offset="0" stop-color="#a22a50"/>
<stop offset="1" stop-color="#ee7566"/>
</linearGradient>
<linearGradient id="g" x1="91.59%" x2="66.97%" xlink:href="#f" y1="5.89%" y2="100%"/>
<linearGradient id="h" x1="49.48%" x2="49.61%" xlink:href="#d" y1="11.66%" y2="98.34%"/>
<linearGradient id="i" x1="78.5%" x2="36.4%" xlink:href="#f" y1="106.76%" y2="26.41%"/>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="m0 0h1024v1024h-1024z" fill="url(#a)"/>
<use fill="#000" filter="url(#c)" xlink:href="#b"/>
<use fill="#fff6cb" xlink:href="#b"/>
<g fill="#fff" class="stars">
<circle cx="217" cy="278" fill-opacity=".4" r="3"/>
<circle cx="96" cy="257" r="2"/>
<circle cx="36" cy="287" opacity=".4" r="2"/>
<circle cx="127" cy="88" r="3"/>
<circle cx="216" cy="25" r="2"/>
<circle cx="16" cy="137" r="2"/>
<circle cx="166" cy="167" r="2"/>
<circle cx="376" cy="247" r="2"/>
<circle cx="467" cy="88" opacity=".4" r="3"/>
<circle cx="527" cy="278" r="3"/>
<circle cx="607" cy="138" r="3"/>
<circle cx="817" cy="28" opacity=".4" r="3"/>
<circle cx="516" cy="157" r="2"/>
<circle cx="846" cy="227" r="2"/>
<circle cx="766" cy="137" r="2"/>
<circle cx="947" cy="278" opacity=".4" r="3"/>
<circle cx="717" cy="248" r="3"/>
<circle cx="917" cy="78" r="3"/>
<circle cx="996" cy="167" r="2"/>
<circle cx="646" cy="37" r="2"/>
</g>
<g transform="translate(0 550)">
<path d="m259 5.47c0 5.33 3.33 9.5 10 12.5s9.67 9.16 9 18.5h1c.67-6.31 1-11.8 1-16.47 8.67 0 13.33-1.33 14-4 .67 4.98 1.67 8.3 3 9.97 1.33 1.66 2 5.16 2 10.5h1c0-5.65.33-9.64 1-11.97 1-3.5 4-10.03-1-14.53s-5-2.97-10-6.97-10-3-13 2-5 7-9 7-5-3.53-5-5.53 2-5-1.5-5-7.5 0-7.5 2c0 1.33 1.67 2 5 2z" fill="#8e2c15"/>
<path d="m1024 390h-1024v-284.92c77.3-33.68 155.26-70.08 297.4-70.08 250 0 250.76 125.25 500 125 84.03-.08 160.02-18.2 226.6-40.93z" fill="url(#e)"/>
<path d="m1024 442h-1024v-170.18c137.51-15.4 203.1-50.49 356.67-60.1 198.57-12.42 250.04-125.13 500.07-125.13 72.78 0 124.44 10.62 167.26 25.68z" fill="url(#e)"/>
<path d="m1024 112.21v299.79h-167.09c99.31-86.5 112.63-140.75 39.97-162.78-186.64-56.58-101.76-162.64-39.98-162.64 72.7 0 124.3 10.6 167.09 25.63z" fill="url(#g)"/>
<path d="m1024 285.32v126.68h-167c99.31-86.6 112.63-140.94 39.97-163z" fill="url(#g)"/>
<path d="m0 474v-250.07c67.12-33.24 129.55-68.93 263-68.93 250 0 331.46 162.6 530 175 107.42 6.71 163-26.77 231-58.92v202.92z" fill="url(#h)"/>
<path d="m353.02 474h-353.02v-250.07c67.12-33.24 129.55-68.93 263-68.93 71.14 0 151.5 12.76 151.5 70.5 0 54.5-45.5 79.72-112.5 109-82.26 35.95-54.57 111.68 51.02 139.5z" fill="url(#g)"/>
<path d="m353.02 474h-353.02v-14.8l302-124.7c-82.26 35.95-54.57 111.68 51.02 139.5z" fill="url(#i)"/>
</g>
</g>
</svg>
</div>
</div>
</template>
Expand Down Expand Up @@ -113,8 +164,24 @@ const goBack = () => {
}
}
@keyframes starFloat {
0% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}
.stars {
animation: starFloat 3s ease-in-out infinite;
}
</style>
101 changes: 84 additions & 17 deletions storage/framework/defaults/layouts/404.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ const searchQuery = ref('')
const handleSearch = (e) => {
e.preventDefault()
// Implement search functionality here
console.log('Searching for:', searchQuery.value)
}
Expand All @@ -17,19 +16,12 @@ const goBack = () => {
</script>

<template>
<!-- <div v-if="isLoading" class="min-h-screen flex items-center justify-center">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-slate-500"></div>
</div> -->

<!-- <div v-else class="min-h-screen flex flex-col lg:flex-row"> -->
<div class="min-h-screen flex flex-col lg:flex-row">
<div class="min-h-screen flex flex-col lg:flex-row bg-gradient-to-br from-slate-50 to-slate-100">
<!-- Left side content -->
<div class="w-full lg:w-1/2 flex items-center justify-center p-8 bg-gradient-to-br from-slate-50 to-slate-100">
<div class="w-full lg:w-1/2 flex items-center justify-center p-8">
<div class="max-w-xl w-full">
<div class="flex items-center justify-between mb-16">
<div class="flex items-center space-x-2">
<!-- <div class="h-8 w-8 bg-blue-500 rounded-lg flex items-center justify-center">
</div> -->
<h1 class="text-xl font-bold text-slate-900">Your App</h1>
</div>
</div>
Expand All @@ -42,7 +34,7 @@ const goBack = () => {
404
</p>
<p class="text-xl text-slate-600 mb-8">
We can’t seem to find the page you’re looking for.
We can't seem to find the page you're looking for.
</p>

<div class="flex sm:flex-row gap-4">
Expand Down Expand Up @@ -76,12 +68,71 @@ const goBack = () => {
</div>

<!-- Right side SVG -->
<div class="w-full lg:w-1/2 h-screen bg-white">
<img
src="/svgs/404.svg"
alt="404 illustration"
class="w-full h-full object-cover"
/>
<div class="w-full lg:w-1/2 h-[100vh] relative overflow-hidden flex items-center justify-center">
<svg class="w-full h-full" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="a" x1="50.31%" x2="50%" y1="74.74%" y2="0%">
<stop offset="0" stop-color="#ffe98a"/>
<stop offset=".677" stop-color="#b63e59"/>
<stop offset="1" stop-color="#68126f"/>
</linearGradient>
<circle id="b" cx="603" cy="682" r="93"/>
<filter id="c" height="203.2%" width="203.2%" x="-51.6%" y="-51.6%">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="32"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter>
<linearGradient id="d">
<stop offset="0" stop-color="#f7eab9"/>
<stop offset="1" stop-color="#e5765e"/>
</linearGradient>
<linearGradient id="e" x1="49.48%" x2="49.87%" xlink:href="#d" y1="11.66%" y2="77.75%"/>
<linearGradient id="f">
<stop offset="0" stop-color="#a22a50"/>
<stop offset="1" stop-color="#ee7566"/>
</linearGradient>
<linearGradient id="g" x1="91.59%" x2="66.97%" xlink:href="#f" y1="5.89%" y2="100%"/>
<linearGradient id="h" x1="49.48%" x2="49.61%" xlink:href="#d" y1="11.66%" y2="98.34%"/>
<linearGradient id="i" x1="78.5%" x2="36.4%" xlink:href="#f" y1="106.76%" y2="26.41%"/>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="m0 0h1024v1024h-1024z" fill="url(#a)"/>
<use fill="#000" filter="url(#c)" xlink:href="#b"/>
<use fill="#fff6cb" xlink:href="#b"/>
<g fill="#fff" class="stars">
<circle cx="217" cy="278" fill-opacity=".4" r="3"/>
<circle cx="96" cy="257" r="2"/>
<circle cx="36" cy="287" opacity=".4" r="2"/>
<circle cx="127" cy="88" r="3"/>
<circle cx="216" cy="25" r="2"/>
<circle cx="16" cy="137" r="2"/>
<circle cx="166" cy="167" r="2"/>
<circle cx="376" cy="247" r="2"/>
<circle cx="467" cy="88" opacity=".4" r="3"/>
<circle cx="527" cy="278" r="3"/>
<circle cx="607" cy="138" r="3"/>
<circle cx="817" cy="28" opacity=".4" r="3"/>
<circle cx="516" cy="157" r="2"/>
<circle cx="846" cy="227" r="2"/>
<circle cx="766" cy="137" r="2"/>
<circle cx="947" cy="278" opacity=".4" r="3"/>
<circle cx="717" cy="248" r="3"/>
<circle cx="917" cy="78" r="3"/>
<circle cx="996" cy="167" r="2"/>
<circle cx="646" cy="37" r="2"/>
</g>
<g transform="translate(0 550)">
<path d="m259 5.47c0 5.33 3.33 9.5 10 12.5s9.67 9.16 9 18.5h1c.67-6.31 1-11.8 1-16.47 8.67 0 13.33-1.33 14-4 .67 4.98 1.67 8.3 3 9.97 1.33 1.66 2 5.16 2 10.5h1c0-5.65.33-9.64 1-11.97 1-3.5 4-10.03-1-14.53s-5-2.97-10-6.97-10-3-13 2-5 7-9 7-5-3.53-5-5.53 2-5-1.5-5-7.5 0-7.5 2c0 1.33 1.67 2 5 2z" fill="#8e2c15"/>
<path d="m1024 390h-1024v-284.92c77.3-33.68 155.26-70.08 297.4-70.08 250 0 250.76 125.25 500 125 84.03-.08 160.02-18.2 226.6-40.93z" fill="url(#e)"/>
<path d="m1024 442h-1024v-170.18c137.51-15.4 203.1-50.49 356.67-60.1 198.57-12.42 250.04-125.13 500.07-125.13 72.78 0 124.44 10.62 167.26 25.68z" fill="url(#e)"/>
<path d="m1024 112.21v299.79h-167.09c99.31-86.5 112.63-140.75 39.97-162.78-186.64-56.58-101.76-162.64-39.98-162.64 72.7 0 124.3 10.6 167.09 25.63z" fill="url(#g)"/>
<path d="m1024 285.32v126.68h-167c99.31-86.6 112.63-140.94 39.97-163z" fill="url(#g)"/>
<path d="m0 474v-250.07c67.12-33.24 129.55-68.93 263-68.93 250 0 331.46 162.6 530 175 107.42 6.71 163-26.77 231-58.92v202.92z" fill="url(#h)"/>
<path d="m353.02 474h-353.02v-250.07c67.12-33.24 129.55-68.93 263-68.93 71.14 0 151.5 12.76 151.5 70.5 0 54.5-45.5 79.72-112.5 109-82.26 35.95-54.57 111.68 51.02 139.5z" fill="url(#g)"/>
<path d="m353.02 474h-353.02v-14.8l302-124.7c-82.26 35.95-54.57 111.68 51.02 139.5z" fill="url(#i)"/>
</g>
</g>
</svg>
</div>
</div>
</template>
Expand Down Expand Up @@ -113,8 +164,24 @@ const goBack = () => {
}
}
@keyframes starFloat {
0% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}
.stars {
animation: starFloat 3s ease-in-out infinite;
}
</style>

0 comments on commit 227f4b8

Please sign in to comment.