74 lines
3.9 KiB
HTML
74 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Timeline</title>
|
|
<link
|
|
href="/static/css/soft-ui-dashboard-tailwind_2.css"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div class="w-full p-6 mx-auto">
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div
|
|
class="w-full max-w-full px-3 lg:flex-0 shrink-0 lg:w-6/12"
|
|
>
|
|
<div
|
|
class="relative flex flex-col min-w-0 break-words bg-white border-0 shadow-soft-xl rounded-2xl bg-clip-border"
|
|
>
|
|
<div
|
|
class="border-black/12.5 rounded-t-2xl border-b-0 border-solid p-6 pb-0"
|
|
>
|
|
<h6>Timeline with dotted line</h6>
|
|
</div>
|
|
<div class="flex-auto p-4">
|
|
<div
|
|
class="relative before:absolute before:left-4 before:top-0 before:h-full before:border-r-2 before:border-solid before:border-slate-100 before:content-[''] lg:before:-ml-px"
|
|
>
|
|
{% for event in timeline.events %}
|
|
<div class="relative mb-4">
|
|
<span
|
|
class="w-6.5 h-6.5 rounded-circle text-base z-1 absolute left-4 inline-flex -translate-x-1/2 items-center justify-center bg-white text-center font-semibold"
|
|
>
|
|
<i
|
|
class="relative text-transparent ni leading-none {{ event.icon }} bg-gradient-to-tl from-{{ event.icon_color_from }} to-{{ event.icon_color_to }} leading-pro z-1 bg-clip-text"
|
|
></i>
|
|
</span>
|
|
<div
|
|
class="ml-12 pt-1.4 max-w-120 relative -top-1.5 w-auto"
|
|
>
|
|
<h6
|
|
class="mb-0 font-semibold leading-normal text-sm text-slate-700"
|
|
>
|
|
{{ event.title }}
|
|
</h6>
|
|
<p
|
|
class="mt-1 mb-0 font-semibold leading-tight text-xs text-slate-400"
|
|
>
|
|
{{ event.date }} {{ event.time }}
|
|
</p>
|
|
<p
|
|
class="mt-4 mb-2 leading-normal text-sm text-slate-500"
|
|
>
|
|
{{ event.description }}
|
|
</p>
|
|
{% for tag in event.tags %}
|
|
<span
|
|
class="py-1.8 px-3 text-xxs rounded-1 bg-gradient-to-tl from-{{ event.icon_color_from }} to-{{ event.icon_color_to }} inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white"
|
|
>{{ tag }}</span
|
|
>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|