2024-01-17 15:43:51 +00:00
|
|
|
{% extends "base.html" %} {% block content %}
|
2024-05-23 05:30:45 +00:00
|
|
|
<div class="container my-5">
|
|
|
|
<div class="header-section text-center mb-5">
|
|
|
|
<h1 class="display-4">{{ title }}</h1>
|
|
|
|
<p class="text-muted">
|
|
|
|
by
|
|
|
|
<a href="{{ author_link }}" class="text-decoration-none">{{ author }}</a>
|
|
|
|
in
|
|
|
|
<a href="{{ category_link }}" class="text-decoration-none"
|
|
|
|
>{{ category }}</a
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<a href="{{ channel_link }}" class="text-decoration-none"
|
|
|
|
>{{ channel }}</a
|
|
|
|
>
|
|
|
|
</p>
|
|
|
|
<p class="text-muted">
|
|
|
|
{{ views }} Views, {{ favorites }} Favorites, {{ comment_count }} Comments
|
|
|
|
</p>
|
|
|
|
</div>
|
2023-06-01 21:25:13 +00:00
|
|
|
|
2024-01-17 15:43:51 +00:00
|
|
|
{% for step in steps %}
|
2024-05-23 05:30:45 +00:00
|
|
|
<section class="step-section mb-5 p-4 rounded shadow-sm">
|
|
|
|
<div class="step-header mb-4">
|
|
|
|
<h2>{{ step.title }}</h2>
|
2024-01-31 11:50:19 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
{% if step.imgs %}
|
2024-05-23 05:30:45 +00:00
|
|
|
<div class="step-images row mb-4">
|
2024-01-17 15:43:51 +00:00
|
|
|
{% for step_img in step.imgs %}
|
2024-05-23 05:30:45 +00:00
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<img
|
|
|
|
src="{{ step_img.src }}"
|
|
|
|
alt="{{ step_img.alt }}"
|
|
|
|
class="img-fluid rounded shadow-sm"
|
|
|
|
/>
|
|
|
|
</div>
|
2024-01-17 15:43:51 +00:00
|
|
|
{% endfor %}
|
|
|
|
</div>
|
2024-05-23 05:30:45 +00:00
|
|
|
{% endif %} {% if step.videos %}
|
|
|
|
<div class="step-videos row mb-4">
|
2024-01-17 15:43:51 +00:00
|
|
|
{% for step_video in step.videos %}
|
2024-05-23 05:30:45 +00:00
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<video
|
|
|
|
src="{{ step_video }}"
|
|
|
|
controls
|
|
|
|
class="w-100 rounded shadow-sm"
|
|
|
|
></video>
|
|
|
|
</div>
|
2024-01-31 11:50:19 +00:00
|
|
|
{% endfor %}
|
|
|
|
</div>
|
2024-05-23 05:30:45 +00:00
|
|
|
{% endif %} {% if step.iframes %}
|
|
|
|
<div class="step-iframes row mb-4">
|
2024-01-31 11:50:19 +00:00
|
|
|
{% for step_iframe in step.iframes %}
|
2024-05-23 05:30:45 +00:00
|
|
|
<div class="col-md-8 mb-3">
|
|
|
|
<iframe
|
|
|
|
src="{{ step_iframe.src }}"
|
|
|
|
width="100%"
|
|
|
|
height="{{ step_iframe.height }}"
|
|
|
|
frameborder="0"
|
|
|
|
class="rounded shadow-sm"
|
|
|
|
></iframe>
|
|
|
|
</div>
|
2024-01-17 15:43:51 +00:00
|
|
|
{% endfor %}
|
|
|
|
</div>
|
2024-01-31 11:50:19 +00:00
|
|
|
{% endif %}
|
|
|
|
|
2024-05-23 05:30:45 +00:00
|
|
|
<div class="step-text mb-3">{{ step.text|safe }}</div>
|
|
|
|
|
2024-01-31 11:50:19 +00:00
|
|
|
{% if step.downloads %}
|
2024-05-23 05:30:45 +00:00
|
|
|
<div class="step-downloads row mb-4">
|
2024-01-31 11:50:19 +00:00
|
|
|
<div class="col-12">
|
|
|
|
<h3>Downloads</h3>
|
|
|
|
</div>
|
|
|
|
{% for step_download in step.downloads %}
|
2024-05-23 05:30:45 +00:00
|
|
|
<div class="col-md-2 mb-3">
|
|
|
|
<a href="{{ step_download.src }}" class="btn btn-primary w-100"
|
|
|
|
>{{ step_download.name }}</a
|
|
|
|
>
|
2024-01-31 11:50:19 +00:00
|
|
|
</div>
|
2024-01-17 15:43:51 +00:00
|
|
|
{% endfor %}
|
|
|
|
</div>
|
2024-05-23 05:30:45 +00:00
|
|
|
{% endif %}
|
|
|
|
</section>
|
2024-01-17 15:43:51 +00:00
|
|
|
{% endfor %}
|
|
|
|
</div>
|
|
|
|
{% endblock %}
|