@ozdao/prometheus-framework 0.2.321 → 0.2.323

package/src/modules/landing/components/sections/SectionMobileApp.vue

@@ -0,0 +1,87 @@
+<template>
+  <section id="mobileApp" class="cols-2 o-hidden ">
+    <div class="z-index-1 h-100">
+      <img loading="lazy" 
+        :src="(FILE_SERVER_URL || '') + t('image')" 
+        class="radius-big h-100 w-100 object-fit-cover"
+      >
+    </div>
+
+    <div class="pd-big flex flex-h-center flex-column z-index-1 w-1/2">
+      <h2 class="mn-t-medium mn-b-semi w-m-40r">{{ t('title') }}</h2>
+      <p class="t-transp mn-b-big p-big w-m-33r">{{ t('description') }}</p>
+      
+      <div class="mn-b-big gap-medium cols-2">
+        <div v-for="feature in tm('features')"  class="feature">
+          <h4 class="mn-b-thin">{{ feature.title }}</h4>
+          <p class="t-transp p-medium">{{ feature.text }}</p>
+        </div>
+      </div>
+
+      <div class="w-100 w-max-30r flex-nowrap flex gap-medium">
+        <a 
+           v-if="te('linkAppStore') || te('label')"
+          :href="te('linkAppStore') ? t('linkAppStore') : null" 
+          :target="te('linkAppStore') ? '_blank' : null" 
+          class="pos-relative w-100 h-100"
+        > 
+          <span 
+            v-if="te('label')"
+            class="z-index-2 radius-big bg-main t-semi uppercase pd-l-thin pd-r-thin pos-absolute pos-r-10-negative pos-t-10-negative"
+          >
+            {{ t('label') }}
+          </span>
+          <LabelAppStore class="w-100 h-max" alt="Download on App Store"/>
+        </a>
+
+        <a 
+           v-if="te('linkGooglePlay') || te('label')"
+          :href="te('linkGooglePlay') ? t('linkGooglePlay') : null" 
+          :target="te('linkGooglePlay') ? '_blank' : null" 
+          class="pos-relative w-100 h-100"
+        > 
+          <span 
+            v-if="te('label')"
+            class="z-index-2 pd-l-thin pd-r-thin radius-big bg-main t-semi uppercase pos-absolute pos-r-10-negative pos-t-10-negative"
+          >
+            {{ t('label') }}
+          </span>
+          <LabelGooglePlay class="w-100 h-max" alt="Download on Google Play"/>
+        </a>
+
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+import LabelAppStore from '@pf/src/modules/icons/labels/LabelAppStore.vue'
+import LabelGooglePlay from '@pf/src/modules/icons/labels/LabelGooglePlay.vue'
+
+const props = defineProps({
+    content: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { t, tm, te } = useI18n({
+    messages: props.content
+  })
+</script>
+
+<style lang="scss">
+ @media screen and (max-width: 1025px) {
+  #mobileApp {
+    text-align: center;
+    > section {
+      flex-direction: column;
+      > div {
+        order: 1;
+      }
+    }
+  }
+}
+</style>

package/src/modules/landing/components/sections/SectionOverview.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="sections" class="pd-thin">
-    <h2 class="mn-auto pd-t-big pd-b-big t-center">
+  <div id="sections">
+    <h2 class="pd-t-big pd-b-big">
       {{t('title')}}
     </h2>
 
@@ -9,7 +9,7 @@
         v-for="section in tm('sections')" 
         :key="section.route"
         :to="section.route" 
-        class="t-center cursor-pointer hover-scale-0 transition-ease-in pd-big bg-light t-black radius-big"
+        class="cursor-pointer hover-scale-0 transition-ease-in pd-big bg-light t-black radius-big"
       >
         <img 
           loading="lazy" 

package/src/modules/landing/components/sections/SubscribeNewsletter.vue

@@ -1,33 +1,22 @@
 <template>
-  <section class="pd-thin">
-    <div class="pos-relative o-hidden t-black bg-main pd-big radius-big">
-      <div class="pos-relative z-index-1">
-        <header class="t-center z-index-1 mn-b-big">
-          <h2 class="mn-l-auto mn-r-auto  mn-b-medium">{{ t('SubscribeNewsletter.title') }}</h2>
-          <p class="t-transp p-big">{{ t('SubscribeNewsletter.subtitle') }}</p>
-        </header>
+  <div class="pos-relative z-index-1">
+    <header class="d-inline-block z-index-1 mn-b-big">
+      <h2 class="mn-b-semi">{{ t('title') }}</h2>
+      <p class="t-transp p-big">{{ t('subtitle') }}</p>
+    </header>
 
-        <div class="z-index-1 w-100 flex-nowrap flex"> 
-          <FieldBig 
-            :input="email" 
-            :typingSpeed="75"
-            :loopTyping="false"
-            :enableTyping="false"
-            :placeholder="t('SubscribeNewsletter.placeholder')"
-            :action="t('SubscribeNewsletter.action')"
-            @update:input="email = $event"
-            @action="sendApplication"
-            class="mn-l-auto mn-r-auto bg-white t-black w-100 w-max-30r"
-          />
-        </div>
-      </div>
-
-      <div class="w-100 h-100 pos-absolute pos-b-50-negative pos-r-0 z-index-0 grid">
-        <div class="spiral"></div>
-      </div>
-
-    </div>
-  </section>
+    <FieldBig 
+      :input="email" 
+      :typingSpeed="75"
+      :loopTyping="false"
+      :enableTyping="false"
+      :placeholder="t('placeholder')"
+      :action="t('action')"
+      @update:input="email = $event"
+      @action="sendApplication"
+      class="d-inline-flex bg-white t-black w-100 w-max-40r"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -43,10 +32,21 @@ import * as applications from '@pf/src/modules/orders/store/applications.js';
 
 import * as inputsValidation from '@pf/src/modules/auth/views/validations/inputs.validation'
 
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true
+  },
+  options: {
+    type: Object,
+    default: () => ({
+    })
+  }
+})
+
 // Localization
-const { t } = useI18n({
-  useScope: 'global', 
-  ...text
+const { t, te } = useI18n({
+  messages: props.content
 })
 
 let email = ref('')
@@ -85,6 +85,7 @@ async function sendApplication() {
       }
     };
     const response = await applications.create(application);
+
     return Promise.resolve(response.data);
   } catch (error) {
     console.log(error)

package/src/modules/landing/landing.client.js

@@ -1,7 +1,9 @@
 // Importing Vue components
-import MobileApp from './components/sections/MobileApp.vue';
-import SubscribeNewsletter from './components/sections/SubscribeNewsletter.vue';
 import SectionFeatures from './components/sections/SectionFeatures.vue';
+import SectionMobileApp from './components/sections/SectionMobileApp.vue';
+import SectionJoinUs from './components/sections/SectionJoinUs.vue';
+import SubscribeNewsletter from './components/sections/SubscribeNewsletter.vue';
+import SectionEarn from './components/sections/SectionEarn.vue';
 import SectionGuide from './components/sections/SectionGuide.vue';
 import SectionOverview  from './components/sections/SectionOverview.vue';
 
@@ -9,9 +11,11 @@ import FloatingImages from './components/elements/FloatingImages.vue';
 import AnimatedGrid from './components/elements/AnimatedGrid.vue';
 
 export {
-  MobileApp,
+  SectionEarn,
+  SectionMobileApp,
   SectionGuide,
   SectionOverview,
+  SectionJoinUs,
   SubscribeNewsletter,
   SectionFeatures,
   FloatingImages,

package/src/modules/products/components/sections/HeroRecommendation.vue

@@ -148,7 +148,7 @@
 	</div>
 </template>
 
-<style>
+<style style="scoped">
 .spiral {
 	
   background-size: cover;

package/src/modules/wallet/views/components/elements/ConnectMetamask.vue

@@ -4,38 +4,35 @@
     <button 
       v-if="!isMetaMaskInstalled"
       @click="connectMetaMask" 
-      class="transition-ease-in-out cursor-pointer  bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white"
+      class="transition-ease-in-out cursor-pointer bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white"
     >
-      <img loading="lazy" :src="'/icons/metamask.svg'" class="mn-r-small i-big" >
-      <span class="h4 uppercase w-100">{{ t('wallet.connectMetaMask') }}</span>
-      <IconAdd  class="t-transp"   fill="rgb(var(--white))"/>
+      <img loading="lazy" :src="metamaskIcon" class="mn-r-small i-big">
+      <span class="h4 uppercase w-100">{{ t('connectMetaMask') }}</span>
+      <IconAdd class="t-transp" fill="rgb(var(--white))"/>
     </button>
-
     <template v-else>
       <!-- Switch to Polygon -->
       <button 
         v-if="!isPolygon"
         @click="switchToPolygon" 
-        class="transition-ease-in-out cursor-pointer hover-bg-white hover-t-black bg-black t-white radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small "
+        class="transition-ease-in-out cursor-pointer hover-bg-white hover-t-black bg-black t-white radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small"
       >
-        <img loading="lazy" :src="'/icons/metamask.svg'" class="mn-r-small i-big" >
-        <span class="h4 uppercase w-100">{{ t('wallet.switchToPolygon') }}</span>
-        <IconAdd  class="t-transp"  fill="rgb(var(--white))" />
+        <img loading="lazy" :src="metamaskIcon" class="mn-r-small i-big">
+        <span class="h4 uppercase w-100">{{ t('switchToPolygon') }}</span>
+        <IconAdd class="t-transp" fill="rgb(var(--white))"/>
       </button>
-      <!-- Add WDT to metamask -->
+      <!-- Add Token to metamask -->
       <button 
         v-if="isPolygon"
-        @click="addWDT" 
-        class="transition-ease-in-out cursor-pointer hover-bg-white hover-t-black  bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white"
+        @click="addToken" 
+        class="transition-ease-in-out cursor-pointer hover-bg-white hover-t-black bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white"
       >
-        <img loading="lazy" :src="'/icons/metamask.svg'" class="mn-r-small i-big" >
-        <span class="h4 uppercase w-100">{{ t('wallet.addToken') }}</span>
-        <IconAdd  class="hover-fill-black fill-white t-transp"/>
+        <img loading="lazy" :src="metamaskIcon" class="mn-r-small i-big">
+        <span class="h4 uppercase w-100">{{ t('addToken') }}</span>
+        <IconAdd class="hover-fill-black fill-white t-transp"/>
       </button>
     </template>
-
-    <!-- <p class="mn-t-small" v-if="error">{{ error }}</p> -->
-
+    <p class="mn-t-small" v-if="error">{{ error }}</p>
   </div>
 </template>
 
@@ -43,9 +40,47 @@
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import text from '@pf/src/modules/wallet/views/localization/wallet.json'
-
-import IconAdd from '@pf/src/modules/icons/navigation/IconAdd.vue'
+import IconAdd from '@pf/src/modules/icons/navigation/IconAdd.vue';
+
+const props = defineProps({
+  // Token configuration
+  tokenAddress: {
+    type: String,
+    required: true
+  },
+  tokenSymbol: {
+    type: String,
+    required: true
+  },
+  tokenImage: {
+    type: String,
+    required: true
+  },
+  tokenDecimals: {
+    type: Number,
+    default: 18
+  },
+  // Chain configuration
+  targetChainId: {
+    type: String,
+    default: '0x89' // Polygon Mainnet by default
+  },
+  // UI configuration
+  metamaskIcon: {
+    type: String,
+    default: '/icons/metamask.svg'
+  },
+  content: {
+    type: Object,
+    default: () => ({
+      en: {
+        "connectMetaMask": "Connect MetaMask",
+        "switchToPolygon": "Switch to Polygon",
+        "addToken": `Add token to MetaMask`,
+      }
+    })
+  }
+});
 
 const isMetaMaskInstalled = ref(false);
 const isPolygon = ref(false);
@@ -53,18 +88,14 @@ const loading = ref(false);
 const error = ref(null);
 const buttonStyle = ref({});
 
-const tokenAddress = '0xE11702CF04621D395E75680C29d3dbF81484e875'; 
-const tokenSymbol = 'WDT';
-const tokenDecimals = 8;
-const tokenImage = 'https://weeder.delivery/logo-token.png';
-
 const connectMetaMask = async () => {
   if (typeof window.ethereum !== 'undefined') {
     try {
       await window.ethereum.request({ method: 'eth_requestAccounts' });
       checkMetaMask();
-    } catch (error) {
-      console.error('Ошибка при подключении MetaMask:', error);
+    } catch (err) {
+      error.value = err.message;
+      console.error('Error connecting to MetaMask:', err);
     }
   } else {
     window.open('https://metamask.io/', '_blank');
@@ -75,7 +106,7 @@ const checkMetaMask = async () => {
   if (typeof window.ethereum !== 'undefined') {
     isMetaMaskInstalled.value = true;
     const chainId = await window.ethereum.request({ method: 'eth_chainId' });
-    isPolygon.value = chainId === '0x89' || chainId === '0x13881';
+    isPolygon.value = chainId === props.targetChainId;
   } else {
     isMetaMaskInstalled.value = false;
   }
@@ -85,47 +116,46 @@ const switchToPolygon = async () => {
   try {
     await window.ethereum.request({
       method: 'wallet_switchEthereumChain',
-      params: [{ chainId: '0x89' }],
+      params: [{ chainId: props.targetChainId }],
     });
     checkMetaMask();
-  } catch (error) {
-    console.error('Ошибка при переключении на Polygon:', error);
+  } catch (err) {
+    error.value = err.message;
+    console.error('Error switching to Polygon:', err);
   }
 };
 
-const addWDT = async () => {
+const addToken = async () => {
   buttonStyle.value['pointer-events'] = 'none';
   error.value = null;
   loading.value = true;
-
+  
   try {
     await ethereum.request({
       method: 'wallet_watchAsset',
       params: {
         type: 'ERC20',
         options: {
-          address: tokenAddress,
-          symbol: tokenSymbol,
-          decimals: tokenDecimals,
-          image: tokenImage,
+          address: props.tokenAddress,
+          symbol: props.tokenSymbol,
+          decimals: props.tokenDecimals,
+          image: props.tokenImage,
         },
       },
     });
-
     buttonStyle.value['background-color'] = '#009911';
     loading.value = false;
   } catch (err) {
-    error.value = err.toString();
+    error.value = err.message;
+    loading.value = false;
   }
 };
 
 const { t } = useI18n({
-  useScope: 'global', 
-  ...text
-})
+  messages: props.content
+});
 
 onMounted(() => {
   checkMetaMask();
 });
-
 </script>

package/src/modules/wallet/views/localization/wallet.json

@@ -5,9 +5,6 @@
         "title": "Your Wallet",
         "subtitle": "Earn WDT by purchasing our weed or contributing to the community.",
         "token": "WDT",
-        "connectMetaMask": "Connect MetaMask",
-        "switchToPolygon": "Switch to Polygon",
-        "addToken": "Add WDT to MetaMask",
         "pay": "pay",
         "youReceived": "you received",
         "enterAmount": "enter amount to top up",
@@ -21,9 +18,6 @@
       "wallet": {
         "title": "Ваш Кошелек",
         "subtitle": "Зарабатывайте WDT, покупая товары или внося вклад в сообщество.",
-        "connectMetaMask": "Подключить MetaMask",
-        "switchToPolygon": "Переподключиться на Polygon",
-        "addToken": "Добавить WDT в Metamask",
         "pay": "купить",
         "youReceived": "вы пополнили на сумму",
         "enterAmount": "введите сумму для пополнения",

package/src/styles/base/all.scss

@@ -164,11 +164,7 @@ body {
 	.o-auto 		{overflow: auto; }
 	.o-visible 	{overflow: visible; } 
 	// Display
-	.d-flex 				{display: flex; }
-	.d-block 				{display: block; }
-	.d-inline-block {display: inline-block; }
-	.d-inline-flex 	{display: inline-flex; }	
-	.d-grid 				{display: grid; }	
+
 	// Flex
 	.flex {
 		display: flex;
@@ -177,12 +173,23 @@ body {
 		&-center 					{ align-items: center; justify-content: center; }
 	}
 
+	.d-flex 				{display: flex; }
+	.d-block 				{display: block; }
+	.d-inline-block {display: inline-block; }
+	.d-inline-flex 	{display: inline-flex; }	
+	.d-grid 				{display: grid; }	
+
 	.align-self-start {
 		align-self: start;
 	}
 
 	.flex-child {	
+		&-none 				{ flex: none; }
 		&-noresize 		{ flex: 0 } 
+		&-1 					{ flex: 1; }
+		&-auto 				{ flex: auto; }
+		&-default 		{ flex: 1 0 auto } 
+		&-initial 		{ flex: initial; }
 		&-grow-0 			{ flex-grow: 0; }
 		&-grow-1 			{ flex-grow: 1; }
 		&-grow-2 			{ flex-grow: 2; }
@@ -191,10 +198,6 @@ body {
 		&-shrink-1 		{ flex-shrink: 1; }
 		&-basis-auto	{ flex-basis: auto; }
 		&-basis-0 		{ flex-basis: 0; }
-		&-1 					{ flex: 1; }
-		&-auto 				{ flex: auto; }
-		&-initial 		{ flex: initial; }
-		&-none 				{ flex: none; }
 		&-order-0     { order: 0; }
 		&-order-1     { order: 1; }
 		&-order-2     { order: 2; }

package/src/styles/typography.scss

@@ -12,11 +12,11 @@ body {
 }
 
 // Font Styles
-h1,.h1  { font-family: var(--font-main); font-weight: 500; font-size: 2.500rem; 	line-height: 1.000; letter-spacing: -0.05rem; 	text-transform: none; }
-h2,.h2  { font-family: var(--font-main); font-weight: 500; font-size: 1.750rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
-h3,.h3  { font-family: var(--font-main); font-weight: 500; font-size: 1.500rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
-h4,.h4  { font-family: var(--font-main); font-weight: 500; font-size: 1.375rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none; }
-h5,.h5 	{ font-family: var(--font-main); font-weight: 500; font-size: 1.250rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none; }
+h1,.h1  { font-family: var(--font-main); font-weight: 500; font-size: 3.250rem; 	line-height: 1.000; letter-spacing: -0.05rem; 	text-transform: none; }
+h2,.h2  { font-family: var(--font-main); font-weight: 500; font-size: 2.500rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
+h3,.h3  { font-family: var(--font-main); font-weight: 500; font-size: 1.750rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
+h4,.h4  { font-family: var(--font-main); font-weight: 500; font-size: 1.500rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none; }
+h5,.h5 	{ font-family: var(--font-main); font-weight: 500; font-size: 1.375rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none; }
 
 // Typogragy Styles
 		.p-small     	{ font-family: var(--font-second); font-weight: 400;				font-size: 0.75rem;		line-height: 1.250; }

package/src/modules/community/components/sections/JoinUs.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="pd-extra o-hidden w-100 container container-joinus">
-    <div class="content">
-      <span class="h0 mn-b-big">
-        {{ userCount.toLocaleString() }}
-      </span>
-      <p class="w-m-33r t-center mn-b-small p-big">
-        Together, we're shaping the future of the globals cannabis community.
-      </p>
-      <router-link :to="{ name: 'Sign In' }" class="bg-black t-medium t-white button">
-        Join Now
-      </router-link>
-    </div>
-    <FloatingImages 
-        :container="'.container-joinus'"
-        :images="[
-            '/avatars/01.png',
-            '/avatars/02.png',
-            '/avatars/03.png',
-            '/avatars/04.png',
-            '/avatars/05.png',
-            '/avatars/06.png'
-        ]" 
-        :config="{
-            size: '5rem',
-            square: true,
-            minDuration: 5,
-            maxDuration: 15,
-            spawnPoints: [10, 90],
-            animation: {
-              startOpacity: 0.1,
-              midOpacity: 1,
-              endOpacity: 0.0,
-              translateY: '-33vh'
-            },
-            class: 'my-custom-class'
-        }"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-
-import FloatingImages from '@pf/src/modules/landing/components/elements/FloatingImages.vue';
-
-const userCount = ref(1230);
-
-const increaseUserCount = () => {
-  setInterval(() => {
-    userCount.value += Math.floor(Math.random() * 2) + 1;
-  }, 1330);
-};
-
-onMounted(() => {
-  increaseUserCount();
-});
-</script>
-
-<style lang="scss">
-.container-joinus {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 66%;
-  position: relative;
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    z-index: 2;
-  }
-}
-</style>

package/src/modules/landing/components/sections/FeatureSection.vue

@@ -1,80 +0,0 @@
-<template>
-  <section  class="cols-2-golden-ration pd-thin gap-thin">
-      <div id="feature" class="cols-2">
-
-        <div class="col">
-          <h2 class="h1" v-html="t('title')"></h2>
-        </div>
-
-       
-      </div>
-
-      <ul class="cols-2 gap-thin">      
-        <li class="pd-medium bg-light radius-big p-big t-semi">{{t('friendly')}}</li>
-        <li class="pd-medium bg-light radius-big p-big t-semi">{{t('fast')}}</li>
-        <li class="pd-medium bg-light radius-big p-big t-semi">{{t('reasonable')}}</li>
-        <li class="pd-medium bg-light radius-big p-big t-semi">{{t('premium')}}</li>
-        <li class="pd-medium bg-light radius-big p-big t-semi">{{t('refund')}}</li>
-      </ul>
-
-    </section>
-</template>
-
-
-<script setup>
-  import { useI18n } from 'vue-i18n'
-    
-  const text = {
-    messages: {
-      en: {
-        title: 'Best Quality.<br><b class="t-white">Reasonable Price.</b>',
-        friendly: 'Friendly Service',
-        fast: 'Fast Shipment',
-        reasonable: 'Reasonable Prices',
-        premium: 'Premium Medical Grade',
-        refund: 'Refund Policy'
-      },
-      ru: {
-        title: 'Лучшее качество.<br><b class="t-white">Разумная цена.</b>',
-        subtitle: 'Мы придаем большое значение высокому качеству товаров и удовлетворенности клиентов',
-        friendly: 'Дружелюбный Сервис',
-        fast: 'Быстрая Доставка',
-        reasonable: 'Разумные Цены',
-        premium: 'Лабораторное качество',
-        refund: 'Политика возврата'
-      }
-    }
-  }
-
-  const { t } = useI18n(text)
-</script>
-
-<style lang="scss">
-#feature {
-  background-size: cover;
-  background-position: center center;
-  border-radius: 2rem;
-  padding: 4rem;  
-
-  .col {
-    ul {
-      li {
-        line-height: 1.5;
-        margin-bottom: 1rem;
-        color: white;
-
-
-
-        &:before {
-          content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
-          color: black; /* Change the color */
-          font-weight: bold; /* If you want it to be bold */
-          display: inline-block; /* Needed to add space between the bullet and the text */
-          width: 1em; /* Also needed for space (tweak if needed) */
-          margin-left: -1em; /* Also needed for space (tweak if needed) */
-        }
-      }
-    }
-  }
-}
-</style>