feature/90-implement-public-website-for-device #17

Merged
cayop merged 32 commits from feature/90-implement-public-website-for-device into main 2024-10-30 15:02:18 +00:00
1 changed files with 173 additions and 153 deletions
Showing only changes of commit 2636e80ece - Show all commits

View File

@ -1,173 +1,193 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ title }} - {{ object.type }}</title> <title>{{ title }} - {{ object.type }}</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
<style> <style>
body { body {
font-size: .875rem; font-size: 0.875rem;
background-color: #f8f9fa; background-color: #f8f9fa;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
} }
.custom-container { .custom-container {
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 30px; padding: 30px;
margin-top: 30px; margin-top: 30px;
flex-grow: 1; flex-grow: 1;
} }
.section-title { .section-title {
color: #7a9f4f; color: #7a9f4f;
border-bottom: 2px solid #9cc666; border-bottom: 2px solid #9cc666;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.5em; font-size: 1.5em;
} }
.info-row { .info-row {
margin-bottom: 10px; margin-bottom: 10px;
} }
.info-label { .info-label {
font-weight: bold; font-weight: bold;
color: #545f71; color: #545f71;
} }
.info-value { .info-value {
color: #333; color: #333;
} }
.component-card { .component-card {
background-color: #f8f9fa; background-color: #f8f9fa;
border-left: 4px solid #9cc666; border-left: 4px solid #9cc666;
margin-bottom: 15px; margin-bottom: 15px;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.component-card:hover { .component-card:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-2px); transform: translateY(-2px);
} }
.hash-value { .hash-value {
word-break: break-all; word-break: break-all;
background-color: #f3f3f3; background-color: #f3f3f3;
padding: 5px; padding: 5px;
border-radius: 4px; border-radius: 4px;
font-family: monospace; font-family: monospace;
font-size: 0.9em; font-size: 0.9em;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
} }
.card-title { .card-title {
color: #9cc666; color: #9cc666;
} }
.btn-primary { .btn-primary {
background-color: #9cc666; background-color: #9cc666;
border-color: #9cc666; border-color: #9cc666;
padding: 0.1em 2em; padding: 0.1em 2em;
font-weight: 700; font-weight: 700;
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #8ab555; background-color: #8ab555;
border-color: #8ab555; border-color: #8ab555;
} }
.btn-green-user { .btn-green-user {
background-color: #c7e3a3; background-color: #c7e3a3;
} }
.btn-grey { .btn-grey {
background-color: #f3f3f3; background-color: #f3f3f3;
} }
footer { footer {
background-color: #545f71; background-color: #545f71;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
margin-top: 20px; margin-top: 20px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container custom-container"> <div class="container custom-container">
<h1 class="text-center mb-4" style="color: #545f71;">{{ title }} - {{ object.type }}</h1> <h1 class="text-center mb-4" style="color: #545f71;">{{ title }} - {{ object.type }}</h1>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<h2 class="section-title">Details</h2> <h2 class="section-title">Details</h2>
<div class="info-row row"> <div class="info-row row">
<div class="col-md-4 info-label">Phid</div> <div class="col-md-4 info-label">Phid</div>
<div class="col-md-8 info-value"> <div class="col-md-8 info-value">
<div class="hash-value">{{ object.id }}</div> <div class="hash-value">{{ object.id }}</div>
</div>
</div>
<div class="info-row row">
<div class="col-md-4 info-label">Type</div>
<div class="col-md-8 info-value">{{ object.type }}</div>
</div>
{% if object.is_websnapshot %}
{% for k, v in object.last_user_evidence %}
<div class="info-row row">
<div class="col-md-4 info-label">{{ k }}</div>
<div class="col-md-8 info-value">{{ v|default:'' }}</div>
</div>
{% endfor %}
{% else %}
<div class="info-row row">
<div class="col-md-4 info-label">Manufacturer</div>
<div class="col-md-8 info-value">{{ object.manufacturer|default:'' }}</div>
</div>
<div class="info-row row">
<div class="col-md-4 info-label">Model</div>
<div class="col-md-8 info-value">{{ object.model|default:'' }}</div>
</div>
<div class="info-row row">
<div class="col-md-4 info-label">Serial Number</div>
<div class="col-md-8 info-value">{{ object.last_evidence.doc.device.serialNumber|default:'' }}</div>
</div>
{% endif %}
</div> </div>
</div>
<div class="info-row row">
<div class="col-md-4 info-label">Type</div>
<div class="col-md-8 info-value">{{ object.type }}</div>
</div>
<div class="col-lg-6"> {% if object.is_websnapshot %}
<h2 class="section-title">Identifiers</h2> {% for k, v in object.last_user_evidence %}
{% for chid in object.hids %} <div class="info-row row">
<div class="info-row"> <div class="col-md-4 info-label">{{ k }}</div>
<div class="hash-value">{{ chid|default:'' }}</div> <div class="col-md-8 info-value">{{ v|default:'' }}</div>
</div> </div>
{% endfor %}
</div>
</div>
<h2 class="section-title mt-5">Components</h2>
<div class="row">
{% for c in object.last_evidence.doc.components %}
<div class="col-md-6 mb-3">
<div class="card component-card">
<div class="card-body">
<h5 class="card-title">{{ c.type }}</h5>
<p class="card-text">
<strong>Manufacturer:</strong> {{ c.manufacturer }}<br>
<strong>Model:</strong> {{ c.model }}<br>
<strong>Serial Number:</strong> {{ c.serialNumber }}
</p>
<small class="text-muted">{{ evidence.created }}</small>
</div>
</div>
</div>
{% endfor %} {% endfor %}
{% else %}
<div class="info-row row">
<div class="col-md-4 info-label">Manufacturer</div>
<div class="col-md-8 info-value">{{ object.manufacturer|default:'' }}</div>
</div>
<div class="info-row row">
<div class="col-md-4 info-label">Model</div>
<div class="col-md-8 info-value">{{ object.model|default:'' }}</div>
</div>
<div class="info-row row">
<div class="col-md-4 info-label">Serial Number</div>
<div class="col-md-8 info-value">{{ object.last_evidence.doc.device.serialNumber|default:'' }}</div>
</div>
{% endif %}
</div> </div>
<h2 class="section-title mt-5">Last Evidence Snapshot</h2> <div class="col-lg-6">
<div class="card"> <h2 class="section-title">Identifiers</h2>
<div class="card-body"> {% for chid in object.hids %}
<p class="card-text">{{ snapshot }}</p> <div class="info-row">
<div class="hash-value">{{ chid|default:'' }}</div>
</div> </div>
{% endfor %}
</div> </div>
</div>
<h2 class="section-title mt-5">Components</h2>
<div class="row">
{% comment %}Iterates over legacy snapshot components{% endcomment %}
{% for component in object.last_evidence.doc.components %}
<div class="col-md-6 mb-3">
<div class="card component-card">
<div class="card-body">
<h5 class="card-title">{{ component.type }}</h5>
<p class="card-text">
<strong>Manufacturer:</strong> {{ component.manufacturer }}<br />
<strong>Model:</strong> {{ component.model }}<br />
<strong>Serial Number:</strong> {{ component.serialNumber }}
</p>
<small class="text-muted">{{ component.created }}</small>
</div>
</div>
</div>
{% endfor %}
{% comment %}Iterates over new snapshot components{% endcomment %}
{% for component in object.components %}
<div class="col-md-6 mb-3">
<div class="card component-card">
<div class="card-body">
<h5 class="card-title">{{ component.type }}</h5>
<p class="card-text">
{% for component_key, component_value in component.items %}
{% if component_key not in 'actions,type' %}
<strong>{{ component_key }}:</strong> {{ component_value }}<br />
{% endif %}
{% endfor %}
</p>
</div>
</div>
</div>
{% endfor %}
</div>
<h2 class="section-title mt-5">Last Evidence Snapshot</h2>
<div class="card">
<div class="card-body">
<p class="card-text">{{ snapshot }}</p>
</div>
</div>
</div> </div>
<footer> <footer>
<p>&copy; {% now "Y" %} eReuse. All rights reserved.</p> <p>
&copy;{% now 'Y' %}eReuse. All rights reserved.
</p>
</footer> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>