appscms-tools-theme 5.2.5 → 5.2.7

data/_includes/appscms/navbars/ai-image-tools-navbar.html

@@ -0,0 +1,454 @@
+{% assign lang = page.lang | default: "en" %}
+{% assign siteData = site.data.header[lang].data %}
+{% assign featureData = page.fileName %}
+{% assign folder = page.folderName%}
+{% assign Data= site.data[folder][lang][file] %}
+
+<style>
+    .navbar-toggler-icon {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+    }
+</style>
+
+<nav class="navbar navbar-expand-lg px-4 py-3 my-5"
+    style="box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius: 50px; color: #fff !important;">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="/">
+            <strong>
+                <img width="40px" src="{{site.logo | default: '/logo.png'}}" alt="">
+                {{site.name | default: "Nano Banana"}}
+            </strong></a>
+
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+
+        <div class="collapse navbar-collapse" style="justify-content: right;" id="navbarSupportedContent">
+            <ul class="navbar-nav mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link" href="/pricing">Pricing</a>
+                </li>
+                <li class="nav-item">
+                    <button class="login-modal-button open-modal-btn login-btn"
+                        style="width: 100px; padding: 8px 10px; display: block; border-radius: 50px;" type="button"
+                        data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
+
+
+                        <svg width="20px" class="w-3.5 h-3.5 text-[#09090b]" fill="none" stroke="currentColor"
+                            viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
+                                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+                        </svg>
+
+                        Login
+
+                    </button>
+                </li>
+                <div class="user-profile-header">
+                    <div class="profile-button" id="profileButton"></div>
+                </div>
+                <div class="user-modal" id="userModal">
+                    <div class="modal-item">
+                        <div class="profile-user-avatar"></div>
+                        <div class="user-info">
+                            <div class="logged-in-username"></div>
+                            <p class="logged-in-user-email"></p>
+                        </div>
+                    </div>
+
+
+
+                    {%- if page.layout == "ai-image-home" -%}
+                    <a href="#" class="modal-item">
+                        <div class="item-icon">
+                            <svg 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">
+                                    <circle cx="12" cy="12" r="10" stroke="#facc15e6" stroke-width="1.5"></circle>
+                                    <path d="M12 6V18" stroke="#facc15e6" stroke-width="1.5" stroke-linecap="round">
+                                    </path>
+                                    <path
+                                        d="M15 9.5C15 8.11929 13.6569 7 12 7C10.3431 7 9 8.11929 9 9.5C9 10.8807 10.3431 12 12 12C13.6569 12 15 13.1193 15 14.5C15 15.8807 13.6569 17 12 17C10.3431 17 9 15.8807 9 14.5"
+                                        stroke="#facc15e6" stroke-width="1.5" stroke-linecap="round"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <div class="item-text" id="showCredits">Credits 0</div>
+
+                    </a>
+                    {%- endif -%}
+
+
+
+                    <a href="/profile" class="modal-item">
+                        <div class="item-icon">
+                            <svg height="20" width="20" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1"
+                                xmlns="http://www.w3.org/2000/svg" fill="#000000">
+                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                                <g id="SVGRepo_iconCarrier">
+                                    <defs>
+                                        <style>
+                                            .cls-1 {
+                                                fill: none;
+                                                stroke: #020202;
+                                                stroke-miterlimit: 10;
+                                                stroke-width: 1.91px;
+                                            }
+                                        </style>
+                                    </defs>
+                                    <circle class="cls-1" cx="12" cy="7.25" r="5.73"></circle>
+                                    <path class="cls-1"
+                                        d="M1.5,23.48l.37-2.05A10.3,10.3,0,0,1,12,13h0a10.3,10.3,0,0,1,10.13,8.45l.37,2.05">
+                                    </path>
+                                </g>
+                            </svg>
+                        </div>
+                        <div class="item-text">Account</div>
+                        <div class="item-arrow">
+                            <svg viewBox="-4.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" fill="#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>arrow_right [#336]</title>
+                                    <desc>Created with Sketch.</desc>
+                                    <defs></defs>
+                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                        <g id="Dribbble-Light-Preview" transform="translate(-305.000000, -6679.000000)"
+                                            fill="#000000">
+                                            <g id="icons" transform="translate(56.000000, 160.000000)">
+                                                <path
+                                                    d="M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769"
+                                                    id="arrow_right-[#336]"></path>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+                    </a>
+                    <a href="/pricing" class="modal-item">
+                        <div class="item-icon">
+                            <svg version="1.1" id="Capa_1" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg"
+                                x="0px" y="0px" viewBox="0 0 398.923 398.923"
+                                enable-background="new 0 0 398.923 398.923">
+                                <g>
+                                    <path d="M398.425,131.075c-0.826-2.52-2.621-4.609-4.986-5.806l-8.923-4.516c-2.366-1.197-5.112-1.407-7.632-0.58
+                c-2.52,0.826-4.609,2.62-5.806,4.986l-11.255,22.239c-6.629-22.075-17.601-42.652-32.415-60.567
+                c-21.099-25.516-48.973-44.391-80.607-54.585c-17.4-5.608-35.377-8.451-53.43-8.451c-27.576,0-54.155,6.456-78.999,19.19
+                c-41.265,21.15-71.823,57.103-86.047,101.237c-1.694,5.256,1.194,10.891,6.451,12.585l9.518,3.067
+                c5.259,1.696,10.892-1.194,12.585-6.451c11.766-36.506,37.044-66.247,71.178-83.741c20.563-10.539,42.542-15.883,65.327-15.883
+                c14.927,0,29.805,2.355,44.217,7c47.243,15.225,82.96,53.828,95.083,101.102l-28.955-14.653
+                c-4.926-2.496-10.943-0.521-13.438,4.407l-4.516,8.923c-1.198,2.367-1.406,5.112-0.58,7.632c0.826,2.52,2.62,4.609,4.987,5.806
+                l62.565,31.661c1.447,0.733,2.988,1.08,4.507,1.08c3.65,0,7.169-2.006,8.93-5.486l31.662-62.564
+                C399.043,136.34,399.251,133.595,398.425,131.075z"></path>
+                                    <path d="M364.148,242.116l-9.518-3.067c-5.257-1.695-10.891,1.194-12.585,6.451c-11.766,36.506-37.043,66.247-71.177,83.741
+                c-20.563,10.539-42.543,15.882-65.329,15.882c-14.928,0-29.804-2.354-44.215-6.999c-47.243-15.225-82.959-53.828-95.083-101.102
+                l28.955,14.653c4.927,2.496,10.943,0.521,13.438-4.407l4.516-8.923c1.198-2.367,1.406-5.112,0.58-7.632
+                c-0.827-2.52-2.62-4.609-4.987-5.807l-62.565-31.66c-4.925-2.495-10.943-0.521-13.438,4.407L1.078,260.216
+                c-1.198,2.367-1.406,5.112-0.58,7.632c0.826,2.52,2.62,4.609,4.986,5.806l8.923,4.516c4.928,2.495,10.944,0.521,13.438-4.407
+                L39.1,251.524c6.629,22.076,17.601,42.652,32.415,60.567c21.099,25.516,48.972,44.391,80.606,54.585
+                c17.4,5.608,35.376,8.451,53.429,8.451c27.188,0,54.506-6.636,79-19.19c41.265-21.15,71.823-57.103,86.047-101.237
+                c0.814-2.524,0.591-5.268-0.619-7.628C368.77,244.712,366.672,242.93,364.148,242.116z"></path>
+                                    <path d="M200.753,238.729c-9.333,0-19.42-4.033-25.101-10.035l-4.468-4.721c-1.137-1.201-3.036-1.256-4.241-0.117l-16.706,15.81
+                c-0.577,0.548-0.914,1.302-0.937,2.097c-0.021,0.795,0.273,1.566,0.82,2.145l4.469,4.722c7.706,8.141,18.909,14.354,31.031,17.265
+                v16.568c0,1.656,1.343,3,3,3h23c1.657,0,3-1.344,3-3V266.48c21.662-4.13,34.999-18.093,34.999-36.887
+                c0.245-29.6-25.542-37.409-42.605-42.577c-20.501-6.209-23.598-9.316-23.598-16.775c0-7.931,13.087-10.047,20.82-10.047
+                c7.346,0,16.425,2.421,21.588,5.756l5.46,3.527c1.393,0.898,3.249,0.498,4.147-0.893l12.479-19.318
+                c0.9-1.393,0.5-3.249-0.892-4.148l-5.459-3.527c-7.256-4.688-16.952-8.128-26.941-9.602v-15.527c0-1.656-1.343-3-3-3h-23
+                c-1.657,0-3,1.344-3,3v17.115c-19.313,5.345-31.203,19.221-31.203,36.664c0,31.145,27.662,39.523,44.191,44.53
+                c19.329,5.854,22.064,8.39,22.011,14.702C220.621,236.78,208.132,238.729,200.753,238.729z"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <div class="item-text">Pricing Plans</div>
+                        <div class="item-arrow">
+                            <svg viewBox="-4.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" fill="#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>arrow_right [#336]</title>
+                                    <desc>Created with Sketch.</desc>
+                                    <defs></defs>
+                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                        <g id="Dribbble-Light-Preview" transform="translate(-305.000000, -6679.000000)"
+                                            fill="#000000">
+                                            <g id="icons" transform="translate(56.000000, 160.000000)">
+                                                <path
+                                                    d="M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769"
+                                                    id="arrow_right-[#336]"></path>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+                    </a>
+
+                    <div class="modal-item" id="logoutBtn">
+                        <div class="item-icon">
+                            <svg height="20" width="20" 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="M12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4" stroke="#1C274C"
+                                        stroke-width="1.5" stroke-linecap="round"></path>
+                                    <path d="M10 12H20M20 12L17 9M20 12L17 15" stroke="#1C274C" stroke-width="1.5"
+                                        stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <div class="item-text">Log out</div>
+                        <div class="item-arrow">
+                            <svg viewBox="-4.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" fill="#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>arrow_right [#336]</title>
+                                    <desc>Created with Sketch.</desc>
+                                    <defs></defs>
+                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                        <g id="Dribbble-Light-Preview" transform="translate(-305.000000, -6679.000000)"
+                                            fill="#000000">
+                                            <g id="icons" transform="translate(56.000000, 160.000000)">
+                                                <path
+                                                    d="M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769"
+                                                    id="arrow_right-[#336]"></path>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div class="side-modal-overlay" id="modalOverlay"></div>
+                <div class="side-modal" id="sideModal">
+                    <div class="modal-header">
+                        <div>
+                            {%- if siteData.navbarBrandLogoSvg -%}
+                            <a href="/" aria-label="home-page">
+                                {{siteData.navbarBrandLogoSvg}}
+                            </a>
+                            {%- elsif siteData.navbarBrandText -%}
+                            <span> {{siteData.navbarBrandText}}</span>
+                            {%- else -%}
+                            <span></span>
+                            {%- endif -%}
+                        </div>
+                        <button class="close-modal-btn">&times;</button>
+                    </div>
+
+                    <div class="side-modal-content">
+                        <div class="modal-body d-flex justify-content-center">
+                            <div class="user-avatar" id="userAvatar" style="display: none">
+                                GI
+                            </div>
+                            <div class="auth-container" id="authContainer">
+                                <!-- Login Form -->
+                                <div id="loginForm">
+                                    <h2 class="log-info">Log in</h2>
+                                    <p class="log-subinfo">
+                                        Don't have an account?
+                                        <a href="#" id="showSignup">Create account</a>
+                                    </p>
+
+                                    <div class="auth-forms">
+                                        <button class="social-btn google-btn" id="googleLogin">
+                                            <svg viewBox="0 0 32 32" 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="M30.0014 16.3109C30.0014 15.1598 29.9061 14.3198 29.6998 13.4487H16.2871V18.6442H24.1601C24.0014 19.9354 23.1442 21.8798 21.2394 23.1864L21.2127 23.3604L25.4536 26.58L25.7474 26.6087C28.4458 24.1665 30.0014 20.5731 30.0014 16.3109Z"
+                                                        fill="#4285F4"></path>
+                                                    <path
+                                                        d="M16.2863 29.9998C20.1434 29.9998 23.3814 28.7553 25.7466 26.6086L21.2386 23.1863C20.0323 24.0108 18.4132 24.5863 16.2863 24.5863C12.5086 24.5863 9.30225 22.1441 8.15929 18.7686L7.99176 18.7825L3.58208 22.127L3.52441 22.2841C5.87359 26.8574 10.699 29.9998 16.2863 29.9998Z"
+                                                        fill="#34A853"></path>
+                                                    <path
+                                                        d="M8.15964 18.769C7.85806 17.8979 7.68352 16.9645 7.68352 16.0001C7.68352 15.0356 7.85806 14.1023 8.14377 13.2312L8.13578 13.0456L3.67083 9.64746L3.52475 9.71556C2.55654 11.6134 2.00098 13.7445 2.00098 16.0001C2.00098 18.2556 2.55654 20.3867 3.52475 22.2845L8.15964 18.769Z"
+                                                        fill="#FBBC05"></path>
+                                                    <path
+                                                        d="M16.2864 7.4133C18.9689 7.4133 20.7784 8.54885 21.8102 9.4978L25.8419 5.64C23.3658 3.38445 20.1435 2 16.2864 2C10.699 2 5.8736 5.1422 3.52441 9.71549L8.14345 13.2311C9.30229 9.85555 12.5086 7.4133 16.2864 7.4133Z"
+                                                        fill="#EB4335"></path>
+                                                </g>
+                                            </svg>
+                                            Continue with Google
+                                        </button>
+
+                                        <button class="social-btn facebook-btn d-none" id="facebookLogin">
+                                            <span class="icon facebook-icon"></span>
+                                            Continue with Facebook
+                                        </button>
+
+                                        <button class="social-btn twitter-btn d-none" id="twitterLogin">
+                                            <svg viewBox="0 0 24 24" width="24" height="24" style="margin-right: 10px">
+                                                <path fill="white"
+                                                    d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                                            </svg>
+                                            Continue with X
+                                        </button>
+
+                                        <div class="or-divider">Or</div>
+
+                                        <form id="emailLoginForm" novalidate>
+                                            <div class="input-group">
+                                                <span class="icon email-icon"></span>
+                                                <input type="email" id="loginEmail" placeholder="Email" required />
+                                                <div class="field-error" id="loginEmailError"></div>
+                                            </div>
+                                            <div class="input-group">
+                                                <span class="icon password-icon"></span>
+                                                <input type="password" id="loginPassword" placeholder="Password"
+                                                    required />
+                                                <span class="password-toggle icon eye-icon"
+                                                    id="toggleLoginPassword"></span>
+                                                <div class="field-error" id="loginPasswordError"></div>
+                                            </div>
+                                            <button type="submit" class="login-btn" id="loginSubmitBtn">
+                                                <span class="btn-text">Log in</span>
+                                            </button>
+                                        </form>
+
+                                        <div class="forgot-password">
+                                            <a href="#" id="forgotPassword">Forgot your password?</a>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Forgot Password Form -->
+                                <div id="forgotPasswordForm" style="display: none">
+                                    <div class="back-btn" id="backToLogin">
+                                        <span class="back-icon">←</span>
+                                        Back to login
+                                    </div>
+
+                                    <h2>Reset password</h2>
+                                    <p>
+                                        Enter your email address and we'll send you a link to reset your
+                                        password
+                                    </p>
+
+                                    <form id="resetPasswordForm" novalidate>
+                                        <div class="input-group">
+                                            <span class="icon email-icon"></span>
+                                            <input type="email" id="resetEmail" placeholder="Email" required />
+                                            <div class="field-error" id="resetEmailError"></div>
+                                        </div>
+                                        <button type="submit" class="login-btn" id="resetSubmitBtn">
+                                            <span class="btn-text">Send reset link</span>
+                                        </button>
+                                    </form>
+
+                                    <div class="reset-success" id="resetSuccess" style="display: none">
+                                        <div class="success-icon">✓</div>
+                                        <h3>Reset link sent</h3>
+                                        <p>Check your email for instructions to reset your password</p>
+                                    </div>
+                                </div>
+
+                                <!-- Sign Up Form -->
+                                <div id="signupForm" style="display: none">
+                                    <h1>Create your account</h1>
+                                    <p>
+                                        Already have an account? <a href="#" id="showLogin">Log in</a>
+                                    </p>
+
+                                    <div class="auth-forms">
+                                        <button class="social-btn google-btn" id="googleSignup">
+                                            <svg viewBox="0 0 32 32" 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="M30.0014 16.3109C30.0014 15.1598 29.9061 14.3198 29.6998 13.4487H16.2871V18.6442H24.1601C24.0014 19.9354 23.1442 21.8798 21.2394 23.1864L21.2127 23.3604L25.4536 26.58L25.7474 26.6087C28.4458 24.1665 30.0014 20.5731 30.0014 16.3109Z"
+                                                        fill="#4285F4"></path>
+                                                    <path
+                                                        d="M16.2863 29.9998C20.1434 29.9998 23.3814 28.7553 25.7466 26.6086L21.2386 23.1863C20.0323 24.0108 18.4132 24.5863 16.2863 24.5863C12.5086 24.5863 9.30225 22.1441 8.15929 18.7686L7.99176 18.7825L3.58208 22.127L3.52441 22.2841C5.87359 26.8574 10.699 29.9998 16.2863 29.9998Z"
+                                                        fill="#34A853"></path>
+                                                    <path
+                                                        d="M8.15964 18.769C7.85806 17.8979 7.68352 16.9645 7.68352 16.0001C7.68352 15.0356 7.85806 14.1023 8.14377 13.2312L8.13578 13.0456L3.67083 9.64746L3.52475 9.71556C2.55654 11.6134 2.00098 13.7445 2.00098 16.0001C2.00098 18.2556 2.55654 20.3867 3.52475 22.2845L8.15964 18.769Z"
+                                                        fill="#FBBC05"></path>
+                                                    <path
+                                                        d="M16.2864 7.4133C18.9689 7.4133 20.7784 8.54885 21.8102 9.4978L25.8419 5.64C23.3658 3.38445 20.1435 2 16.2864 2C10.699 2 5.8736 5.1422 3.52441 9.71549L8.14345 13.2311C9.30229 9.85555 12.5086 7.4133 16.2864 7.4133Z"
+                                                        fill="#EB4335"></path>
+                                                </g>
+                                            </svg>
+                                            Continue with Google
+                                        </button>
+
+                                        <div class="or-divider">Or</div>
+
+                                        <form id="emailSignupForm" novalidate>
+                                            <div class="input-group">
+                                                <span class="icon email-icon"></span>
+                                                <input type="email" id="signupEmail" placeholder="Email" required />
+                                                <div class="field-error" id="signupEmailError"></div>
+                                            </div>
+                                            <div class="input-group">
+                                                <span class="icon password-icon"></span>
+                                                <input type="password" id="signupPassword" placeholder="Password"
+                                                    required />
+                                                <span class="password-toggle icon fas fa-eye"
+                                                    id="toggleSignupPassword"></span>
+                                                <div class="field-error" id="signupPasswordError"></div>
+
+                                                <!-- Password Strength Indicator -->
+                                                <div class="password-strength" id="passwordStrength"
+                                                    style="display: none">
+                                                    <div style="margin-bottom: 4px; font-size: 12px">
+                                                        <span>Password strength: </span>
+                                                        <span id="strengthLevel"></span>
+                                                    </div>
+                                                    <div class="strength-bar" style="
+                          height: 4px;
+                          background: #e0e0e0;
+                          border-radius: 2px;
+                          overflow: hidden;
+                        ">
+                                                        <div class="strength-fill" id="strengthFill" style="
+                            height: 100%;
+                            width: 0%;
+                            transition: width 0.3s ease, background 0.3s ease;
+                          "></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <button type="submit" class="login-btn" id="signupSubmitBtn">
+                                                <span class="btn-text">Create account</span>
+                                            </button>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="user-avatar" id="userAvatar" style="display: none"></div>
+                        </div>
+                    </div>
+                </div>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const toggler = document.querySelector(".navbar-toggler");
+        const menu = document.getElementById("navbarSupportedContent");
+
+        toggler.addEventListener("click", function () {
+            menu.classList.toggle("show");
+        });
+    });
+</script>

data/_includes/appscms/navbars/devtool-navbar.html

@@ -0,0 +1,50 @@
+<!-- nav bar code  -->
+
+{% assign lang = page.lang | default: "en" %} {% assign siteData = site.data.header[lang].data
+  %} {% assign featureData = page.fileName %} {% assign folder = page.folderName
+  %} {% assign Data= site.data[folder][lang][file] %}
+  <nav class="appscms-navbar">
+    <div class="row w-100 h-100">
+      <div class="col-11 mx-auto">
+      <div class="appscms-navbar-nav">
+        {%- if siteData.navbarBrandLogoSvg -%}
+        <a href="/"> {{siteData.navbarBrandLogoSvg}} </a>
+        {%- elsif siteData.navbarBrandText -%}
+        <span> {{siteData.navbarBrandText}}
+        {%- else -%}
+        {%- endif -%}
+        {%- if siteData.navItems -%}
+        <div class="appscms-navbar-nav-links">
+        {%- for item in siteData.navItems -%}
+        <a class="appscms-nav-link" style="color: rgb(244, 244, 244);" href="{{item.url}}">{{item.name}}</a>
+        {%- endfor -%}
+        </div>
+        {%- endif -%}
+        <div id="hamburger" data-open="false" class="hamburger">
+          <svg
+          style="font-size:25px"
+            stroke="currentColor"
+            fill="currentColor"
+            stroke-width="0"
+            viewBox="0 0 512 512"
+            aria-hidden="true"
+            focusable="false"
+            height="50px"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill="none"
+              stroke-linecap="round"
+              stroke-miterlimit="10"
+              stroke-width="48"
+              d="M88 152h336M88 256h336M88 360h336"
+            ></path>
+          </svg>
+        </div>
+      </div>
+      </div>
+    </div>
+  </nav>
+
+

data/_includes/appscms/navbars/devtool-toolbar.html

@@ -0,0 +1,100 @@
+{%- if siteData.megaMenu -%}
+<div class="appscms-toolbar">
+  <div class="row">
+    <div class="col-11 mx-auto">
+      <ul class="appscms-toolbar-list">
+        <div id="close-nav-ham" data-open="1" class="close-nav-ham">
+          <svg
+            height="50px"
+            width="1em"
+            style="font-size: 25px"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            stroke="#ffffff"
+          >
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g
+              id="SVGRepo_tracerCarrier"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></g>
+            <g id="SVGRepo_iconCarrier">
+              <g clip-path="url(#clip0_429_11083)">
+                <path
+                  d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006"
+                  stroke="#ffffff"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
+              </g>
+              <defs>
+                <clipPath id="clip0_429_11083">
+                  <rect width="24" height="24" fill="white"></rect>
+                </clipPath>
+              </defs>
+            </g>
+          </svg>
+        </div>
+        {%- for item in siteData.megaMenu.dropdown -%}
+        <li class="appscms-toolbar-list-item">
+          <span
+            class="appscms-toolbar-list-item-span d-flex justify-content-between" style="color: rgb(240, 240, 240);"
+          >
+            {{item.categoryName}}
+            <svg
+              class="arrow-svg"
+              fill="#fff"
+              width="12px"
+              hegiht="12px"
+              version="1.1"
+              id="Capa_1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              viewBox="0 0 30.727 30.727"
+              xml:space="preserve"
+            >
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g>
+              <g id="SVGRepo_iconCarrier">
+                <g>
+                  <path
+                    d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0 l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"
+                  ></path>
+                </g>
+              </g>
+            </svg>
+          </span>
+
+          <ul class="list-item-dropdown">
+            <h4 class="list-item-dropdown-heading">
+              {{siteData.megaMenu.nav-link-name}}
+            </h4>
+            <div class="row">
+              {%- assign count = 0 -%} {% for i in item.links %} {% assign count
+              = count | plus:1 %} {%- if count == 1 -%}
+              <div class="col-md-6 col-lg-4 col-xl-3">
+                {%- endif -%} {% if count == 6 %}
+                <li>
+                  <a class="toolbar-link" style="color: rgb(242, 242, 242);" href="{{i.url}}">{{i.name}}</a>
+                </li>
+              </div>
+              {% assign count = 0 %} {%- else -%}
+              <li>
+                <a class="toolbar-link" style="color: rgb(242, 242, 242);" href="{{i.url}}">{{i.name}}</a>
+              </li>
+              {% endif %} {% endfor %}
+            </div>
+          </ul>
+        </li>
+        {%- endfor -%}
+      </ul>
+    </div>
+  </div>
+</div>
+{%- endif -%}