New icon system:

	modified:   css/cards.css
	modified:   css/item.css
	new file:   icon/completed.svg
	new file:   icon/minecraft.svg
	new file:   icon/other.svg
	new file:   icon/semiverified.svg
	new file:   icon/verified.svg
	modified:   icons.json
	modified:   index.html
	modified:   js/item.js
	modified:   js/showcards.js
	modified:   mods.json

css/cards.css

@@ -180,7 +180,7 @@ p {
   font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   font-size: 16px;
   margin-top: 5px;
-  height: 84px;
+  height: 90px;
 }
 
 .full-description {
@@ -292,16 +292,19 @@ p {
   cursor: pointer;
 }
 
-.statusicon{
-  height: 20px;
-  width: 20px;
+.ItemIcons{
+  width: 11px;
+  height: 11px;
+  min-width: 11px;
+  height: 11px;
   background-repeat: no-repeat;
   background-size: cover;
   padding: 5px;
+  margin: 0 3px;
 }
 
 .IconContainer {
-  margin-top: auto; 
+  margin-top: calc(auto + 3px); 
   display: flex;
   justify-content: flex-end;
   align-items: center;

css/item.css

@@ -25,7 +25,7 @@
 .itemdescriptioncont{
     font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
     color: #ecf9fb;
-    margin-top: 10px;
+    margin-top: 3px;
 }
 
 .itemdescription, .itemtitle, .itemtranslator, .iteminfo{
@@ -56,6 +56,7 @@
 
 .ItemImageContainer{
     margin-right: 15px;
+    width: 100px;
 
 }
 
@@ -97,19 +98,8 @@
 }
 
 
-.ItemIcon {
-    width: 46px;
-    height: 46px;
-}
 
 
-.ItemIcon {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
 .error404{
     display: flex;
     background-color: #26292f;
@@ -218,3 +208,11 @@
     margin-right: 2px;
     margin-left: 2px;
 }
+
+.IconContainer{
+    margin-top: 5px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap!important;
+    justify-content:flex-start!important;
+}

icons.json

@@ -1,18 +1,28 @@
 {
     "completed": {
       "icon_id": 1,
-      "icon": "https://svgshare.com/i/13yx.svg",
+      "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0BAC5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' width='24' height='24'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z' fill='none'%3E%3C/path%3E%3C/svg%3E",
       "title": "У роботі"
     },
     "semiverified": {
       "icon_id": 2,
-      "icon": "https://svgshare.com/i/13yF.svg",
+      "icon": "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:none;stroke:%23B0BAC5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} %3C/style%3E %3Cpath class='st0' d='M6.7,4.9h10.6c1,0,1.8,0.8,1.8,1.8v10.6c0,1-0.8,1.8-1.8,1.8H6.7c-1,0-1.8-0.8-1.8-1.8V6.7C4.9,5.7,5.7,4.9,6.7,4.9z'/%3E %3Crect x='9.3' y='9.3' class='st0' width='5.3' height='5.3'/%3E %3Cline class='st0' x1='9.3' y1='2.2' x2='9.3' y2='4.9'/%3E %3Cline class='st0' x1='14.7' y1='2.2' x2='14.7' y2='4.9'/%3E %3Cline class='st0' x1='9.3' y1='19.1' x2='9.3' y2='21.8'/%3E %3Cline class='st0' x1='14.7' y1='19.1' x2='14.7' y2='21.8'/%3E %3Cline class='st0' x1='19.1' y1='9.3' x2='21.8' y2='9.3'/%3E %3Cline class='st0' x1='19.1' y1='13.8' x2='21.8' y2='13.8'/%3E %3Cline class='st0' x1='2.2' y1='9.3' x2='4.9' y2='9.3'/%3E %3Cline class='st0' x1='2.2' y1='13.8' x2='4.9' y2='13.8'/%3E %3C/svg%3E",
       "title": "Розробник або додасть, або існує ще один переклад"
     },
     "verified": {
       "icon_id": 3,
-      "icon": "https://svgshare.com/i/13yn.svg",
+      "icon": "data:image/svg+xml,%3Csvg version='1.1' id='Шар_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:none;stroke:%23B0BAC5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} %3C/style%3E %3Ccircle class='st0' cx='12' cy='12' r='9.6'/%3E %3Cline class='st0' x1='2.4' y1='12' x2='21.6' y2='12'/%3E %3Cpath class='st0' d='M12,2.4c2.4,2.6,3.8,6.1,3.9,9.6c-0.1,3.6-1.4,7-3.9,9.6C9.6,19,8.2,15.6,8.1,12C8.2,8.4,9.6,5,12,2.4z'/%3E %3C/svg%3E",
       "title": "Розробник моду додав наш переклад"
+    },
+    "minecraft": {
+      "icon_id": 4,
+      "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve' width='24' height='24'%3E%3Cpath fill='none' stroke='%23B0BAC5' stroke-width='2px' stroke-linecap='round' stroke-linejoin='round' d='M2.7 6.6v10.8l9.3 5.3 9.3-5.3V6.6L12 1.3zm0 0L12 12m9.3-5.4L12 12m0 10.7V12'/%3E%3C/svg%3E",
+      "title": "Це майнкрафт мод"
+    },
+    "other": {
+      "icon_id": 5,
+      "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' width='24' height='24'%3E%3Crect width='20' height='14' x='2' y='3' rx='2' ry='2' stroke='%23B0BAC5' fill='none' stroke-width='2px'%3E%3C/rect%3E%3Cpath d='M8 21h8m-4-4v4' stroke='%23B0BAC5' fill='none' stroke-width='2px'%3E%3C/path%3E%3C/svg%3E",
+      "title": "Це програма або гра"
     }
   }
 

index.html

@@ -41,7 +41,6 @@
       <div class="about hbtn">Про нас</div>
       <div onclick="window.location.href='faq';" class="faq hbtn">ЧАПИ</div>
       <div onclick="window.location.href='translation';" class="addtranslation hbtn">Додати переклад</div>
-
     </div>
   </div>
   <div class="container">

js/item.js

@@ -82,51 +82,6 @@ $(document).ready(() => {
         return trimmedLink;
     }
 
-
-
-
-
-    function getModIcon(mod) {
-        if (mod.completed === false) {
-            return 'completed';
-        } else if (mod.semiverified === true) {
-            return 'semiverified';
-        } else if (mod.verified === true) {
-            return 'verified';
-        }
-        // Return an empty string if none of the conditions match
-        return '';
-    }
-
-    // Function to apply styles based on modIcon
-    function applyIconStyles(modIcon) {
-        const itemIconElement = $('#itemicon');
-
-        // Remove existing icon styles
-        itemIconElement.removeClass('statusicon completedIcon semiverifiedIcon verifiedIcon');
-
-        // Add styles based on modIcon
-        if (modIcon) {
-            // Use addIcon function to add the icon dynamically
-            addIcon(itemIconElement[0], modIcon);
-        }
-    }
-
-
-    // Function to add icons based on status
-    function addIcon(element, type) {
-        const iconContainer = document.createElement('div');
-
-        // Use Promise to get icon data
-        getIconData(type).then(iconData => {
-            if (iconData.icon) {
-                iconContainer.style.backgroundImage = `url('${iconData.icon}')`;
-                iconContainer.classList.add(`statusicon`, `${type}Icon`);
-                element.appendChild(iconContainer);
-            }
-        });
-    }
-
 
     function truncateText(text, maxLength) {
         if (text.length > maxLength) {
@@ -267,9 +222,6 @@ async function updateItemPage() {
                 // Determine if the item is from mods.json
                 const isMod = modsData.some(mod => mod.id === selectedItem.id);
 
-                // Determine the icon based on mod properties
-                const modIcon = getModIcon(selectedItem);
-
                 // Determine the game version text
                 const gameVersionText = selectedItem.gameversion ? `<p class="gameversion iteminfo">Версія гри: ${selectedItem.gameversion}</p>` : '';
 
@@ -299,7 +251,9 @@ async function updateItemPage() {
                     <div class="ItemTopContainer">
                         <div class="ItemImageContainer">
                             <div class="itemimage" style="background-image: url('${selectedItem.image}');" title="${selectedItem.title} Image" style="max-width: 100%;"></div>
-                            <div id="itemicon" class="ItemIcon"></div>
+                            <div id="IconContainer" class="IconContainer">
+                                
+                            </div>
                         </div>
                         <div class="ItemTextContainer">
                             <h2 class="itemtitle">${selectedItem.title}</h2>
@@ -331,8 +285,8 @@ async function updateItemPage() {
 
                 // Update the total translation count
                 updateTotalTranslation(modsData, otherData);
+                populateIconContainer(selectedItem, modsData, otherData);
 
-                applyIconStyles(modIcon);
             } else {
                 document.title = "Йой, халепа";
 
@@ -411,3 +365,100 @@ function updateTotalTranslation(mods, other) {
   if (modsData && otherData) {
     updateTotalTranslation(modsData, otherData);
   }
+
+// Function to get status classes based on certain conditions
+function getStatusClasses(selectedItem, modsData, otherData) {
+    try {
+        // Initialize an array to store status classes
+        const statusClasses = [];
+
+        // Add status classes based on item properties or conditions
+        if (selectedItem.verified === true) {
+            statusClasses.push('verified');
+        } else if (selectedItem.semiverified === true) {
+            statusClasses.push('semiverified');
+        }
+        if (selectedItem.completed === false) {
+            statusClasses.push('completed');
+        }
+        // Add more conditions as needed
+
+        // Check if the mod exists in modsData
+        const modExistsInModsData = modsData.some(modData => modData.id === selectedItem.id);
+        // Check if the mod exists in otherData
+        const modExistsInOtherData = otherData.some(otherMod => otherMod.id === selectedItem.id);
+
+        if (modExistsInModsData) {
+          statusClasses.push('minecraft');
+        } else if (modExistsInOtherData) {
+          statusClasses.push('other');
+        }
+
+
+        // Return the array of status classes
+        return statusClasses;
+    } catch (error) {
+        console.error("Error getting status classes:", error);
+        return []; // Return an empty array in case of error
+    }
+}
+
+
+// Function to fetch icon data from icons.json
+async function getIconData() {
+    try {
+        const iconsResponse = await fetch('icons.json');
+        return await iconsResponse.json();
+    } catch (error) {
+        console.error("Error fetching icon data:", error);
+        return null;
+    }
+}
+
+function addIcons(iconsData, statusClasses) {
+    try {
+        // Check if iconsData is an object
+        if (typeof iconsData === 'object' && iconsData !== null) {
+            // Generate HTML for each icon
+            const iconHTML = statusClasses.map(statusClass => {
+                const icon = iconsData[statusClass];
+                // Check if the icon object exists
+                if (icon) {
+                    // Use an <img> element to display the SVG icon
+                    return `<div class="ItemIcons" style="background-image: url(&quot;${icon.icon}&quot;);" alt="${icon.title}" title="${icon.title}"></div>`;
+                } else {
+                    console.error(`Error: Icon for status class '${statusClass}' not found`);
+                    return ''; // Return an empty string for missing icons
+                }
+            }).join('');
+
+            // Append the generated HTML to IconContainer
+            $('#IconContainer').html(iconHTML);
+        } else {
+            console.error("Error: iconsData is not an object");
+        }
+    } catch (error) {
+        console.error("Error adding icons:", error);
+    }
+}
+
+// Function to populate IconContainer with SVG icons from icons.json
+async function populateIconContainer(selectedItem, modsData, otherData) {
+    try {
+        // Fetch icons data
+        const iconsData = await getIconData();
+
+        // Determine status classes for the item
+        const statusClasses = getStatusClasses(selectedItem, modsData, otherData);
+
+        // Add icons to the IconContainer
+        addIcons(iconsData, statusClasses);
+    } catch (error) {
+        console.error("Error populating icon container:", error);
+    }
+}
+
+
+
+
+