chore: website modal

apps/website/app/components/Button.vue

@@ -0,0 +1,5 @@
+<template>
+  <button class="p-3 bg-emerald-500 border-b-4 border-emerald-600 text-white w-full rounded-lg font-medium cursor-pointer active:scale-95 hover:opacity-80 duration-200">
+    <slot />
+  </button>
+</template>

apps/website/app/components/Image.vue

@@ -0,0 +1,11 @@
+<template>
+  <img :src="getFullUrl(src)" alt="">
+</template>
+
+<script setup lang="ts">
+defineProps<{ src: string }>()
+
+function getFullUrl(src: string) {
+  return new URL(`chatgame-assets${src}`, 'https://storage.yandexcloud.net/').href
+}
+</script>

apps/website/app/components/MainHeader.vue

@@ -1,11 +1,10 @@
 <template>
-  <header class="z-10 fixed top-0 left-0 right-0 min-h-18 bg-orange-100 border-b border-orange-800/5 py-1 px-3 flex flex-row gap-2 justify-between items-center">
+  <header class="z-10 fixed top-0 left-0 right-0 min-h-18 bg-orange-100 border-b border-orange-800/10 py-1 px-3 flex flex-row gap-2 justify-between items-center">
     <div class="min-w-32 flex flex-row gap-1 items-center">
       <MainLogo />
       <MenuLocale />
     </div>
 
-    <MenuSmartphone />
     <MenuDesktop />
     <MenuProfile />
   </header>

apps/website/app/components/MainLogo.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="logo -mt-5 -mb-3 -ml-3 -mr-2 w-20 h-20 overflow-hidden">
-    <img :src="`/units/${randomChar}/128.png`" alt="" class="static w-20 h-20">
-    <img :src="`/units/${randomChar}/idle.gif`" alt="" class="animated w-20 h-20">
+  <div class="-mt-5 -mb-1 -ml-3 -mr-2 w-22 h-22 overflow-hidden duration-200 group">
+    <Image :src="`/units/${randomChar}/128.png`" class="w-22 h-22 block group-hover:hidden" />
+    <Image :src="`/units/${randomChar}/idle.gif`" class="w-22 h-22 hidden group-hover:block" />
   </div>
 </template>
 
@@ -21,31 +21,3 @@ const characters = [
 ]
 const randomChar = computed(() => characters[Math.floor(Math.random() * characters.length)])
 </script>
-
-<style scoped>
-.logo {
-  transition: all 0.2s;
-
-  .static-index {
-    display: block;
-  }
-
-  .static {
-    display: block;
-  }
-
-  .animated {
-    display: none;
-  }
-
-  &:hover {
-    .static {
-      display: none;
-    }
-
-    .animated {
-      display: block;
-    }
-  }
-}
-</style>

apps/website/app/components/MenuLocale.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="block">
+  <div class="hidden relative">
     <button class="select-lang" @click="handleListClick">
       <div class="icon">
         <Icon name="lucide:globe" class="!w-6 !h-6" />
@@ -29,10 +29,6 @@ function handleLocaleSwitch(code: 'ru' | 'en') {
 </script>
 
 <style scoped>
-  .block {
-    position: relative;
-  }
-
   .select-lang {
     padding: 0.25em 0 0.25em;
     display: flex;

apps/website/app/components/MenuProfile.vue

@@ -29,8 +29,6 @@ onMounted(() => {
 .profile-avatar {
   width: 58px;
   height: 58px;
-  background-color: var(--bronze-4);
-  border: 2px solid var(--bronze-6);
   border-radius: 50%;
   transition: all 0.2s;
 

apps/website/app/components/Modal.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="z-40 left-0 right-0 top-0 bottom-0 bg-neutral-950 opacity-0 transition-all duration-500"
+    :class="{ 'fixed! block! opacity-60': isOpened, 'opacity-0!': isClosing }"
+  />
+
+  <div v-if="$slots.bg && isOpened && !isClosing">
+    <slot name="bg" />
+  </div>
+
+  <div
+    class="z-40 flex flex-col justify-end fixed left-0 right-0 bottom-0 mx-auto w-full max-w-xl max-h-[100dvh] overflow-y-hidden p-4 m-0 pb-16 shadow-none translate-y-full transition-transform duration-500"
+    :class="{ 'top-0! translate-y-0!': isOpened, 'translate-y-full!': isClosing }"
+  >
+    <div ref="target" class="relative p-4 md:p-6 bg-orange-100 rounded-xl shadow-lg">
+      <div class="pb-20 max-h-[75dvh] !overflow-y-auto !overflow-hidden space-y-3">
+        <h3 class="text-xl md:text-2xl font-medium leading-tight">
+          {{ title }}
+        </h3>
+
+        <slot />
+      </div>
+
+      <div class="absolute bottom-0 right-0 left-0 bg-orange-100 rounded-xl px-4 md:px-6 pt-2 pb-4">
+        <Button @click="onClose()">
+          Закрыть
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside, usePointerSwipe } from '@vueuse/core'
+
+const { isOpened } = defineProps<{
+  isOpened: boolean
+  title: string
+}>()
+
+const emit = defineEmits(['close'])
+const isClosing = ref(false)
+const target = ref(null)
+
+onClickOutside(target, () => isOpened && onClose())
+const { isSwiping, direction } = usePointerSwipe(target)
+
+watch(isSwiping, () => {
+  if (direction.value === 'down') {
+    onClose()
+  }
+})
+
+function onClose() {
+  isClosing.value = true
+  setTimeout(() => {
+    emit('close')
+    isClosing.value = false
+  }, 500)
+}
+</script>

apps/website/app/pages/(games)/wagon/index.vue

@@ -8,7 +8,7 @@
           <img src="/qr.png" alt="qr" width="150" class="qr">
 
           <div class="wagon-card event">
-            <img src="/units/santa/head.png" alt="" width="44">
+            <Image src="/units/santa/head.png" width="44" />
             <p class="title">
               Рождественский переполох
             </p>
@@ -19,7 +19,7 @@
               <p>{{ member.profile.telegramProfile.firstName }}</p>
               <div class="points">
                 <p>{{ member.points }}</p>
-                <img src="/icons/christmas-cupcake.png" alt="" width="32" height="32">
+                <Image src="/items/k3bitdush5wqbwphhdfnxqtl/128.png" width="32" height="32" />
               </div>
             </div>
           </div>