Ameerah Enteprises - Your Number one supplier of quality Abayas, Men's Sleeves, Cosmetics, Beans, Maize & Rice/title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> <style> /* ===================== GLOBAL ===================== */ *{ margin:0; padding:0; box-sizing:border-box; } :root{ --primary:#ff2d7a; --bg:#f5f6fa; --shadow:0 2px 10px rgba(0,0,0,.07); } body{ font-family:Poppins,sans-serif; background:var(--bg); font-size:13px; color:#333; overflow:hidden; } /* ===================== APP ===================== */ .app{ height:100vh; display:flex; flex-direction:column; } /* ===================== HEADER ===================== */ .header{ height:55px; background:white; display:flex; align-items:center; justify-content:space-between; padding:8px 15px; box-shadow:var(--shadow); z-index:100; } .brand{ display:flex; align-items:center; gap:10px; } .logo{ height:35px; width:35px; border-radius:50%; object-fit:cover; } .brand h2{ font-size:15px; } .brand p{ font-size:10px; color:#888; } .header-icons{ display:flex; gap:10px; } .header-icons{ display:flex; align-items:center; gap:7px; } .header-action{ display:flex; align-items:center; gap:5px; height:32px; padding:0 9px; border:none; border-radius:18px; background:#f8f8f8; color:#444; text-decoration:none; font-family:Poppins,sans-serif; font-size:10px; cursor:pointer; white-space:nowrap; } .header-action i{ font-size:12px; } .header-action.apk{ background:#ff2d7a; color:white; } .header-action.website{ color:#ff2d7a; } .header-action:hover{ opacity:.85; } .header-icons button{ border:none; background:#f8f8f8; width:32px; height:32px; border-radius:50%; } @media(max-width:600px){ .header-action span{ display:none; } .header-action{ width:32px; padding:0; justify-content:center; } } /* ===================== SEARCH ===================== */ .search-wrapper{ background:white; padding:8px 15px; } .search-box{ height:38px; background:#f3f3f3; border-radius:25px; display:flex; align-items:center; padding:0 15px; } .search-box i{ font-size:12px; color:#777; margin-right:8px; } .search-box input{ border:none; background:none; outline:none; width:100%; font-size:12px; } /* ===================== CONTENT ===================== */ .content{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px; padding-bottom:120px; } /* ===================== PRODUCT CARDS ===================== */ .products{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .product{ background:white; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); } .product img{ width:100%; height:120px; object-fit:cover; } .product-body{ padding:8px; } .product-name{ font-size:12px; height:35px; overflow:hidden; } .product-price{ color:var(--primary); font-size:13px; font-weight:600; margin-top:5px; } .add-btn{ width:100%; height:30px; border:none; border-radius:8px; background:var(--primary); color:white; font-size:11px; margin-top:8px; } /* ===================== BOTTOM NAV ===================== */ .bottom-nav{ position:fixed; bottom:0; left:0; right:0; height:60px; background:white; display:flex; justify-content:space-around; align-items:center; box-shadow:0 -3px 12px rgba(0,0,0,.1); z-index:500; } .nav-item{ text-decoration:none; color:#888; font-size:10px; display:flex; flex-direction:column; align-items:center; } .nav-item i{ font-size:18px; margin-bottom:4px; } .nav-item.active{ color:var(--primary); } /* ===================== LOADER ===================== */ #loader{ position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:#ffffff; display:flex; justify-content:center; align-items:center; z-index:99999; opacity:1; transition:opacity .4s ease; } .loader-box{ text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; } /* ===================== AMEERAH TEXT ANIMATION ===================== */ .animated-logo{ display:flex; justify-content:center; align-items:center; gap:4px; } .animated-logo span{ font-size:26px; font-weight:700; letter-spacing:1px; color:#ff2d7a; opacity:0; transform:translateY(25px) scale(.8); animation:letterAppear .45s forwards ease; } .animated-logo.second{ margin-top:5px; } /* FIRST WORD */ .animated-logo span:nth-child(1){ animation-delay:.1s; } .animated-logo span:nth-child(2){ animation-delay:.2s; } .animated-logo span:nth-child(3){ animation-delay:.3s; } .animated-logo span:nth-child(4){ animation-delay:.4s; } .animated-logo span:nth-child(5){ animation-delay:.5s; } .animated-logo span:nth-child(6){ animation-delay:.6s; } .animated-logo span:nth-child(7){ animation-delay:.7s; } /* SECOND WORD */ .second span:nth-child(1){ animation-delay:.9s; } .second span:nth-child(2){ animation-delay:1s; } .second span:nth-child(3){ animation-delay:1.1s; } .second span:nth-child(4){ animation-delay:1.2s; } .second span:nth-child(5){ animation-delay:1.3s; } .second span:nth-child(6){ animation-delay:1.4s; } .second span:nth-child(7){ animation-delay:1.5s; } .second span:nth-child(8){ animation-delay:1.6s; } @keyframes letterAppear{ 0%{ opacity:0; transform:translateY(25px) scale(.7); } 100%{ opacity:1; transform:translateY(0) scale(1); } } /* ===================== LOADING TEXT ===================== */ .loading-text{ margin-top:25px; font-size:13px; color:#777; font-weight:400; } .dots::after{ content:""; animation:dotsAnimation 1.5s infinite; } @keyframes dotsAnimation{ 0%{ content:""; } 25%{ content:"."; } 50%{ content:".."; } 75%{ content:"..."; } 100%{ content:""; } } /* ===================== MOBILE OPTIMIZATION ===================== */ @media(max-width:600px){ .animated-logo span{ font-size:22px; } .loading-text{ font-size:12px; } } /* ===================== DESKTOP OPTIMIZATION ===================== */ @media(min-width:900px){ .animated-logo span{ font-size:32px; } .loading-text{ font-size:14px; } } /* ===================== TOAST ===================== */ .toast{ position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:#222; color:white; padding:10px 18px; border-radius:20px; font-size:12px; display:none; z-index:9999; } /* ===================== DESKTOP ===================== */ @media(min-width:900px){ .content{ padding:20px 40px 90px; } .products{ grid-template-columns:repeat(5,1fr); gap:18px; } .product img{ height:160px; } } .profile-menu{ position:relative; cursor:pointer; } .profile-dropdown{ position:absolute; bottom:70px; right:0; width:170px; background:#fff; border-radius:12px; box-shadow:0 5px 20px rgba(0,0,0,.15); display:none; overflow:hidden; z-index:9999; } .profile-dropdown a{ display:flex; align-items:center; gap:10px; padding:12px 15px; text-decoration:none; color:#333; font-size:13px; transition:.2s; } .profile-dropdown a:hover{ background:#f5f5f5; color:#ff2d7a; } /* ========================== CART COUNT ANIMATION ========================== */ #cart-count{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 5px; margin-left:2px; border-radius:20px; background:#ff2d7a; color:white; font-size:9px; font-weight:600; transition:.2s; } #cart-count.bump{ animation:cartCountBump .35s ease; } @keyframes cartCountBump{ 0%{ transform:scale(1); } 50%{ transform:scale(1.45); } 100%{ transform:scale(1); } } /* ========================================================= CART PURCHASE GUIDE POSITIONED DIRECTLY ABOVE MY CART ========================================================= */ .cart-guide { position: fixed; /* My Cart is the second item in the bottom navigation. 20% places the center of the guide around the Cart item. */ left: 30%; bottom: 72px; transform: translateX(-50%); background: #ff2d7a; color: #fff; padding: 10px 14px; border-radius: 12px; font-size: 11px; font-weight: 500; line-height: 1.4; width: 190px; max-width: calc(100vw - 30px); text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,.18); z-index: 9998; display: none; animation: cartGuideAppear .35s ease; cursor: pointer; } /* ========================================================= ARROW POINTS DIRECTLY DOWN TO CART ========================================================= */ .cart-guide::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 14px; height: 14px; background: #ff2d7a; transform: translateX(-50%) rotate(45deg); } /* ========================================================= ARROW ANIMATION ========================================================= */ .cart-guide-arrow { display: block; font-size: 18px; margin-top: 4px; animation: cartArrowBounce .8s infinite; } /* ========================================================= APPEAR ========================================================= */ @keyframes cartGuideAppear { 0% { opacity: 0; transform: translateX(-50%) translateY(15px) scale(.9); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } /* ========================================================= ARROW BOUNCE ========================================================= */ @keyframes cartArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px) { .cart-guide { left: 30%; bottom: 70px; width: 170px; font-size: 10px; padding: 9px 12px; } } </style> </head> <body>  <div id="loader"> <div class="loader-box"> <div class="animated-logo"> <span>A</span> <span>M</span> <span>E</span> <span>E</span> <span>R</span> <span>A</span> <span>H</span> </div> <div class="animated-logo second"> <span>E</span> <span>N</span> <span>T</span> <span>E</span> <span>P</span> <span>R</span> <span>I</span> <span>S</span> <span>E</span> <span>S</span> </div> <div class="loading-text"> Loading<span class="dots"></span> </div> </div> </div> <div class="app"> <header class="header"> <div class="brand"> <img src="images/ameerah[1].jpg" class="logo"> <div> <h2>Ameerah Shopping</h2> <p>Everything you need</p> </div> </div> <div class="header-icons">  <a href="index.php" class="header-action website" title="You are using the website"> <i class="fa fa-globe"></i> <span>Using Website</span> </a>  <a href="downloads/ameerah-shopping.apk" class="header-action apk" download="Ameerah-Shopping.apk" title="Download Ameerah Shopping App"> <i class="fa fa-download"></i> <span>Download APK</span> </a>  <button title="Wishlist"> <i class="fa-regular fa-heart"></i> </button>  <button title="Notifications"> <i class="fa-regular fa-bell"></i> </button>  <a href="pages/logout.php" class="header-action" title="Logout"> <i class="fa fa-sign-out-alt"></i> </a> </div> </header> <div class="search-wrapper"> <div class="search-box"> <i class="fa fa-search"></i> <input id="search" placeholder="Search products..."> </div> </div> <main class="content" id="content"> <div style=" padding:30px; text-align:center; background:#fff; border-radius:15px; font-family:Poppins,Arial; "> <i class="fa fa-lock" style=" font-size:35px; color:#ff2d7a; margin-bottom:10px; "> </i> <h3>Please Login First</h3> <p style=" color:#777; font-size:12px; "> You need to login before viewing your cart. </p> </div>