appscms-tools-theme 5.2.5 → 5.2.6

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

@@ -0,0 +1,763 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--font-family);
+    background: var(--white-color);
+    overflow-x: hidden;
+}
+
+/* header css */
+
+.navbar{
+    background-color: white;
+}
+.navbar-brand {
+    color: var(--black-color) !important;
+}
+
+.nav-item {
+    padding: 0 1rem;
+}
+
+.nav-item .nav-link {
+    color: var(--black-color);
+}
+.logged-in-user-email{
+    font-size: 12px;
+}
+
+.btn-generate,
+.login-btn {
+    width: auto;
+    background: linear-gradient(90deg, hsl(20.5 90.2% 48.2%), #ec4899);
+    border-color: var(--primary-color);
+    color: white;
+    font-weight: 500;
+    padding: 0.7rem 1rem;
+    width: 100%;
+    border-radius: 0.375rem;
+    border: none;
+    color: white;
+    font-size: 15px;
+    margin-bottom: 0px !important;
+}
+
+/* auth / login  / signup css */
+
+.side-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: none;
+    z-index: 100;
+}
+
+.side-modal {
+    position: fixed;
+    z-index: 10000;
+    top: 0;
+    right: -90%;
+    width: 28%;
+    height: 100%;
+    background-color: white;
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
+    transition: right 0.3s ease-in-out;
+    overflow-y: auto;
+}
+
+.close-modal-btn {
+    background: #000;
+    color: white;
+    border: none;
+    padding: 5px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.close-modal-btn:hover {
+    background: #4f46e5;
+}
+
+.auth-container {
+    background-color: white;
+    border-radius: 8px;
+    padding: 30px;
+    width: 400px;
+    max-width: 90%;
+}
+
+
+.user-avatar {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #1b2de7;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.user-profile-header {
+    padding: 0px 0px 0px 20px;
+    display: none;
+}
+
+.profile-button {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    font-weight: bold;
+    position: relative;
+}
+
+.user-modal {
+    z-index: 9;
+    position: absolute;
+    top: 55px;
+    right: 0px;
+    width: 300px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    display: none;
+    overflow: hidden;
+}
+
+.user-modal-header {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+}
+
+.google-btn {
+    background-color: #4884ed;
+}
+
+.google-btn svg {
+    background-color: #fff;
+    border-radius: 30px;
+    padding: 3px;
+}
+
+.facebook-btn {
+    background-color: #3c5997;
+}
+
+.or-divider {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin: 20px 0;
+    color: #777;
+}
+
+.or-divider::before,
+.or-divider::after {
+    content: "";
+    flex: 1;
+    border-bottom: 1px solid #ddd;
+}
+
+.or-divider::before {
+    margin-right: 10px;
+}
+
+.or-divider::after {
+    margin-left: 10px;
+}
+
+.input-group {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.input-group input {
+    width: 100%;
+    padding: 12px 40px 12px 40px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+    box-sizing: border-box;
+}
+
+.input-group .icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #999;
+    font-size: 16px;
+}
+
+.input-group i {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #777;
+}
+
+.password-toggle {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #777;
+    cursor: pointer;
+}
+
+.log-subinfo {
+    font-size: 16px;
+    font-weight: normal;
+    color: #555;
+    margin-bottom: 30px;
+}
+
+.log-info {
+    font-size: 28px;
+    margin-bottom: 10px;
+    color: #000;
+}
+
+.social-btn {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 12px;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    color: white;
+    text-align: center;
+}
+
+.google-btn svg {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    margin-right: 10px;
+}
+
+.google-btn svg {
+    background-color: #fff;
+    border-radius: 30px;
+    padding: 3px;
+}
+
+.icon {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    margin-right: 10px;
+}
+
+.google-icon {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path fill="#4285F4" d="M21.533 12.187c0-.82-.067-1.417-.21-2.037h-9.357v3.698h5.492c-.11.92-.709 2.303-2.038 3.233l-.018.124 2.958 2.292.205.02c1.882-1.738 2.968-4.296 2.968-7.33"></path><path fill="#34A853" d="M11.966 21.931c2.69 0 4.95-.886 6.6-2.414l-3.146-2.436c-.841.587-1.97.997-3.454.997-2.636 0-4.872-1.739-5.67-4.141l-.117.01-3.076 2.38-.04.112a9.96 9.96 0 0 0 8.903 5.492"></path><path fill="#FBBC05" d="M6.296 13.937a6.1 6.1 0 0 1-.332-1.971c0-.687.122-1.351.321-1.971l-.005-.132-3.115-2.42-.102.05A10 10 0 0 0 2 11.965a10 10 0 0 0 1.063 4.473z"></path><path fill="#EB4335" d="M11.966 5.853c1.87 0 3.133.809 3.853 1.484l2.813-2.746C16.904 2.985 14.656 2 11.966 2a9.96 9.96 0 0 0-8.903 5.492l3.222 2.503c.809-2.403 3.045-4.142 5.68-4.142"></path></g></svg>');
+}
+
+.facebook-icon {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="white" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-7H9v-2h2V8.5C11 7.12 12.12 6 13.5 6H16v2h-2c-.55 0-1 .45-1 1v1h3v2h-3v7z"/></svg>');
+}
+
+.email-icon {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23777" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
+}
+
+.password-icon {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23777" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>');
+}
+
+.eye-icon {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23777" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
+}
+
+.google-btn svg {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    margin-right: 10px;
+}
+
+#forgotPasswordForm {
+    display: none;
+}
+
+#forgotPasswordForm h2 {
+    font-weight: 600;
+    font-size: 20px;
+    color: var(--black-color);
+}
+
+#forgotPasswordForm p {
+    color: var(--black-color)
+}
+
+#signupForm h1 {
+    font-size: 30px;
+    color: var(--black-color);
+}
+
+#signupForm p {
+    color: var(--black-color)
+}
+
+.back-btn {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    cursor: pointer;
+    color: #1b2de7;
+    font-size: 14px;
+}
+
+.back-btn:hover {
+    text-decoration: underline;
+}
+
+.back-icon {
+    margin-right: 8px;
+}
+
+.reset-success {
+    text-align: center;
+    background-color: #e8f4ff;
+    padding: 15px;
+    border-radius: 4px;
+    margin-top: 15px;
+    display: none;
+}
+
+.success-icon {
+    color: #1b2de7;
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.twitter-btn {
+    background-color: #000000;
+}
+
+.twitter-btn svg {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    margin-right: 10px;
+}
+
+.user-modal-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 70px;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 20px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+
+.forgot-password {
+    text-align: center;
+    margin-top: 16px;
+}
+
+.forgot-password a {
+    color: #007bff;
+    text-decoration: none;
+    font-size: 14px;
+}
+
+.forgot-password a:hover {
+    text-decoration: underline;
+}
+
+.profile-user-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 24px;
+    margin-right: 20px;
+}
+
+.modal-item {
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    border-top: 1px solid #eee;
+    color: #000;
+    text-decoration: none;
+    transition: background-color 0.2s;
+    cursor: pointer;
+}
+
+.modal-item:hover {
+    background-color: #ddd;
+    color:  black;
+    text-decoration: none;
+}
+
+.item-icon {
+    margin-right: 20px;
+    font-size: 20px;
+    min-width: 24px;
+    text-align: center;
+}
+
+.item-text {
+    flex-grow: 1;
+}
+
+.item-arrow svg {
+    height: 13px;
+    width: 13px;
+}
+
+
+/* headings css */
+
+.appscms-h1{
+    font-size: 50px;
+    font-weight: 700;
+}
+
+.appscms-h2{
+    font-size: 18px;
+    font-weight: 300;
+}
+
+
+
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.category-nav {
+    display: flex;
+    justify-content: start;
+    gap: 8px;
+    overflow-x: auto;
+    padding: 10px 0;
+    scrollbar-width: thin;
+    scrollbar-color: #ddd transparent;
+}
+
+.category-nav::-webkit-scrollbar {
+    height: 6px;
+}
+
+.category-nav::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.category-nav::-webkit-scrollbar-thumb {
+    background: #ddd;
+    border-radius: 3px;
+}
+
+.category-tab {
+    padding: 12px 24px;
+    background: #f8f8f8;
+    border: none;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #333;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.category-tab:hover {
+    background: #f8f8f8;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.category-tab.active {
+    background: #333;
+    color: white;
+    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
+}
+
+/* Content area for demonstration */
+.content-area {
+    margin-top: 40px;
+    padding: 40px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    min-height: 400px;
+}
+
+.content-area h2 {
+    color: #333;
+    margin-bottom: 20px;
+}
+
+.content-area p {
+    color: #666;
+    line-height: 1.6;
+}
+.image-item.hidden {
+    display: none;
+}
+
+.count-badge {
+    background: rgba(0, 0, 0, 0.1);
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 0.8em;
+    margin-left: 5px;
+    font-weight: bold;
+}
+
+.category-tab.active .count-badge {
+    background: #fff;
+    /* Active tab par white badge */
+    color: #000;
+}
+
+.tag-filter-section {
+    padding: 20px 0;
+}
+
+.tag-filters {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.tag {
+    padding: 8px 18px;
+    border-radius: 999px;
+    border: 1px solid #e5e7eb;
+    background: #fff;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.25s ease;
+}
+
+/* Hover */
+.tag:hover {
+    background: #f3f4f6;
+}
+
+/* Active */
+.tag.active {
+    background: #111827;
+    color: #fff;
+    border-color: #111827;
+}
+
+/* Special tags */
+.tag.hot {
+    border-color: #ef4444;
+    color: #ef4444;
+}
+
+.tag.trending {
+    border-color: #2563eb;
+    color: #2563eb;
+}
+
+/* Active override for special */
+.tag.hot.active {
+    background: #ef4444;
+    color: #fff;
+}
+
+.tag.trending.active {
+    background: #2563eb;
+    color: #fff;
+}
+
+.search-container {
+    max-width: 800px;
+    margin: 2rem auto;
+}
+
+.search {
+    position: relative;
+    width: 100%;
+}
+
+.search-input {
+    width: 100%;
+    padding: 16px 50px 16px 16px;
+    font-size: 15px;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    outline: none;
+    background: #fff;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.search-input:focus {
+    border-color: #000;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.search-input::placeholder {
+    color: #999;
+}
+
+.search-icon {
+    position: absolute;
+    right: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #666;
+    pointer-events: none;
+    transition: color 0.3s ease;
+}
+
+.search-input:focus~.search-icon {
+    color: #000;
+}
+
+/* Clear button */
+.clear-btn {
+position: absolute;
+    right: 16px;
+    top: 53%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    color: #000;
+    font-size: 2rem;
+    line-height: 1;
+}
+
+.clear-btn:hover {
+    background: #e0e0e0;
+    color: #000;
+}
+
+.search-input:not(:placeholder-shown)~.clear-btn {
+    display: flex;
+}
+
+#try_style_btn {
+    background: #facc15e6;
+    color: #000;
+    /* width: 50px; */
+    /* height: 50px; */
+    position: absolute;
+    border: none;
+    /* top: 0; */
+    bottom: 10px;
+    right: 10px;
+    border-radius: 50px;
+    font-size: 12px;
+    padding: 8px 25px;
+}
+
+.image-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 20px;
+    padding: 20px;
+    border-radius: 30px;
+}
+
+.image-item {
+    position: relative;
+    border-radius: 30px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.image-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+.image-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .nav-item {
+        padding: 0.3rem 0 !important;
+    }
+    .side-modal{
+        width: 90%;
+    }
+    .auth-container {
+        padding: 30px 0;
+    }
+    .category-tab {
+        padding: 10px 20px;
+        font-size: 14px;
+    }
+
+    .content-area {
+        padding: 24px;
+    }
+
+    .appscms-h1{
+        font-size: 30px;
+    }
+     .appscms-h2{
+        font-size: 16px;
+    }
+
+}