appscms-tools-theme 5.1.8 → 5.2.0

data/assets/css/content-tool-ai.css

@@ -13,7 +13,7 @@ body {
 
 /* Header Styles */
 .top-header {
-  height: var(--header-height);
+  height: 55px;
   background: #f5f9fd;
   position: fixed;
   top: 0;
@@ -137,10 +137,15 @@ body {
   background-color: #e5e7eb;
   color: #6b7280;
   font-size: 0.75rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.625rem;
+  /* padding: 0.125rem 0.375rem; */
+  border-radius: 50%;
   margin-left: auto;
   margin-right: 0.5rem;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .expand-icon {
@@ -230,16 +235,19 @@ body {
 }
 
 .content-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #1f2937;
+  color: #32325d;
   margin-bottom: 0;
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin: 7px 0;
 }
 
 .content-description {
   color: #6b7280;
   line-height: 1.6;
   margin-bottom: 2rem;
+  font-size: 14px;
+  margin-top: 10px;
 }
 
 .form-label-custom {
@@ -262,10 +270,10 @@ body {
 }
 
 .advanced-options {
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.375rem;
-  padding: 1rem;
+  background: #fff;
+  border: 1px solid #cad1d7;
+  border-radius: 0.25rem;
+  padding: 0.625rem 0.75rem;
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
@@ -274,7 +282,8 @@ body {
   background: #f3f4f6;
 }
 
-.btn-generate {
+.btn-generate,
+.login-btn {
   background: linear-gradient(90deg, #4701ff 35%, #8223f7);
   border-color: var(--primary-color);
   color: white;
@@ -386,3 +395,798 @@ body {
     font-size: 0.875rem;
   }
 }
+
+* Login System */ .login-modal-button {
+  border: none;
+  background-color: #fff;
+  font-size: 14px;
+  padding: 0px 0px 0px 25px;
+}
+.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%; /* Start off-screen */
+  width: 90%;
+  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;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.modal-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+.close-modal-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #666;
+}
+
+.modal-content {
+  padding: 20px;
+}
+
+.modal-body {
+  margin-bottom: 20px;
+}
+
+.modal-footer {
+  padding: 15px 20px;
+  border-top: 1px solid #eee;
+  text-align: right;
+}
+
+.auth-container {
+  background-color: white;
+  border-radius: 8px;
+  padding: 30px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+h2 {
+  font-size: 16px;
+  font-weight: normal;
+  color: #555;
+  margin-bottom: 30px;
+}
+
+a {
+  color: #1b2de7;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.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 {
+  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;
+  margin-bottom: 15px;
+}
+
+.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 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;
+}
+
+.login-btn {
+  width: 100%;
+  padding: 12px;
+  background-color: #1b2de7;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.forgot-password {
+  text-align: center;
+  margin-top: 15px;
+}
+
+.user-profile {
+  display: none;
+  text-align: center;
+}
+
+.avatar {
+  width: 100px;
+  height: 100px;
+  background-color: #ff9800;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto 20px;
+  color: white;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.menu-item:last-child {
+  border-bottom: none;
+}
+
+.menu-item i {
+  margin-right: 10px;
+  color: #555;
+}
+
+.menu-item span {
+  flex: 1;
+}
+
+.menu-item .arrow {
+  color: #999;
+}
+
+/* Icons */
+.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>');
+}
+
+/* User avatar in corner */
+.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;
+}
+
+.google-btn svg {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  margin-right: 10px;
+}
+
+/* Forgot password form */
+#forgotPasswordForm {
+  display: none;
+}
+
+.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);
+}
+
+.free-trial {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-right: 20px;
+  background-color: white;
+}
+
+.crown-icon {
+  color: #f9c74f;
+  font-size: 24px;
+  margin-right: 10px;
+}
+.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;
+}
+
+.dropdown-icon {
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  font-size: 10px;
+  background-color: white;
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+}
+
+.user-modal {
+  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;
+}
+
+.profile-user-avatar {
+  width: 60px;
+  height: 60px;
+  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;
+}
+
+.user-info h2 {
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.user-info p {
+  font-size: 14px;
+  color: #777;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.modal-item {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-top: 1px solid #eee;
+  transition: background-color 0.2s;
+  cursor: pointer;
+}
+
+.modal-item:hover {
+  background-color: #f7f7f7;
+}
+
+.item-icon {
+  margin-right: 20px;
+  font-size: 20px;
+  min-width: 24px;
+  text-align: center;
+}
+
+.item-text {
+  flex-grow: 1;
+}
+.item-text a {
+  color: #000000;
+  text-decoration: none;
+}
+.item-arrow svg {
+  height: 13px;
+  width: 13px;
+}
+
+.upload-button {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  width: 50px;
+  height: 50px;
+  border-radius: 8px;
+  background-color: #2962ff;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.upload-icon {
+  font-size: 24px;
+  margin-bottom: 2px;
+}
+
+.upload-button span {
+  font-size: 10px;
+}
+.auth-container a {
+  justify-content: center;
+}
+.review {
+  width: 300px; /* Set each review card width to match the `.reviews` container */
+  flex-shrink: 0;
+}
+
+.feedback-btn {
+  background-color: #4361ee;
+  color: white;
+  border: none;
+  padding: 12px 32px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 12px;
+  margin-top: 10px;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1045;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-body {
+  padding: 25px;
+}
+
+@keyframes modalopen {
+  from {
+    opacity: 0;
+    transform: translateY(-60px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.close:hover {
+  color: black;
+}
+
+h2 {
+  margin-top: 0;
+  color: #333;
+}
+
+.form-group {
+  margin-botton: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+textarea,
+input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+textarea {
+  height: 120px;
+  resize: vertical;
+}
+.submit-btn {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.rating-header {
+  margin-top: 10px;
+}
+
+.feedbackModal {
+  background-color: var(--white);
+  border-radius: 12px;
+  box-shadow: var(--shadow-feedback);
+  width: 100%;
+  max-width: 500px;
+  overflow: hidden;
+  animation: slideIn 0.3s ease-out;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+  animation: fadeIn 0.3s ease-out;
+}
+
+.close {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.form-control {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 22px;
+  color: var(--text-light);
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  transition: all 0.2s;
+}
+
+.close-button:hover {
+  background-color: var(--gray-200);
+  color: var(--text);
+}
+
+.thank-you {
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.modal-footer {
+  padding: 15px 25px 20px;
+  text-align: right;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #000;
+  font-size: 1rem;
+}
+.form-control {
+  background-color: #f8fbff;
+  border: 1px solid #cad1d7;
+  border-radius: 0.25rem;
+  padding: 0.625rem 0.75rem;
+  font-weight: 400;
+  font-size: 16px;
+  height: calc(1.5em + 1.25rem + 2px);
+  margin-bottom: 1.5rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 12px 15px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 15px;
+  color: #2d3748;
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #4353ff;
+  box-shadow: 0 0 0 3px rgba(67, 83, 255, 0.2);
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text);
+}
+
+.modal-header {
+  padding: 20px 25px;
+  border-bottom: 1px solid var(--gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Thank you message */
+.thank-you {
+  text-align: center;
+  padding: 30px 20px;
+  background-color: #fff;
+  border-radius: 22px;
+}
+
+.thank-you-icon {
+  width: 60px;
+  height: 60px;
+  background-color: #48bb78;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+  font-size: 30px;
+}
+
+.thank-you-title {
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.thank-you-message {
+  color: var(--text-light);
+  margin-bottom: 25px;
+}
+.sample-data {
+  width: 100%;
+  color: #6a3dfd;
+  margin: 10px auto;
+  border: 1px solid #0000;
+  background: #fff;
+  font-size: 12px;
+}
+.url-active a span {
+  color: #4701ff !important;
+  font-weight: 600;
+}