You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.1 KiB
142 lines
3.1 KiB
{% include "includes/site_nav.html" %} |
|
|
|
<div class="portal-wrap"> |
|
|
|
<h1>Services Here</h1> |
|
<p>Launch available OTB services.</p> |
|
<p>Logged in as: {{ client_name }}</p> |
|
{% block title %}Services Here{% endblock %} |
|
|
|
{% block content %} |
|
<section class="portal-hero"> |
|
<div class="portal-hero-copy"> |
|
<h1>Services Here</h1> |
|
<p class="portal-subtitle"> |
|
Launch available OTB services from one place. |
|
</p> |
|
<p class="portal-muted"> |
|
Logged in as: {{ client_name }} |
|
</p> |
|
</div> |
|
|
|
<div class="portal-hero-actions"> |
|
<a class="btn btn-secondary" href="{{ url_for('client_portal_dashboard') }}">Back to Dashboard</a> |
|
</div> |
|
</section> |
|
|
|
<section class="services-grid"> |
|
{% for service in services %} |
|
<article class="service-card status-{{ service.status }}"> |
|
<div class="service-card-header"> |
|
<div> |
|
<h2>{{ service.name }}</h2> |
|
<p>{{ service.summary }}</p> |
|
</div> |
|
<div class="service-badge-wrap"> |
|
{% if service.status == 'beta' %} |
|
<span class="service-badge service-badge-beta">Beta</span> |
|
{% elif service.status == 'coming_soon' %} |
|
<span class="service-badge service-badge-soon">Coming Soon</span> |
|
{% else %} |
|
<span class="service-badge">Available</span> |
|
{% endif %} |
|
</div> |
|
</div> |
|
|
|
<div class="service-card-actions"> |
|
{% if service.enabled %} |
|
<a class="btn btn-primary" href="{{ service.href }}">{{ service.button_text }}</a> |
|
{% else %} |
|
<button class="btn btn-disabled" type="button" disabled>{{ service.button_text }}</button> |
|
{% endif %} |
|
</div> |
|
</article> |
|
{% endfor %} |
|
</section> |
|
|
|
<style> |
|
.portal-hero { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-start; |
|
gap: 20px; |
|
margin-bottom: 28px; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.portal-hero h1 { |
|
margin: 0 0 8px 0; |
|
} |
|
|
|
.portal-subtitle { |
|
margin: 0 0 8px 0; |
|
opacity: 0.95; |
|
} |
|
|
|
.portal-muted { |
|
margin: 0; |
|
opacity: 0.75; |
|
font-size: 0.95rem; |
|
} |
|
|
|
.services-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); |
|
gap: 20px; |
|
} |
|
|
|
.service-card { |
|
border-radius: 18px; |
|
padding: 22px; |
|
border: 1px solid rgba(255,255,255,0.10); |
|
background: rgba(8, 18, 37, 0.72); |
|
box-shadow: 0 8px 24px rgba(0,0,0,0.18); |
|
} |
|
|
|
.service-card-header { |
|
display: flex; |
|
justify-content: space-between; |
|
gap: 16px; |
|
align-items: flex-start; |
|
} |
|
|
|
.service-card h2 { |
|
margin: 0 0 10px 0; |
|
font-size: 1.3rem; |
|
} |
|
|
|
.service-card p { |
|
margin: 0; |
|
line-height: 1.5; |
|
opacity: 0.92; |
|
} |
|
|
|
.service-card-actions { |
|
margin-top: 22px; |
|
} |
|
|
|
.service-badge { |
|
display: inline-block; |
|
padding: 6px 10px; |
|
border-radius: 999px; |
|
font-size: 0.82rem; |
|
font-weight: 700; |
|
white-space: nowrap; |
|
background: rgba(255,255,255,0.10); |
|
} |
|
|
|
.service-badge-beta { |
|
background: rgba(73, 192, 255, 0.18); |
|
} |
|
|
|
.service-badge-soon { |
|
background: rgba(255, 196, 73, 0.18); |
|
} |
|
|
|
.btn-disabled { |
|
opacity: 0.65; |
|
cursor: not-allowed; |
|
} |
|
</style> |
|
{% endblock %} |
|
</div>
|
|
|