forked from Simnation/Main
576 lines
No EOL
56 KiB
HTML
576 lines
No EOL
56 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
|
|
<!-- CSS only -->
|
|
<link rel="stylesheet" href="./index.css">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- JS only -->
|
|
<script src="./assets/api/vue.global.js"></script>
|
|
<script src="./assets/api/vuex.global.js"></script>
|
|
</head>
|
|
<body>
|
|
<v-app data-app>
|
|
<div id="app" class="w-[100vw] h-[100vh] flex">
|
|
<div class="w-full h-full bg-no-repeat bg-center bg-cover items-center justify-center flex overflow-hidden" :style="Show.Store || Show.Craft ? 'zoom: 1.25;' :'zoom: 1;'">
|
|
<div v-if="Show.Camera" class="w-full h-full flex items-center justify-center">
|
|
<div
|
|
v-if="SignalLostType > 0"
|
|
class="absolute left-0 top-0 w-full h-full"
|
|
:class="SignalLostType == 1 ? 'opacity-25' : SignalLostType == 2 ? 'opacity-50' : SignalLostType == 3 ? 'opacity-100' : ''"
|
|
style="background-image: url('./assets/image/no-signal.gif');background-position: center;background-repeat: no-repeat;background-size: cover;">
|
|
</div>
|
|
<div
|
|
v-if="Show.Data"
|
|
class="absolute left-0 top-0 w-full h-full flex justify-center items-center z-[3]"
|
|
>
|
|
<div class="flex items-start absolute top-[13.9vw] left-[50vw]">
|
|
<svg width="30.2604vw" height="14.2708vw" viewBox="0 0 581 274" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M580.5 0.5L0.999985 273.5" stroke="white" stroke-opacity="0.09"/>
|
|
</svg>
|
|
<div class="w-[15.625vw] h-[4.6875vw] border-[.0521vw] border-solid flex items-center p-[.7813vw] gap-x-[.7813vw]" style="border-color:rgba(255, 255, 255, 0.09);background: rgba(217, 217, 217, 0.03);">
|
|
<img class="w-[3.2292vw] h-[3.2292vw] rounded-[.2083vw] object-contain" :src="ShowData.type == 'vehicle' ? `https://docs.fivem.net/vehicles/${(ShowData.name).toLowerCase()}.webp` : ShowData.image" :alt="ShowData.ped">
|
|
<div class="flex flex-col items-start">
|
|
<p class="font-['DMMono-Regular'] text-[#ffffff]/35 text-[.625vw] leading-tight uppercase">{{ Locales.suspect_info }}</p>
|
|
<p class="font-['DMMono-Medium'] text-[#ffffff] text-[.6771vw] leading-tight uppercase">{{ ShowData.name }}</p>
|
|
<p class="font-['DMMono-Medium'] text-[#ffffff] text-[.625vw] leading-tight uppercase">{{ ShowData.type == 'vehicle' ? ShowData.plate : ShowData.birthDate }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="Show.EnterTimer" class="flex flex-col items-center justify-between w-full absolute bottom-[120px] left-[50%] transform -translate-x-1/2 -translate-y-1/2 z-[3]">
|
|
<div class="flex items-center justify-center border-[.0521vw] border-solid border-[#FFFFFF1A] p-[.4167vw] gap-x-[.625vw] w-[9.8958vw] h-max">
|
|
<input id="time-minutes" type="number" name="time" min="0" max="60" maxlength="2" class="bg-transparent flex items-center justify-center text-center outline-none border-none text-white font-['DMMono-Regular'] w-[3.125vw] text-[.7292vw]" placeholder="00">
|
|
<p class="text-white font-['DMMono-Regular'] text-[.7292vw]">:</p>
|
|
<input id="time-seconds" type="number" name="time" min="0" max="60" maxlength="1" class="bg-transparent flex items-center justify-center text-center outline-none border-none text-white font-['DMMono-Regular'] w-[3.125vw] text-[.7292vw]" placeholder="00">
|
|
</div>
|
|
<div class="flex items-center justify-center bg-[#FF3D3D] p-[.4167vw] gap-x-[.625vw] w-[9.8958vw] h-max text-white font-['DMMono-Regular'] text-[.7292vw] mt-[.2083vw] cursor-pointer" @click="StartTimer();"><p>{{ Locales.start_time }}</p></div>
|
|
</div>
|
|
<div v-if="Show.Timer" class="flex flex-col items-center justify-between w-full absolute bottom-[120px] left-[50%] transform -translate-x-1/2 -translate-y-1/2 z-[3]">
|
|
<div class="flex items-center justify-center border-[.0521vw] border-solid border-[#FFFFFF1A] p-[.4167vw] gap-x-[.625vw] w-[9.8958vw] h-max">
|
|
<p id="remaining-minutes" class="bg-transparent flex items-center justify-center text-center outline-none border-none text-white font-['DMMono-Regular'] w-[3.125vw] text-[.7292vw]">00</p>
|
|
<p class="text-white font-['DMMono-Regular'] text-[.7292vw]">:</p>
|
|
<p id="remaining-seconds" class="bg-transparent flex items-center justify-center text-center outline-none border-none text-white font-['DMMono-Regular'] w-[3.125vw] text-[.7292vw]">00</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-full flex bg-[#002E87]/20 items-center justify-center relative">
|
|
<div class="w-[62.8125vw] h-[56.25vw] absolute left-0 top-0" style="background: linear-gradient(269.97deg, rgba(0, 0, 0, 0) 2.02%, rgba(0, 0, 0, 0) 2.02%, rgba(0, 0, 0, 0.8) 78.92%);"></div>
|
|
<div class="w-[98.75vw] h-[55vw] border-[.0521vw] border-solid border-[#FFFFFF]/20 relative z-[2] p-[.5729vw] flex flex-col items-center justify-between">
|
|
<div v-if="Show.CameraNotification" class="absolute top-[1.0417vw] right-[1.0417vw] flex flex-col gap-y-2">
|
|
<div v-for="(notification, index) in Notifications" :key=index class="border-solid p-[.7813vw] border-[.0521vw] border-[#ffffff17] flex flex-col items-left justify-center bg-[#d9d9d908] w-[15.625vw] min-h-[2.9167vw] h-max">
|
|
<p class="text-[#FFFFFF] text-[.6771vw] font-['DMMono-Medium'] uppercase leading-tight">{{ notification.header }}</p>
|
|
<p class="text-[#FFFFFF]/35 text-[.625vw] tracking-[-0.2604%] font-['DMMono-Regular'] leading-none">{{ notification.message }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start justify-between w-full">
|
|
<div class="relative w-[7.9854vw] h-[11.2385vw]">
|
|
<div>
|
|
<div class="w-max h-max">
|
|
<div class="w-[.3906vw] h-[.0521vw] bg-[#FFFFFF] absolute left-0 top-0" style="box-shadow: 0vw .0521vw .7292vw 0vw #FFFFFF;"></div>
|
|
<div class="w-[.0521vw] h-[.3906vw] bg-[#FFFFFF] absolute left-0 top-0" style="box-shadow: 0vw .0521vw .7292vw 0vw #FFFFFF;"></div>
|
|
</div>
|
|
<div class="opacity-10 w-max h-max">
|
|
<div class="w-[7.8125vw] h-[.0521vw] absolute left-0 top-0" style="background: linear-gradient(90deg, #FFFFFF 1%, rgba(255, 255, 255, 0) 49%);"></div>
|
|
<div class="w-[.0521vw] h-[7.8125vw] absolute left-0 top-0" style="background: linear-gradient(180deg, #FFFFFF 1%, rgba(255, 255, 255, 0) 49%);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-[.5208vw] ml-[.5208vw] flex flex-col">
|
|
<div class="w-[6.6667vw] h-[2.6042vw] bg-[#D9D9D90D] border-[.0521vw] border-solid border-[#FFFFFF1A] flex items-center justify-center">
|
|
<p class="text-[#FFFFFF] text-[.8333vw] leading-[1.0849vw] tracking-[.1563vw] max-w-[6.6667vw] line-clamp-1 font-['DMMono-Regular'] uppercase">RC CAR</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-[.5208vw] mt-[1.4583vw]">
|
|
<div class="w-[.3646vw] h-[.3646vw] bg-[#FF3D3D] rounded-full pulse"></div>
|
|
<p class="text-[#FF5B5B] text-[.625vw] leading-[.8135vw] font-['DMMono-Regular'] uppercase">{{ Locales.recording }}</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-[.4167vw] mt-[1.3542vw]">
|
|
<p class="text-[1.5625vw] leading-[1.3542vw] text-[#FFFFFF] font-['DMMono-Medium'] uppercase">4K</p>
|
|
<div class="flex flex-col items-start h-max">
|
|
<p class="text-[.625vw] leading-[.6771vw] text-[#FFFFFF] font-['DMMono-Regular']">4096x2160</p>
|
|
<p class="text-[.625vw] leading-[.6771vw] text-[#FFFFFF66] font-['DMMono-Regular'] uppercase">60FPS</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-[.625vw] leading-[.8135vw] text-[#FFFFFF] mt-[1.1979vw] font-['DMMono-Regular']">{{ timers }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="relative mt-[.5208vw] flex flex-col items-center overflow-hidden">
|
|
<div class="flex items-center gap-x-[.3125vw]">
|
|
<div class="w-[3.9583vw] h-[2.2396vw] flex items-center justify-center" :class="ActiveFilter == 'NRM' ? 'bg-[#D9D9D90D] border-[.0521vw] border-solid border-[#FFFFFF1A]' : '' ">
|
|
<p class="font-['DMMono-Medium'] text-[.8333vw] leading-[1.0849vw] max-w-[3.9583vw] line-clamp-1" :class="ActiveFilter == 'NRM' ? 'text-[#FFFFFF]' : 'text-[#FFFFFF59]' ">NRM</p>
|
|
</div>
|
|
<div class="w-[3.9583vw] h-[2.2396vw] flex items-center justify-center" :class="ActiveFilter == 'NGTV' ? 'bg-[#D9D9D90D] border-[.0521vw] border-solid border-[#FFFFFF1A]' : '' ">
|
|
<p class="font-['DMMono-Medium'] text-[.8333vw] leading-[1.0849vw] max-w-[3.9583vw] line-clamp-1" :class="ActiveFilter == 'NGTV' ? 'text-[#FFFFFF]' : 'text-[#FFFFFF59]' ">NGTV</p>
|
|
</div>
|
|
<div class="w-[3.9583vw] h-[2.2396vw] flex items-center justify-center" :class="ActiveFilter == 'THRML' ? 'bg-[#D9D9D90D] border-[.0521vw] border-solid border-[#FFFFFF1A]' : '' ">
|
|
<p class="font-['DMMono-Medium'] text-[.8333vw] leading-[1.0849vw] max-w-[3.9583vw] line-clamp-1" :class="ActiveFilter == 'THRML' ? 'text-[#FFFFFF]' : 'text-[#FFFFFF59]' ">THRML</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-[7.9854vw] h-[11.2385vw]">
|
|
<div>
|
|
<div class="w-max h-max">
|
|
<div class="w-[.3906vw] h-[.0521vw] bg-[#FFFFFF] absolute right-0 top-0" style="box-shadow: 0vw .0521vw .7292vw 0vw #FFFFFF;"></div>
|
|
<div class="w-[.0521vw] h-[.3906vw] bg-[#FFFFFF] absolute right-0 top-0" style="box-shadow: 0vw .0521vw .7292vw 0vw #FFFFFF;"></div>
|
|
</div>
|
|
<div class="opacity-10 w-max h-max">
|
|
<div class="w-[7.8125vw] h-[.0521vw] absolute right-0 top-0" style="background: linear-gradient(-90deg, #FFFFFF 1%, rgba(255, 255, 255, 0) 49%);"></div>
|
|
<div class="w-[.0521vw] h-[7.8125vw] absolute right-0 top-0" style="background: linear-gradient(180deg, #FFFFFF 1%, rgba(255, 255, 255, 0) 49%);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-[.5208vw] mr-[.5208vw] flex flex-col items-end">
|
|
<div class="flex flex-col items-start justify-center border-[.0521vw] border-solid border-[#FFFFFF1A] p-[.4167vw] gap-x-[.625vw] w-max">
|
|
<p class="font-['DMMono-Medium'] text-[.7292vw] leading-snug text-[#FFFFFF] text-nowrap line-clamp-1">{{ CarName }}</p>
|
|
<p class="font-['DMMono-Regular'] text-[.625vw] leading-snug text-[#FFFFFF80] text-nowrap line-clamp-1">{{ Locales.battery }}: {{ BatteryLevel }}% | {{ Locales.distance }}: {{ DistanceLevel }}m | {{ Locales.damage }}: {{ DamageLevel }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-center w-full">
|
|
<div v-show="Show.Cross" class="flex items-center justify-center w-full absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2">
|
|
<div class="w-[12.7604vw] h-[12.7604vw] border-[.0521vw] border-solid border-[#FFFFFF1A] rounded-full flex flex-col items-center justify-center relative">
|
|
<div class="w-[7.8125vw] h-[7.8125vw] border-[.0521vw] border-solid border-[#FFFFFF80] rounded-full flex flex-col items-center justify-center relative">
|
|
<div class="w-[.0521vw] h-[.8333vw] bg-[#FFFFFF] absolute left-50 top-[-.4167vw]" style="box-shadow: 0vw .0521vw .5208vw 0vw #FFFFFF;"></div>
|
|
<div class="w-[.8333vw] h-[.0521vw] bg-[#FFFFFF] absolute left-[-.4167vw] top-50" style="box-shadow: 0vw .0521vw .5208vw 0vw #FFFFFF;"></div>
|
|
<div class="w-[.3125vw] h-[.3125vw] rounded-full bg-[#fff]"></div>
|
|
<div class="w-[.8333vw] h-[.0521vw] bg-[#FFFFFF] absolute right-[-.4167vw] top-50" style="box-shadow: 0vw .0521vw .5208vw 0vw #FFFFFF;"></div>
|
|
<div class="w-[.0521vw] h-[.8333vw] bg-[#FFFFFF] absolute left-50 bottom-[-.4167vw]" style="box-shadow: 0vw .0521vw .5208vw 0vw #FFFFFF;"></div>
|
|
</div>
|
|
</div>
|
|
<img src="./assets/svg/record.svg" alt="right-line" class="w-[16.1458vw] h-[16.1458vw] object-contain absolute">
|
|
</div>
|
|
<div v-if="Show.Plugins" class="justify-center flex flex-col items-end w-full gap-y-[.2083vw] relative z-10">
|
|
<div v-for="(extension, index) in ActivePlugins">
|
|
<div v-if="extension.status" class="flex items-center justify-between border-[.0521vw] border-solid border-[#FFFFFF1A] p-[.4167vw] gap-x-[.625vw] w-[13.9583vw]" @click="StartPlugin(extension.name);">
|
|
<div class="w-[1.3542vw] h-[1.3542vw]">
|
|
<div v-show="ActivePlugin == extension.name" class="w-full h-full bg-[#D9D9D90D] flex items-center justify-center">
|
|
<img src="./assets/svg/success.svg" alt="success" class="w-[.7151vw] h-[.5359vw] object-contain">
|
|
</div>
|
|
</div>
|
|
<p class="font-['DMMono-Medium'] text-[.625vw] leading-snug text-[#FFFFFF80] text-nowrap max-w-[11.4583vw] line-clamp-1">{{extension.name}} {{ Locales.extensions }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-end justify-between w-full">
|
|
<div class="relative">
|
|
<div>
|
|
<div class="w-max h-max">
|
|
<div class="w-[.3906vw] h-[.0521vw] bg-[#FFFFFF] absolute left-0 bottom-0" style="box-shadow: 0vw .0521vw .7292vw 0vw #FFFFFF;"></div>
|
|
<div class="w-[.0521vw] h-[.3906vw] bg-[#FFFFFF] absolute left-0 bottom-0" style="box-shadow: 0vw .0521vw .7292vw 0vw #FFFFFF;"></div>
|
|
</div>
|
|
<div class="opacity-10 w-max h-max">
|
|
<div class="w-[7.8125vw] h-[.0521vw] absolute left-0 bottom-0" style="background: linear-gradient(90deg, #FFFFFF 1%, rgba(255, 255, 255, 0) 49%);"></div>
|
|
<div class="w-[.0521vw] h-[7.8125vw] absolute left-0 bottom-0" style="background: linear-gradient(360deg, #FFFFFF 1%, rgba(255, 255, 255, 0) 49%);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-[.5208vw] ml-[.5208vw] flex flex-col">
|
|
<div class="flex flex-col items-start mb-[1.5625vw]">
|
|
<div class="flex items-center gap-x-[.4167vw] mb-[.5729vw]">
|
|
<p class="font-['DMMono-Regular'] text-[.625vw] leading-[.8135vw] text-[#FFFFFF] uppercase">{{ Players.grade }}</p>
|
|
<p class="font-['DMMono-Regular'] text-[.625vw] leading-[.8135vw] text-[#FFFFFF] uppercase">/</p>
|
|
<p class="font-['DMMono-Regular'] text-[.625vw] leading-[.8135vw] text-[#FFFFFF] uppercase">{{ Locales.grade }}</p>
|
|
</div>
|
|
<p class="font-['DMMono-Medium'] text-[.9375vw] leading-[1.2208vw] text-[#FFFFFF] uppercase">{{ Players.fullName }}</p>
|
|
<p class="font-['DMMono-Regular'] text-[.625vw] leading-[.8135vw] text-[#FFFFFF59] uppercase">{{ Players.job }}</p>
|
|
</div>
|
|
<div class="w-[9.4271vw] h-[4.4792vw] bg-[#D9D9D90D] border-[.0521vw] border-solid border-[#FFFFFF1A] flex flex-col items-center justify-center">
|
|
<div class="flex flex-col items-start">
|
|
<p class="font-['DMMono-Medium'] text-[.625vw] leading-[.8135vw] text-[#FFFFFF80] uppercase max-w-[8.3333vw] line-clamp-1">{{ Locales.current_date }}</p>
|
|
<p class="font-['DMMono-Medium'] text-[.8333vw] leading-[1.0849vw] text-[#FFFFFF] uppercase max-w-[8.3333vw] line-clamp-1">{{ dateString }}</p>
|
|
<p class="font-['DMMono-Regular'] text-[.625vw] leading-[.8135vw] text-[#FFFFFF] uppercase max-w-[8.3333vw] line-clamp-1">{{ hoursString }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative flex flex-col items-center gap-y-[.7813vw]">
|
|
<img src="./assets/svg/mouse.svg" alt="mouse" class="w-[1.6146vw] h-[1.6667vw]">
|
|
<p class="font-['DMMono-Medium'] uppercase leading-[.8135vw] text-[.625vw] text-[#FFFFFF80]">{{ Locales.use }} <span class="text-[#FFFFFF]">{{ Locales.mouse_scroll }}</span> {{ Locales.zoom }}</p>
|
|
</div>
|
|
<div class="relative w-[9.9479vw]">
|
|
<div>
|
|
<div class="w-max h-max">
|
|
<div class="w-[.3906vw] h-[.0521vw] bg-[#FFFFFF] absolute right-0 bottom-0" style="box-shadow: 0vw .0521vw .7292vw 0vw #FFFFFF;"></div>
|
|
<div class="w-[.0521vw] h-[.3906vw] bg-[#FFFFFF] absolute right-0 bottom-0" style="box-shadow: 0vw .0521vw .7292vw 0vw #FFFFFF;"></div>
|
|
</div>
|
|
<div class="opacity-10 w-max h-max">
|
|
<div class="w-[7.8125vw] h-[.0521vw] absolute right-0 bottom-0" style="background: linear-gradient(-90deg, #FFFFFF 1%, rgba(255, 255, 255, 0) 49%);"></div>
|
|
<div class="w-[.0521vw] h-[7.8125vw] absolute right-0 bottom-0" style="background: linear-gradient(360deg, #FFFFFF 1%, rgba(255, 255, 255, 0) 49%);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-[.5208vw] mr-[.5208vw] flex flex-col gap-y-[.3646vw]">
|
|
<p class="font-['DMMono-Medium'] uppercase text-[#FFFFFF] text-[.7292vw] leading-[.9495vw] text-right">{{ Locales.current_location }}</p>
|
|
<div>
|
|
<p class="font-['DMMono-Medium'] uppercase text-[#FFFFFF4D] text-[.625vw] leading-[.8135vw] text-right">Los Santos</p>
|
|
<p class="font-['DMMono-Medium'] uppercase text-[#FFFFFF] text-[.7292vw] leading-[.9495vw] text-right">{{ StreetName }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[62.8125vw] h-[56.25vw] absolute right-0 top-0 rotate-180" style="background: linear-gradient(269.97deg, rgba(0, 0, 0, 0) 2.02%, rgba(0, 0, 0, 0) 2.02%, rgba(0, 0, 0, 0.8) 78.92%);"></div>
|
|
</div>
|
|
</div>
|
|
<div v-if="Show.Store" class="w-[40.0521vw] h-[23.125vw] bg-[#111113] border-[.0521vw] border-solid border-[#FFFFFF0D] rounded-[.7292vw] p-[.5208vw] relative overflow-hidden">
|
|
<div class="flex items-start justify-between w-full border-b-[.0521vw] pb-[.5208vw] border-solid border-[#FFFFFF1A] relative z-[2]">
|
|
<div class="flex flex-col items-start gap-y-[.2604vw]">
|
|
<div class="flex items-center gap-x-[.2083vw]">
|
|
<img src="./assets/svg/game-console.svg" alt="game-console" class="w-[.8333vw] h-[.5208vw] object-contain">
|
|
<p class="font-['Roboto-Bold'] text-[.8333vw] !leading-none text-[#FFFFFF]">{{ Locales.store }}</p>
|
|
</div>
|
|
<p class="font-['Roboto-Regular'] text-[.625vw] !leading-none text-[#FFFFFF99] w-[12.4479vw] line-clamp-2 h-[1.09vw]">{{ Locales.store_desc }}</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-[.625vw]">
|
|
<div class="w-max h-[1.5625vw] bg-[#FFFFFF1A] flex items-center justify-start rounded-full gap-x-[.2083vw] pl-[.3125vw] pr-[0.6125vw]" @click="OpenStoreToCraft();">
|
|
<img src="./assets/svg/info.svg" alt="info" class="w-[.9375vw] h-[.9375vw] object-contain">
|
|
<p class="font-['Roboto-Bold'] text-[.7292vw] !leading-none text-[#FFFFFF80]">{{ Locales.craft }}</p>
|
|
</div>
|
|
<div class="flex items-center justify-center bg-[#FFFFFF1A] p-[.3125vw] rounded-full cursor-pointer" @click="Close();">
|
|
<img src="./assets/svg/close.svg" alt="close" class="w-[.9375vw] h-[.9375vw] object-contain">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-[.3125vw] flex items-start justify-between relative z-[2]">
|
|
<div class="flex flex-col items-start gap-y-[.4167vw]">
|
|
<div
|
|
class="flex items-center gap-x-[.2083vw] max-w-[26.875vw] overflow-hidden cursor-grab"
|
|
ref="scrollableDiv"
|
|
@mousedown="startDragging"
|
|
@mousemove="onDragging"
|
|
@mouseup="stopDragging"
|
|
@mouseleave="stopDragging"
|
|
>
|
|
<div
|
|
v-for="(category, index) in Categorys"
|
|
:key="index"
|
|
class="rounded-full py-[.4688vw] px-[1.1979vw] transition-colors duration-300 cursor-pointer"
|
|
:class="ActiveCategory.id == category.id ? 'bg-[#35BF93]' : 'bg-[#FFFFFF1A] group hover:bg-[#FFFFFF33]'"
|
|
@click="ChangeCategory(category)"
|
|
>
|
|
<p
|
|
class="font-['Roboto-Bold'] text-[.7292vw] leading-none transition-colors duration-300 uppercase truncate"
|
|
:class="ActiveCategory.id == category.id ? 'text-[#2F2F2F]' : 'text-[#FFFFFF80] group-hover:text-[#FFFFFFB2]'"
|
|
>
|
|
{{ category.name }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="category-content" class="grid grid-cols-2 gap-[.4167vw] max-h-[16.8vw] overflow-x-auto pr-[.2083vw] rounded-[.4167vw]">
|
|
<div
|
|
v-for="(car, index) in filteredProducts"
|
|
:key="car.item.name"
|
|
class="w-[13.0208vw] h-[5.7813vw] rounded-[.5729vw] relative p-[.4167vw] duration-300 transition-all border-[.0521vw] border-solid border-[#FFFFFF0D] cursor-pointer"
|
|
:class="ActiveCar?.item?.name == car.item.name ? 'bg-[#35BF93]' : 'bg-[#FFFFFF0D] hover:bg-[#FFFFFF1A]'"
|
|
@click="ActiveCar = car"
|
|
>
|
|
<div class="flex flex-col h-full items-start justify-between">
|
|
<div class="flex flex-col items-start">
|
|
<p
|
|
class="font-['Roboto-Bold'] text-[.8333vw] !leading-none uppercase"
|
|
:class="ActiveCar?.item?.name == car.item.name ? 'text-[#2F2F2F]' : 'text-[#FFFFFF]'"
|
|
>
|
|
{{ car.item.label }}
|
|
</p>
|
|
<p
|
|
class="font-['Roboto-Regular'] text-[.625vw] !leading-none"
|
|
:class="ActiveCar?.item?.name == car.item.name ? 'text-[#00000099]' : 'text-[#FFFFFF99]'"
|
|
>
|
|
{{ capitalize(car?.item?.category) }}
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="text-[.7292vw] !leading-none font-['Montserrat-Bold']"
|
|
:class="ActiveCar?.item?.name == car.item.name ? 'text-[#2F2F2F]' : 'text-[#35BF93]'"
|
|
>
|
|
{{ formatPrice(car.item.price) }}
|
|
</p>
|
|
</div>
|
|
<img
|
|
:src="`./assets/image/${car.item.name}.png`"
|
|
alt="car-image"
|
|
class="absolute top-1/2 left-1/2 w-[6.5625vw] h-[3.2292vw] object-contain transform -translate-x-1/2 -translate-y-1/2"
|
|
/>
|
|
<img src="./assets/svg/union.svg" alt="union" class="w-[3.2031vw] h-[4.6354vw] absolute left-[8.4635vw] top-0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[11.9271vw] h-[18.75vw] bg-[#FFFFFF0D] flex flex-col items-center rounded-[.5729vw] p-[.4167vw] relative border-[.0521vw] border-solid border-[#FFFFFF0D]">
|
|
<div class="flex items-start justify-between w-full">
|
|
<div class="flex flex-col items-start">
|
|
<p class="font-['Roboto-Bold'] text-[#FFFFFF] text-[.8333vw] !leading-none uppercase">{{ ActiveCar?.item?.label ?? 'Select a Car'}}</p>
|
|
<p class="font-['Roboto-Regular'] text-[#FFFFFF99] text-[.625vw] !leading-none">{{ capitalize(ActiveCar?.item?.category) }}</p>
|
|
</div>
|
|
<div class="w-[1.0417vw] h-[1.0417vw] bg-[#FFFFFF1A] rounded-full flex items-center justify-center cursor-pointer" @click="OpenCarInformation();">
|
|
<img :src="Show.CarInformation ? './assets/svg/close.svg' : './assets/svg/info.svg'" alt="info" class="w-[.7292vw] h-[.7292vw] object-contain">
|
|
</div>
|
|
</div>
|
|
<div v-if="!Show.CarInformation" class="flex flex-col items-start justify-between w-full">
|
|
<img :src="ActiveCar.item.name == 'select_a_car' ? `./assets/image/default-2.png` : `./assets/image/${ActiveCar?.item?.name}.png`" alt="car" class="w-[10.5208vw] h-[5.1042vw] object-contain mt-[.3646vw]">
|
|
<div class="flex flex-col w-full items-center mt-[.625vw] gap-y-[.4167vw]">
|
|
<div class="w-full flex flex-col items-start">
|
|
<div class="w-full flex items-center justify-between">
|
|
<div class="flex items-center gap-x-[.2083vw]">
|
|
<img src="./assets/svg/engine.svg" alt="engine" class="w-[1.1458vw] h-[1.1458vw] object-contain">
|
|
<p class="text-[#FFFFFF] font-['Roboto-Bold'] text-[.625vw] !leading-none">{{ Locales.speed }}</p>
|
|
</div>
|
|
<p class="font-['Roboto-Regular'] text-[.625vw] text-[#FFFFFF] !leading-none">{{ ActiveCar?.vehicle?.istatistics?.speed }}</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-[.2083vw] relative h-max w-full">
|
|
<div v-for="(number, index) in 44" :key="index" class="w-[.0521vw] h-[.4167vw] bg-[#FFFFFF1A]"></div>
|
|
<div class="absolute top-0 left-0 h-[.4167vw]" :class="`w-[${pxToVw(ActiveCar?.vehicle?.istatistics?.speed)}]`" style="transition: width 0.5s ease-in-out;background: linear-gradient(270deg, rgba(54, 255, 159, 0.7) 0%, rgba(54, 255, 159, 0) 100%);">
|
|
<div class="w-[.1042vw] h-[.4167vw] bg-[#fff] absolute right-0 top-0"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col items-start">
|
|
<div class="w-full flex items-center justify-between">
|
|
<div class="flex items-center gap-x-[.2083vw]">
|
|
<img src="./assets/svg/car-wheel.svg" alt="engine" class="w-[1.1458vw] h-[1.1458vw] object-contain">
|
|
<p class="text-[#FFFFFF] font-['Roboto-Bold'] text-[.625vw] !leading-none">{{ Locales.control }}</p>
|
|
</div>
|
|
<p class="font-['Roboto-Regular'] text-[.625vw] text-[#FFFFFF] !leading-none">{{ ActiveCar?.vehicle?.istatistics?.control }}</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-[.2083vw] relative h-max w-full">
|
|
<div v-for="(number, index) in 44" :key="index" class="w-[.0521vw] h-[.4167vw] bg-[#FFFFFF1A]"></div>
|
|
<div class="absolute top-0 left-0 h-[.4167vw]" :class="`w-[${pxToVw(ActiveCar?.vehicle?.istatistics?.control)}]`" style="transition: width 0.5s ease-in-out;background: linear-gradient(270deg, rgba(54, 255, 159, 0.7) 0%, rgba(54, 255, 159, 0) 100%);">
|
|
<div class="w-[.1042vw] h-[.4167vw] bg-[#fff] absolute right-0 top-0"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col items-start">
|
|
<div class="w-full flex items-center justify-between">
|
|
<div class="flex items-center gap-x-[.2083vw]">
|
|
<img src="./assets/svg/brake-pads.svg" alt="engine" class="w-[1.1458vw] h-[1.1458vw] object-contain">
|
|
<p class="text-[#FFFFFF] font-['Roboto-Bold'] text-[.625vw] !leading-none">{{ Locales.brake }}</p>
|
|
</div>
|
|
<p class="font-['Roboto-Regular'] text-[.625vw] text-[#FFFFFF] !leading-none">{{ ActiveCar?.vehicle?.istatistics?.brake }}</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-[.2083vw] relative h-max w-full">
|
|
<div v-for="(number, index) in 44" :key="index" class="w-[.0521vw] h-[.4167vw] bg-[#FFFFFF1A]"></div>
|
|
<div class="absolute top-0 left-0 h-[.4167vw]" :class="`w-[${pxToVw(ActiveCar?.vehicle?.istatistics?.brake)}]`" style="transition: width 0.5s ease-in-out;background: linear-gradient(270deg, rgba(54, 255, 159, 0.7) 0%, rgba(54, 255, 159, 0) 100%);">
|
|
<div class="w-[.1042vw] h-[.4167vw] bg-[#fff] absolute right-0 top-0"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="Show.CarInformation" class="flex flex-col items-start justify-between w-full">
|
|
<p class="text-[#FFFFFF99] font-['Roboto-Regular'] text-[.625vw] leading-none max-w-[11.1979vw] mt-[1.1979vw]">{{ ActiveCar?.item?.description }}</p>
|
|
<p class="text-[#FFFFFF4D] font-['Roboto-Regular'] text-[.625vw] leading-none max-w-[11.1979vw] mt-[.8333vw]">{{ Locales.made_in }}</p>
|
|
</div>
|
|
<div class="w-max flex flex-col items-center absolute bottom-0 left-0 gap-y-[.2083vw] m-[.4167vw]">
|
|
<div class="flex items-center justify-center bg-white transition-colors duration-300 hover:bg-[#35BF93] w-[11.0938vw] h-[1.4583vw] rounded-full p-[.1563vw] relative cursor-pointer" @click="BuyCar();">
|
|
<div class="w-[1.0417vw] h-[1.0417vw] bg-[#0000001A] flex items-center justify-center rounded-full absolute top-0 left-0 m-[.1563vw]">
|
|
<img src="./assets/svg/cart-24-filled.svg" alt="cart" class="w-[.625vw] h-[.625vw] object-contain">
|
|
</div>
|
|
<p class="font-['Roboto-Bold'] text-[#2F2F2F] text-[.7292vw] text-center !leading-none uppercase">{{ ActiveCar?.item?.price ? formatPrice(ActiveCar?.item?.price) : formatPrice(0) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="Show.Craft" class="w-[40.0521vw] h-[23.125vw] bg-[#111113] border-[.0521vw] border-solid border-[#FFFFFF0D] rounded-[.7292vw] p-[.5208vw] relative overflow-hidden">
|
|
<div class="flex items-start justify-between w-full border-b-[.0521vw] pb-[.5208vw] border-solid border-[#FFFFFF1A] relative z-[2]">
|
|
<div class="flex flex-col items-start gap-y-[.2604vw]">
|
|
<div class="flex items-center gap-x-[.2083vw]">
|
|
<img src="./assets/svg/hammer-light.svg" alt="hammer" class="w-[.8333vw] h-[.7813vw] object-contain">
|
|
<p class="font-['Roboto-Bold'] text-[.8333vw] !leading-none text-[#FFFFFF]">{{ Locales.craft }}</p>
|
|
</div>
|
|
<p class="font-['Roboto-Regular'] text-[.625vw] !leading-none text-[#FFFFFF99] w-[12.4479vw] line-clamp-2 h-[1.09vw]">{{ Locales.craft_desc }}</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-[.625vw]">
|
|
<div class="w-max h-[1.5625vw] bg-[#FFFFFF1A] flex items-center justify-start rounded-full gap-x-[.2083vw] pl-[.3125vw] pr-[0.6125vw]" @click="OpenCraftToStore();">
|
|
<img src="./assets/svg/info.svg" alt="info" class="w-[.9375vw] h-[.9375vw] object-contain">
|
|
<p class="font-['Roboto-Bold'] text-[.7292vw] !leading-none text-[#FFFFFF80]">{{ Locales.store }}</p>
|
|
</div>
|
|
<div class="flex items-center justify-center bg-[#FFFFFF1A] p-[.3125vw] rounded-full cursor-pointer" @click="Close();">
|
|
<img src="./assets/svg/close.svg" alt="close" class="w-[.9375vw] h-[.9375vw] object-contain">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-[.3125vw] flex items-start justify-between relative z-[2]">
|
|
<div id="category-content" class="grid items-center gap-y-[.4167vw] overflow-x-hidden overflow-y-auto max-h-[18.8333vw] pr-[.2083vw]">
|
|
<div
|
|
v-for="(craft, index) in Crafts"
|
|
:key="index"
|
|
class="w-[13.0208vw] h-[5.7813vw] rounded-[.5729vw] relative p-[.4167vw] duration-300 transition-all border-[.0521vw] border-solid border-[#FFFFFF0D]"
|
|
:class="ActiveCraft?.item?.name == craft.item.name ? 'bg-[#35BF93]' : 'bg-[#FFFFFF0D] hover:bg-[#FFFFFF1A]'"
|
|
@click="NewCraftItem(craft)"
|
|
>
|
|
<div class="flex flex-col h-full items-start justify-between">
|
|
<div class="flex flex-col items-start">
|
|
<p
|
|
class="font-['Roboto-Bold'] text-[.8333vw] !leading-none uppercase"
|
|
:class="ActiveCraft?.item?.name == craft.item.name ? 'text-[#2F2F2F]' : 'text-[#FFFFFF]'"
|
|
>
|
|
{{ craft.item.label }}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between w-full">
|
|
<p
|
|
class="text-[.7292vw] !leading-none font-['Montserrat-Bold']"
|
|
:class="ActiveCraft?.item?.name == craft.item.name ? 'text-[#2F2F2F]' : 'text-[#35BF93]'"
|
|
>
|
|
{{ formatPrice(craft.item.price) }}
|
|
</p>
|
|
<div v-if="ActiveCrafting?.item?.name == craft.item?.name" class="flex items-center gap-x-[.2083vw]">
|
|
<p class="font-['Roboto-Regular'] text-[.625vw] !leading-none uppercase" :class="ActiveCraft?.item?.name == craft.item.name ? 'text-[#000000B2]' : 'text-[#FFFFFFB2]' ">{{getMinTime}} {{ Locales.minutes }}</p>
|
|
<img :src="ActiveCraft?.item?.name == craft.item?.name ? './assets/svg/time-atack-dark.svg' : './assets/svg/time-atack-light.svg'" alt="time-atack" class="w-[.6641vw] h-[.6641vw] object-contain">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img
|
|
:src="`./assets/image/${craft?.item?.name}.png`"
|
|
alt="craft-image"
|
|
class="absolute top-1/2 left-1/2 w-[6.5625vw] h-[3.2292vw] object-contain transform -translate-x-1/2 -translate-y-1/2"
|
|
/>
|
|
<img src="./assets/svg/union.svg" alt="union" class="w-[3.2031vw] h-[4.6354vw] absolute left-[8.4635vw] top-0">
|
|
</div>
|
|
</div>
|
|
<div class="w-[25.3646vw] h-[18.75vw] rounded-[.5729vw] bg-[#FFFFFF0D] p-[.4167vw] flex flex-col items-start justify-between relative">
|
|
<div class="flex flex-col items-start">
|
|
<p class="font-['Roboto-Regular'] text-[.625vw] text-[#FFFFFF99] leading-none uppercase">{{ Locales.req_res }}</p>
|
|
<div class="mt-[.4688vw] grid items-center gap-[.2083vw]" style="grid-template-columns: repeat(2, max-content);">
|
|
<div v-if="ActiveCraft.resources" v-for="(requiredCount, resourceName) in ActiveCraft.resources" :key="resourceName" class="flex flex-col items-center justify-center gap-y-[.2083vw] w-[2.8125vw] h-[3.3333vw] rounded-[.2083vw] bg-[#FFFFFF0D] border-[.0521vw] border-solid border-[#FFFFFF0D]">
|
|
<img :src="`./assets/image/${resourceName}.png`" :alt="resourceName" class="w-[1.8229vw] h-[1.8229vw] object-contain">
|
|
<p class="font-['Roboto-Regular'] text-[.625vw] text-[#FFFFFF99] leading-none uppercase">
|
|
{{ getResourceCountValue(resourceName) ?? '0' }} / {{ requiredCount }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-end justify-end w-full">
|
|
<div class="flex items-center">
|
|
<div class="w-max h-[1.875vw] flex items-center justify-between gap-x-[.4167vw] px-[.625vw] rounded-full border-[.0521vw] border-solid border-[#FFFFFF1A]">
|
|
<p class="font-['Roboto-Bold'] text-[#FFFFFF80] text-[.7292vw] leading-none">{{ Locales.price }}</p>
|
|
<p class="font-['Roboto-Bold'] text-[#35BF93] text-[.7292vw] leading-none text-nowrap">{{ ActiveCraft?.item?.price ? formatPrice(ActiveCraft?.item?.price) : formatPrice(0) }}</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-[.2083vw] mx-[.2083vw]">
|
|
<div v-for="(number, index) in 4" :key="index" class="w-[.0521vw] h-[1.4583vw] rounded-full bg-[#FFFFFF1A]"></div>
|
|
</div>
|
|
<div class="w-max h-[1.875vw] flex items-center justify-between px-[.2083vw] rounded-full border-[.0521vw] border-solid border-[#FFFFFF1A]">
|
|
<div class="w-full h-[1.4583vw] rounded-full bg-white transition-colors duration-300 hover:bg-[#35BF93] px-[.8333vw] flex items-center justify-center cursor-pointer gap-x-[.4167vw]" @click="Crafting();">
|
|
<img src="./assets/svg/hammer-dark.svg" alt="hammer" class="w-[.8333vw] h-[.7813vw] object-contain">
|
|
<p class="font-['Roboto-Bold'] text-[.7292vw] leading-none text-[#2F2F2F]">{{ Locales.start }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-start absolute top-[1.3542vw] left-[6.875vw]">
|
|
<div class="flex flex-col items-start gap-y-[.3125vw] mb-[.9375vw]">
|
|
<p class="font-['Roboto-Bold'] text-[.8333vw] leading-none text-[#FFFFFF]">{{ ActiveCraft?.item?.label ?? 'Select a Item' }}</p>
|
|
<p class="font-['Roboto-Regular'] text-[.7292vw] leading-none text-[#FFFFFF99]">{{ Locales.item }}</p>
|
|
</div>
|
|
<img
|
|
:src="ActiveCraft.item.name == 'select_a_craft' ? './assets/image/default-2.png' : `./assets/image/${ActiveCraft.item.name}.png`"
|
|
alt="nissan"
|
|
class="w-[11.4583vw] h-[5.625vw] object-contain relative top-[1.0417vw]"
|
|
>
|
|
<svg v-if="ActiveCraft?.item?.name == ActiveCrafting?.item?.name" width="11.1979vw" height="12.2917vw" class="absolute top-[.3646vw] left-[2.9688vw]" viewBox="0 0 215 236" fill="none" xmlns="http://www.w3.org/2000/svg ">
|
|
<path
|
|
v-for="(path, index) in paths"
|
|
:key="index"
|
|
:d="path.d"
|
|
:fill="path.color"
|
|
:fill-opacity="path.opacity"
|
|
/>
|
|
<path d="M98 216C123.991 216 148.918 205.675 167.296 187.296C185.675 168.918 196 143.991 196 118C196 92.0088 185.675 67.0821 167.296 48.7035C148.918 30.325 123.991 20 98 20L98 21.5132C123.59 21.5132 148.132 31.6787 166.227 49.7735C184.321 67.8683 194.487 92.4101 194.487 118C194.487 143.59 184.321 168.132 166.226 186.227C148.132 204.321 123.59 214.487 98 214.487V216Z" fill="url(#paint0_linear_1_1503)" fill-opacity="0.05"/>
|
|
<defs>
|
|
<linearGradient id="paint0_linear_1_1503" x1="196" y1="118" x2="110.5" y2="118" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="white"/>
|
|
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<svg v-if="ActiveCraft?.item?.name != ActiveCrafting?.item?.name" width="11.1979vw" height="12.2917vw" class="absolute top-[.3646vw] left-[2.9688vw]" viewBox="0 0 215 236" fill="none" xmlns="http://www.w3.org/2000/svg ">
|
|
<path d="M104 11.5645L106.891 11.8247L107.932 0.260205L105.041 0L104 11.5645Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M116.371 13.2392L113.515 12.7209L115.588 1.29629L118.444 1.81461L116.371 13.2392Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M122.871 14.7234L125.669 15.4957L128.758 4.30292L125.96 3.53067L122.871 14.7234Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M134.729 18.5771L132.011 17.5571L136.091 6.68629L138.809 7.70627L134.729 18.5771Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M140.867 21.2012L143.483 22.4607L148.521 11.9994L145.905 10.7399L140.867 21.2012Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M151.851 27.1126L149.359 25.6237L155.314 15.6561L157.806 17.1449L151.851 27.1126Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M157.428 30.7867L159.777 32.4929L166.602 23.0993L164.253 21.3931L157.428 30.7867Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M167.181 38.5622L164.995 36.6523L172.635 27.9082L174.821 29.8181L167.181 38.5622Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M171.99 43.1739L173.996 45.2721L182.389 37.248L180.383 35.1499L171.99 43.1739Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M180.21 52.5659L178.4 50.2964L187.478 43.057L189.288 45.3265L180.21 52.5659Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M184.121 57.9644L185.721 60.387L195.411 53.9905L193.812 51.5679L184.121 57.9644Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M190.517 68.6702L189.142 66.114L199.366 60.6119L200.742 63.168L190.517 68.6702Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M193.413 74.6839L194.554 77.3531L205.231 72.7896L204.09 70.1204L193.413 74.6839Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M197.797 86.3592L196.9 83.5984L207.943 80.0104L208.84 82.7711L197.797 86.3592Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M199.577 92.7932L200.223 95.6232L211.543 93.0395L210.897 90.2094L199.577 92.7932Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M201.799 105.063L201.41 102.186L212.916 100.628L213.306 103.504L201.799 105.063Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M202.395 111.711L202.525 114.61L214.125 114.09L213.994 111.19L202.395 111.711Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M202.4 124.178L202.531 121.278L214.13 121.799L214 124.699L202.4 124.178Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M201.792 130.826L201.403 133.703L212.909 135.261L213.298 132.385L201.792 130.826Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M199.577 143.097L200.223 140.267L211.543 142.851L210.897 145.681L199.577 143.097Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M197.798 149.529L196.901 152.29L207.944 155.878L208.841 153.117L197.798 149.529Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M193.409 161.206L194.549 158.536L205.226 163.1L204.085 165.769L193.409 161.206Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M190.521 167.216L189.145 169.772L199.37 175.274L200.745 172.718L190.521 167.216Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M184.122 177.922L185.721 175.5L195.411 181.896L193.812 184.319L184.122 177.922Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M180.205 183.321L178.396 185.59L187.474 192.83L189.283 190.56L180.205 183.321Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M171.989 192.714L173.995 190.616L182.388 198.64L180.382 200.738L171.989 192.714Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M167.179 197.327L164.993 199.237L172.632 207.981L174.818 206.071L167.179 197.327Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M157.43 205.102L159.778 203.396L166.603 212.789L164.255 214.496L157.43 205.102Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M151.86 208.775L149.368 210.264L155.323 220.232L157.815 218.743L151.86 208.775Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M140.863 214.689L143.479 213.43L148.517 223.891L145.901 225.15L140.863 214.689Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M134.737 217.312L132.019 218.332L136.099 229.203L138.816 228.183L134.737 217.312Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M122.868 221.164L125.666 220.391L128.755 231.584L125.957 232.356L122.868 221.164Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M116.37 222.65L113.513 223.168L115.587 234.592L118.443 234.074L116.37 222.65Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M106.891 224.064L104 224.324L105.041 235.889L107.932 235.629L106.891 224.064Z" fill="white" fill-opacity="0.2"/>
|
|
<path d="M98 216C123.991 216 148.918 205.675 167.296 187.296C185.675 168.918 196 143.991 196 118C196 92.0088 185.675 67.0821 167.296 48.7035C148.918 30.325 123.991 20 98 20L98 21.5132C123.59 21.5132 148.132 31.6787 166.227 49.7735C184.321 67.8683 194.487 92.4101 194.487 118C194.487 143.59 184.321 168.132 166.226 186.227C148.132 204.321 123.59 214.487 98 214.487V216Z" fill="url(#paint0_linear_1_1503)" fill-opacity="0.05"/>
|
|
<defs>
|
|
<linearGradient id="paint0_linear_1_1503" x1="196" y1="118" x2="110.5" y2="118" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="white"/>
|
|
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<div v-if="ActiveCraft?.item?.name == ActiveCrafting?.item?.name" class="bg-[#FFFFFF0D] border-[.0521vw] border-solid border-[#FFFFFF0D] w-[2.0833vw] h-[2.2917vw] rounded-[.2083vw] flex flex-col items-center justify-center gap-y-[.1042vw] absolute top-[5.3646vw] left-[14.9479vw]">
|
|
<img src="./assets/svg/anvil.svg" alt="anvil" class="w-[1.0417vw] h-[1.0417vw] object-contain">
|
|
<p class="font-['Roboto-Regular'] text-[.625vw] leading-none text-[#FFFFFF99] max-w-[2.0833vw] line-clamp-1">{{ formattedTime }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-app>
|
|
|
|
<script>
|
|
function toDataUrl(url, callback) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onload = function() {
|
|
var reader = new FileReader();
|
|
reader.onloadend = function() {
|
|
callback(reader.result);
|
|
}
|
|
reader.readAsDataURL(xhr.response);
|
|
};
|
|
xhr.open("GET", url);
|
|
xhr.responseType = "blob";
|
|
xhr.send();
|
|
}
|
|
|
|
window.addEventListener("message", function(event) {
|
|
if (event.data.type === "convert_base64") {
|
|
toDataUrl(event.data.img, function(base64) {
|
|
fetch(`https://${GetParentResourceName()}/base64`, {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/json; charset=UTF-8"},
|
|
body: JSON.stringify({
|
|
base64: base64,
|
|
handle: event.data.handle,
|
|
id: event.data.id
|
|
})
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script src="./index.js" type="module"></script>
|
|
</body>
|
|
</html> |