Update.
This commit is contained in:
parent
71e1dec041
commit
155992f196
@ -13,9 +13,6 @@ def setup_routes(app):
|
|||||||
app.router.add_view("/forgot_password", ForgotPasswordView, name="forgot_password")
|
app.router.add_view("/forgot_password", ForgotPasswordView, name="forgot_password")
|
||||||
app.router.add_view("/reset_password/{token}", ResetPasswordView, name="reset_password")
|
app.router.add_view("/reset_password/{token}", ResetPasswordView, name="reset_password")
|
||||||
app.router.add_view("/", SiteView, name="index")
|
app.router.add_view("/", SiteView, name="index")
|
||||||
app.router.add_view("/solutions", SiteView, name="solutions")
|
|
||||||
app.router.add_view("/pricing", SiteView, name="pricing")
|
|
||||||
app.router.add_view("/security", SiteView, name="security")
|
|
||||||
app.router.add_view("/support", SiteView, name="support")
|
app.router.add_view("/support", SiteView, name="support")
|
||||||
app.router.add_view("/use_cases", SiteView, name="use_cases")
|
app.router.add_view("/use_cases", SiteView, name="use_cases")
|
||||||
app.router.add_view("/dashboard", SiteView, name="dashboard")
|
app.router.add_view("/dashboard", SiteView, name="dashboard")
|
||||||
|
|||||||
@ -1,24 +1,32 @@
|
|||||||
:root {
|
:root {
|
||||||
--primary-color: #0066FF; /* Vibrant blue */
|
--dutch-red: #AE1C28; /* Dutch flag red */
|
||||||
--accent-color: #00D4FF; /* Bright cyan accent */
|
--dutch-white: #FFFFFF; /* Dutch flag white */
|
||||||
--secondary-color: #F7FAFC; /* Very light blue-grey */
|
--dutch-blue: #21468B; /* Dutch flag blue */
|
||||||
--background-color: #FFFFFF; /* Pure white background */
|
--dutch-red-dark: #8B1621; /* Darker red for hover */
|
||||||
--text-color: #1A202C; /* Dark blue-grey */
|
--dutch-blue-dark: #1A3766; /* Darker blue for hover */
|
||||||
--light-text-color: #718096; /* Medium grey for descriptions */
|
|
||||||
--border-color: #E2E8F0; /* Light grey border */
|
--primary-color: var(--dutch-blue);
|
||||||
--card-background: #FFFFFF; /* White for cards */
|
--accent-color: var(--dutch-red);
|
||||||
--shadow-color: rgba(0, 0, 0, 0.05); /* Very subtle shadow */
|
--red-accent: var(--dutch-red);
|
||||||
|
--red-hover: var(--dutch-red-dark);
|
||||||
|
--secondary-color: #F7FAFC;
|
||||||
|
--background-color: var(--dutch-white);
|
||||||
|
--text-color: #1A202C;
|
||||||
|
--light-text-color: #4A5568;
|
||||||
|
--border-color: #E2E8F0;
|
||||||
|
--card-background: var(--dutch-white);
|
||||||
|
--shadow-color: rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
/* Button specific variables */
|
/* Button specific variables */
|
||||||
--btn-primary-bg: var(--primary-color);
|
--btn-primary-bg: var(--dutch-blue);
|
||||||
--btn-primary-text: #FFFFFF;
|
--btn-primary-text: var(--dutch-white);
|
||||||
--btn-primary-hover-bg: #0052CC; /* Darker blue */
|
--btn-primary-hover-bg: var(--dutch-blue-dark);
|
||||||
--btn-secondary-bg: #EDF2F7; /* Light grey */
|
--btn-secondary-bg: var(--dutch-red);
|
||||||
--btn-secondary-text: var(--text-color);
|
--btn-secondary-text: var(--dutch-white);
|
||||||
--btn-secondary-hover-bg: #E2E8F0; /* Darker grey */
|
--btn-secondary-hover-bg: var(--dutch-red-dark);
|
||||||
--btn-outline-border: var(--primary-color);
|
--btn-outline-border: var(--dutch-blue);
|
||||||
--btn-outline-text: var(--primary-color);
|
--btn-outline-text: var(--dutch-blue);
|
||||||
--btn-outline-hover-bg: rgba(0, 102, 255, 0.05); /* Very light blue hover */
|
--btn-outline-hover-bg: rgba(33, 70, 139, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
@ -125,8 +133,8 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-input:focus {
|
.search-input:focus {
|
||||||
box-shadow: 0 1px 6px rgba(32,33,36,.28);
|
box-shadow: 0 1px 6px rgba(174, 28, 40, 0.25);
|
||||||
border-color: var(--accent-color);
|
border-color: var(--dutch-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-buttons {
|
.search-buttons {
|
||||||
@ -136,10 +144,10 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.retoors-button {
|
.retoors-button {
|
||||||
background-color: var(--btn-secondary-bg);
|
background-color: #F0F0F0;
|
||||||
border: 1px solid var(--btn-secondary-bg);
|
border: 1px solid #D0D0D0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: var(--btn-secondary-text);
|
color: var(--text-color);
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
@ -150,18 +158,23 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.retoors-button:hover {
|
.retoors-button:hover {
|
||||||
background-color: var(--btn-secondary-hover-bg);
|
background-color: #E0E0E0;
|
||||||
border-color: var(--btn-secondary-hover-bg);
|
border-color: #B0B0B0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header and Navigation */
|
/* Header and Navigation */
|
||||||
.site-header {
|
.site-header {
|
||||||
background-color: #FFFFFF;
|
background: linear-gradient(to bottom, var(--dutch-red) 0%, var(--dutch-red) 33.33%, var(--dutch-white) 33.33%, var(--dutch-white) 66.66%, var(--dutch-blue) 66.66%, var(--dutch-blue) 100%);
|
||||||
|
background-size: 100% 6px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top;
|
||||||
|
background-color: var(--dutch-white);
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||||
|
padding-top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav {
|
.site-nav {
|
||||||
@ -217,7 +230,7 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-menu a:hover {
|
.nav-menu a:hover {
|
||||||
color: var(--primary-color);
|
color: var(--dutch-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-actions {
|
.nav-actions {
|
||||||
@ -238,7 +251,7 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
.nav-link:hover {
|
||||||
color: var(--primary-color);
|
color: var(--dutch-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main content area */
|
/* Main content area */
|
||||||
@ -344,7 +357,7 @@ main {
|
|||||||
background-color: var(--btn-primary-hover-bg);
|
background-color: var(--btn-primary-hover-bg);
|
||||||
border-color: var(--btn-primary-hover-bg);
|
border-color: var(--btn-primary-hover-bg);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
|
box-shadow: 0 4px 12px rgba(33, 70, 139, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline {
|
.btn-outline {
|
||||||
@ -366,14 +379,27 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
background-color: #dc3545;
|
background-color: var(--red-accent);
|
||||||
color: white;
|
color: white;
|
||||||
border-color: #dc3545;
|
border-color: var(--red-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger:hover {
|
.btn-danger:hover {
|
||||||
background-color: #c82333;
|
background-color: var(--red-hover);
|
||||||
border-color: #bd2130;
|
border-color: var(--red-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent {
|
||||||
|
background-color: var(--dutch-red);
|
||||||
|
color: var(--dutch-white);
|
||||||
|
border-color: var(--dutch-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent:hover {
|
||||||
|
background-color: var(--dutch-red-dark);
|
||||||
|
border-color: var(--dutch-red-dark);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(174, 28, 40, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
|
|||||||
@ -20,6 +20,8 @@
|
|||||||
max-height: calc(100vh - 120px);
|
max-height: calc(100vh - 120px);
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
border-top: 3px solid var(--dutch-red);
|
||||||
|
border-bottom: 3px solid var(--dutch-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-sidebar::-webkit-scrollbar {
|
.dashboard-sidebar::-webkit-scrollbar {
|
||||||
@ -53,8 +55,9 @@
|
|||||||
|
|
||||||
.sidebar-menu ul li a:hover,
|
.sidebar-menu ul li a:hover,
|
||||||
.sidebar-menu ul li a.active {
|
.sidebar-menu ul li a.active {
|
||||||
background-color: var(--accent-color);
|
background-color: var(--dutch-blue);
|
||||||
color: white;
|
color: var(--dutch-white);
|
||||||
|
border-left: 3px solid var(--dutch-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-menu ul li a img.icon {
|
.sidebar-menu ul li a img.icon {
|
||||||
@ -164,8 +167,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.file-search-bar:focus {
|
.file-search-bar:focus {
|
||||||
border-color: var(--accent-color);
|
border-color: var(--dutch-red);
|
||||||
box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.2);
|
box-shadow: 0 0 0 2px rgba(174, 28, 40, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-list-table {
|
.file-list-table {
|
||||||
|
|||||||
@ -2,7 +2,9 @@ footer {
|
|||||||
background-color: var(--card-background);
|
background-color: var(--card-background);
|
||||||
color: var(--light-text-color);
|
color: var(--light-text-color);
|
||||||
padding: 2rem 2rem 1rem 2rem;
|
padding: 2rem 2rem 1rem 2rem;
|
||||||
border-top: 1px solid var(--border-color);
|
border-top: 6px solid transparent;
|
||||||
|
border-image: linear-gradient(to right, var(--dutch-red) 0%, var(--dutch-red) 33.33%, var(--dutch-white) 33.33%, var(--dutch-white) 66.66%, var(--dutch-blue) 66.66%, var(--dutch-blue) 100%);
|
||||||
|
border-image-slice: 1;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
box-shadow: 0 -2px 4px var(--shadow-color);
|
box-shadow: 0 -2px 4px var(--shadow-color);
|
||||||
}
|
}
|
||||||
@ -44,7 +46,7 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer-section ul li a:hover {
|
.footer-section ul li a:hover {
|
||||||
color: var(--accent-color);
|
color: var(--dutch-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-bottom {
|
.footer-bottom {
|
||||||
|
|||||||
@ -1,9 +1,12 @@
|
|||||||
/* Hero Section */
|
/* Hero Section */
|
||||||
.hero-section {
|
.hero-section {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 100px 20px 80px;
|
padding: 80px 20px 60px;
|
||||||
background: linear-gradient(135deg, #F7FAFC 0%, #FFFFFF 100%);
|
background: linear-gradient(135deg, rgba(33, 70, 139, 0.03) 0%, var(--dutch-white) 100%);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
border-top: 4px solid transparent;
|
||||||
|
border-image: linear-gradient(to right, var(--dutch-red) 0%, var(--dutch-red) 33.33%, var(--dutch-white) 33.33%, var(--dutch-white) 66.66%, var(--dutch-blue) 66.66%, var(--dutch-blue) 100%);
|
||||||
|
border-image-slice: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-content {
|
.hero-content {
|
||||||
@ -12,19 +15,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-section h1 {
|
.hero-section h1 {
|
||||||
font-size: 3.75rem;
|
font-size: 3rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1rem;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
letter-spacing: -0.03em;
|
letter-spacing: -0.03em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-subtitle {
|
.hero-subtitle {
|
||||||
font-size: 1.25rem;
|
font-size: 1.125rem;
|
||||||
color: var(--light-text-color);
|
color: var(--light-text-color);
|
||||||
max-width: 700px;
|
max-width: 600px;
|
||||||
margin: 0 auto 2.5rem;
|
margin: 0 auto;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -86,7 +89,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.feature-icon {
|
.feature-icon {
|
||||||
color: var(--primary-color);
|
color: var(--dutch-red);
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@ -104,10 +107,140 @@
|
|||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Pricing Calculator Section */
|
||||||
|
.pricing-calculator {
|
||||||
|
padding: 80px 20px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calculator-content {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-calculator h2 {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calculator-subtitle {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--light-text-color);
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-display {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-value {
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dutch-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-unit {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--light-text-color);
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-container {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#storageSlider {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: linear-gradient(to right, var(--dutch-red), var(--dutch-blue));
|
||||||
|
outline: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#storageSlider::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--dutch-blue);
|
||||||
|
cursor: pointer;
|
||||||
|
border: 3px solid #FFFFFF;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#storageSlider::-moz-range-thumb {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--dutch-blue);
|
||||||
|
cursor: pointer;
|
||||||
|
border: 3px solid #FFFFFF;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-labels {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--light-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-display {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
padding: 2rem;
|
||||||
|
background: linear-gradient(135deg, rgba(33, 70, 139, 0.05) 0%, rgba(174, 28, 40, 0.05) 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px solid var(--dutch-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-amount {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.currency {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-value {
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dutch-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-period {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--light-text-color);
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-description {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--dutch-blue);
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-calculator .cta-btn {
|
||||||
|
padding: 1rem 3rem;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Use Cases Section */
|
/* Use Cases Section */
|
||||||
.use-cases-section {
|
.use-cases-section {
|
||||||
padding: 80px 20px;
|
padding: 80px 20px;
|
||||||
background: linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%);
|
background: linear-gradient(135deg, rgba(174, 28, 40, 0.02) 0%, rgba(33, 70, 139, 0.02) 100%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -135,7 +268,9 @@
|
|||||||
|
|
||||||
.use-case-card:hover {
|
.use-case-card:hover {
|
||||||
transform: translateY(-8px);
|
transform: translateY(-8px);
|
||||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
box-shadow: 0 8px 30px rgba(174, 28, 40, 0.15);
|
||||||
|
border-left: 4px solid var(--dutch-red);
|
||||||
|
border-right: 4px solid var(--dutch-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.use-case-icon {
|
.use-case-icon {
|
||||||
@ -160,9 +295,10 @@
|
|||||||
/* CTA Section */
|
/* CTA Section */
|
||||||
.cta-section {
|
.cta-section {
|
||||||
padding: 100px 20px;
|
padding: 100px 20px;
|
||||||
background: linear-gradient(135deg, var(--primary-color) 0%, #0052CC 100%);
|
background: linear-gradient(135deg, var(--dutch-blue) 0%, var(--dutch-blue-dark) 100%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: white;
|
color: var(--dutch-white);
|
||||||
|
border-top: 6px solid var(--dutch-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-content {
|
.cta-content {
|
||||||
@ -172,13 +308,13 @@
|
|||||||
|
|
||||||
.cta-section h2 {
|
.cta-section h2 {
|
||||||
font-size: 2.75rem;
|
font-size: 2.75rem;
|
||||||
color: white;
|
color: var(--dutch-white);
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-section p {
|
.cta-section p {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.95);
|
||||||
margin-bottom: 2.5rem;
|
margin-bottom: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -186,17 +322,20 @@
|
|||||||
padding: 1rem 2.5rem;
|
padding: 1rem 2.5rem;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
background-color: white;
|
background-color: var(--dutch-white);
|
||||||
color: var(--primary-color);
|
color: var(--dutch-blue);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
|
||||||
|
border: 2px solid var(--dutch-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-btn:hover {
|
.cta-btn:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 8px 20px rgba(174, 28, 40, 0.3);
|
||||||
|
background-color: var(--dutch-red);
|
||||||
|
color: var(--dutch-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive Design */
|
/* Responsive Design */
|
||||||
|
|||||||
@ -42,7 +42,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.forgot-password-link:hover {
|
.forgot-password-link:hover {
|
||||||
color: var(--accent-color);
|
color: var(--dutch-red);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -60,7 +60,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.create-account-link a:hover {
|
.create-account-link a:hover {
|
||||||
color: var(--accent-color);
|
color: var(--dutch-red);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,176 +0,0 @@
|
|||||||
/* Styles for the Pricing Page (pricing.html) */
|
|
||||||
|
|
||||||
.pricing-hero {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-hero h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-hero p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--light-text-color);
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-toggle {
|
|
||||||
display: inline-flex;
|
|
||||||
border-radius: 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-toggle .btn-toggle {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
background-color: var(--card-background);
|
|
||||||
color: var(--text-color);
|
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-toggle .btn-toggle.active {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-toggle .btn-toggle:hover:not(.active) {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-tiers {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto 60px auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card {
|
|
||||||
background-color: var(--card-background);
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 15px var(--shadow-color);
|
|
||||||
padding: 30px;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card.featured {
|
|
||||||
border: 2px solid var(--primary-color);
|
|
||||||
transform: scale(1.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card h3 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card .price {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card .price span {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--light-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card ul li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: var(--text-color);
|
|
||||||
font-size: 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card ul li::before {
|
|
||||||
content: '✓'; /* Checkmark icon */
|
|
||||||
color: var(--accent-color);
|
|
||||||
margin-right: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card .btn-primary {
|
|
||||||
margin-top: auto; /* Push button to the bottom */
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px 20px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-faq {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto 60px auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-faq h2 {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 2.5rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-item {
|
|
||||||
background-color: var(--card-background);
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 10px var(--shadow-color);
|
|
||||||
padding: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-item h3 {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-item p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--light-text-color);
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.pricing-hero h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
.pricing-hero p {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.pricing-tiers {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.pricing-card.featured {
|
|
||||||
transform: none; /* Remove scale on small screens */
|
|
||||||
}
|
|
||||||
.pricing-faq h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -44,16 +44,16 @@
|
|||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
accent-color: var(--accent-color); /* Style checkbox with accent color */
|
accent-color: var(--dutch-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.terms-checkbox a {
|
.terms-checkbox a {
|
||||||
color: var(--primary-color);
|
color: var(--dutch-blue);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terms-checkbox a:hover {
|
.terms-checkbox a:hover {
|
||||||
color: var(--accent-color);
|
color: var(--dutch-red);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -71,7 +71,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-link a:hover {
|
.login-link a:hover {
|
||||||
color: var(--accent-color);
|
color: var(--dutch-red);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,142 +0,0 @@
|
|||||||
/* Styles for the Security Page (security.html) */
|
|
||||||
|
|
||||||
.security-hero {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.security-hero h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.security-hero p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--light-text-color);
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.security-pillars {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto 60px auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pillar-card {
|
|
||||||
background-color: var(--card-background);
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 15px var(--shadow-color);
|
|
||||||
padding: 30px;
|
|
||||||
text-align: center;
|
|
||||||
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pillar-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pillar-card img.icon {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pillar-card h3 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pillar-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--light-text-color);
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.security-certifications {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.security-certifications h2 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cert-grid {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cert-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cert-item img.cert-logo {
|
|
||||||
height: 60px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cert-item p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.security-cta {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.security-cta h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.security-hero h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
.security-hero p {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.security-certifications h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
.security-cta h2 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.security-hero h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
.pillar-card {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.cert-grid {
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
.cert-item img.cert-logo {
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,135 +0,0 @@
|
|||||||
/* Styles for the Solutions Page (solutions.html) */
|
|
||||||
|
|
||||||
.solutions-hero {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-hero h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-hero p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--light-text-color);
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-sections {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto 60px auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card {
|
|
||||||
background-color: var(--card-background);
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 15px var(--shadow-color);
|
|
||||||
padding: 30px;
|
|
||||||
text-align: left;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card img.icon {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
align-self: center; /* Center the icon */
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card h2 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--light-text-color);
|
|
||||||
line-height: 1.6;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card ul li {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: var(--text-color);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card ul li::before {
|
|
||||||
content: '•'; /* Bullet point */
|
|
||||||
color: var(--accent-color);
|
|
||||||
margin-right: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.2em;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card .btn-primary {
|
|
||||||
margin-top: auto; /* Push button to the bottom */
|
|
||||||
align-self: center; /* Center the button */
|
|
||||||
padding: 10px 20px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-cta {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-cta h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.solutions-hero h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
.solutions-hero p {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.solution-sections {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.solutions-cta h2 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.solutions-hero h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
.solution-card {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -88,9 +88,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
</div>
|
</div>
|
||||||
<div class="quota-actions">
|
<div class="quota-actions">
|
||||||
<button class="btn-outline edit-quota-btn" data-email="${user.email}" data-quota="${user.storage_quota_gb}">Edit Quota</button>
|
<button class="btn-outline edit-quota-btn" data-email="${user.email}" data-quota="${user.storage_quota_gb}">Edit Quota</button>
|
||||||
<button class="btn-outline delete-user-btn" data-email="${user.email}">Delete User</button>
|
<button class="btn-outline delete-user-btn" data-email="${user.email}">🗑️</button>
|
||||||
<button class="btn-outline view-details-btn" data-email="${user.email}">View Details</button>
|
<button class="btn-outline view-details-btn" data-email="${user.email}">View Details</button>
|
||||||
${user.parent_email === null ? `<button class="btn-outline delete-team-btn" data-parent-email="${user.email}">Delete Team</button>` : ''}
|
${user.parent_email === null ? `<button class="btn-outline delete-team-btn" data-parent-email="${user.email}">🗑️</button>` : ''}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
userQuotaList.appendChild(quotaItem);
|
userQuotaList.appendChild(quotaItem);
|
||||||
|
|||||||
@ -34,8 +34,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
<div class="quota-actions">
|
<div class="quota-actions">
|
||||||
<a href="/users/${user.email}/details" class="btn-outline">View Details</a>
|
<a href="/users/${user.email}/details" class="btn-outline">View Details</a>
|
||||||
<a href="/users/${user.email}/edit" class="btn-outline">Edit Quota</a>
|
<a href="/users/${user.email}/edit" class="btn-outline">Edit Quota</a>
|
||||||
<button class="btn-outline delete-user-btn" data-email="${user.email}">Delete User</button>
|
<button class="btn-outline delete-user-btn" data-email="${user.email}">🗑️</button>
|
||||||
${user.parent_email === null ? `<button class="btn-outline delete-team-btn" data-parent-email="${user.email}">Delete Team</button>` : ''}
|
${user.parent_email === null ? `<button class="btn-outline delete-team-btn" data-parent-email="${user.email}">🗑️</button>` : ''}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
userQuotaList.appendChild(quotaItem);
|
userQuotaList.appendChild(quotaItem);
|
||||||
|
|||||||
@ -5,9 +5,6 @@
|
|||||||
<span class="brand-text">Retoor's</span>
|
<span class="brand-text">Retoor's</span>
|
||||||
</a>
|
</a>
|
||||||
<ul class="nav-menu">
|
<ul class="nav-menu">
|
||||||
<li><a href="/solutions">Solutions</a></li>
|
|
||||||
<li><a href="/pricing">Pricing</a></li>
|
|
||||||
<li><a href="/security">Security</a></li>
|
|
||||||
{% if request['user'] %}
|
{% if request['user'] %}
|
||||||
<li><a href="/files">My Files</a></li>
|
<li><a href="/files">My Files</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
@ -57,7 +57,7 @@
|
|||||||
<button class="btn-outline" onclick="alert('Download feature coming soon!')">Download</button>
|
<button class="btn-outline" onclick="alert('Download feature coming soon!')">Download</button>
|
||||||
<button class="btn-outline" onclick="alert('Upload feature coming soon!')">Upload</button>
|
<button class="btn-outline" onclick="alert('Upload feature coming soon!')">Upload</button>
|
||||||
<button class="btn-outline" onclick="alert('Share feature coming soon!')">Share</button>
|
<button class="btn-outline" onclick="alert('Share feature coming soon!')">Share</button>
|
||||||
<button class="btn-outline" onclick="alert('Delete feature coming soon!')">Delete</button>
|
<button class="btn-outline" onclick="alert('Delete feature coming soon!')">🗑️</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -71,7 +71,7 @@
|
|||||||
<button class="btn-small download-file-btn" data-path="{{ item.path }}">⬇️</button>
|
<button class="btn-small download-file-btn" data-path="{{ item.path }}">⬇️</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<button class="btn-small share-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🔗</button>
|
<button class="btn-small share-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🔗</button>
|
||||||
<button class="btn-small btn-danger remove-favorite-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">Remove</button>
|
<button class="btn-small btn-danger remove-favorite-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🗑️</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -111,7 +111,7 @@
|
|||||||
<p id="remove-favorite-message"></p>
|
<p id="remove-favorite-message"></p>
|
||||||
<form id="remove-favorite-form" method="post">
|
<form id="remove-favorite-form" method="post">
|
||||||
<div class="modal-actions">
|
<div class="modal-actions">
|
||||||
<button type="submit" class="btn-danger">Remove</button>
|
<button type="submit" class="btn-danger">🗑️</button>
|
||||||
<button type="button" class="btn-outline" onclick="closeModal('remove-favorite-modal')">Cancel</button>
|
<button type="button" class="btn-outline" onclick="closeModal('remove-favorite-modal')">Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
<button class="btn-outline" id="upload-btn">Upload</button>
|
<button class="btn-outline" id="upload-btn">Upload</button>
|
||||||
<button class="btn-outline" id="download-selected-btn" disabled>⬇️</button>
|
<button class="btn-outline" id="download-selected-btn" disabled>⬇️</button>
|
||||||
<button class="btn-outline" id="share-selected-btn" disabled>🔗</button>
|
<button class="btn-outline" id="share-selected-btn" disabled>🔗</button>
|
||||||
<button class="btn-outline" id="delete-selected-btn" disabled>Delete</button>
|
<button class="btn-outline" id="delete-selected-btn" disabled>🗑️</button>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block dashboard_content %}
|
{% block dashboard_content %}
|
||||||
@ -79,7 +79,7 @@
|
|||||||
<button class="btn-small download-file-btn" data-path="{{ item.path }}">⬇️</button>
|
<button class="btn-small download-file-btn" data-path="{{ item.path }}">⬇️</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<button class="btn-small share-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🔗</button>
|
<button class="btn-small share-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🔗</button>
|
||||||
<button class="btn-small btn-danger delete-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">Delete</button>
|
<button class="btn-small btn-danger delete-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🗑️</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -152,7 +152,7 @@
|
|||||||
<p id="delete-message"></p>
|
<p id="delete-message"></p>
|
||||||
<form id="delete-form" method="post">
|
<form id="delete-form" method="post">
|
||||||
<div class="modal-actions">
|
<div class="modal-actions">
|
||||||
<button type="submit" class="btn-danger">Delete</button>
|
<button type="submit" class="btn-danger">🗑️</button>
|
||||||
<button type="button" class="btn-outline" onclick="closeModal('delete-modal')">Cancel</button>
|
<button type="button" class="btn-outline" onclick="closeModal('delete-modal')">Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{% extends "layouts/base.html" %}
|
{% extends "layouts/base.html" %}
|
||||||
|
|
||||||
{% block title %}Secure Cloud Storage for Everyone - Retoor's Cloud Solutions{% endblock %}
|
{% block title %}Secure Cloud Storage - Retoor's Cloud Solutions{% endblock %}
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<link rel="stylesheet" href="/static/css/components/index.css">
|
<link rel="stylesheet" href="/static/css/components/index.css">
|
||||||
@ -8,116 +8,46 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<main>
|
<main>
|
||||||
{#
|
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<h1>Your files, safe and accessible everywhere</h1>
|
<h1>Secure Cloud Storage</h1>
|
||||||
<p class="hero-subtitle">Store, sync, and share your files with enterprise-grade security. Access from any device, anytime, anywhere.</p>
|
<p class="hero-subtitle">Store, sync, and share your files with enterprise-grade security.</p>
|
||||||
<div class="hero-ctas">
|
|
||||||
<a href="/register" class="btn-primary hero-btn">Get Started Free</a>
|
|
||||||
<a href="/pricing" class="btn-outline hero-btn">View Pricing</a>
|
|
||||||
</div>
|
|
||||||
<p class="hero-subtext">No credit card required • 10 GB free storage</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="features-section">
|
<section class="pricing-calculator">
|
||||||
<div class="features-header">
|
<div class="calculator-content">
|
||||||
<h2>Everything you need to work smarter</h2>
|
<h2>Calculate Your Price</h2>
|
||||||
<p>Powerful features designed to keep your data secure and accessible</p>
|
<p class="calculator-subtitle">Adjust the slider to find the perfect storage plan</p>
|
||||||
</div>
|
|
||||||
<div class="features-grid">
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Bank-level Security</h3>
|
|
||||||
<p>256-bit AES encryption and TLS 1.3 protocol ensure your files stay private and protected</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
|
||||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Access Anywhere</h3>
|
|
||||||
<p>Seamlessly sync across all your devices. Desktop, mobile, or web - your files are always there</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
||||||
<circle cx="9" cy="7" r="4"/>
|
|
||||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
|
||||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Easy Sharing</h3>
|
|
||||||
<p>Share files and folders with anyone using secure links. Control access with permissions</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>High Performance</h3>
|
|
||||||
<p>Lightning-fast upload and download speeds powered by enterprise infrastructure</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
|
||||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
|
|
||||||
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Auto Backup</h3>
|
|
||||||
<p>Never lose important files. Automatic backups keep multiple versions of your documents</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<circle cx="12" cy="12" r="10"/>
|
|
||||||
<polyline points="12 6 12 12 16 14"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>24/7 Support</h3>
|
|
||||||
<p>Expert support team ready to help whenever you need. Email, chat, and phone support available</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
#}
|
|
||||||
<section class="use-cases-section">
|
|
||||||
<h2>Storage for every need</h2>
|
|
||||||
<div class="use-cases-grid">
|
|
||||||
<div class="use-case-card">
|
|
||||||
<img src="/static/images/icon-families.svg" alt="Families Icon" class="use-case-icon">
|
|
||||||
<h3>For Families</h3>
|
|
||||||
<p>Keep precious memories safe. Share photos and videos with family members securely.</p>
|
|
||||||
</div>
|
|
||||||
<div class="use-case-card">
|
|
||||||
<img src="/static/images/icon-professionals.svg" alt="Professionals Icon" class="use-case-icon">
|
|
||||||
<h3>For Professionals</h3>
|
|
||||||
<p>Collaborate on projects, share documents, and work from anywhere with confidence.</p>
|
|
||||||
</div>
|
|
||||||
<div class="use-case-card">
|
|
||||||
<img src="/static/images/icon-students.svg" alt="Students Icon" class="use-case-icon">
|
|
||||||
<h3>For Students</h3>
|
|
||||||
<p>Store all your coursework, projects, and study materials in one secure place.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="cta-section">
|
<div class="storage-display">
|
||||||
<div class="cta-content">
|
<span class="storage-value" id="storageValue">100</span>
|
||||||
<h2>Start storing your files securely today</h2>
|
<span class="storage-unit">GB</span>
|
||||||
<p>Join thousands of users who trust Retoor's Cloud Solutions</p>
|
</div>
|
||||||
<a href="/register" class="btn-primary cta-btn">Create Free Account</a>
|
|
||||||
|
<div class="slider-container">
|
||||||
|
<input type="range" id="storageSlider" min="1" max="2000" value="100" step="1">
|
||||||
|
<div class="slider-labels">
|
||||||
|
<span>1 GB</span>
|
||||||
|
<span>2 TB</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-display">
|
||||||
|
<div class="price-amount">
|
||||||
|
<span class="currency">$</span>
|
||||||
|
<span class="price-value" id="priceValue">9</span>
|
||||||
|
<span class="price-period">/month</span>
|
||||||
|
</div>
|
||||||
|
<p class="price-description" id="planDescription">Personal Plan</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="/register" class="btn-primary cta-btn">Get Started</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block scripts %}
|
||||||
|
<script type="module" src="/static/js/components/pricing.js"></script>
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
@ -1,81 +0,0 @@
|
|||||||
{% extends "layouts/base.html" %}
|
|
||||||
|
|
||||||
{% block title %}Pricing - Retoor's Cloud Solutions{% endblock %}
|
|
||||||
|
|
||||||
{% block head %}
|
|
||||||
<link rel="stylesheet" href="/static/css/components/pricing.css">
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<main>
|
|
||||||
<section class="pricing-hero">
|
|
||||||
<h1>Simple, Transparent Pricing</h1>
|
|
||||||
<p>Find the perfect plan for your needs.</p>
|
|
||||||
<div class="pricing-toggle">
|
|
||||||
<button class="btn-toggle active" data-period="monthly">Monthly</button>
|
|
||||||
<button class="btn-toggle" data-period="annually">Annually</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="pricing-tiers">
|
|
||||||
<div class="pricing-card">
|
|
||||||
<h3>Free</h3>
|
|
||||||
<p class="price">$0<span>/month</span></p>
|
|
||||||
<ul>
|
|
||||||
<li>1 GB Storage</li>
|
|
||||||
<li>Basic Sync & Share</li>
|
|
||||||
<li>Standard Support</li>
|
|
||||||
</ul>
|
|
||||||
<a href="/register" class="btn-primary">Get Started</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pricing-card featured">
|
|
||||||
<h3>Personal</h3>
|
|
||||||
<p class="price">$9<span>/month</span></p>
|
|
||||||
<ul>
|
|
||||||
<li>100 GB Storage</li>
|
|
||||||
<li>Advanced Sync & Share</li>
|
|
||||||
<li>Priority Support</li>
|
|
||||||
<li>Version History</li>
|
|
||||||
</ul>
|
|
||||||
<a href="/register" class="btn-primary">Sign Up Now</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pricing-card">
|
|
||||||
<h3>Professional</h3>
|
|
||||||
<p class="price">$29<span>/month</span></p>
|
|
||||||
<ul>
|
|
||||||
<li>1 TB Storage</li>
|
|
||||||
<li>Team Collaboration</li>
|
|
||||||
<li>24/7 Premium Support</li>
|
|
||||||
<li>Advanced Security</li>
|
|
||||||
</ul>
|
|
||||||
<a href="/register" class="btn-primary">Sign Up Now</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pricing-card">
|
|
||||||
<h3>Business</h3>
|
|
||||||
<p class="price">$99<span>/month</span></p>
|
|
||||||
<ul>
|
|
||||||
<li>Unlimited Storage</li>
|
|
||||||
<li>Custom Solutions</li>
|
|
||||||
<li>Dedicated Account Manager</li>
|
|
||||||
<li>Advanced Analytics</li>
|
|
||||||
</ul>
|
|
||||||
<a href="/support" class="btn-primary">Contact Sales</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="pricing-faq">
|
|
||||||
<h2>Frequently Asked Questions</h2>
|
|
||||||
<div class="faq-item">
|
|
||||||
<h3>Can I change my plan later?</h3>
|
|
||||||
<p>Yes, you can upgrade or downgrade your plan at any time from your dashboard.</p>
|
|
||||||
</div>
|
|
||||||
<div class="faq-item">
|
|
||||||
<h3>What payment methods do you accept?</h3>
|
|
||||||
<p>We accept all major credit cards, PayPal, and bank transfers for annual plans.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
{% endblock %}
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
{% extends "layouts/base.html" %}
|
|
||||||
|
|
||||||
{% block title %}Security - Retoor's Cloud Solutions{% endblock %}
|
|
||||||
|
|
||||||
{% block head %}
|
|
||||||
<link rel="stylesheet" href="/static/css/components/security.css">
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<main>
|
|
||||||
<section class="security-hero">
|
|
||||||
<h1>Your Data, Our Priority. Uncompromising Security.</h1>
|
|
||||||
<p>At Retoor's Cloud Solutions, we understand the critical importance of data security and privacy. We employ industry-leading measures to ensure your information is always protected.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="security-pillars">
|
|
||||||
<div class="pillar-card">
|
|
||||||
<img src="/static/images/icon-professionals.svg" alt="Encryption Icon" class="icon">
|
|
||||||
<h3>Robust Encryption</h3>
|
|
||||||
<p>All your data is encrypted both in transit (TLS 1.2+) and at rest (AES-256), ensuring maximum confidentiality and integrity.</p>
|
|
||||||
</div>
|
|
||||||
<div class="pillar-card">
|
|
||||||
<img src="/static/images/icon-professionals.svg" alt="Access Control Icon" class="icon">
|
|
||||||
<h3>Advanced Access Control</h3>
|
|
||||||
<p>Implement granular permissions, multi-factor authentication (MFA), and strict access policies to keep your data safe from unauthorized access.</p>
|
|
||||||
</div>
|
|
||||||
<div class="pillar-card">
|
|
||||||
<img src="/static/images/icon-families.svg" alt="Privacy Icon" class="icon">
|
|
||||||
<h3>Unwavering Privacy</h3>
|
|
||||||
<p>We are committed to your privacy. Our policies are transparent, and we comply with global data protection regulations like GDPR and CCPA.</p>
|
|
||||||
</div>
|
|
||||||
<div class="pillar-card">
|
|
||||||
<img src="/static/images/icon-professionals.svg" alt="Infrastructure Icon" class="icon">
|
|
||||||
<h3>Secure Infrastructure</h3>
|
|
||||||
<p>Our data centers are physically secured, and our network is protected by advanced firewalls and intrusion detection systems, regularly audited for vulnerabilities.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="security-certifications">
|
|
||||||
<h2>Trust & Compliance</h2>
|
|
||||||
<div class="cert-grid">
|
|
||||||
<div class="cert-item">
|
|
||||||
<img src="/static/images/icon-professionals.svg" alt="ISO 27001 Certified" class="cert-logo">
|
|
||||||
<p>ISO 27001 Certified</p>
|
|
||||||
</div>
|
|
||||||
<div class="cert-item">
|
|
||||||
<img src="/static/images/icon-professionals.svg" alt="SOC 2 Compliant" class="cert-logo">
|
|
||||||
<p>SOC 2 Compliant</p>
|
|
||||||
</div>
|
|
||||||
<div class="cert-item">
|
|
||||||
<img src="/static/images/icon-families.svg" alt="GDPR Compliant" class="cert-logo">
|
|
||||||
<p>GDPR Compliant</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="security-cta">
|
|
||||||
<h2>Have More Questions About Security?</h2>
|
|
||||||
<a href="/support" class="btn-primary">Contact Support</a>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
{% endblock %}
|
|
||||||
@ -13,7 +13,7 @@
|
|||||||
<button class="btn-outline" id="upload-btn">Upload</button>
|
<button class="btn-outline" id="upload-btn">Upload</button>
|
||||||
<button class="btn-outline" id="download-selected-btn" disabled>⬇️</button>
|
<button class="btn-outline" id="download-selected-btn" disabled>⬇️</button>
|
||||||
<button class="btn-outline" id="share-selected-btn" disabled>🔗</button>
|
<button class="btn-outline" id="share-selected-btn" disabled>🔗</button>
|
||||||
<button class="btn-outline" id="delete-selected-btn" disabled>Delete</button>
|
<button class="btn-outline" id="delete-selected-btn" disabled>🗑️</button>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block dashboard_content %}
|
{% block dashboard_content %}
|
||||||
@ -73,7 +73,7 @@
|
|||||||
<button class="btn-small download-file-btn" data-path="{{ item.path }}">⬇️</button>
|
<button class="btn-small download-file-btn" data-path="{{ item.path }}">⬇️</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<button class="btn-small share-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🔗</button>
|
<button class="btn-small share-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🔗</button>
|
||||||
<button class="btn-small btn-danger delete-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">Delete</button>
|
<button class="btn-small btn-danger delete-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🗑️</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -144,7 +144,7 @@
|
|||||||
<p id="delete-message"></p>
|
<p id="delete-message"></p>
|
||||||
<form id="delete-form" method="post">
|
<form id="delete-form" method="post">
|
||||||
<div class="modal-actions">
|
<div class="modal-actions">
|
||||||
<button type="submit" class="btn-danger">Delete</button>
|
<button type="submit" class="btn-danger">🗑️</button>
|
||||||
<button type="button" class="btn-outline" onclick="closeModal('delete-modal')">Cancel</button>
|
<button type="button" class="btn-outline" onclick="closeModal('delete-modal')">Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -1,75 +0,0 @@
|
|||||||
{% extends "layouts/base.html" %}
|
|
||||||
|
|
||||||
{% block title %}Solutions - Retoor's Cloud Solutions{% endblock %}
|
|
||||||
|
|
||||||
{% block head %}
|
|
||||||
<link rel="stylesheet" href="/static/css/components/solutions.css">
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<main>
|
|
||||||
<section class="solutions-hero">
|
|
||||||
<h1>Powerful Cloud Solutions for Modern Needs</h1>
|
|
||||||
<p>Discover how Retoor's Cloud Solutions can empower your family, business, or academic pursuits with secure, accessible, and collaborative tools.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="solution-sections">
|
|
||||||
<div class="solution-card">
|
|
||||||
<img src="/static/images/icon-families.svg" alt="Family Storage Icon" class="icon">
|
|
||||||
<h2>Secure Family Storage</h2>
|
|
||||||
<p>Keep your family's precious memories safe and accessible. Securely store photos, videos, and important documents, and easily share them with loved ones.</p>
|
|
||||||
<ul>
|
|
||||||
<li>Private photo and video galleries</li>
|
|
||||||
<li>Shared family albums</li>
|
|
||||||
<li>Secure document vault for wills, deeds, etc.</li>
|
|
||||||
<li>Easy sharing with granular permissions</li>
|
|
||||||
</ul>
|
|
||||||
<a href="/pricing" class="btn-primary">See Family Plans</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="solution-card">
|
|
||||||
<img src="/static/images/icon-professionals.svg" alt="Business Collaboration Icon" class="icon">
|
|
||||||
<h2>Business Collaboration & Productivity</h2>
|
|
||||||
<p>Boost your team's efficiency with seamless collaboration tools. Share files, co-edit documents, and manage projects from anywhere, securely.</p>
|
|
||||||
<ul>
|
|
||||||
<li>Real-time document co-editing</li>
|
|
||||||
<li>Secure file sharing with external partners</li>
|
|
||||||
<li>Version control and recovery</li>
|
|
||||||
<li>Team workspaces and project folders</li>
|
|
||||||
</ul>
|
|
||||||
<a href="/pricing" class="btn-primary">Explore Business Solutions</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="solution-card">
|
|
||||||
<img src="/static/images/icon-students.svg" alt="Academic Storage Icon" class="icon">
|
|
||||||
<h2>Academic & Student Resources</h2>
|
|
||||||
<p>Organize your academic life with dedicated storage for projects, research, and notes. Access your study materials across all your devices.</p>
|
|
||||||
<ul>
|
|
||||||
<li>Centralized storage for assignments and research</li>
|
|
||||||
<li>Easy access from campus or home</li>
|
|
||||||
<li>Secure sharing for group projects</li>
|
|
||||||
<li>Integration with academic tools (coming soon)</li>
|
|
||||||
</ul>
|
|
||||||
<a href="/pricing" class="btn-primary">View Student Plans</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="solution-card">
|
|
||||||
<img src="/static/images/icon-families.svg" alt="Automated Backup & Recovery Icon" class="icon">
|
|
||||||
<h2>Automated Backup & Recovery</h2>
|
|
||||||
<p>Never lose a file again. Our automated backup solutions ensure your data is always safe, with easy recovery options for any scenario.</p>
|
|
||||||
<ul>
|
|
||||||
<li>Scheduled automatic backups</li>
|
|
||||||
<li>Point-in-time recovery</li>
|
|
||||||
<li>Disaster recovery planning</li>
|
|
||||||
<li>Secure, off-site data replication</li>
|
|
||||||
</ul>
|
|
||||||
<a href="/pricing" class="btn-primary">Learn About Backup</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="solutions-cta">
|
|
||||||
<h2>Ready to Explore Our Plans?</h2>
|
|
||||||
<a href="/pricing" class="btn-primary">View All Pricing</a>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
{% endblock %}
|
|
||||||
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
{% block dashboard_actions %}
|
{% block dashboard_actions %}
|
||||||
<button class="btn-outline" id="restore-selected-btn" disabled>Restore</button>
|
<button class="btn-outline" id="restore-selected-btn" disabled>Restore</button>
|
||||||
<button class="btn-outline" id="delete-selected-btn" disabled>Delete Permanently</button>
|
<button class="btn-outline" id="delete-selected-btn" disabled>🗑️</button>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block dashboard_content %}
|
{% block dashboard_content %}
|
||||||
@ -67,7 +67,7 @@
|
|||||||
<td>
|
<td>
|
||||||
<div class="action-buttons">
|
<div class="action-buttons">
|
||||||
<button class="btn-small restore-file-btn" data-path="{{ item.path }}">Restore</button>
|
<button class="btn-small restore-file-btn" data-path="{{ item.path }}">Restore</button>
|
||||||
<button class="btn-small btn-danger delete-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">Delete Permanently</button>
|
<button class="btn-small btn-danger delete-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🗑️</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -104,7 +104,7 @@
|
|||||||
<p id="delete-message"></p>
|
<p id="delete-message"></p>
|
||||||
<form id="delete-form" method="post">
|
<form id="delete-form" method="post">
|
||||||
<div class="modal-actions">
|
<div class="modal-actions">
|
||||||
<button type="submit" class="btn-danger">Delete Permanently</button>
|
<button type="submit" class="btn-danger">🗑️</button>
|
||||||
<button type="button" class="btn-outline" onclick="closeModal('delete-modal')">Cancel</button>
|
<button type="button" class="btn-outline" onclick="closeModal('delete-modal')">Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -44,7 +44,7 @@
|
|||||||
<div style="display: flex; gap: 10px; margin-top: 30px;">
|
<div style="display: flex; gap: 10px; margin-top: 30px;">
|
||||||
<a href="/users/{{ user_data.email }}/edit" class="btn-primary">Edit Quota</a>
|
<a href="/users/{{ user_data.email }}/edit" class="btn-primary">Edit Quota</a>
|
||||||
<form action="/users/{{ user_data.email }}/delete" method="post" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this user?');">
|
<form action="/users/{{ user_data.email }}/delete" method="post" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this user?');">
|
||||||
<button type="submit" class="btn-danger">Delete User</button>
|
<button type="submit" class="btn-danger">🗑️</button>
|
||||||
</form>
|
</form>
|
||||||
<a href="/users" class="btn-outline">Back to Users</a>
|
<a href="/users" class="btn-outline">Back to Users</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user