feat: enhance designer canvas with multi-view support and model viewer integration
Some checks failed
Deploy Production / deploy (push) Failing after 1m11s
Some checks failed
Deploy Production / deploy (push) Failing after 1m11s
- Added canvasId prop to DesignerCanvas for identifying multiple canvases. - Implemented active view selection (front, top, left, right) in designer page. - Updated DesignerCanvas to maintain aspect ratio and dimensions based on view. - Integrated @google/model-viewer for 3D model rendering on the index page. - Refactored useSlipmatDesigner to manage multiple canvases and their states. - Added LAMESA.glb model file for 3D representation. - Updated package.json and package-lock.json to include @google/model-viewer dependency.
This commit is contained in:
Frank John Begornia
@@ -1,58 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const startDesigning = () => {
|
||||
router.push('/designer');
|
||||
router.push("/designer");
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// Import model-viewer on client-side only
|
||||
if (process.client) {
|
||||
import("@google/model-viewer");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative min-h-screen overflow-hidden bg-white">
|
||||
<!-- Subtle Background Pattern -->
|
||||
<div class="absolute inset-0 opacity-5">
|
||||
<div class="absolute inset-0" style="background-image: radial-gradient(circle at 1px 1px, rgb(156 163 175) 1px, transparent 0); background-size: 40px 40px;"></div>
|
||||
<div
|
||||
class="absolute inset-0"
|
||||
style="
|
||||
background-image: radial-gradient(
|
||||
circle at 1px 1px,
|
||||
rgb(156 163 175) 1px,
|
||||
transparent 0
|
||||
);
|
||||
background-size: 40px 40px;
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Grid -->
|
||||
<div class="relative z-20 flex min-h-screen flex-col px-4 py-12 md:px-8 lg:px-16">
|
||||
<div
|
||||
class="relative z-20 flex min-h-screen flex-col px-4 py-12 md:px-8 lg:px-16"
|
||||
>
|
||||
<!-- Top Section - Split Layout -->
|
||||
<div class="flex flex-1 flex-col items-center justify-between gap-8 lg:flex-row lg:gap-16">
|
||||
<div
|
||||
class="flex flex-1 flex-col items-center justify-between gap-8 lg:flex-row lg:gap-16"
|
||||
>
|
||||
<!-- Left Side - Title & Description -->
|
||||
<div class="w-full space-y-8 text-center lg:w-1/2 lg:text-left">
|
||||
<h1 class="text-6xl font-bold tracking-tight text-slate-900 sm:text-7xl md:text-8xl">
|
||||
<h1
|
||||
class="text-6xl font-bold tracking-tight text-slate-900 sm:text-7xl md:text-8xl"
|
||||
>
|
||||
TableJerseys
|
||||
</h1>
|
||||
<div class="space-y-4">
|
||||
<p class="text-2xl font-semibold text-slate-700 sm:text-3xl md:text-4xl">
|
||||
<p
|
||||
class="text-2xl font-semibold text-slate-700 sm:text-3xl md:text-4xl"
|
||||
>
|
||||
Design custom jerseys for your table
|
||||
</p>
|
||||
|
||||
<!-- Simple preview for mobile view -->
|
||||
<div class="relative mx-auto my-8 block lg:hidden">
|
||||
<div class="relative mx-auto h-[280px] w-[280px] sm:h-80 sm:w-80">
|
||||
<div class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-slate-100 shadow-lg overflow-hidden">
|
||||
<div
|
||||
class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-slate-100 shadow-lg overflow-hidden"
|
||||
>
|
||||
<!-- Rotating Table with Fitted Cover -->
|
||||
<div class="animate-spin-slow relative" style="transform-style: preserve-3d;">
|
||||
<div
|
||||
class="animate-spin-slow relative"
|
||||
style="transform-style: preserve-3d"
|
||||
>
|
||||
<div class="relative">
|
||||
<!-- Table with fitted cover -->
|
||||
<div class="relative">
|
||||
<!-- Table Top -->
|
||||
<div class="relative h-24 w-40 rounded-t-sm bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 shadow-xl">
|
||||
<div
|
||||
class="relative h-24 w-40 rounded-t-sm bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 shadow-xl"
|
||||
>
|
||||
<!-- Jersey design on top of cover -->
|
||||
<div class="absolute inset-4 flex items-center justify-center rounded-lg bg-gradient-to-br from-blue-400 via-white to-red-400 shadow-lg border-2 border-slate-300">
|
||||
<div
|
||||
class="absolute inset-4 flex items-center justify-center rounded-lg bg-gradient-to-br from-blue-400 via-white to-red-400 shadow-lg border-2 border-slate-300"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-slate-800">23</div>
|
||||
<div class="text-[7px] font-semibold text-slate-600 tracking-wider">CUSTOM</div>
|
||||
<div class="text-2xl font-bold text-slate-800">
|
||||
23
|
||||
</div>
|
||||
<div
|
||||
class="text-[7px] font-semibold text-slate-600 tracking-wider"
|
||||
>
|
||||
CUSTOM
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Fitted Cover Skirt (draping down) -->
|
||||
<div class="absolute top-24 left-0 right-0 h-16 bg-gradient-to-b from-slate-800 via-slate-900 to-slate-950 rounded-b-sm shadow-2xl">
|
||||
<div
|
||||
class="absolute top-24 left-0 right-0 h-16 bg-gradient-to-b from-slate-800 via-slate-900 to-slate-950 rounded-b-sm shadow-2xl"
|
||||
>
|
||||
<!-- Fabric folds/creases -->
|
||||
<div class="absolute inset-0 opacity-30" style="background: repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0,0,0,0.3) 8px, rgba(0,0,0,0.3) 9px);"></div>
|
||||
<div
|
||||
class="absolute inset-0 opacity-30"
|
||||
style="
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 8px,
|
||||
rgba(0, 0, 0, 0.3) 8px,
|
||||
rgba(0, 0, 0, 0.3) 9px
|
||||
);
|
||||
"
|
||||
></div>
|
||||
<!-- Shadow at bottom -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-2 bg-black/40"></div>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 right-0 h-2 bg-black/40"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,69 +132,67 @@ const startDesigning = () => {
|
||||
>
|
||||
<span class="relative z-10 flex items-center gap-3">
|
||||
Start Designing
|
||||
<svg class="h-6 w-6 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
<svg
|
||||
class="h-6 w-6 transition-transform group-hover:translate-x-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Stats Section - Now on Left Side -->
|
||||
<div class="mx-auto grid max-w-4xl gap-8 pt-12 grid-cols-3 sm:grid-cols-3 lg:mx-0">
|
||||
<div
|
||||
class="mx-auto grid max-w-4xl gap-8 pt-12 grid-cols-3 sm:grid-cols-3 lg:mx-0"
|
||||
>
|
||||
<div class="space-y-2 text-center lg:text-left">
|
||||
<div class="text-3xl font-bold text-slate-900 md:text-4xl">Custom</div>
|
||||
<div class="text-3xl font-bold text-slate-900 md:text-4xl">
|
||||
Custom
|
||||
</div>
|
||||
<div class="text-sm text-slate-600">Any Size</div>
|
||||
</div>
|
||||
<div class="space-y-2 text-center lg:text-left">
|
||||
<div class="text-3xl font-bold text-slate-900 md:text-4xl">300 DPI</div>
|
||||
<div class="text-3xl font-bold text-slate-900 md:text-4xl">
|
||||
300 DPI
|
||||
</div>
|
||||
<div class="text-sm text-slate-600">Print Quality</div>
|
||||
</div>
|
||||
<div class="space-y-2 text-center lg:text-left">
|
||||
<div class="text-3xl font-bold text-slate-900 md:text-4xl">$39.99</div>
|
||||
<div class="text-3xl font-bold text-slate-900 md:text-4xl">
|
||||
$39.99
|
||||
</div>
|
||||
<div class="text-sm text-slate-600">Per Design</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side - Simple Image -->
|
||||
<!-- Right Side - 3D Model -->
|
||||
<div class="relative hidden w-full lg:block lg:w-1/2">
|
||||
<div class="relative mx-auto max-w-4xl">
|
||||
<div class="relative mx-auto h-[300px] w-[300px] sm:h-[600px] sm:w-[600px]">
|
||||
<div class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-slate-100 shadow-xl overflow-hidden">
|
||||
<!-- Rotating Table with Fitted Cover -->
|
||||
<div class=" relative" style="transform-style: preserve-3d;">
|
||||
<div class="relative">
|
||||
<!-- Table with fitted cover -->
|
||||
<div class="relative">
|
||||
<!-- Table Top with jersey on cover -->
|
||||
<div class="relative h-48 w-96 sm:h-64 sm:w-[500px] rounded-t-lg bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 shadow-2xl">
|
||||
<!-- Jersey design on top of cover -->
|
||||
<div class="absolute inset-8 sm:inset-12 flex items-center justify-center rounded-xl bg-gradient-to-br from-blue-400 via-white to-red-400 shadow-2xl border-4 border-slate-300">
|
||||
<div class="absolute inset-4 sm:inset-6 flex items-center justify-center rounded-lg bg-gradient-to-br from-blue-100 via-white to-red-100 border-2 border-slate-200">
|
||||
<div class="text-center">
|
||||
<div class="text-5xl sm:text-7xl font-bold text-slate-800">23</div>
|
||||
<div class="text-sm sm:text-xl font-semibold text-slate-600 tracking-wider">CUSTOM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Subtle highlights on cover top -->
|
||||
<div class="absolute top-4 left-8 h-6 w-12 rounded-full bg-white/10 blur-lg"></div>
|
||||
</div>
|
||||
|
||||
<!-- Fitted Cover Skirt (draping down like trade show table) -->
|
||||
<div class="absolute top-48 sm:top-64 left-0 right-0 h-32 sm:h-40 bg-gradient-to-b from-slate-800 via-slate-900 to-slate-950 rounded-b-lg shadow-2xl">
|
||||
<!-- Fabric folds/pleats -->
|
||||
<div class="absolute inset-0 opacity-40" style="background: repeating-linear-gradient(90deg, transparent, transparent 16px, rgba(0,0,0,0.4) 16px, rgba(0,0,0,0.4) 18px);"></div>
|
||||
<!-- More realistic vertical folds -->
|
||||
<div class="absolute inset-0 opacity-20" style="background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, transparent 2px, transparent 14px, rgba(0,0,0,0.3) 16px);"></div>
|
||||
<!-- Shadow at bottom edge -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-4 bg-black/50 rounded-b-lg"></div>
|
||||
<!-- Ground shadow -->
|
||||
<div class="absolute -bottom-2 left-4 right-4 h-2 bg-black/30 blur-sm rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative mx-auto h-[300px] w-[300px] sm:h-[600px] sm:w-[600px]"
|
||||
>
|
||||
<div
|
||||
class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-300 bg-linear-to-br from-slate-700 to-slate-900 shadow-xl overflow-hidden"
|
||||
>
|
||||
<model-viewer
|
||||
src="/LAMESA.glb"
|
||||
alt="Table with Jersey"
|
||||
auto-rotate
|
||||
rotation-per-second="15deg"
|
||||
camera-controls
|
||||
shadow-intensity="1"
|
||||
class="w-full h-full"
|
||||
style="--poster-color: transparent"
|
||||
></model-viewer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user