Modify ungleich-sla page style

This commit is contained in:
amalelshihaby 2021-09-19 16:12:30 +02:00
parent de7a71dd70
commit d5d931d1b6
11 changed files with 3729 additions and 157 deletions

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
venv/ venv/
.DS_Store .DS_Store
.idea/ .idea/
.history

BIN
assets/u/image/product.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 MiB

File diff suppressed because it is too large Load Diff

View File

@ -9,3 +9,20 @@
.headlinebold { .headlinebold {
font-family: "Nimbus Sans L"; font-family: "Nimbus Sans L";
} }
.colored-table {
text-align: center;
background: #E5EDF1;
}
.colored-table td, .colored-table th {
border: 1px solid #fff;
}
.colored-table thead th {
border-bottom: 2px solid #fff;
}
.bg-offer {
background-color: #c0dcf3;
}

View File

@ -115,50 +115,55 @@ offer3_link: https://ungleich.ch/u/contact/
--- ---
description4: description4:
## Overview of the different SLA levels ### Overview of the different SLA levels
<div class="table-responsive mt-4">
<table> <table class="table colored-table table-bordered">
<tr> <thead>
<tr>
<th>Feature / SLA</th> <th>Feature / SLA</th>
<th>Standard SLA</th> <th>Standard SLA</th>
<th>Business SLA</th> <th>Business SLA</th>
<th>Professional SLA</th> <th>Professional SLA</th>
<th>Professional Plus SLA</th> <th>Professional Plus SLA</th>
<th>Critical Services SLA</th> <th>Critical Services SLA</th>
</tr> </tr>
<tr> </thead>
<th>Support via E-Mail</th> <tbody>
<td>yes</td> <tr>
<td>yes</td> <th scope="row">Support via E-Mail</th>
<td>yes</td> <td>yes</td>
<td>yes</td> <td>yes</td>
<td>yes</td> <td>yes</td>
</tr> <td>yes</td>
<tr> <td>yes</td>
<th>Guaranteed response time via E-Mail</th> </tr>
<td>no (best effort)</td> <tr>
<td><a href="#1-business-day">1 business day</a></td> <th scope="row">Guaranteed response time via E-Mail</th>
<td><a href="#4h-business-hours">4h during business hours</a></td> <td>no (best effort)</td>
<td><a href="#4h-extended-business-hours">4h during extended business hours</a></td> <td><a href="#1-business-day">1 business day</a></td>
<td><a href="#4h-24x7">4h every day</a></td> <td><a href="#4h-business-hours">4h during business hours</a></td>
</tr> <td><a href="#4h-extended-business-hours">4h during extended business hours</a></td>
<tr> <td><a href="#4h-24x7">4h every day</a></td>
<th>Support via telephone</th> </tr>
<td>best effort</td> <tr>
<td>best effort</td> <th scope="row">Support via telephone</th>
<td>yes, Mo-Fr 09:00-17:00</td> <td>best effort</td>
<td>yes, Mo-Fr 06:00-22:00</td> <td>best effort</td>
<td>yes, Mo-Su 00:00-23:59</td> <td>yes, Mo-Fr 09:00-17:00</td>
</tr> <td>yes, Mo-Fr 06:00-22:00</td>
<tr> <td>yes, Mo-Su 00:00-23:59</td>
<th>Pricing</th> </tr>
<td>Included for free</td> <tr>
<td>450</td> <th scope="row">Pricing</th>
<td>900</td> <td>Included for free</td>
<td>1800</td> <td>450</td>
<td>4200</td> <td>900</td>
</tr> <td>1800</td>
</table> <td>4200</td>
</tr>
</tbody>
</table>
</div>
All prices are excluding the [working hours](../ungleich-service-hour). All prices are excluding the [working hours](../ungleich-service-hour).
@ -185,32 +190,38 @@ available in Korean and French.
The request will be answered within the next business day. The table The request will be answered within the next business day. The table
below shows the details for every time of the week. below shows the details for every time of the week.
<table> <div class="table-responsive mt-4">
<tr> <table class="table colored-table table-bordered">
<thead>
<tr>
<th>Request received</th> <th>Request received</th>
<th>Answer guaranteed until</th> <th>Answer guaranteed until</th>
</tr> </tr>
<tr> </thead>
<td>Between Monday 09:00-17:00</th> <tbody>
<td>Tuesday 17:00</th> <tr>
</tr> <td>Between Monday 09:00-17:00</th>
<tr> <td>Tuesday 17:00</th>
<td>Between Tuesday 09:00-17:00</th> </tr>
<td>Wednesday 17:00</th> <tr>
</tr> <td>Between Tuesday 09:00-17:00</th>
<tr> <td>Wednesday 17:00</th>
<td>Between Wednesday 09:00-17:00</th> </tr>
<td>Thursday 17:00</th> <tr>
</tr> <td>Between Wednesday 09:00-17:00</th>
<tr> <td>Thursday 17:00</th>
<td>Between Thursday 09:00-17:00</th> </tr>
<td>Friday 17:00</th> <tr>
</tr> <td>Between Thursday 09:00-17:00</th>
<tr> <td>Friday 17:00</th>
<td>Between Friday 17:00 and Monday 09:00</th> </tr>
<td>Monday 17:00</th> <tr>
</tr> <td>Between Friday 17:00 and Monday 09:00</th>
</table> <td>Monday 17:00</th>
</tr>
</tbody>
</table>
</div>
If a work day is a Swiss national holiday it is treated as Friday to If a work day is a Swiss national holiday it is treated as Friday to
Monday period. Monday period.
@ -219,57 +230,69 @@ Monday period.
The request will be answered within the 4h during business hours. The The request will be answered within the 4h during business hours. The
table below shows the details: table below shows the details:
<div class="table-responsive mt-4">
<table> <table class="table colored-table table-bordered">
<tr> <thead>
<th>Request received</th> <tr>
<th>Answer guaranteed until</th> <th>Request received</th>
</tr> <th>Answer guaranteed until</th>
<tr> </tr>
<td>Between 09:00-13:00 on a work day</th> </thead>
<td>Between 13:00-17:00 on the same work day</th> <tbody>
</tr> <tr>
<tr> <td>Between 09:00-13:00 on a work day</td>
<td>Between 13:00-17:00 on a work day</th> <td>Between 13:00-17:00 on the same work day</td>
<td>Between 09:00-13:00 on the next work day</th> </tr>
</tr> <tr>
</table> <td>Between 13:00-17:00 on a work day</td>
<td>Between 09:00-13:00 on the next work day</td>
</tr>
</tbody>
</table>
</div>
### <a name="4h-extended-business-hours"></a> 4h during extended business hours ### <a name="4h-extended-business-hours"></a> 4h during extended business hours
The request will be answered within the 4h during business hours. The The request will be answered within the 4h during business hours. The
table below shows the details: table below shows the details:
<table> <div class="table-responsive mt-4">
<tr> <table class="table colored-table table-bordered">
<th>Request received</th> <thead>
<th>Answer guaranteed until</th> <tr>
</tr> <th>Request received</th>
<tr> <th>Answer guaranteed until</th>
<td>Between 09:00-13:00 on a work day</th> </tr>
<td>Between 13:00-17:00 on the same work day</th> </thead>
</tr> <tbody>
<tr> <tr>
<td>Between 13:00-17:00 on a work day</th> <td>Between 09:00-13:00 on a work day</th>
<td>Between 09:00-13:00 on the next work day</th> <td>Between 13:00-17:00 on the same work day</th>
</tr> </tr>
</table> <tr>
<td>Between 13:00-17:00 on a work day</th>
<td>Between 09:00-13:00 on the next work day</th>
</tr>
</tbody>
</table>
</div>
### <a name="4h-24x7"></a> Every day 4h response time ### <a name="4h-24x7"></a> Every day 4h response time
The request will be answered within the 4h independent of the day or The request will be answered within the 4h independent of the day or
time. time.
<div class="table-responsive mt-4">
<table> <table class="table colored-table table-bordered">
<tr> <tr>
<th>Request received</th> <th>Request received</th>
<th>Answer guaranteed until</th> <th>Answer guaranteed until</th>
</tr> </tr>
<tr> <tr>
<td>Between 00:00-23:59 every day</th> <td>Between 00:00-23:59 every day</th>
<td>Within 4 hours</th> <td>Within 4 hours</th>
</tr> </tr>
</table> </table>
</div>
## Related pages ## Related pages

View File

@ -1,4 +0,0 @@
The structure of templates should be:
- layout.html: valid for everything
- product.html: valid for all products

10
templates/README.md Normal file
View File

@ -0,0 +1,10 @@
Installation
```
$ pip install lektor
```
The structure of templates should be:
- layout.html: valid for everything
- product.html: valid for all products

View File

@ -15,6 +15,8 @@
<link rel="shortcut icon" href="/u/static/images/favicon.ico"/> <link rel="shortcut icon" href="/u/static/images/favicon.ico"/>
<link rel="stylesheet" href="/u/static/generic-header.css"/> <link rel="stylesheet" href="/u/static/generic-header.css"/>
<link rel="stylesheet" href="/u/static/css/theme.css">
<!-- Matomo --> <!-- Matomo -->
<script type="text/javascript"> <script type="text/javascript">
var _paq = window._paq || []; var _paq = window._paq || [];
@ -98,9 +100,9 @@
</ul> </ul>
<form class="form-inline my-2 my-lg-0" <form class="form-inline my-2 my-lg-0"
action="https://search.ungleich.ch/yacysearch.html" method="get"> action="https://search.ungleich.ch/yacysearch.html" method="get">
<input class="form-control mr-sm-2" type="search" <input class="form-control p-2 mr-sm-2" type="search"
placeholder="Search" name="query" aria-label="Search"> placeholder="Search" name="query" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success my-2 my-sm-0 btn-sm" type="submit">Search</button>
</form> </form>
</div> </div>
</nav> </nav>
@ -129,16 +131,15 @@
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light"> <section class="hero-wrap section shadow-md">
<div class="col-md-5 p-lg-5 mx-auto my-5"> <div class="hero-mask opacity-8 bg-primary"></div>
<h1 class="display-4 font-weight-normal">{{ self.title() }}</h1> <div class="hero-bg" style="background-image:url('/u/image/product.jpg');"></div>
<p class="lead font-weight-normal"> <div class="hero-content py-5">
{% block subtitle %}{% endblock %} <div class="container text-center">
</p> <h2 class="text-9 text-white">{{ self.title() }}</h2>
<p class="lead text-white mb-4">{% block subtitle %}{% endblock %}</p>
</div> </div>
<div class="product-device shadow-sm d-none d-md-block"></div> </section>
<div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
</div>
{% endif %} {% endif %}
{% block content %}{% endblock %} {% block content %}{% endblock %}

View File

@ -4,39 +4,50 @@
{% block content %} {% block content %}
{% if this.description1 %} {% if this.description1 %}
<div class="container"> <section class="section">
<div class="row mb-3"> <div class="container">
<div class="col-md-12"> <div class="row mb-3">
{{ this.description1 }} <div class="col-md-12">
{{ this.description1 }}
</div>
</div> </div>
</div> </div>
</div> </section>
{% endif %} {% endif %}
<div class="container"> <section class="section bg-light">
<div class="row mb-5"> <div class="container">
<div class="col-md-4"> <div class="row">
<h3 class="font-weight-normal">{{ this.feature1_title }}</h3> <div class="col-sm-4 col-lg-4 mb-5 mb-lg-0">
<p class="font-weight-normal">{{ this.feature1_text }}</p> <div class="featured-box">
</div> <h3>{{ this.feature1_title }}</h3>
<div class="col-md-4"> <p class="text-3">{{ this.feature1_text }}</p>
<h3 class="font-weight-normal">{{ this.feature2_title }}</h3> </div>
<p class="font-weight-normal">{{ this.feature2_text }}</p> </div>
</div> <div class="col-sm-4 col-lg-4 mb-5 mb-lg-0">
<div class="col-md-4"> <div class="featured-box">
<h3 class="font-weight-normal">{{ this.feature3_title }}</h3> <h3>{{ this.feature2_title }}</h3>
<p class="font-weight-normal">{{ this.feature3_text }}</p> <p class="text-3">{{ this.feature2_text }}</p>
</div>
</div>
<div class="col-sm-4 col-lg-4 mb-5 mb-sm-0">
<div class="featured-box">
<h3>{{ this.feature3_title }}</h3>
<p class="text-3">{{ this.feature3_text }}</p>
</div>
</div> </div>
</div> </div>
</div> </section>
{% if this.description2 %} {% if this.description2 %}
<div class="container"> <section class="section">
<div class="row mb-3"> <div class="container">
<div class="col-md-12"> <div class="row mb-3">
{{ this.description2 }} <div class="col-md-12">
{{ this.description2 }}
</div>
</div> </div>
</div> </div>
</div> </section>
{% endif %} {% endif %}
{% if this.content1_text %} {% if this.content1_text %}
@ -63,15 +74,16 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
<section class="section bg-offer">
<div class="container"> <div class="container">
<div class="row mb-3"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
{% if this.offer1_title and this.offer1_text and this.offer1_link %} {% if this.offer1_title and this.offer1_text and this.offer1_link %}
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ this.offer1_title }}</h5> <h5 class="card-title">{{ this.offer1_title }}</h5>
<p class="card-text">{{ this.offer1_text }}</p> <p class="card-text">{{ this.offer1_text }}</p>
<a href="{{ this.offer1_link }}" class="btn btn-primary">Order</a> <a href="{{ this.offer1_link }}" class="btn btn-primary btn-sm">Order</a>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -82,7 +94,7 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ this.offer2_title }}</h5> <h5 class="card-title">{{ this.offer2_title }}</h5>
<p class="card-text">{{ this.offer2_text }}</p> <p class="card-text">{{ this.offer2_text }}</p>
<a href="{{ this.offer2_link }}" class="btn btn-primary">Order</a> <a href="{{ this.offer2_link }}" class="btn btn-primary btn-sm">Order</a>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -93,22 +105,25 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ this.offer3_title }}</h5> <h5 class="card-title">{{ this.offer3_title }}</h5>
<p class="card-text">{{ this.offer3_text }}</p> <p class="card-text">{{ this.offer3_text }}</p>
<a href="{{ this.offer3_link }}" class="btn btn-primary">Order</a> <a href="{{ this.offer3_link }}" class="btn btn-primary btn-sm">Order</a>
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
<hr/> </section>
{% if this.description4 %} {% if this.description4 %}
<div class="container"> <section class="section">
<div class="row mb-3"> <div class="container">
<div class="col-md-12"> <div class="row mb-3">
{{ this.description4 }} <div class="col-md-12">
{{ this.description4 }}
</div>
</div> </div>
</div> </div>
</div> </section>
{% endif %} {% endif %}
{% if this.content2_text %} {% if this.content2_text %}
@ -159,7 +174,7 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ this.offer4_title }}</h5> <h5 class="card-title">{{ this.offer4_title }}</h5>
<p class="card-text">{{ this.offer4_text }}</p> <p class="card-text">{{ this.offer4_text }}</p>
<a href="{{ this.offer4_link }}" class="btn btn-primary">Order</a> <a href="{{ this.offer4_link }}" class="btn btn-primary btn-sm">Order</a>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -170,7 +185,7 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ this.offer5_title }}</h5> <h5 class="card-title">{{ this.offer5_title }}</h5>
<p class="card-text">{{ this.offer5_text }}</p> <p class="card-text">{{ this.offer5_text }}</p>
<a href="{{ this.offer5_link }}" class="btn btn-primary">Order</a> <a href="{{ this.offer5_link }}" class="btn btn-primary btn-sm">Order</a>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -181,7 +196,7 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ this.offer6_title }}</h5> <h5 class="card-title">{{ this.offer6_title }}</h5>
<p class="card-text">{{ this.offer6_text }}</p> <p class="card-text">{{ this.offer6_text }}</p>
<a href="{{ this.offer6_link }}" class="btn btn-primary">Order</a> <a href="{{ this.offer6_link }}" class="btn btn-primary btn-sm">Order</a>
</div> </div>
</div> </div>
{% endif %} {% endif %}

View File

@ -3,7 +3,7 @@
{% block subtitle %}{{ this.subtitle }}{% endblock %} {% block subtitle %}{{ this.subtitle }}{% endblock %}
{% block content %} {% block content %}
<div class="section">
<div class="container"> <div class="container">
{% for childpage in this.children %} {% for childpage in this.children %}
@ -63,4 +63,5 @@
</div> </div>
</div> </div>
</div> </div>
</div>
{% endblock %} {% endblock %}

View File

@ -3,4 +3,4 @@ name = ungleich: IPv6 - Linux - FOSS
url = https://ungleich.ch url = https://ungleich.ch
[packages] [packages]
lektor-atom = 0.3 lektor-atom = 0.4.0