(　′∀`)σ≡σ☆))Д′)ﾚ(ﾟ∀ﾟ;)ﾍ=З=З=Зε≡(ノ´＿ゝ｀）ノ HEX
HEX
Server: Apache/2.4.58 (Ubuntu)
System: Linux mail.thebrand.ai 6.8.0-107-generic #107-Ubuntu SMP PREEMPT_DYNAMIC Fri Mar 13 19:51:50 UTC 2026 x86_64
User: www-data (33)
PHP: 8.3.6
Disabled: NONE
$ pwd: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/../tmpr/../tmpr/../wowX/
Upload Files
File: /var/www/html/tmpr/..//tmpr/../tmpr/../tmpr/../tmpr/../tmpr/../wowX/sidebar.php
<!doctype html>
<html lang="en">
  <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Canva-style Sidebar (HTML + CSS)</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
  :root{
    --bg-start: #f6f7fb;
    --bg-end: #f0f6fb;
    --sidebar-width: 110px;
    --collapsed-width: 110px;
    --accent: #7a45ff; /* purple create */
    --muted: #6b6b7a;
    --card-bg: rgba(121, 84, 255, 0.08);
    --soft-lav: linear-gradient(180deg,#f7f6fb 0%, #f0f6fb 100%);
    --light-border: rgba(99, 99, 120, 0.06);
    --radius: 12px;
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:#222;
    background:linear-gradient(180deg,#f8fafc 0%, #ffffff 100%);
  }

  /* Layout */
  .app {
    display:flex;
    min-height:100vh;
    background: linear-gradient(180deg,#fbfdff 0%, #f5f8fb 100%);
  }

  .sidebar{
    width:var(--sidebar-width);
    min-width:var(--sidebar-width);
    background: var(--soft-lav);
    border-right:1px solid var(--light-border);
    padding:20px 16px;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:width .18s ease;
    position:relative;
  }

  /* Collapsed variant (small screens) */
  @media (max-width:700px){
    .sidebar{
      width:var(--collapsed-width);
      min-width:var(--collapsed-width);
      padding:18px 10px;
    }
    .label, .section-title, .projects-column { display:none; }
    .project-list { width: 100%; padding-right:0 }
  }

  .brand-logo{
    font-weight:700;
    font-family: "Pacifico", Inter, sans-serif;
    color:#3fa6ff;
    letter-spacing:0.4px;
    display:flex;
    align-items:center;
    gap:10px;
  }

  /* Left column (icons) */
.left-col {
  width: 75px;
  min-width: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 10px;
}

  /* 'Create' floating purple button */
  .btn-create{
    display:flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(180deg, #8f56ff 0%, #6a2fff 100%);
    color:white;
    padding:10px 12px;
    border-radius:999px;
    box-shadow: 0 6px 18px rgba(106,47,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.06);
    cursor:pointer;
    border:none;
    transition:transform .15s ease, box-shadow .15s ease;
    font-weight:600;
    width:fit-content;
  }
  .btn-create:active{ transform:translateY(1px) }
  .btn-create svg{ width:18px; height:18px; }

  .nav {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:6px;
  }

  .nav-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
  text-align: center;
}
 .nav-item:hover {
  background: rgba(122,69,255,0.06);
  color: #2b2b3a;
}

.nav-item svg {
  width: 22px;
  height: 22px;
}

.label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  line-height: 1.1;
}

  .spacer{ flex:1 }

  .bottom-row{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .avatar {
    width:40px;
    height:40px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:700;
    color:white;
    background:linear-gradient(180deg,#ff6b6b,#ff4d4d);
    box-shadow: 0 4px 18px rgba(16,24,40,0.06);
  }

  /* Right content column (projects list as in screenshot) */
  .content {
    flex:1;
    padding:22px;
  }

  .projects-column{
    background:transparent;
    padding-top:6px;
  }
  .section-title{
    font-size:13px;
    color:#4b4b5d;
    margin:8px 0;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .project-card{
    width:100%;
    background: linear-gradient(180deg, rgba(250,250,255,1) 0%, rgba(248,250,255,1) 100%);
    border-radius:12px;
    padding:14px;
    box-shadow: 0 8px 30px rgba(20,32,64,0.03);
    border:1px solid rgba(99,99,120,0.04);
    max-width:520px;
  }

  .project-list{
    margin-top:8px;
    display:flex;
    flex-direction:column;
    gap:8px;
    width:420px;
  }

  .project-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-radius:10px;
    color:#3b3b4a;
    background:transparent;
    transition:all .12s ease;
  }
  .project-item:hover{
    background:rgba(122,69,255,0.04);
    transform:translateY(-1px);
  }

  .project-item .chip{
    width:34px;
    height:34px;
    border-radius:8px;
    background:white;
    border:1px solid rgba(0,0,0,0.04);
    display:grid;
    place-items:center;
    box-shadow: 0 6px 16px rgba(15,23,42,0.03);
  }

  .project-item.selected{
    background:var(--card-bg);
    box-shadow: none;
  }

  .project-item.selected .project-name{
    color:#382b6b;
    font-weight:600;
  }

  .project-name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:320px;
  }

  /* small utility lines */
  .muted{ color:#7b7b8b; font-size:13px; }
  .icon-muted{ opacity:0.9; }

  /* premium crown badge */
  .badge-crown{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,240,220,0.9);
    padding:6px 8px;
    border-radius:999px;
    font-weight:600;
    font-size:12px;
    color:#7a4a00;
  }

  /* subtle divider line */
  .divider{
    height:1px;
    background:var(--light-border);
    margin:6px 0;
    border-radius:2px;
  }

  /* small screen project card width */
  @media (max-width:980px){
    .project-list{ width:320px }
  }
/* Create button also becomes vertical */
.btn-create {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px 0;
  border-radius: 12px;
}.btn-create svg {
  width: 22px;
  height: 22px;
}
</style>
</head>
<body>
<div class="app">
  <!-- Sidebar -->
<aside class="sidebar">
  <div class="left-col">

    <!-- Create Button (vertical) -->
    <button class="btn-create" id="add_design">
      <svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="white" stroke-width="2" stroke-linecap="round" /></svg>
      <span class="label" style="color:white;">Create</span>
    </button>
  <fieldset style="margin-bottom: 10px;margin-top:0px;" class="control radio-set">


        <div class="control">

            <label class="brand-img-layerMe" aria-label="Browse">
                <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4.97883 9.68508C2.99294 8.89073 2 8.49355 2 8C2 7.50645 2.99294 7.10927 4.97883 6.31492L7.7873 5.19153C9.77318 4.39718 10.7661 4 12 4C13.2339 4 14.2268 4.39718 16.2127 5.19153L19.0212 6.31492C21.0071 7.10927 22 7.50645 22 8C22 8.49355 21.0071 8.89073 19.0212 9.68508L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L4.97883 9.68508Z" fill="#1C274C"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 8C2 8.49355 2.99294 8.89073 4.97883 9.68508L7.7873 10.8085C9.77318 11.6028 10.7661 12 12 12C13.2339 12 14.2268 11.6028 16.2127 10.8085L19.0212 9.68508C21.0071 8.89073 22 8.49355 22 8C22 7.50645 21.0071 7.10927 19.0212 6.31492L16.2127 5.19153C14.2268 4.39718 13.2339 4 12 4C10.7661 4 9.77318 4.39718 7.7873 5.19153L4.97883 6.31492C2.99294 7.10927 2 7.50645 2 8Z" fill="#1C274C"></path> <path opacity="0.7" d="M5.76613 10L4.97883 10.3149C2.99294 11.1093 2 11.5065 2 12C2 12.4935 2.99294 12.8907 4.97883 13.6851L7.7873 14.8085C9.77318 15.6028 10.7661 16 12 16C13.2339 16 14.2268 15.6028 16.2127 14.8085L19.0212 13.6851C21.0071 12.8907 22 12.4935 22 12C22 11.5065 21.0071 11.1093 19.0212 10.3149L18.2339 10L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L5.76613 10Z" fill="#1C274C"></path> <path opacity="0.4" d="M5.76613 14L4.97883 14.3149C2.99294 15.1093 2 15.5065 2 16C2 16.4935 2.99294 16.8907 4.97883 17.6851L7.7873 18.8085C9.77318 19.6028 10.7661 20 12 20C13.2339 20 14.2268 19.6028 16.2127 18.8085L19.0212 17.6851C21.0071 16.8907 22 16.4935 22 16C22 15.5065 21.0071 15.1093 19.0212 14.3149L18.2339 14L16.2127 14.8085C14.2268 15.6028 13.2339 16 12 16C10.7661 16 9.77318 15.6028 7.7873 14.8085L5.76613 14Z" fill="#1C274C"></path> </g></svg>
            </label>
        </div>
        <div class="control">

            <label class="brand-modal-open" id="brand-history"
                   data-title="History" autocomplete="off" data-target="#modal-history">
                <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.07868 5.06891C8.87402 1.27893 15.0437 1.31923 18.8622 5.13778C22.6824 8.95797 22.7211 15.1313 18.9262 18.9262C15.1312 22.7211 8.95793 22.6824 5.13774 18.8622C2.87389 16.5984 1.93904 13.5099 2.34047 10.5812C2.39672 10.1708 2.775 9.88377 3.18537 9.94002C3.59575 9.99627 3.88282 10.3745 3.82658 10.7849C3.4866 13.2652 4.27782 15.881 6.1984 17.8016C9.44288 21.0461 14.6664 21.0646 17.8655 17.8655C21.0646 14.6664 21.046 9.44292 17.8015 6.19844C14.5587 2.95561 9.33889 2.93539 6.13935 6.12957L6.88705 6.13333C7.30126 6.13541 7.63535 6.47288 7.63327 6.88709C7.63119 7.3013 7.29372 7.63539 6.87951 7.63331L4.33396 7.62052C3.92269 7.61845 3.58981 7.28556 3.58774 6.8743L3.57495 4.32874C3.57286 3.91454 3.90696 3.57707 4.32117 3.57498C4.73538 3.5729 5.07285 3.907 5.07493 4.32121L5.07868 5.06891Z" fill="#1C274C"></path> <path opacity="0.5" d="M12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V11.6893L15.0303 13.9697C15.3232 14.2626 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2626 15.3232 13.9697 15.0303L11.5429 12.6036C11.3554 12.416 11.25 12.1617 11.25 11.8964V8C11.25 7.58579 11.5858 7.25 12 7.25Z" fill="#1C274C"></path> </g></svg>
            </label>
        </div>      <div class="control">

            <label id="brand-img-drag" aria-label="Browse">
                <svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg" aria-labelledby="panIconTitle" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title id="panIconTitle">Pan</title> <path d="M20,14 L20,17 C20,19.209139 18.209139,21 16,21 L10.0216594,21 C8.75045497,21 7.55493392,20.3957659 6.80103128,19.3722467 L3.34541668,14.6808081 C2.81508416,13.9608139 2.94777982,12.950548 3.64605479,12.391928 C4.35756041,11.8227235 5.38335813,11.8798792 6.02722571,12.5246028 L8,14.5 L8,13 L8.00393081,13 L8,11 L8.0174523,6.5 C8.0174523,5.67157288 8.68902517,5 9.5174523,5 C10.3458794,5 11.0174523,5.67157288 11.0174523,6.5 L11.0174523,11 L11.0174523,4.5 C11.0174523,3.67157288 11.6890252,3 12.5174523,3 C13.3458794,3 14.0174523,3.67157288 14.0174523,4.5 L14.0174523,11 L14.0174523,5.5 C14.0174523,4.67157288 14.6890252,4 15.5174523,4 C16.3458794,4 17.0174523,4.67157288 17.0174523,5.5 L17.0174523,11 L17.0174523,7.5 C17.0174523,6.67157288 17.6890252,6 18.5174523,6 C19.3458794,6 20.0174523,6.67157288 20.0174523,7.5 L20.0058962,14 L20,14 Z"></path> </g></svg>
            </label>
        </div> <div class="control">






            <label id="brand-ruler-icon" class="closed" aria-label="Browse" style="padding-top: 5px;padding-right: 3px">

            </label>
        </div>
    </fieldset>  
    <!-- Nav items (vertical) -->
    

    <div class="nav-item" id="projects_nav">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M3 7h18v12H3z" stroke="currentColor" stroke-width="1.5"/>
      </svg>
      <span class="label">Projects</span>
    </div>

    <div class="nav-item">
      <span class="material-icons">grid_view</span>
      <span class="label">Templates</span>
    </div>

    <div class="nav-item" id="brand_nav">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M12 2l3 6 6 .9-4.5 3.9L19 20l-7-4-7 4 1.5-7.2L2 8.9 8 8 12 2z" stroke="currentColor" stroke-width="1.1"/>
      </svg>
      <span class="label">Brand</span>
    </div>

    <div class="nav-item" id="manage_nav">
      <span class="material-icons">manage_accounts</span>
      <span class="label">Manage</span>
    </div>

  

  </div>
</aside>


  <!-- Main content -->
  <main class="content" role="main">
    <div class="projects-column">
      <div class="section-title">
        <strong style="font-size:18px;">All projects</strong>
      </div>

      
      <div id="ajax-panel"></div>

    </div>

  </main>
</div>
<script>
  (function(){
    var content = document.querySelector('#ajax-panel');
    function clear(){ if(content){ content.innerHTML = ''; } }
    function loading(){ if(content){ content.innerHTML = '<div class="project-card"><div class="muted">Loading...</div></div>'; } }
    function renderProjects(){ if(content){ content.innerHTML = '';
      var html = ''+
        '<div class="project-card" role="region" aria-label="Projects">'+
          '<div style="display:flex;align-items:center;justify-content:space-between;">'+
            '<div><div class="muted">Projects</div><div style="font-size:14px;color:#2b2b3a;font-weight:600;margin-top:6px;">Browse</div></div>'+
          '</div>'+ 
          '<div class="divider" style="margin-top:12px"></div>'+ 
          '<div class="project-list" style="margin-top:12px;">'+
            '<div id="recents_button" class="project-item" role="button" tabindex="0">'+
              '<span class="material-icons icon-muted">history</span>'+ 
              '<div class="project-name">Recent projects</div>'+ 
            '</div>'+ 
            '<div id="templates_button" class="project-item" role="button" tabindex="0">'+
              '<span class="material-icons icon-muted">grid_view</span>'+ 
              '<div class="project-name">Templates</div>'+ 
            '</div>'+ 
          '</div>'+ 
        '</div>';
      content.innerHTML = html;
    } }
    function renderBrand(){ if(content){ content.innerHTML = '';
      var html = ''+
        '<div class="project-card" role="region" aria-label="Brand">'+
          '<div style="display:flex;align-items:center;justify-content:space-between;">'+
            '<div><div class="muted">Brand</div><div style="font-size:14px;color:#2b2b3a;font-weight:600;margin-top:6px;">Manage</div></div>'+
          '</div>'+ 
          '<div class="divider" style="margin-top:12px"></div>'+ 
          '<div class="project-list" style="margin-top:12px;">'+
            '<a class="project-item" href="'+ window.BASE_URL +'/i/account/build_brand" target="_blank">'+
              '<span class="material-icons icon-muted">branding_watermark</span>'+ 
              '<div class="project-name">Brand Identity</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/i/account/?mode=customfont&amp;campaign=campaigns" target="_blank">'+
              '<span class="material-icons icon-muted">text_fields</span>'+ 
              '<div class="project-name">Custom Fonts</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/i/account/?mode=colorpairs&amp;campaign=create" target="_blank">'+
              '<span class="material-icons icon-muted">palette</span>'+ 
              '<div class="project-name">Brand Colors</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="https://www.thebrand.ai/wowX/brandcreator/dashboard/auth-onboard2" target="_blank">'+
              '<span class="material-icons icon-muted">settings</span>'+ 
              '<div class="project-name">Manage Brand Details</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="https://www.thebrand.ai/wowX/brandcreator/dashboard/auth-signin" target="_blank">'+
              '<span class="material-icons icon-muted">login</span>'+ 
              '<div class="project-name">Brand Creator</div>'+ 
            '</a>'+ 
          '</div>'+ 
        '</div>';
      content.innerHTML = html;
    } }
    function renderManage(){ if(content){ content.innerHTML = '';
      var html = ''+
        '<div class="project-card" role="region" aria-label="Manage">'+
          '<div style="display:flex;align-items:center;justify-content:space-between;">'+
            '<div><div class="muted">Workspace</div><div style="font-size:14px;color:#2b2b3a;font-weight:600;margin-top:6px;">Shortcuts</div></div>'+
          '</div>'+ 
          '<div class="divider" style="margin-top:12px"></div>'+ 
          '<div class="project-list" style="margin-top:12px;">'+
            '<a class="project-item" href="'+ window.BASE_URL +'/i/account/designs" target="_blank">'+
              '<span class="material-icons icon-muted">folder_open</span>'+ 
              '<div class="project-name">Manage all designs</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/i/account/" target="_blank">'+
              '<span class="material-icons icon-muted">dashboard</span>'+ 
              '<div class="project-name">Dashboard</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=home" target="_blank">'+
              '<span class="material-icons icon-muted">home</span>'+ 
              '<div class="project-name">Teams Home</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=brandkit" target="_blank">'+
              '<span class="material-icons icon-muted">auto_awesome</span>'+ 
              '<div class="project-name">Brand Kit</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=templates" target="_blank">'+
              '<span class="material-icons icon-muted">dashboard_customize</span>'+ 
              '<div class="project-name">Templates</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=brand_folders" target="_blank">'+
              '<span class="material-icons icon-muted">folder</span>'+ 
              '<div class="project-name">Folders</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=share" target="_blank">'+
              '<span class="material-icons icon-muted">share</span>'+ 
              '<div class="project-name">Share Center</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=teams" target="_blank">'+
              '<span class="material-icons icon-muted">groups</span>'+ 
              '<div class="project-name">Teams</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=approvals" target="_blank">'+
              '<span class="material-icons icon-muted">task_alt</span>'+ 
              '<div class="project-name">Approvals</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=sharedteam" target="_blank">'+
              '<span class="material-icons icon-muted">collections</span>'+ 
              '<div class="project-name">Shared Library</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=governance" target="_blank">'+
              '<span class="material-icons icon-muted">policy</span>'+ 
              '<div class="project-name">Governance</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="'+ window.BASE_URL +'/i/settings/update-profile" target="_blank">'+
              '<span class="material-icons icon-muted">person</span>'+ 
              '<div class="project-name">Update Profile</div>'+ 
            '</a>'+ 
            '<a class="project-item" href="https://www.thebrand.ai/" target="_blank">'+
              '<span class="material-icons icon-muted">home</span>'+ 
              '<div class="project-name">Homepage</div>'+ 
            '</a>'+ 
          '</div>'+ 
        '</div>';
      content.innerHTML = html;
    } }
    var projectsNav = document.getElementById('projects_nav');
    var brandNav = document.getElementById('brand_nav');
    var manageNav = document.getElementById('manage_nav');
    var homeLabel = document.getElementById('home_label');
    if(projectsNav){ projectsNav.addEventListener('click', function(){ loading(); setTimeout(renderProjects, 150); }); }
    if(brandNav){ brandNav.addEventListener('click', function(){ loading(); setTimeout(renderBrand, 150); }); }
    if(manageNav){ manageNav.addEventListener('click', function(){ loading(); setTimeout(renderManage, 150); }); }
    if(homeLabel){ homeLabel.addEventListener('click', function(){ window.open('https://www.thebrand.ai/', '_blank'); }); }
    renderProjects();
  })();
</script>
</body>
</html>
@ Telegram