UI update

Added intern images and bio for internship blockchain contract

css/main.css

@@ -317,6 +317,17 @@ ol[type="1"] {
   -webkit-tap-highlight-color: transparent;
 }
 
+.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
 .observe-empty-state:empty {
   display: none;
 }
@@ -827,7 +838,7 @@ sm-carousel {
 
 .bit-bond-series__row,
 .bob-fund__row,
-.investor-card {
+.person-card {
   min-width: 100%;
 }
 
@@ -870,13 +881,13 @@ sm-carousel {
   color: rgba(var(--text-color), 0.8);
 }
 
-.investor-card {
+.person-card {
   position: relative;
   gap: 1rem;
   grid-template-columns: 1fr;
   /*     &--small{
           grid-template-areas: 'img .' 'para para';
-          .investor__image{
+          .person__image{
               width: 4rem;
               height: 4rem;
               border-radius: 50%;
@@ -885,12 +896,26 @@ sm-carousel {
       &--big{
           grid-template-areas: 'img .' 'img para';
       } */
+  /*     &--intern{
+          text-align: center;
+          justify-items: center;
+      } */
 }
 
-.investor__image {
+.person__image {
   width: 100%;
   height: auto;
   border-radius: 0.5rem;
+  /*     &--intern{
+          height: 10rem;
+          width: 10rem;
+          object-position: top;
+          border-radius: 50%;
+      } */
+}
+
+.person__name {
+  font-size: 1.1rem;
 }
 
 .investor__bio {
@@ -902,6 +927,10 @@ sm-carousel {
   font-size: 0.85rem;
 }
 
+.intern-flo-id {
+  font-size: 0.75rem;
+}
+
 #outlet_switcher {
   position: absolute;
   top: 0;
@@ -1084,7 +1113,7 @@ scroll-tab-panels > [active] {
   column-gap: 1rem;
 }
 .masonry-layout > * {
-  margin-bottom: 4rem;
+  margin-bottom: 3rem;
   page-break-inside: avoid;
 }
 

css/main.scss

@@ -262,6 +262,16 @@ ol[type="1"]{
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 }
+.breakable{
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+}
 .observe-empty-state:empty{
     display: none;
 }
@@ -740,7 +750,7 @@ sm-carousel{
 
 .bit-bond-series__row,
 .bob-fund__row,
-.investor-card{
+.person-card{
     min-width: 100%;
 }
 .bit-bond-series__row{
@@ -782,13 +792,14 @@ sm-carousel{
 }
 
 
-.investor-card{
+.person-card{
     position: relative;
     gap: 1rem;
+    // text-align: center;
     grid-template-columns: 1fr;
 /*     &--small{
         grid-template-areas: 'img .' 'para para';
-        .investor__image{
+        .person__image{
             width: 4rem;
             height: 4rem;
             border-radius: 50%;
@@ -797,15 +808,28 @@ sm-carousel{
     &--big{
         grid-template-areas: 'img .' 'img para';
     } */
+/*     &--intern{
+        text-align: center;
+        justify-items: center;
+    } */
 }
 .investor-card__overlay{
     // position: absolute;
     // background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,1));
 }
-.investor__image{
+.person__image{
     width: 100%;
     height: auto;
     border-radius: 0.5rem;
+/*     &--intern{
+        height: 10rem;
+        width: 10rem;
+        object-position: top;
+        border-radius: 50%;
+    } */
+}
+.person__name{
+    font-size: 1.1rem;
 }
 .investor__bio{
     font-size: 0.85rem;
@@ -814,6 +838,9 @@ sm-carousel{
 .investor__contribution{
     font-size: 0.85rem;
 }
+.intern-flo-id{
+    font-size: 0.75rem;
+}
 
 #outlet_switcher{
     position: absolute;
@@ -990,7 +1017,7 @@ scroll-tab-panels{
     columns: 2;
     column-gap: 1rem;
     & > * {
-        margin-bottom: 4rem;
+        margin-bottom: 3rem;
         page-break-inside: avoid;
     }
 }

ico.html

@@ -30,11 +30,11 @@
     </template>
 
     <template id="ico_investor_row">
-        <div class="investor-card grid">
+        <div class="person-card grid">
-            <img class="investor__image" src="" alt="" loading="lazy">
+            <img class="person__image" src="" alt="" loading="lazy">
             <div class="investor-card__overlay grid gap-1-5">
-                <div class="grid">
+                <div class="grid investor__bio-container">
-                    <h4 class="investor__name capitalize"></h4>
+                    <h4 class="person__name capitalize"></h4>
                     <p class="investor__bio color-0-8"></p>
                 </div>
                 <div class="grid investor__contribution-container">

internshipblockchaincontract.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ICO</title>
+    <title>Internship Blockchain Contract</title>
     <link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
@@ -15,6 +15,17 @@
 <body>
     <sm-notifications id="notification_drawer"></sm-notifications>
 
+    <template id="intern_card_template">
+        <div class="person-card person-card--intern grid">
+            <img class="person__image person__image--intern" src="" alt="" loading="lazy">
+            <div class="grid intern__bio-container gap-0-5">
+                <h4 class="person__name capitalize"></h4>
+                <p class="intern-flo-id color-0-8 breakable"></p>
+                <p class="intern__project"></p>
+            </div>
+        </div>
+    </template>
+    
     <section id="elevator_popup" class="grid hide-completely">
         <header class="elevator__header">
             <button class="close-button justify-self-start" onclick="hideSiteMap()">
@@ -82,27 +93,21 @@
                 <button class="room-button" title="Investors">
                     <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
                     <span class="button__label">
-                        Contributing Investors
+                        Interns
                     </span>
                 </button>
                 <button class="room-button" title="Phases">
                     <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
                     <span class="button__label">
-                        Product
+                        Projects
-                    </span>
-                </button>
-                <button class="room-button" title="Phases">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
-                    <span class="button__label">
-                        Purchase
                     </span>
                 </button>
             </scroll-tab-header>
         </div>
         <scroll-tab-panels id="ico_page_group">
             <section class="grid carousel-container">
-                <h3 class="h3 margin-bottom-1-5r">Contributing Investors</h3>
+                <h3 class="h3 margin-bottom-1-5r">Interns</h3>
-                <sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
+                <section id="interns_container" class="masonry-layout"></section>
             </section>
             <section>
                 <h3 class="h3 margin-bottom-1-5r">Product</h3>
@@ -145,21 +150,94 @@
                     </li>
                 </ol>
             </section>
-            <section>
-                <h3 class="h3 margin-bottom-1-5r">Purchase</h3>
-                <p>
-                    Currently we are not selling any RanchiMall Tokens (RMT). You can buy nominal tokens at
-                    our last valuation in <a href="https://www.ranchimall.net/exchange/">our exchange</a> for USD 10 or Rs 500 if you want to become a
-                    tokenholder, and be part of the learning process through our community. Our rules are designed to
-                    favour long term investors.
-                    <br> Once you initiate a tokenholder relationship, please be patient to stay the
-                    whole course of journey. You will not regret it.
-                </p>
-            </section>
         </scroll-tab-panels>
     </main>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
     <script src="js/components.js"></script>
     <script src="js/index.js"></script>
+    <script>
+        const interns = [
+            {
+                extension: 'jpg',
+                internName: 'Aakriti Sinha',
+                floId: 'FKa43RxHUAdJbgV6KipQ4PvXi6Kgw4HmFn',
+                level: 'Motivated',
+                project: `Marketing and Product Launch`,
+            },
+            {
+                extension: 'jpg',
+                internName: 'Gunjan Kumar Ranjan',
+                floId: 'FCTGD4M3DvMKupX3j2y5f3cQNDD9i6LUp7',
+                level: 'Starter',
+                project: `P2P Content Collaboration`,
+            },
+            {
+                extension: 'jpg',
+                internName: 'Kriti Shreya',
+                floId: 'F8zYh6rCuorGmnMtqGFpaKGeBqQaj9WVtG',
+                level: 'Starter',
+                project: `P2P Content Collaboration`,
+            },
+            {
+                extension: 'jpg',
+                internName: 'Megha Rani',
+                floId: 'FEvLovuDjWo4pXX3Y4SKDh8sq1AxJzqz9Z',
+                level: 'Motivated',
+                project: `P2P Content Collaboration`,
+            },
+            {
+                extension: 'jpg',
+                internName: 'Muskan Shoundik',
+                floId: 'FSdjJCJdU43a1dyWY6dRES1ekoupEjFPqQ',
+                level: 'Starter',
+                project: `P2P Content Collaboration`,
+            },
+            {
+                extension: 'jpg',
+                internName: 'Rashi Sanghvi',
+                floId: 'FHWXdnjRRJErqazye4Y9MRmE42D4Bp6Bj7',
+                level: 'Starter',
+                project: `P2P Content Collaboration`,
+            },
+            {
+                extension: 'jpg',
+                internName: 'Ritika Agrawal',
+                floId: 'FFaB6N1ETZsykXVS2PdM5xhj5BBoqsfsXC',
+                level: 'Starter',
+                project: `Javascript`,
+            },
+            {
+                extension: 'jpg',
+                internName: 'Shambhavi',
+                floId: 'FK96PZh4NskoJfWoyqcvLpSo7YnTLWMmdD',
+                level: 'Starter',
+                project: `Marketing and Product Launch`,
+            },
+            {
+                extension: 'jpg',
+                internName: 'Shivam Pandey',
+                floId: 'FJK9EDGhKj4Wr2zeCo3zRPXCNU6CXFFQAN',
+                level: 'Starter',
+                project: `Javascript`,
+            },
+            {
+                extension: 'jpg',
+                internName: 'Shruti Kashyap',
+                floId: 'FPtrQK6aSCgFeSNpzC68YTznHPfiz7CCvW',
+                level: 'Starter',
+                project: `P2P Content Collaboration`,
+            },
+        ]
+
+        function renderAllInterns(){
+            const frag = document.createDocumentFragment()
+            getRef('interns_container').innerHTML = ''
+            interns.forEach(investor => {
+                frag.append(render.internCard(investor))
+            })
+            getRef('interns_container').append(frag)
+        }
+        renderAllInterns()
+    </script>
 </body>
 </html>

js/components.js

@@ -3688,6 +3688,10 @@ customElements.define('scroll-tab-header', class extends HTMLElement{
         if (this.activeTab)
             this.activeTab.removeAttribute('active')
         this._assignedElements[tabIndex].setAttribute('active', '')
+        this.tabHeader.scrollTo({
+            left: (this._assignedElements[tabIndex].getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft),
+            behavior: 'smooth'
+        })
         if(fire)
             this.fireEvent(tabIndex)
         this.activeTab = this._assignedElements[tabIndex]

js/index.js

@@ -420,7 +420,7 @@ bobsFundRowTemplate.innerHTML = `
 <div class="bob-fund__row grid">
     <div class="grid">
         <h5 class="label color-0-8 weight-500">Investor</h5>
-        <h3 class="value investor__name"></h3>
+        <h3 class="value person__name"></h3>
     </div>
     <div class="flex">
         <div class="grid">
@@ -480,7 +480,7 @@ const render = {
   bobFundRow(obj) {
     const { investorName, invested, currentValue, timeElapsed } = obj;
     const row = bobsFundRowTemplate.content.cloneNode(true);
-    row.querySelector(".investor__name").textContent = investorName;
+    row.querySelector(".person__name").textContent = investorName;
     row.querySelector(".original-value").textContent = invested;
     row.querySelector(".current-value").textContent = currentValue;
     row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed}`;
@@ -490,18 +490,29 @@ const render = {
     const { extension, investorName, bio, contribution } = obj;
     const { thumbnail } = options;
     const row = getRef("ico_investor_row").content.cloneNode(true);
-    const card = row.querySelector(".investor-card");
+    const card = row.querySelector(".person-card");
     const folder = thumbnail ? "investors-thumbnail" : "investors";
-    const investorImage = row.querySelector(".investor__image");
+    const investorImage = row.querySelector(".person__image");
-    if (thumbnail) card.classList.add("investor-card--small");
+    if (thumbnail) card.classList.add("person-card--small");
-    else card.classList.add("investor-card--big");
+    else card.classList.add("person-card--big");
     investorImage.src = `assets/${folder}/${investorName}.${extension}`;
     investorImage.setAttribute("alt", `${investorName} profile picture`);
-    row.querySelector(".investor__name").textContent = investorName;
+    row.querySelector(".person__name").textContent = investorName;
     row.querySelector(".investor__bio").textContent = bio;
     row.querySelector(".investor__contribution").textContent = contribution;
     return row;
   },
+  internCard(obj) {
+    const { extension, internName, floId, project } = obj;
+    const card = getRef("intern_card_template").content.cloneNode(true).firstElementChild;
+    const investorImage = card.querySelector(".person__image");
+    investorImage.src = `assets/interns/${internName}.${extension}`;
+    investorImage.setAttribute("alt", `${internName} profile picture`);
+    card.querySelector(".person__name").textContent = internName;
+    card.querySelector(".intern-flo-id").textContent = floId;
+    card.querySelector(".intern__project").textContent = project;
+    return card;
+  },
   icoPhase(obj) {
     const { phase, date, info } = obj;
     const template = getRef("ico_phase_template").content.cloneNode(true);