@ozdao/martyrs 0.2.480 → 0.2.482

package/src/modules/icons/navigation/IconVolume.vue

@@ -21,9 +21,7 @@
 	const props = defineProps({
   fill: {
     type: String,
-    default: {
-      position: 'rgb(var(--black))'
-    }
+    default: 'rgb(var(--black))'
   },
 })
 </script>

package/src/modules/icons/pages/IconsPage.vue

@@ -38,7 +38,6 @@ import IconInfo from '@martyrs/src/modules/icons/navigation/IconInfo.vue';
 import IconMinus from '@martyrs/src/modules/icons/navigation/IconMinus.vue';
 import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
 import IconPlus from '@martyrs/src/modules/icons/navigation/IconPlus.vue';
-import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
 import IconCheckmark from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';
 import IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';
 import IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';
@@ -145,7 +144,6 @@ function loadIcons() {
         { name: 'IconMinus', component: IconMinus },
         { name: 'IconEllipsis', component: IconEllipsis },
         { name: 'IconPlus', component: IconPlus },
-        { name: 'IconHeart', component: IconHeart },
         { name: 'IconCheckmark', component: IconCheckmark },
         { name: 'IconPause', component: IconPause },
         { name: 'IconAdd', component: IconAdd },

package/src/modules/music/components/pages/AlbumDetail.vue

@@ -63,7 +63,7 @@
           :showLoader="false" 
           :showSucces="false"
         >
-          <IconHeart class="i-medium" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+          <IconLike class="i-medium" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
         </Button>
         
         <Dropdown class="pos-relative">
@@ -154,7 +154,7 @@ import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';
 
 // Import icons
 import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
-import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
+import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
 import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
 
 // Import store modules

package/src/modules/music/components/pages/PlaylistDetail.vue

@@ -63,7 +63,7 @@
           :showLoader="false" 
           :showSucces="false"
         >
-          <IconHeart class="i-medium" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+          <IconLike class="i-medium" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
         </Button>
         
         <Dropdown class="pos-relative">
@@ -306,7 +306,7 @@ import UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';
 
 // Import icons
 import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
-import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
+import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
 import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
 import IconMusic from '@martyrs/src/modules/icons/entities/IconMusic.vue';
 

package/src/modules/music/components/pages/TrackDetail.vue

@@ -58,7 +58,7 @@ import Media from '@martyrs/src/components/Media/Media.vue';
 import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';
 import Popup from '@martyrs/src/components/Popup/Popup.vue';
 import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
-import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
+import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
 import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
 import TrackList from '../lists/TrackList.vue';
 // import PlaylistSelector from '../forms/PlaylistSelector.vue';

package/src/modules/music/components/player/MusicPlayer.vue

@@ -26,7 +26,7 @@
           :showLoader="false" 
           :showSucces="false"
         >
-          <IconHeart class="i-small" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--grey))'"/>
+          <IconLike class="i-small" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--grey))'"/>
         </Button>
       </div>
     </div>
@@ -116,7 +116,7 @@ import IconNext from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue
 import IconPrevious from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';
 import IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';
 import IconRepeat from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';
-import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
+import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
 import IconVolume from '@martyrs/src/modules/icons/navigation/IconVolume.vue';
 // import IconVolumeHalf from '@martyrs/src/modules/icons/navigation/IconVolume.vue'; // Using same icon but we'd style it differently
 import IconVolumeMute from '@martyrs/src/modules/icons/navigation/IconMute.vue';

package/src/modules/notifications/components/blocks/NotificationItem.vue

@@ -59,68 +59,23 @@ const handleClick = () => {
 
 <template>
   <div 
-    class="notification-item" 
-    :class="{ unread: isUnread }"
+    class="notification-item gap-thin flex pd-small radius-small bg-light" 
+    :class="{ 'bg-second-small': isUnread }"
     @click="handleClick"
   >
     <div class="notification-icon">
       {{ notificationIcon }}
     </div>
     <div class="notification-content">
-      <h3 class="notification-title">{{ notification.title }}</h3>
-      <p class="notification-body">{{ notification.body }}</p>
-      <span class="notification-time">{{ formattedDate }}</span>
+      <p class="p-medium t-medium mn-b-small">{{ notification.title }}</p>
+      <p class="p-small mn-b-small">{{ notification.body }}</p>
+      <p class="pd-thin w-max radius-thin bg-white">{{ formattedDate }}</p>
     </div>
-    <div v-if="isUnread" class="unread-indicator"></div>
+    <div v-if="isUnread" class="flex-child-default unread-indicator"></div>
   </div>
 </template>
 
 <style scoped>
-.notification-item {
-  display: flex;
-  padding: 1rem;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.notification-item:hover {
-  background-color: #f9f9f9;
-}
-
-.notification-item.unread {
-  background-color: #f0f7ff;
-}
-
-.notification-icon {
-  flex-shrink: 0;
-  margin-right: 1rem;
-  font-size: 1.5rem;
-}
-
-.notification-content {
-  flex: 1;
-}
-
-.notification-title {
-  margin: 0 0 0.25rem;
-  font-weight: 600;
-  font-size: 1rem;
-}
-
-.notification-body {
-  margin: 0 0 0.5rem;
-  color: #666;
-  font-size: 0.9rem;
-}
-
-.notification-time {
-  font-size: 0.8rem;
-  color: #999;
-}
-
 .unread-indicator {
   width: 10px;
   height: 10px;

package/src/modules/notifications/components/elements/NotificationBadge.vue

@@ -13,52 +13,66 @@
         <span>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
       </div>
     </button>
-    <div v-if="isOpen" class="notifications-dropdown">
-      <div class="notifications-header">
-        <h3>Notifications</h3>
-        <button 
-          v-if="unreadCount > 0" 
-          class="mark-all-read-btn" 
-          @click="markAllAsRead"
-        >
-          Mark all read
-        </button>
-      </div>
-      <div v-if="loading" class="notifications-loading">
-        Loading...
-      </div>
-      <div v-else-if="notifications.length === 0" class="notifications-empty">
-        No notifications
-      </div>
-      <div v-else class="notifications-list">
-        <notification-item 
-          v-for="notification in recentNotifications" 
-          :key="notification._id" 
-          :notification="notification"
-          @click="handleNotificationClick(notification)"
-        />
-      </div>
-      <div class="notifications-footer">
-        <router-link to="/notifications" @click="isOpen = false">
-          View all notifications
-        </router-link>
+    
+    <Popup
+      title="Notifications"
+      @close-popup="closeNotifications"
+      :isPopupOpen="isOpen"
+      align="center right"
+      class="bg-white h-min-100 w-100 w-max-30r pd-medium"
+    >
+      <div class="cols-1 gap-thin o-y-scroll">
+        <div v-if="loading" class="notifications-loading">
+          Loading...
+        </div>
+        
+        <div v-else-if="notifications.length === 0" class="notifications-empty">
+          No notifications
+        </div>
+        
+        <div v-else class="flex-column flex gap-thin">
+          <notification-item 
+            v-for="notification in recentNotifications" 
+            :key="notification._id" 
+            :notification="notification"
+            @click="handleNotificationClick(notification)"
+          />
+
+          <div class="flex-nowrap flex gap-thin">
+            <button 
+              v-if="unreadCount > 0"
+              class="w-100 bg-second t-white radius-small  button" 
+              @click="markAllAsRead"
+            >
+              Mark all read
+            </button>
+
+            <router-link class="w-100 bg-black t-white radius-small button" to="/notifications" @click="closeNotifications">
+              View all 
+            </router-link>
+          </div>
+
+        </div>
+
       </div>
-    </div>
+    </Popup>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, inject } from 'vue';
+import { ref, computed, onMounted, inject } from 'vue';
 import { useRouter } from 'vue-router';
+
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
+
 import NotificationItem from '../blocks/NotificationItem.vue';
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
-
 import IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';
 
 const props = defineProps({
   maxNotifications: {
     type: Number,
-    default: 5
+    default: 10
   },
   fill: {
     type: String,
@@ -86,6 +100,10 @@ const toggleNotifications = () => {
   isOpen.value = !isOpen.value;
 };
 
+const closeNotifications = () => {
+  isOpen.value = false;
+};
+
 const handleNotificationClick = (notification) => {
   isOpen.value = false;
   
@@ -98,28 +116,14 @@ const handleNotificationClick = (notification) => {
   }
 };
 
-// Close dropdown when clicking outside
-const handleClickOutside = (event) => {
-  const container = document.querySelector('.notification-badge-container');
-  if (container && !container.contains(event.target)) {
-    isOpen.value = false;
-  }
-};
-
 // Lifecycle hooks
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-
   // Load notifications when component mounts
   const userId = auth.state.user._id;
   if (userId) {
     getNotifications(userId);
   }
 });
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
 </script>
 
 <style scoped>
@@ -139,6 +143,7 @@ onUnmounted(() => {
 .notification-icon {
   font-size: 1.4rem;
 }
+
 .button-counter {
   position: absolute;
   right: -8px;
@@ -153,61 +158,12 @@ onUnmounted(() => {
   line-height: 16px;
   font-size: 10px;
 }
-.notifications-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  width: 320px;
-  max-height: 400px;
-  overflow-y: auto;
-  background-color: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-}
-
-.notifications-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid #eee;
-}
 
-.notifications-header h3 {
-  margin: 0;
-  font-size: 1rem;
-}
-
-.mark-all-read-btn {
-  background: none;
-  border: none;
-  color: #2196f3;
-  font-size: 0.8rem;
-  cursor: pointer;
-}
 
 .notifications-loading,
 .notifications-empty {
   padding: 24px;
   text-align: center;
-  color: #666;
-}
-
-.notifications-list {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.notifications-footer {
-  padding: 12px 16px;
-  text-align: center;
-  border-top: 1px solid #eee;
-}
-
-.notifications-footer a {
-  color: #2196f3;
-  text-decoration: none;
-  font-size: 0.9rem;
+  color: rgb(var(--text-light));
 }
 </style>

package/src/modules/organizations/configs/navigation.organization.config.js

@@ -6,6 +6,10 @@ import IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue';
 import IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue';
 import IconProducts from '@martyrs/src/modules/icons/entities/IconProducts.vue';
 import IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue';
+import IconDate from '@martyrs/src/modules/icons/entities/IconDate.vue';
+import IconPrice from '@martyrs/src/modules/icons/entities/IconPrice.vue';
+import IconSettings from '@martyrs/src/modules/icons/entities/IconSettings.vue';
+import IconHome from '@martyrs/src/modules/icons/entities/IconHome.vue';
 
 // Import global mixins for access control
 import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';
@@ -18,7 +22,7 @@ export const navigationItems = [
     items: [
       {
         title: 'Profile',
-        iconComponent: IconGroups,
+        iconComponent: IconHome,
         route: (auth, route) => ({
           name: 'Organization',
           params: { _id: route.params._id }
@@ -48,7 +52,7 @@ export const navigationItems = [
       },
       {
         title: 'Settings',
-        iconComponent: IconGroups,
+        iconComponent: IconSettings,
         route: (auth, route) => ({
           name: 'Organization Edit',
           params: { _id: route.params._id }
@@ -83,7 +87,7 @@ export const navigationItems = [
       },
       {
         title: 'Categories',
-        iconComponent: IconProducts,
+        iconComponent: IconPrice,
         route: (auth, route) => ({
           name: 'Categories',
           params: { _id: route.params._id }
@@ -133,7 +137,7 @@ export const navigationItems = [
       },
       {
         title: 'Rents',
-        iconComponent: IconOrders,
+        iconComponent: IconEvents,
         route: (auth, route) => ({
           name: 'Organization_Rents',
           params: { _id: route.params._id }

package/src/modules/products/components/blocks/CardProduct.vue

@@ -66,15 +66,17 @@
 				{{product.description.substring(0, 99)}}...
 			</p>
 
+			<slot></slot>
+
 			<div class="flex-v-center flex-nowrap flex">
 				<Price 
 					:product="product" 
 					size="small" 
-					class="bg-white h-100 p-medium flex flex-center pd-r-small pd-l-small radius-small mn-r-auto" 
+					class="bg-white h-100 p-medium flex flex-center pd-thin radius-small mn-r-auto" 
 				/>
 				
 				<button
-					v-if="user"
+					v-if="showAddToCart"
 		      class="
 		        cursor-pointer 
 		        radius-extra pd-thin bg-main
@@ -115,6 +117,10 @@
 		organization: {
 			type: String
 		},
+		showAddToCart: {
+			type: Boolean,
+			default: true
+		},
 		user: {
 			type: [Object, String] 
 		},

package/src/modules/products/components/blocks/ProductDiscounts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="discounts && discounts.length" class="mn-t-large mn-b-large">
+  <div v-if="discounts && discounts.length">
     <div class="mn-b-small flex-nowrap flex flex-v-center">
       <IconDiscount class="mn-r-micro i-medium"/>
       <p class="t-medium">Special Offers</p>
@@ -9,7 +9,7 @@
       <div 
         v-for="(discount, index) in discounts" 
         :key="index" 
-        class="discount-card pd-medium radius-medium br-1px br-solid br-light cursor-pointer hover-scale-1"
+        class="discount-card bg-light pd-small radius-small br-1px br-solid br-light cursor-pointer "
         @click="selectDiscount(discount)"
       >
         <div class="flex flex-wrap gap-thin flex-v-center w-100">
@@ -25,8 +25,7 @@
         </div>
         
         <p v-if="discount.description" class="t-small mn-t-thin t-transp">{{ discount.description }}</p>
-
-        <div class="mn-t-small"><Chips v-if="getConditionsAsChips.length > 0" class="" :chips="getConditionsAsChips(discount)" /></div>
+        <div v-if="getConditionsAsChips(discount).length > 0" class="mn-t-small"><Chips  class="" :chips="getConditionsAsChips(discount)" /></div>
       </div>
     </div>
   </div>

package/src/modules/products/components/blocks/ProductImages.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="w-100 o-hidden bg-light radius-medium flex-nowrap flex-column flex pos-relative">
+  <div class="w-100 bs-heavy h-max  mobile:pos-relative tablet:pos-relative pos-sticky pos-t-0 pd-medium o-hidden bg-light radius-medium gap-small flex-nowrap flex-row mobile:flex-column flex pos-relative">
     <!-- Main image container -->
-    <div class="pd-semi w-100 bg-light radius-semi o-hidden" @click="openPopup(images[0])">
+    <div class="order-1 w-100 bg-light radius-small o-hidden" @click="openPopup(currentImageIndex)">
       <Image360
         v-if="product && product.image3d"
         class="h-100 w-100"
@@ -10,35 +10,44 @@
       />
       <img
         loading="lazy"
-        v-if="images[0] && !product?.image3d"
-        class="h-max h-max-15r bg-white radius-semi w-100"
+        v-if="images[currentImageIndex] && !product?.image3d"
+        class="h-100 flex-child-default bg-white radius-small w-100"
         style="object-fit: contain;"
-        :src="(FILE_SERVER_URL || '') + images[0]"
+        :src="(FILE_SERVER_URL || '') + images[currentImageIndex]"
       />
       <PlaceholderImage
-        v-if="!images[0] && !product?.image3d"
-        class="h-max-20r h-100 w-100"
+        v-if="!images[currentImageIndex] && !product?.image3d"
+        class="h-100 w-100"
         style="object-fit: cover;"
       />
     </div>
     
     <!-- Thumbnails -->
-    <div v-if="images.length > 1" class="o-scroll w-100 pd-semi pd-t-zero">
-      <div class="no-responsive w-max flex flex-nowrap gap-thin">
+    <div v-if="images.length > 1" class="mobile:order-1 order-0 w-5r mobile:w-100">
+      <div class="w-100 mobile:flex-row flex-column flex flex-nowrap gap-thin">
         <img loading="lazy" 
-          v-for="(image, index) in images"
+          v-for="(image, index) in images.slice(0, 5)"
           :key="index"
           :src="(FILE_SERVER_URL || '') + image" 
-          @click="openPopup(image)"
-          class="flex-child flex-child-grow-1 aspect-1x1 radius-semi bg-white o-hidden thumbnail"
+          @click="currentImageIndex = index"
+          class="aspect-1x1 radius-small bg-white o-hidden thumbnail"
+          :class="{ 'active': currentImageIndex === index }"
         />
+        <div
+          v-if="images.length > 5"
+          @click="openPopup(5)"
+          class="aspect-1x1 radius-small o-hidden thumbnail flex flex-center t-medium t-black bg-white "
+        >
+          +{{ images.length - 5 }}
+        </div>
       </div>
     </div>
     
     <!-- Popup with photo viewer -->
-    <Popup @close-popup="closePopup" :isPopupOpen="isPopupVisible" class="radius-medium o-hidden">
+    <Popup @close-popup="closePopup" :isPopupOpen="isPopupVisible" class="radius-zero o-hidden">
       <PhotoViewer
-        :photoUrl="(FILE_SERVER_URL || '') + selectedImage"
+        :photos="images.map(img => (FILE_SERVER_URL || '') + img)"
+        :initialIndex="selectedImageIndex"
       />
     </Popup>
   </div>
@@ -46,12 +55,9 @@
 
 <script setup>
 import { ref } from "vue";
-
 import Popup from '@martyrs/src/components/Popup/Popup.vue';
 import PhotoViewer from '@martyrs/src/components/PhotoViewer/PhotoViewer.vue';
-
 import PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'
-
 import Image360 from '@martyrs/src/modules/products/components/elements/Image360.vue'
 
 const props = defineProps({
@@ -66,15 +72,17 @@ const props = defineProps({
 });
 
 const isPopupVisible = ref(false);
-const selectedImage = ref(null);
+const selectedImageIndex = ref(0);
+const currentImageIndex = ref(0);
 
-const openPopup = (image) => {
-  if (!image) return;
-  selectedImage.value = image;
+const openPopup = (index) => {
+  if (!props.images.length) return;
+  selectedImageIndex.value = index;
   isPopupVisible.value = true;
 };
 
 const closePopup = () => {
+  selectedImageIndex.value = 0;
   isPopupVisible.value = false;
 };
 </script>
@@ -82,9 +90,10 @@ const closePopup = () => {
 <style scoped>
 .thumbnail {
   width: 100%;
-  max-width: 6rem;
-  height: 6rem;
   object-fit: cover;
   cursor: pointer;
 }
+.thumbnail.active {
+  border: 1px solid rgb(var(--second));
+}
 </style>

package/src/modules/products/components/blocks/ProductVariants.vue

@@ -10,13 +10,14 @@
       class="w-100 mn-b-medium"
     >
       <p class="capitalize mn-b-thin t-medium">{{ group.label }}</p>
-      <div class="flex flex-wrap gap-small mn-b-medium">
+
+      <div class="flex flex-wrap gap-thin mn-b-medium">
         <button
           v-for="item in group.items"
           :key="item.key"
           @click="group.label === 'Options' ? pick(item.variant) : pickAttr(group.label, item.value)"
           :disabled="item.off"
-          class="h-3r w-min-3r flex-nowrap gap-thin radius-small flex flex-center pos-relative br-1px pd-micro"
+          class="pd-small radius-small"
           :class="[
             isSelected(group, item) ? 'br-main' : 'br-black-transp-10',
             item.off ? 'o-50 cursor-not-allowed' : 'cursor-pointer hover-scale-1',
@@ -27,9 +28,10 @@
             :src="`${FILE_SERVER_URL}${item.img}`"
             class="h-100 radius-thin aspect-1x1 object-fit-contain"
           />
-          <span class="flex-center capitalize flex h-100 w-100 t-small t-center">
+          <p class="">
             {{ item.text }}
-          </span>
+          </p>
+
           <div
             v-if="isSelected(group, item)"
             class="pos-absolute pos-b-0 pos-r-0 pos-l-0 flex flex-center h-1r bg-main t-white t-small"

package/src/modules/products/components/elements/Price.vue

@@ -6,7 +6,6 @@
         'p-medium t-semi': size === 'small',
         'h3 t-semi': size === 'big'
       }"
-      class="t-second"
     >
       {{ returnCurrency() + variant.price }}
     </span>
@@ -19,7 +18,7 @@
       }"
       class="p-small mn-l-micro t-transp"
     >
-      {{ product.listing === 'rent' ? 'per day' : 'for ' + variant.quantity + variant.unit }}
+      {{ product?.listing === 'rent' ? 'per day' : 'for ' + variant.quantity + variant.unit }}
     </span>
 
     <p
@@ -36,10 +35,11 @@ import { computed } from 'vue';
 
 const props = defineProps({
   product: Object,
+  variants: Array,
   size: String
 });
 
 const variant = computed(() => {
-  return props.product?.variants?.[0] || props.product;
+  return props.product?.variants?.[0] || props.variants?.[0] || props.product;
 });
 </script>