appscms-tools-theme 5.2.3 → 5.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 71c8a266a0cb5bd4c81b600a2e2b58e74fd93f35d6e6a232690e6ecb20b169af
-  data.tar.gz: a39fa1a4a45406117a822d2a92a09f02bdfae55385af7919fd0dc38cfb06693e
+  metadata.gz: 2c72045a315e29500c743645c3c663244a4634fdf34e9c1b99d41e9100c18385
+  data.tar.gz: 419f2df4838deb2f76dd9c9ab63cb764bd0d36af937cef06b8744fad204ed6ef
 SHA512:
-  metadata.gz: '0992af8b2e1cecdf758eab5cdf6d10add51f5239b5b77622eb221a1f580a962719ee186039b75162580ca25a6a6e3e7e776c00a9f06ad831920133356ada137c'
-  data.tar.gz: 27a948055440214671e4e6753531a6f7b624194999c33fa509f6f0c682fa815e4c1a673247beb02c0d9cbcbcd1b1f6ac14b914465dd2c5f08c7f6550a855b3fb
+  metadata.gz: 81e298f6a91ed13c65364e6562e4bafd0f8a022d2ac357075071a65352afb9ff402ad790a0013e40a60f1b64007baa1e84cb28c1a4d55a733af3719bd1f29a7e
+  data.tar.gz: 9278501b82f31a5a3f010167624d244e6b14dd4188ea35a3fb56092b11e57ce900e82a31bb9c702d717181884c1beb9fee13bfaeb9c469abad9eee1bbdd902a7

data/_includes/appscms/head/head.html

@@ -216,7 +216,7 @@
 
 
 
-  {%- if page.layout == 'ai-image-home' or page.layout == "ai-image-generator" or page.layout == "ai-image-pricing"   -%}
+  {%- if page.layout == 'ai-image-home' or page.layout == "ai-image-generator" or page.layout == "ai-image-pricing" or page.layout == "ai-image-profile"   -%}
   <link rel="stylesheet" href="/assets/css/ai-image-home.css" />
   {%- endif -%} 
 
@@ -233,7 +233,7 @@
   {%- endif -%} 
   
   {%- if page.layout != 'contenttool-home' and page.layout != 'content-tool-ai' and page.layout != "ai-image-home" and page.layout != "ai-image-generator" 
-  and page.layout != "ai-image-pricing"  -%}
+  and page.layout != "ai-image-pricing" and page.layout != "ai-image-profile"  -%}
   <link rel="stylesheet" href="/assets/css/appscms-theme.css" />
   {%- endif -%}
   

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

@@ -60,6 +60,8 @@
                     </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">
@@ -75,9 +77,13 @@
                                 </g>
                             </svg>
                         </div>
-                        <div class="item-text" id="showCredits">Credits</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"
@@ -224,6 +230,8 @@
                         </div>
                     </div>
                 </div>
+
+
                 <div class="side-modal-overlay" id="modalOverlay"></div>
                 <div class="side-modal" id="sideModal">
                     <div class="modal-header">
@@ -436,11 +444,11 @@
 
 <script>
     document.addEventListener("DOMContentLoaded", function () {
-    const toggler = document.querySelector(".navbar-toggler");
-    const menu = document.getElementById("navbarSupportedContent");
+        const toggler = document.querySelector(".navbar-toggler");
+        const menu = document.getElementById("navbarSupportedContent");
 
-    toggler.addEventListener("click", function () {
-        menu.classList.toggle("show");
+        toggler.addEventListener("click", function () {
+            menu.classList.toggle("show");
+        });
     });
-});
 </script>

data/_includes/appscms/scripts/script.html

@@ -162,10 +162,6 @@ if page.layout == "appscms-feature" -%}
 <script src="/assets/js/userUsageCount.js"></script>
 {%- endif -%}
 
-{%- if page.layout == "ai-image-home" or page.layout == "ai-image-generator" or page.layout == "ai-image-pricing" -%}
-  <script defer src="/assets/js/get-credits.js"></script>
-{%- endif -%}
-
 
 {%- if page.layout == "ai-image-generator" -%}
   <script src="/js/ai-image.generator.js"></script>

data/_layouts/ai-image-generator.html

@@ -55,9 +55,9 @@
                     </select>
                 </div>
 
-                <div class="settings d-none">
+                <div class="settings">
                     <label class="setting-label">Additional Prompt</label>
-                    <textarea name="" id="additionalPrompt"></textarea>
+                    <textarea class="select-box" name="" id="additionalPrompt"></textarea>
                 </div>
 
                 <div class="settings">

data/_layouts/ai-image-pricing.html

@@ -178,7 +178,257 @@
 
     <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
 
+
     <script>
+        // Loading Overlay Functions
+        function createLoadingOverlays() {
+            const overlay = document.createElement("div");
+            overlay.id = "pricingLoadingOverlay";
+            overlay.innerHTML = `
+                <div class="pricing-loading-overlay">
+                    <div class="pricing-loading-content">
+                        <div class="pricing-loading-spinner"></div>
+                        <div class="pricing-loading-text">Loading pricing plans...</div>
+                    </div>
+                </div>
+            `;
+
+            // Add CSS if not already present
+            if (!document.querySelector("#pricingLoadingStyles")) {
+                const style = document.createElement("style");
+                style.id = "pricingLoadingStyles";
+                style.textContent = `
+                    .pricing-loading-overlay {
+                        position: fixed;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        background: rgba(255, 255, 255, 0.95);
+                        backdrop-filter: blur(4px);
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        z-index: 10000;
+                        opacity: 1;
+                        transition: opacity 0.3s ease;
+                    }
+                    
+                    .pricing-loading-content {
+                        text-align: center;
+                        padding: 40px;
+                        background: white;
+                        border-radius: 12px;
+                        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+                    }
+                    
+                    .pricing-loading-spinner {
+                        width: 40px;
+                        height: 40px;
+                        border: 4px solid #f3f3f3;
+                        border-top: 4px solid #f59e0b;
+                        border-radius: 50%;
+                        animation: pricingLoadingSpin 1s linear infinite;
+                        margin: 0 auto 16px;
+                    }
+                    
+                    .pricing-loading-text {
+                        color: #333;
+                        font-size: 16px;
+                        font-weight: 500;
+                    }
+                    
+                    @keyframes pricingLoadingSpin {
+                        0% { transform: rotate(0deg); }
+                        100% { transform: rotate(360deg); }
+                    }
+                    
+                    .pricing-loading-overlay.fade-out {
+                        opacity: 0;
+                        pointer-events: none;
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+
+            return overlay;
+        }
+
+        // Success Modal Function
+        function showSubscriptionSuccess() {
+            // Create success modal
+            const modal = document.createElement('div');
+            modal.id = 'subscriptionSuccessModal';
+            modal.innerHTML = `
+                <div class="success-modal-overlay">
+                    <div class="success-modal-content">
+                        <div class="success-icon-wrapper">
+                            <svg class="success-checkmark" viewBox="0 0 52 52">
+                                <circle class="success-checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
+                                <path class="success-checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
+                            </svg>
+                        </div>
+                        <h2 class="success-title">Subscription Activated! 🎉</h2>
+                        <p class="success-message">Your subscription has been successfully activated. You now have full access to all premium features!</p>
+                        <div class="success-redirect-info">
+                            <span class="redirect-text">Redirecting to dashboard in <span id="countdown">3</span>s...</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+
+            // Add CSS for success modal
+            const style = document.createElement('style');
+            style.textContent = `
+                .success-modal-overlay {
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(0, 0, 0, 0.6);
+                    backdrop-filter: blur(8px);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    z-index: 10001;
+                    animation: fadeIn 0.3s ease;
+                }
+
+                .success-modal-content {
+                    background: white;
+                    border-radius: 20px;
+                    padding: 50px 40px;
+                    max-width: 450px;
+                    text-align: center;
+                    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+                    animation: slideUp 0.4s ease;
+                }
+
+                .success-icon-wrapper {
+                    margin: 0 auto 30px;
+                    width: 80px;
+                    height: 80px;
+                }
+
+                .success-checkmark {
+                    width: 80px;
+                    height: 80px;
+                    border-radius: 50%;
+                    display: block;
+                    stroke-width: 3;
+                    stroke: #10b981;
+                    stroke-miterlimit: 10;
+                    box-shadow: inset 0px 0px 0px #10b981;
+                    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
+                }
+
+                .success-checkmark-circle {
+                    stroke-dasharray: 166;
+                    stroke-dashoffset: 166;
+                    stroke-width: 3;
+                    stroke-miterlimit: 10;
+                    stroke: #10b981;
+                    fill: none;
+                    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+                }
+
+                .success-checkmark-check {
+                    transform-origin: 50% 50%;
+                    stroke-dasharray: 48;
+                    stroke-dashoffset: 48;
+                    stroke: #10b981;
+                    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+                }
+
+                .success-title {
+                    font-size: 28px;
+                    font-weight: 700;
+                    color: #1f2937;
+                    margin-bottom: 15px;
+                }
+
+                .success-message {
+                    font-size: 16px;
+                    color: #6b7280;
+                    line-height: 1.6;
+                    margin-bottom: 25px;
+                }
+
+                .success-redirect-info {
+                    background: #f0fdf4;
+                    border: 1px solid #86efac;
+                    border-radius: 10px;
+                    padding: 15px;
+                }
+
+                .redirect-text {
+                    color: #166534;
+                    font-size: 14px;
+                    font-weight: 500;
+                }
+
+                #countdown {
+                    font-weight: 700;
+                    color: #10b981;
+                }
+
+                @keyframes fadeIn {
+                    from { opacity: 0; }
+                    to { opacity: 1; }
+                }
+
+                @keyframes slideUp {
+                    from {
+                        transform: translateY(30px);
+                        opacity: 0;
+                    }
+                    to {
+                        transform: translateY(0);
+                        opacity: 1;
+                    }
+                }
+
+                @keyframes stroke {
+                    100% {
+                        stroke-dashoffset: 0;
+                    }
+                }
+
+                @keyframes scale {
+                    0%, 100% {
+                        transform: none;
+                    }
+                    50% {
+                        transform: scale3d(1.1, 1.1, 1);
+                    }
+                }
+
+                @keyframes fill {
+                    100% {
+                        box-shadow: inset 0px 0px 0px 30px #10b981;
+                    }
+                }
+            `;
+            document.head.appendChild(style);
+            document.body.appendChild(modal);
+
+            // Countdown and redirect
+            let countdown = 3;
+            const countdownEl = document.getElementById('countdown');
+            const interval = setInterval(() => {
+                countdown--;
+                if (countdownEl) {
+                    countdownEl.textContent = countdown;
+                }
+                if (countdown === 0) {
+                    clearInterval(interval);
+                    window.location.href = '/';
+                }
+            }, 1000);
+        }
+
+
         async function getAuthToken() {
             const storedToken = localStorage.getItem("authToken");
             if (storedToken) return storedToken;
@@ -201,11 +451,21 @@
 
         async function loadPricingPlans() {
             try {
+
+                const overlay = createLoadingOverlays();
+                document.body.appendChild(overlay);
+
                 const res = await fetch(
                     "https://us-central1-appscms-develop.cloudfunctions.net/payment_api/api/v1/payment-routes/image-toolkit-plans"
                 );
                 const data = await res.json();
 
+                // Remove loading overlay
+                const loadingOverlay = document.getElementById("pricingLoadingOverlay");
+                if (loadingOverlay) {
+                    loadingOverlay.remove();
+                }
+
                 const container = document.getElementById("pricingContainer");
                 container.innerHTML = "";
 
@@ -222,7 +482,7 @@
                     ${isPopular ? `<span class="popular-badge">Most Popular</span>` : ""}
 
                     <div class="plan-header">
-                        <h2 class="plan-name">${plan.plan}</h2>
+                        <h2 class="plan-name">${plan.plan.toLowerCase()}</h2>
                         <p class="plan-description">
                             ${isPopular ? "For creators and professionals" : "Perfect for beginners"}
                         </p>
@@ -235,7 +495,7 @@
                         </div>
                     </div>
 
-                    <button class="buy-button"
+                    <button class="buy-button" id=${plan.plan.toLowerCase()}
                          onclick="buyPlan('${plan.razorpay_plan_id}', '${plan.plan}')">
                         Buy Now
                     </button>
@@ -254,6 +514,21 @@
                     container.insertAdjacentHTML("beforeend", card);
                 });
 
+                // After rendering all plans, disable the button for the user's active plan
+                if (typeof firebase !== "undefined" && firebase.auth) {
+                    const user = firebase.auth().currentUser;
+                    if (user) {
+                        user.getIdTokenResult().then(tokenResult => {
+                            const customClaims = tokenResult.claims;
+                            if (customClaims.plan && window.disableActivePlanButton) {
+                                window.disableActivePlanButton(customClaims.plan);
+                            }
+                        }).catch(err => {
+                            console.error("Error getting user claims:", err);
+                        });
+                    }
+                }
+
             } catch (err) {
                 console.error("Pricing load error:", err);
             }
@@ -262,7 +537,7 @@
         const PAYMENT_API_URL = "https://us-central1-appscms-develop.cloudfunctions.net/payment_api";
 
         async function checkSubscriptionStatus(subscriptionId) {
-            const POLL_INTERVAL = 3000;      // 3 sec (OK to keep)
+            const POLL_INTERVAL = 5000;      // 3 sec (OK to keep)
             const TIMEOUT = 2 * 60 * 1000;   // 2 minutes max
 
             const startTime = Date.now();
@@ -287,8 +562,9 @@
 
                     // ✅ ACTIVE → STOP
                     if (data.status === "activated") {
-                        alert("✅ Subscription Active!");
-                        hideLoadingOverlay()
+                        hideLoadingOverlay();
+                        showSubscriptionSuccess();
+                        refreshFirebaseToken();
                         return;
                     }
 

data/_layouts/ai-image-profile.html

@@ -0,0 +1,434 @@
+{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
+= page.folderName %} {% assign pageData = site.data[folder][lang][file] %} {%-
+assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
+
+<!DOCTYPE html>
+<html lang="{{ page.lang }}">
+{%- include appscms/head/head.html -%}
+<link rel="stylesheet" href="/css/profile.css" />
+<link rel="stylesheet" href="/ai-tools/assets/css/content-tool-ai.css" />
+
+<body data-developer-key="{{ site.developerKey }}" data-client-id="{{ site.clientId }}" data-app-id="{{ site.appId }}"
+    data-dropbox-apikey="{{ site.dropboxapikey }}">
+
+    <div class="container">
+        {%- include /appscms/navbars/ai-image-tools-navbar.html -%}
+
+        <div class="container user-profile-section mt-5">
+            <!-- Sidebar -->
+            <div class="profile-sidebar">
+                <div class="sidebar-header">
+                    <div class="avatar-large"></div>
+                </div>
+                <ul class="sidebar-menu">
+                    <li class="tab-link active" data-tab="account">Account</li>
+                    <li class="tab-link" data-tab="subscription">Subscription</li>
+                    <!-- <li class="tab-link" data-tab="invoices">Invoices</li>
+                    <li class="tab-link" data-tab="company">Company Information</li>
+                    <li class="tab-link" data-tab="team">Team</li>
+                    <li class="tab-link" data-tab="settings">Settings</li> -->
+                </ul>
+            </div>
+
+            <!-- Content Area -->
+            <div class="content">
+                <!-- Account Tab Content -->
+                <div id="account" class="tab-content active">
+                    <h2 class="content-title">Account</h2>
+
+                    <!-- Email Section -->
+                    <div class="form-section">
+                        <div class="form-title">
+                            Email <span class="verified-badge">Verified</span>
+                        </div>
+                        <div class="form-group">
+                            <input id="user-email-input" type="email" class="form-input" value="" readonly />
+                        </div>
+                    </div>
+
+                    <!-- Name Section -->
+                    <div class="form-section">
+                        <div class="form-title">Name</div>
+                        <div class="form-group">
+                            <label class="form-label">Name</label>
+                            <input type="text" class="form-input username-input" value="" />
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Subscription Tab Content -->
+                <div id="subscription" class="tab-content">
+                    <h2 class="content-title">Subscription</h2>
+
+                    <!-- Current Plan Section -->
+                    <div class="form-section">
+                        <div class="form-title">Current Plan</div>
+                        <div class="subscription-card">
+                            <div class="plan-header">
+                                <div class="plan-info">
+                                    <h3 class="current-plan-name" style="text-transform: capitalize">
+                                        Free Plan
+                                    </h3>
+                                    <!-- <span class="plan-badge current-plan-badge">Free</span> -->
+                                </div>
+                                <div class="plan-status">
+                                    <span class="subscription-status active">Loading...</span>
+                                </div>
+                            </div>
+                            <div class="plan-details">
+                                <!-- <div class="detail-item">
+                                    <span class="detail-label">Token Limit:</span>
+                                    <span class="token-limit">Loading...</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">Plan Duration:</span>
+                                    <span class="plan-duration">Loading...</span>
+                                </div> -->
+                                <div class="detail-item">
+                                    <span class="detail-label">Expires On:</span>
+                                    <span class="plan-expiry">Loading...</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">Subscription ID:</span>
+                                    <span class="subscription-id">Loading...</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Usage Section -->
+                    <div class="form-section d-none">
+                        <div class="form-title">Usage Statistics</div>
+                        <div class="usage-card">
+                            <div class="usage-item">
+                                <div class="usage-header">
+                                    <span class="usage-label">Tokens Used This Month</span>
+                                    <span class="usage-value">
+                                        <span class="tokens-used">0</span> /
+                                        <span class="token-limit-display">0</span>
+                                        tokens
+                                    </span>
+                                </div>
+                                <div class="usage-progress">
+                                    <div class="progress-bar">
+                                        <div class="progress-fill" style="width: 0%"></div>
+                                    </div>
+                                    <span class="usage-percentage">0%</span>
+                                </div>
+                            </div>
+                            <div class="usage-item">
+                                <div class="usage-header">
+                                    <span class="usage-label">Days Remaining</span>
+                                    <span class="usage-value days-remaining">Loading...</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Plan Features Section -->
+                    <div class="form-section d-none">
+                        <div class="form-title">Plan Features</div>
+                        <div class="features-card">
+                            <div class="features-list" id="current-plan-features">
+                                <!-- Features will be populated by JavaScript -->
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Actions Section -->
+                    <div class="form-section">
+                        <div class="form-title">Actions</div>
+                        <div class="actions-card">
+                            <button class="btn-manage" onclick="window.location.href='/pricing'">
+                                Manage Subscription
+                            </button>
+                            <button class="btn-cancel-subscription" id="cancelSubscriptionBtn"
+                                onclick="showCancelConfirmation()" style="display: none;">
+                                Cancel Subscription
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Expiry Warning -->
+                    <div class="expiry-warning" style="display: none">
+                        <div class="warning-content">
+                            <i class="warning-icon">⚠️</i>
+                            <span class="warning-text">Your plan expires soon!</span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <!-- Cancel Subscription Confirmation Modal -->
+    <div id="cancelConfirmationModal" class="cancel-modal" style="display: none;">
+        <div class="cancel-modal-overlay" onclick="hideCancelConfirmation()"></div>
+        <div class="cancel-modal-content">
+            <div class="cancel-modal-header">
+                <div class="cancel-icon-wrapper">
+                    <svg class="cancel-warning-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                </div>
+                <h3 class="cancel-modal-title">Cancel Subscription?</h3>
+                <p class="cancel-modal-description">
+                    Are you sure you want to cancel your subscription? You will lose access to all premium features at
+                    the end of your current billing period.
+                </p>
+            </div>
+            <div class="cancel-modal-body">
+                <div class="cancel-warning-box">
+                    <strong>⚠️ What you'll lose:</strong>
+                    <ul class="cancel-loss-list">
+                        <li>Access to premium AI image generation</li>
+                        <li>Higher token limits</li>
+                        <li>Priority support</li>
+                        <li>Advanced features</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="cancel-modal-footer">
+                <button class="btn-cancel-action" onclick="hideCancelConfirmation()">
+                    Keep Subscription
+                </button>
+                <button class="btn-confirm-cancel" onclick="confirmCancelSubscription()">
+                    Yes, Cancel Subscription
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <style>
+        /* Cancel Subscription Button */
+        .btn-cancel-subscription {
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            padding: 10px 20px;
+        }
+
+        .btn-cancel-subscription:hover {
+            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        }
+
+        /* Cancel Modal */
+        .cancel-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 10000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .cancel-modal-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(4px);
+            animation: fadeIn 0.3s ease;
+        }
+
+        .cancel-modal-content {
+            position: relative;
+            background: white;
+            border-radius: 16px;
+            max-width: 500px;
+            width: 90%;
+            padding: 30px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            animation: slideUp 0.3s ease;
+            z-index: 10001;
+        }
+
+        .cancel-modal-header {
+            text-align: center;
+            margin-bottom: 25px;
+        }
+
+        .cancel-icon-wrapper {
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 20px;
+            background: #fef2f2;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .cancel-warning-icon {
+            width: 40px;
+            height: 40px;
+            color: #ef4444;
+        }
+
+        .cancel-modal-title {
+            font-size: 24px;
+            font-weight: 700;
+            color: #1f2937;
+            margin-bottom: 10px;
+        }
+
+        .cancel-modal-description {
+            font-size: 15px;
+            color: #6b7280;
+            line-height: 1.6;
+        }
+
+        .cancel-modal-body {
+            margin-bottom: 25px;
+        }
+
+        .cancel-warning-box {
+            background: #fef2f2;
+            border: 1px solid #fecaca;
+            border-radius: 10px;
+            padding: 15px;
+            color: #991b1b;
+        }
+
+        .cancel-warning-box strong {
+            display: block;
+            margin-bottom: 10px;
+            font-size: 14px;
+        }
+
+        .cancel-loss-list {
+            margin: 0;
+            padding-left: 20px;
+            font-size: 13px;
+            line-height: 1.8;
+        }
+
+        .cancel-loss-list li {
+            margin-bottom: 5px;
+        }
+
+        .cancel-modal-footer {
+            display: flex;
+            gap: 12px;
+            flex-direction: column-reverse;
+        }
+
+        .btn-cancel-action,
+        .btn-confirm-cancel {
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: none;
+            width: 100%;
+        }
+
+        .btn-cancel-action {
+            background: #f3f4f6;
+            color: #374151;
+        }
+
+        .btn-cancel-action:hover {
+            background: #e5e7eb;
+        }
+
+        .btn-confirm-cancel {
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            color: white;
+        }
+
+        .btn-confirm-cancel:hover {
+            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        @keyframes slideUp {
+            from {
+                transform: translateY(30px);
+                opacity: 0;
+            }
+
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+
+        @media (min-width: 640px) {
+            .cancel-modal-footer {
+                flex-direction: row;
+            }
+        }
+    </style>
+
+    <script>
+        // Tab functionality
+        document.addEventListener("DOMContentLoaded", function () {
+            const tabLinks = document.querySelectorAll(".tab-link");
+            const tabContents = document.querySelectorAll(".tab-content");
+
+            tabLinks.forEach((link) => {
+                link.addEventListener("click", () => {
+                    // Remove active class from all tabs
+                    tabLinks.forEach((l) => l.classList.remove("active"));
+                    tabContents.forEach((c) => c.classList.remove("active"));
+
+                    // Add active class to clicked tab
+                    link.classList.add("active");
+
+                    // Show corresponding content
+                    const tabId = link.getAttribute("data-tab");
+                    document.getElementById(tabId).classList.add("active");
+                });
+            });
+
+            // Password visibility toggle
+            const toggleButtons = document.querySelectorAll(".password-toggle");
+            toggleButtons.forEach((button) => {
+                button.addEventListener("click", () => {
+                    const input = button.previousElementSibling;
+                    const icon = button.querySelector(".material-icons");
+
+                    if (input.type === "password") {
+                        input.type = "text";
+                        icon.textContent = "visibility_off";
+                    } else {
+                        input.type = "password";
+                        icon.textContent = "visibility";
+                    }
+                });
+            });
+        });
+
+    </script>
+
+    {%- include appscms/scripts/script.html -%}
+</body>
+
+</html>
+```

data/assets/css/ai-image-home.css

@@ -27,6 +27,9 @@ body {
 .nav-item .nav-link {
     color: var(--black-color);
 }
+.logged-in-user-email{
+    font-size: 12px;
+}
 
 .btn-generate,
 .login-btn {
@@ -404,8 +407,8 @@ body {
 }
 
 .profile-user-avatar {
-    width: 60px;
-    height: 60px;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
     background-color: var(--primary-color);
     color: white;

data/assets/js/get-credits.js

@@ -1,91 +0,0 @@
-
-async function getAuthToken() {
-    return new Promise((resolve) => {
-        // First try to get from localStorage (set by Firebase auth)
-        const storedToken = localStorage.getItem("authToken");
-        if (storedToken) {
-            resolve(storedToken);
-            return;
-        }
-
-        // If Firebase is available and user is logged in, get fresh token
-        if (typeof firebase !== "undefined" && firebase.auth) {
-            try {
-                const user = firebase.auth().currentUser;
-                if (user) {
-                    user
-                        .getIdToken(true) // Force refresh
-                        .then((token) => {
-                            // Save to localStorage for faster access
-                            localStorage.setItem("authToken", token);
-                            resolve(token);
-                        })
-                        .catch((error) => {
-                            console.warn("Failed to get auth token:", error);
-                            resolve(null);
-                        });
-                } else {
-                    console.warn("User not logged in");
-                    resolve(null);
-                }
-            } catch (error) {
-                console.warn("Firebase check error:", error);
-                resolve(null);
-            }
-        } else {
-            // Fallback to session storage
-            const sessionToken = sessionStorage.getItem("authToken");
-            resolve(sessionToken || null);
-        }
-    });
-}
-const BACKEND_API_URL = 'https://us-central1-appscms-develop.cloudfunctions.net/ai_image_tools/api/v1/image-tools-routes';
-
-async function getUserCredits() {
-    try {
-        const authToken = await getAuthToken();
-        if (!authToken) {
-            throw new Error("User not authenticated");
-        }
-        const res = await fetch(`${BACKEND_API_URL}/remaining-credits`, {
-            method: "GET",
-            headers: {
-                "Authorization": `Bearer ${authToken}`,
-                "Content-Type": "application/json"
-            }
-        });
-
-        if (!res.ok) {
-            const errorText = await res.text();
-            let errorMsg = "Failed to fetch credits";
-
-            try {
-                const errorJson = JSON.parse(errorText);
-                errorMsg = errorJson.detail || errorMsg;
-            } catch { }
-
-            throw new Error(errorMsg);
-        }
-
-        const data = await res.json();
-
-        return data;
-
-    } catch (error) {
-        console.error("Get credits error:", error);
-        showError(error.message || "Unable to fetch credits");
-        return null;
-    }
-}
-
-(async () => {
-    const creditData = await getUserCredits();
-
-    if (creditData) {
-        const creditEl = document.querySelector("#showCredits");
-        if (creditEl) {
-            creditEl.innerHTML = `Credits: ${creditData.credits}`;
-            console.log("Credits:", creditData.credits);
-        }
-    }
-})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 5.2.3
+  version: 5.2.4
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-30 00:00:00.000000000 Z
+date: 2026-01-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -266,6 +266,7 @@ files:
 - _layouts/ai-image-generator.html
 - _layouts/ai-image-home.html
 - _layouts/ai-image-pricing.html
+- _layouts/ai-image-profile.html
 - _layouts/allAuthors.html
 - _layouts/appscms-about.html
 - _layouts/appscms-audio.html