366 lines
No EOL
24 KiB
HTML
366 lines
No EOL
24 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% load contact_tags %}
|
|
|
|
{% block title %}Managed {{ offering.service.name }} on {{ offering.cloud_provider.name }}{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script defer src="{% static "js/price-calculator.js" %}"></script>
|
|
<link rel="stylesheet" type="text/css" href='{% static "css/price-calculator.css" %}'>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="section bg-primary-subtle">
|
|
<div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
|
|
<header class="section-primary__header text-center">
|
|
<h1 class="section-h1 fs-40 fs-lg-64 mb-24">Managed {{ offering.service.name }} on {{ offering.cloud_provider.name }}</h1>
|
|
<div class="text-gray-300 w-lg-37 mx-auto">
|
|
<p class="mb-0">Details about {{ offering.service.name }} managed by VSHN on {{ offering.cloud_provider.name }}</p>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
|
|
<div class="row">
|
|
<!-- Left Sidebar -->
|
|
<div class="col-12 col-lg-3">
|
|
<div class="pr-lg-6">
|
|
<!-- Logo -->
|
|
<div class="mb-40 border rounded-4 p-4 d-flex align-items-center justify-content-center" style="min-height: 160px;">
|
|
{% if offering.service.logo %}
|
|
<a href="{{ offering.service.get_absolute_url }}">
|
|
<img class="img-fluid w-100 w-lg-auto" src="{{ offering.service.logo.url }}"
|
|
alt="{{ offering.service.name }} logo" style="max-height: 120px; object-fit: contain;">
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-40">
|
|
<h3 class="fw-semibold mb-12">Managed by</h3>
|
|
<a href="https://www.vshn.ch/" target="_blank">
|
|
<img class="img-fluid" src="{% static "img/vshn-logo-wide.png" %}" alt="VSHN logo" style="max-height: 40px;">
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mb-40">
|
|
<h3 class="fw-semibold mb-12">Runs on</h3>
|
|
<a href="{{ offering.cloud_provider.get_absolute_url }}">
|
|
<img class="img-fluid" src="{{ offering.cloud_provider.logo.url }}" alt="{{ offering.cloud_provider.name }} logo" style="max-height: 40px;">
|
|
</a>
|
|
</div>
|
|
|
|
<!-- External Links for Offering -->
|
|
{% if offering.external_links.exists %}
|
|
<div class="mb-40">
|
|
<h3 class="fw-semibold mb-12">External Links</h3>
|
|
<ul class="list-unstyled space-y-12 fs-19 ps-0">
|
|
{% for link in offering.external_links.all %}
|
|
<li>
|
|
<a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ link.url }}" target="_blank">
|
|
<span class="pr-10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" fill="#9A63EC"/>
|
|
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" fill="#9A63EC"/>
|
|
</svg>
|
|
</span>
|
|
<span>{{ link.description }}</span>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Consulting Partners -->
|
|
{% if offering.service.consulting_partners.exists %}
|
|
<div class="mb-40">
|
|
<h3 class="fw-semibold mb-12">Consulting Partners</h3>
|
|
<p>If you want to get the most out of your managed {{ offering.service.name }}, our consulting partners can help you optimize your setup and application:</p>
|
|
<ul class="list-unstyled space-y-12 fs-19 ps-0">
|
|
{% for partner in offering.service.consulting_partners.all %}
|
|
<li>
|
|
<a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ partner.get_absolute_url }}">
|
|
<span class="pr-10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
|
|
<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" fill="#9A63EC"/>
|
|
</svg>
|
|
</span>
|
|
<span>{{ partner.name }}</span>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="col-12 col-lg-9">
|
|
<div class="pr-lg-32">
|
|
<!-- Header -->
|
|
<div class="pt-60 pb-lg-60">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<header>
|
|
<h2 class="fs-50 fw-semibold lh-1 mb-12"><a href="{{ offering.service.get_absolute_url }}" class="text-decoration-none">Managed {{ offering.service.name }}</a></h2>
|
|
</header>
|
|
<div class="fs-19 text-gray-500">
|
|
{% for category in offering.service.categories.all %}
|
|
<button class="btn btn-tertiary btn-sm mr-12">{{ category.full_path }}</button>
|
|
{% endfor %}
|
|
<button class="btn btn-tertiary btn-sm mr-12">Managed by VSHN</button>
|
|
<button class="btn btn-tertiary btn-sm mr-12">Running on {{ offering.cloud_provider.name }}</button>
|
|
</div>
|
|
|
|
{% if offering.short_description %}
|
|
<div class="fs-19 text-gray-500">
|
|
{{ offering.short_description|safe }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-lg-4 d-flex align-items-center justify-content-lg-end mt-4 mt-lg-0">
|
|
<a href="#plans" class="btn btn-primary btn-lg px-4 py-2 fw-semibold d-flex align-items-center">
|
|
<i class="bi bi-cart me-2"></i>Get It
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if offering.service.description %}
|
|
<!-- Service Overview -->
|
|
<div>
|
|
<h3 class="fs-24 fw-semibold lh-1 mb-12">Service Overview</h3>
|
|
<div class="fs-19 text-gray-500">
|
|
{{ offering.service.description|safe }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if offering.offer_description or offering.description %}
|
|
<!-- Offering Description -->
|
|
<div class="pt-40 pt-lg-34">
|
|
<h3 class="fs-24 fw-semibold lh-1 mb-12">Offering</h3>
|
|
{% if offering.description %}
|
|
<div class="fs-19 text-gray-500">
|
|
{{ offering.description|safe }}
|
|
</div>
|
|
{% endif %}
|
|
{% if offering.offer_description %}
|
|
<div class="fs-19 text-gray-500">
|
|
{{ offering.offer_description.get_full_text|safe }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Price Calculator -->
|
|
<div class="pt-24" id="plans" style="scroll-margin-top: 30px;">
|
|
{% if offering.msp == "VS" and pricing_data_by_group_and_service_level %}
|
|
<!-- Interactive Price Calculator -->
|
|
<h3 class="fs-24 fw-semibold lh-1 mb-12">Configure Your Plan</h3>
|
|
<div class="bg-light rounded-4 p-4 mb-4">
|
|
<div class="row">
|
|
<!-- Calculator Controls -->
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-4">Customize Your Configuration</h5>
|
|
|
|
<!-- CPU Slider -->
|
|
<div class="mb-4">
|
|
<label for="cpuRange" class="form-label d-flex justify-content-between">
|
|
<span>vCPUs</span>
|
|
<span class="fw-bold" id="cpuValue">2</span>
|
|
</label>
|
|
<input type="range" class="form-range" id="cpuRange" min="1" max="32" value="2" step="1">
|
|
<div class="d-flex justify-content-between text-muted small">
|
|
<span>1</span>
|
|
<span>32</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Memory Slider -->
|
|
<div class="mb-4">
|
|
<label for="memoryRange" class="form-label d-flex justify-content-between">
|
|
<span>Memory (GB)</span>
|
|
<span class="fw-bold" id="memoryValue">4</span>
|
|
</label>
|
|
<input type="range" class="form-range" id="memoryRange" min="1" max="128" value="4" step="1">
|
|
<div class="d-flex justify-content-between text-muted small">
|
|
<span>1 GB</span>
|
|
<span>128 GB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storage Slider -->
|
|
<div class="mb-4">
|
|
<label for="storageRange" class="form-label d-flex justify-content-between">
|
|
<span>Storage (GB)</span>
|
|
<span class="fw-bold" id="storageValue">20</span>
|
|
</label>
|
|
<input type="range" class="form-range" id="storageRange" min="10" max="1000" value="20" step="10">
|
|
<div class="d-flex justify-content-between text-muted small">
|
|
<span>10 GB</span>
|
|
<span>1000 GB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Level Selection -->
|
|
<div class="mb-4">
|
|
<label class="form-label">Service Level</label>
|
|
<div class="btn-group w-100" role="group" id="serviceLevelGroup">
|
|
<input type="radio" class="btn-check" name="serviceLevel" id="serviceLevelBestEffort" value="Best Effort" checked>
|
|
<label class="btn btn-outline-primary" for="serviceLevelBestEffort">Best Effort</label>
|
|
|
|
<input type="radio" class="btn-check" name="serviceLevel" id="serviceLevelGuaranteed" value="Guaranteed">
|
|
<label class="btn btn-outline-primary" for="serviceLevelGuaranteed">Guaranteed Availability</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Direct Plan Selection -->
|
|
<div class="mb-4">
|
|
<label for="planSelect" class="form-label">Or choose a specific plan</label>
|
|
<select class="form-select" id="planSelect">
|
|
<option value="">Auto-select best matching plan</option>
|
|
</select>
|
|
<small class="form-text text-muted">Selecting a plan will override the slider configuration</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Panel -->
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card h-100 border-primary">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary mb-4">Your Configuration</h5>
|
|
|
|
<!-- Plan Match Status -->
|
|
<div id="planMatchStatus" class="alert alert-info mb-3">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
<span>Finding best matching plan...</span>
|
|
</div>
|
|
|
|
<!-- Selected Plan Details -->
|
|
<div id="selectedPlanDetails" style="display: none;">
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="badge me-2" id="planGroup"></span>
|
|
<strong id="planName"></strong>
|
|
</div>
|
|
<small class="text-muted" id="planDescription"></small>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-6">
|
|
<small class="text-muted">vCPUs</small>
|
|
<div class="fw-bold" id="planCpus"></div>
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted">Memory</small>
|
|
<div class="fw-bold" id="planMemory"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pricing Breakdown -->
|
|
<div class="border-top pt-3">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Managed Service (incl. Compute)</span>
|
|
<span class="fw-bold">CHF <span id="managedServicePrice">0.00</span></span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Storage - <span id="storageAmount">20</span> GB</span>
|
|
<span class="fw-bold">CHF <span id="storagePrice">0.00</span></span>
|
|
</div>
|
|
<hr>
|
|
<div class="d-flex justify-content-between">
|
|
<span class="fs-5 fw-bold">Total Monthly Price</span>
|
|
<span class="fs-4 fw-bold text-primary">CHF <span id="totalPrice">0.00</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- No Match Found -->
|
|
<div id="noMatchFound" style="display: none;" class="alert alert-warning">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>
|
|
No matching plan found for your requirements. Please adjust your configuration.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Button -->
|
|
<div class="text-center mt-4">
|
|
<a href="#interest" class="btn btn-primary btn-lg px-5 py-3 fw-semibold">
|
|
<i class="bi bi-cart me-2"></i>Order This Configuration
|
|
</a>
|
|
</div>
|
|
{% elif offering.plans.all %}
|
|
<!-- Traditional Plans -->
|
|
<h3 class="fs-24 fw-semibold lh-1 mb-12">Available Plans</h3>
|
|
<div class="row">
|
|
{% for plan in offering.plans.all %}
|
|
<div class="col-12 col-lg-6 {% if not forloop.last %}mb-20 mb-lg-0{% endif %}">
|
|
<div class="bg-purple-50 rounded-16 border-all p-24">
|
|
<div class="bg-white border-all rounded-7 p-20 mb-20">
|
|
<h3 class="text-purple fs-22 fw-semibold lh-1-7 mb-0">{{ plan.name }}</h3>
|
|
{% if plan.plan_description %}
|
|
<div class="text-black mb-20">
|
|
{{ plan.plan_description.text|safe }}
|
|
</div>
|
|
{% endif %}
|
|
{% if plan.description %}
|
|
<div class="text-black mb-20">
|
|
{{ plan.description|safe }}
|
|
</div>
|
|
{% endif %}
|
|
{% if plan.pricing %}
|
|
<div class="text-black mb-20">
|
|
{{ plan.pricing|safe }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="col-12" id="interest" style="scroll-margin-top: 30px;">
|
|
<div class="alert alert-info">
|
|
<p>No plans available yet.</p>
|
|
<h4 class="mb-3">I'm interested in this offering</h4>
|
|
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<!-- No Plans Available -->
|
|
<div class="col-12" id="interest" style="scroll-margin-top: 30px;">
|
|
<h4 class="mb-3">I'm interested in this offering</h4>
|
|
{% load contact_tags %}
|
|
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if offering.plans.exists %}
|
|
<div class="pt-40">
|
|
<h4 class="fs-22 fw-semibold lh-1 mb-12">I'm interested in a plan</h4>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
{% embedded_contact_form source="Plan Order" service=offering.service offering_id=offering.id choices=offering.plans.all choice_label="Select a Plan" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %} |