risadmin_prod/myapprepo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
myapprepo/faq.html

650 lines
14 KiB
HTML
Raw Normal View History

Build_Site
2025-05-14 12:53:01 +00:00
SafeValue must use [property]=binding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ</title>
<style>
Build_Site
2025-05-21 08:25:19 +00:00
/* Base styles */
:root {
--primary-color: #4361ee;
--primary-hover: #3a56d4;
--secondary-color: #f8f9fa;
--accent-color: #4cc9f0;
--success-color: #4ade80;
--warning-color: #fbbf24;
--error-color: #f87171;
--text-primary: #1f2937;
--text-secondary: #4b5563;
--text-light: #9ca3af;
--border-color: #e5e7eb;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--border-radius: 8px;
--transition: all 0.2s ease;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 0;
background: #f3f4f6;
color: var(--text-primary);
line-height: 1.5;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
/* Container */
.container {
Build_Site
2025-05-14 12:53:01 +00:00
width: 100%;
Build_Site
2025-05-21 08:25:19 +00:00
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
font-weight: 500;
text-decoration: none;
Build_Site
2025-05-14 12:53:01 +00:00
cursor: pointer;
Build_Site
2025-05-21 08:25:19 +00:00
transition: var(--transition);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.btn-primary {
background-color: var(--primary-color);
color: white;
border: none;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.btn-primary:hover {
background-color: var(--primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.btn-outline {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text-secondary);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.btn-outline:hover {
border-color: var(--primary-color);
color: var(--primary-color);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
/* Forms */
.form-group {
margin-bottom: 1.25rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.form-label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.form-control {
Build_Site
2025-05-14 12:53:01 +00:00
width: 100%;
Build_Site
2025-05-21 08:25:19 +00:00
padding: 0.625rem 0.75rem;
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
font-size: 0.875rem;
background-color: white;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
textarea.form-control {
min-height: 100px;
resize: vertical;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
/* Blog sections */
.tn1-blog-section {
max-width: 1200px;
margin: 0 auto;
padding: 5rem 1.5rem;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow-md);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-subheading {
font-size: 1rem;
color: var(--primary-color);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-main-heading {
font-size: 2.5rem;
margin: 0.5rem 0 1rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-description {
color: var(--text-secondary);
font-size: 1.125rem;
max-width: 700px;
margin: 0 auto 3rem;
line-height: 1.6;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
justify-content: center;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-blog-card {
background: white;
padding: 0;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
height: 100%;
display: flex;
flex-direction: column;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-blog-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-placeholder {
background: #e5e7eb;
height: 200px;
margin-bottom: 0;
position: relative;
overflow: hidden;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-card-content {
padding: 1.5rem;
Build_Site
2025-05-14 12:53:01 +00:00
flex: 1;
display: flex;
flex-direction: column;
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-category {
font-size: 0.75rem;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
margin: 0 0 0.5rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.75rem;
line-height: 1.3;
color: var(--text-primary);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-summary {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
flex: 1;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-meta {
font-size: 0.75rem;
color: var(--text-light);
Build_Site
2025-05-14 12:53:01 +00:00
display: flex;
Build_Site
2025-05-21 08:25:19 +00:00
align-items: center;
gap: 1rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-view-all-btn {
margin-top: 3rem;
padding: 0.75rem 2rem;
background: var(--primary-color);
color: white;
Build_Site
2025-05-14 12:53:01 +00:00
border: none;
Build_Site
2025-05-21 08:25:19 +00:00
border-radius: var(--border-radius);
font-weight: 600;
Build_Site
2025-05-14 12:53:01 +00:00
cursor: pointer;
Build_Site
2025-05-21 08:25:19 +00:00
transition: var(--transition);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.tn1-view-all-btn:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
/* Blog Style 2 */
.blog-2-section {
Build_Site
2025-05-14 12:53:01 +00:00
max-width: 1200px;
Build_Site
2025-05-21 08:25:19 +00:00
margin: 0 auto;
padding: 5rem 1.5rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-header {
Build_Site
2025-05-14 12:53:01 +00:00
display: flex;
Build_Site
2025-05-21 08:25:19 +00:00
justify-content: space-between;
align-items: flex-start;
Build_Site
2025-05-14 12:53:01 +00:00
flex-wrap: wrap;
Build_Site
2025-05-21 08:25:19 +00:00
margin-bottom: 3rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-subheading {
font-size: 1rem;
color: var(--primary-color);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-main-heading {
font-size: 2.5rem;
margin: 0 0 1rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-description {
font-size: 1.125rem;
color: var(--text-secondary);
margin-top: 1rem;
Build_Site
2025-05-14 12:53:01 +00:00
max-width: 600px;
Build_Site
2025-05-21 08:25:19 +00:00
line-height: 1.6;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-view-all {
padding: 0.75rem 1.5rem;
background: var(--primary-color);
color: white;
Build_Site
2025-05-14 12:53:01 +00:00
border: none;
Build_Site
2025-05-21 08:25:19 +00:00
border-radius: var(--border-radius);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-top: 1rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-view-all:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-card {
background: white;
border-radius: var(--border-radius);
overflow: hidden;
Build_Site
2025-05-14 12:53:01 +00:00
display: flex;
Build_Site
2025-05-21 08:25:19 +00:00
flex-direction: column;
box-shadow: var(--shadow-sm);
transition: var(--transition);
height: 100%;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-placeholder {
height: 200px;
background: #e5e7eb;
position: relative;
overflow: hidden;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
Build_Site
2025-05-14 12:53:01 +00:00
flex: 1;
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-meta {
font-size: 0.75rem;
color: var(--text-light);
margin-bottom: 0.5rem;
Build_Site
2025-05-14 12:53:01 +00:00
display: flex;
Build_Site
2025-05-21 08:25:19 +00:00
gap: 1rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-title {
font-size: 1.25rem;
margin: 0 0 0.75rem;
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-summary {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
flex: 1;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-read-more {
font-size: 0.875rem;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.25rem;
transition: var(--transition);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.blog-2-read-more:hover {
color: var(--primary-hover);
gap: 0.5rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
/* Contact Form Style 1 */
.contact-1-wrapper {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f3f4f6;
padding: 3rem 1rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-section {
background: white;
max-width: 550px;
margin: 0 auto;
padding: 2.5rem;
Build_Site
2025-05-14 12:53:01 +00:00
text-align: center;
Build_Site
2025-05-21 08:25:19 +00:00
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-tagline {
font-size: 1rem;
color: var(--primary-color);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-heading {
font-size: 2rem;
margin: 0 0 1rem;
font-weight: 700;
color: var(--text-primary);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-description {
color: var(--text-secondary);
font-size: 1rem;
margin-bottom: 2rem;
max-width: 450px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-form {
Build_Site
2025-05-14 12:53:01 +00:00
display: flex;
Build_Site
2025-05-21 08:25:19 +00:00
flex-direction: column;
gap: 1.25rem;
Build_Site
2025-05-14 12:53:01 +00:00
text-align: left;
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-input,
.contact-1-textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 1rem;
transition: var(--transition);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-input:focus,
.contact-1-textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-textarea {
min-height: 120px;
resize: vertical;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-checkbox-row {
Build_Site
2025-05-14 12:53:01 +00:00
display: flex;
Build_Site
2025-05-21 08:25:19 +00:00
align-items: flex-start;
gap: 0.75rem;
font-size: 0.875rem;
color: var(--text-secondary);
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-checkbox-row input[type="checkbox"] {
margin-top: 0.25rem;
Build_Site
2025-05-14 12:53:01 +00:00
}
Build_Site
2025-05-21 08:25:19 +00:00
.contact-1-submit {
background: var(--primary-color);
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: var(--border-radius);
Build_Site
2025-05-14 12:53:01 +00:00
cursor: pointer;
Build_Site
2025-05-21 08:25:19 +00:00
margin-top: 0.5rem;
transition: var(--transition);
align-self: center;
}
.contact-1-submit:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Responsive designs */
@media (max-width: 768px) {
.tn1-blog-grid,
.blog-2-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.tn1-main-heading,
.blog-2-main-heading {
font-size: 2rem;
}
.contact-1-section {
padding: 2rem 1.5rem;
}
}
@media (max-width: 480px) {
.tn1-blog-grid,
.blog-2-grid {
grid-template-columns: 1fr;
}
.tn1-main-heading,
.blog-2-main-heading {
font-size: 1.75rem;
}
.contact-1-section {
padding: 1.5rem 1rem;
}
}
/* Preview controls styling */
.preview-controls {
position: fixed !important;
top: 20px !important;
right: 20px !important;
background-color: white !important;
border-radius: var(--border-radius) !important;
padding: 1rem !important;
box-shadow: var(--shadow-lg) !important;
z-index: 1000 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
}
.preview-controls button {
padding: 0.625rem 1rem !important;
background: var(--primary-color) !important;
color: white !important;
border: none !important;
border-radius: var(--border-radius) !important;
cursor: pointer !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
transition: var(--transition) !important;
}
.preview-controls button:hover {
background: var(--primary-hover) !important;
transform: translateY(-1px) !important;
box-shadow: var(--shadow-sm) !important;
}
.preview-controls button::before {
font-size: 1rem !important;
}
#download-btn::before {
content: "⬇️" !important;
}
#copy-btn::before {
content: "📋" !important;
}
#toggle-source-btn::before {
content: "📝" !important;
}
.toast {
position: fixed !important;
top: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
padding: 0.75rem 1.5rem !important;
background: var(--success-color) !important;
color: white !important;
border-radius: var(--border-radius) !important;
box-shadow: var(--shadow-md) !important;
opacity: 0 !important;
transition: opacity 0.3s !important;
z-index: 1001 !important;
font-weight: 500 !important;
}
.toast.show {
opacity: 1 !important;
}
.html-source {
display: none !important;
margin-top: 1.5rem !important;
width: 100% !important;
height: 300px !important;
font-family: 'Courier New', monospace !important;
resize: vertical !important;
white-space: pre !important;
overflow: auto !important;
background-color: #f9fafb !important;
border: 1px solid var(--border-color) !important;
padding: 1rem !important;
border-radius: var(--border-radius) !important;
font-size: 0.875rem !important;
}
.show-source {
display: block !important;
}
/* Additional utility classes */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.5rem; }
.mt-6 { margin-top: 2rem; }
.mt-8 { margin-top: 3rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.5rem; }
.mb-6 { margin-bottom: 2rem; }
.mb-8 { margin-bottom: 3rem; }
Build_Site
2025-05-14 12:53:01 +00:00
html, body {
margin: 0 !important;
padding: 0 !important;
min-height: 100% !important;
width: 100% !important;
font-family: 'Segoe UI', sans-serif !important;
}
</style>
</head>
<body>
Build_Site
2025-05-21 08:25:19 +00:00
⚠️ No response received from HTML API.
<div class="hero-9-wrapper"><section class="hero-9-section"><p class="hero-9-tagline">Tagline</p><h1 class="hero-9-heading">Medium length section heading goes here</h1><p class="hero-9-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p><div class="hero-9-button-group"><button class="hero-9-btn hero-9-outline">Button</button><button class="hero-9-btn hero-9-arrow">Button →</button></div><div class="hero-9-image-wrapper"><div class="hero-9-placeholder"></div></div></section></div>
Build_Site
2025-05-14 12:53:01 +00:00
</body>
</html> (see https://g.co/ng/security#xss)
Reference in New Issue Copy Permalink