mirror of
https://github.com/tabler/tabler.git
synced 2026-08-10 13:22:22 +04:00
Monorepo structure, remove Gulp, new build process (#2116)
This commit is contained in:
Paweł Kuna
GitHub
@@ -0,0 +1,5 @@
|
||||
<div class="card" style="height: 28rem">
|
||||
<div class="card-body card-body-scrollable card-body-scrollable-shadow">
|
||||
{% include "parts/activity.html" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
{% assign person = people[0] %}
|
||||
<form class="card card-md" action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-4">
|
||||
<h2 class="card-title">Account Locked</h2>
|
||||
<p class="text-secondary">Please enter your password to unlock your account</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
{% include "ui/avatar.html" person=person size="xl" class="mb-3" %}
|
||||
<h3>{{ person.full_name }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<input type="password" class="form-control" placeholder="Password…">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/button.html" color="primary" block=true icon="lock-open" text="Unlock" %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,53 @@
|
||||
{% assign article-id = include.article-id | default: 2 %}
|
||||
{% assign article = include.article | default: articles[article-id] %}
|
||||
{% assign type = include.type | default: 'none' %}
|
||||
{% assign author = people[article.author] %}
|
||||
{% assign liked = include.liked | default: false %}
|
||||
{% assign truncate = include.truncate | default: 100 %}
|
||||
{% assign avatar = article.author %}
|
||||
|
||||
{% capture card-content %}
|
||||
<h3 class="card-title"><a href="#">{{ article.title }}</a></h3>
|
||||
|
||||
<div class="text-secondary">{{ article.description | truncate: truncate }}</div>
|
||||
|
||||
<div class="d-flex align-items-center pt-4 mt-auto">
|
||||
{% include "ui/avatar.html" person-id=avatar %}
|
||||
<div class="ms-3">
|
||||
<a href="{{ page | relative }}/profile.html" class="text-body">{{ author.first_name }} {{ author.last_name }}</a>
|
||||
<div class="text-secondary">3 days ago</div>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<a href="#" class="icon d-none d-md-inline-block ms-3 {% if liked %}text-red{% else %}text-secondary{% endif %}">
|
||||
{% include "ui/icon.html" icon="heart" use-svg=true %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="card d-flex flex-column">
|
||||
|
||||
{% if type == 'aside' %}
|
||||
<div class="row row-0 flex-fill">
|
||||
<div class="col-md-3">
|
||||
<a href="#">
|
||||
<img src="{{ page | relative }}/static/photos/{{ photos[article.image].file }}" class="w-100 h-100 object-cover" alt="Card side image">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body">
|
||||
{{ card-content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% if type == 'image' %}
|
||||
<a href="#">
|
||||
<img class="card-img-top" src="{{ page | relative }}/static/photos/{{ photos[article.image].file }}" alt="{{ article.title | escape}}">
|
||||
</a>
|
||||
{% endif %}
|
||||
<div class="card-body d-flex flex-column">
|
||||
{{ card-content }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,5 @@
|
||||
{% assign width = include.width | default: 400 %}
|
||||
{% assign height = include.height | default: 200 %}
|
||||
<div class="card-body p-0{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100" %}
|
||||
</div>
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="card-group">
|
||||
{% include "cards/card.html" link=true class="text-center" body="This is first card" inactive=true %}
|
||||
{% include "cards/card.html" link=true class="text-center" body="This is second card" active=true %}
|
||||
{% include "cards/card.html" link=true class="text-center" body="This is third card" %}
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
{% assign img-id = include.img-id | default: 1 %}
|
||||
<div class="card">
|
||||
<div class="row row-0">
|
||||
<div class="col-3{% if include.right %} order-md-last{% endif %}">
|
||||
{% assign class = "w-100 h-100 object-cover" %}
|
||||
{% if include.right %}{% assign class = class | append: " card-img-end" %}{% else %}{% assign class = class | append: " card-img-start" %}{% endif %}
|
||||
{% include "ui/photo.html" id=img-id class=class %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body">
|
||||
{% if include.title %}
|
||||
<h3 class="card-title">{{ include.title }}</h3>
|
||||
{% endif %}
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit
|
||||
incidunt, iste, itaque minima
|
||||
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,39 @@
|
||||
{% assign tabs-count = include.count | default: 3 %}
|
||||
{% assign id = include.id | default: 'top' %}
|
||||
{% assign tabs = (1..tabs-count) %}
|
||||
|
||||
{% capture tabs-html %}
|
||||
<!-- Cards navigation -->
|
||||
<ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
|
||||
{% for tab in tabs %}
|
||||
<li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">Tab {{ tab }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs-content-html %}
|
||||
<div class="tab-content">
|
||||
{% for tab in tabs %}
|
||||
<!-- Content of card #{{ tab }} -->
|
||||
<div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #{{ tab }}</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<!-- Cards with tabs component -->
|
||||
<div class="card-tabs{% if include.borderless %} border-0{% endif %}">
|
||||
{% if include.bottom %}
|
||||
{{ tabs-content-html }}
|
||||
{{ tabs-html }}
|
||||
{% else %}
|
||||
{{ tabs-html }}
|
||||
{{ tabs-content-html }}
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,114 @@
|
||||
{% assign link = include.link | default: false %}
|
||||
<{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
|
||||
{% if include['empty'] %}
|
||||
{% include "ui/empty.html" illustration=true %}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% if include.img-top %}
|
||||
{% include "ui/photo.html" id=img-id class="card-img-top" ratio="21x9" id=7 %}
|
||||
{% endif %}
|
||||
|
||||
{% if include.status-top %}
|
||||
<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
|
||||
{% elsif include.status-bottom %}
|
||||
<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
|
||||
{% elsif include.status-left %}
|
||||
<div class="card-status-start bg-{{ include.status-left | default: 'blue' }}"></div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
|
||||
<div class="card-header">
|
||||
{% if include.header-tabs or include.header-pills %}
|
||||
{% include "ui/nav.html" header=true pills=include.header-pills tabs=include.header-tabs %}
|
||||
|
||||
{% else %}
|
||||
<h3 class="card-title">{{ include.header-title | default: 'Header title' }}</h3>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.alert %}
|
||||
<div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
|
||||
{{ include.alert }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="card-body">
|
||||
{% if include.title %}
|
||||
<h3 class="card-title">{{ include.title }}</h3>
|
||||
{% endif %}
|
||||
{% if include.subtitle %}
|
||||
<div class="card-subtitle">Card subtitle</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.body %}
|
||||
<p class="text-secondary">{{ include.body }}</p>
|
||||
{% else %}
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
|
||||
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
|
||||
{% endif %}
|
||||
|
||||
{% if include.button %}
|
||||
<div class="card-text">
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %}
|
||||
<!-- Card footer -->
|
||||
<div class="card-footer">
|
||||
{% if include.footer-elements %}
|
||||
<div class="row align-items-center">
|
||||
{% assign elements = include.footer-elements | split: "," %}
|
||||
|
||||
{% for element in elements %}
|
||||
{% assign el = element %}
|
||||
{% assign first_letter = el | slice: 0 %}
|
||||
{% if first_letter == ">" %}
|
||||
{% assign right = true %}
|
||||
{% assign el = element | slice: 1, element.size %}
|
||||
{% endif %}
|
||||
|
||||
<div class="col-auto{% if right %} ms-auto{% endif %}">
|
||||
{% case el %}
|
||||
{% when "switch" %}
|
||||
{% include "ui/form/check.html" switch=true empty=true checked=true class="m-0" %}
|
||||
{% when "check" %}
|
||||
{% include "ui/form/check.html" empty=true checked=true class="m-0" %}
|
||||
{% when "avatars" %}
|
||||
{% include "ui/avatar-list.html" stacked=true text="+3" %}
|
||||
{% when "more" %}
|
||||
<a href="#">More information</a>
|
||||
{% endcase %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elsif include.footer-button %}
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
|
||||
{% elsif include.footer-buttons %}
|
||||
<div class="d-flex">
|
||||
<a href="#" class="btn btn-link">Cancel</a>
|
||||
<a href="#" class="btn btn-primary ms-auto">Go somewhere</a>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
This is standard card footer
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.img-bottom %}
|
||||
|
||||
{% include "ui/photo.html" id=img-id class="card-img-bottom" ratio="21x9" id=11 %}
|
||||
{% endif %}
|
||||
|
||||
{% if include.progress %}
|
||||
{% include "ui/progress.html" class="progress-sm card-progress" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</{% if link %}a{% else %}div{% endif %}>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ include.title | default: 'Carousel' }}</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "ui/carousel.html" id=include.id indicators=include.indicators indicators-thumb=include.indicators-thumb indicators-thumb-ratio=include.indicators-thumb-ratio indicators-dot=include.indicators-dot controls=include.controls offset=include.offset fade=include.fade limit=include.limit indicators-vertical=include.indicators-vertical %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="subheader">Active users</div>
|
||||
<div class="ms-auto lh-1">
|
||||
{% include "parts/dropdown/days.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h1 mb-3 me-2">2,986</div>
|
||||
<div class="me-auto">
|
||||
{% include "ui/trending.html" value=4 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "ui/chart.html" chart-id="active-users" size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{ include.title }}</h4>
|
||||
|
||||
{% include "ui/chart-heatmap.html" chart-id=include.id id=include.id colors=include.colors scale=include.scale labels=include.labels no-shades=include.no-shades count=include.count color=include.color %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="subheader">New clients</div>
|
||||
<div class="ms-auto lh-1">
|
||||
{% include "parts/dropdown/days.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h1 mb-3 me-2">6,782</div>
|
||||
<div class="me-auto">
|
||||
{% include "ui/trending.html" value=0 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "ui/chart.html" chart-id="new-clients" size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="subheader">Revenue</div>
|
||||
<div class="ms-auto lh-1">
|
||||
{% include "parts/dropdown/days.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h1 mb-0 me-2">$4,300</div>
|
||||
<div class="me-auto">
|
||||
{% include "ui/trending.html" value=8 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/chart.html" chart-id="revenue-bg" size="sm" %}
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="subheader">Sales</div>
|
||||
<div class="ms-auto lh-1">
|
||||
{% include "parts/dropdown/days.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h1 mb-3">75%</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div>Conversion rate</div>
|
||||
<div class="ms-auto">{% include "ui/trending.html" value=7 %}</div>
|
||||
</div>
|
||||
{% include "ui/progress.html" value=75 color="primary" size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/card-dropdown.html" %}
|
||||
<h3 class="card-title">Total sales</h3>
|
||||
|
||||
{% include "ui/chart.html" chart-id="total-sales" height=15 %}
|
||||
{% include "ui/chart.html" chart-id="campaigns" height=15 %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with code</h3>
|
||||
</div>
|
||||
<div class="card-code">
|
||||
{% highlight scss %}
|
||||
.card-footer {
|
||||
background: transparent;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 1 2;
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,38 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Comments</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
{% for person in people limit: 3 %}
|
||||
<div class="d-flex{% unless forloop.last %} mb-5{% endunless %}">
|
||||
<div class="me-4">
|
||||
{% include "ui/avatar.html" person=person status="green" %}
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div class="d-flex mt-n1">
|
||||
<h5 class="m-0">
|
||||
{{ person.full_name }}
|
||||
</h5>
|
||||
<div class="ms-auto small text-secondary">{{ forloop.index | random_date_ago: 23 | timeago }}</div>
|
||||
</div>
|
||||
<p class="mb-2">
|
||||
{{ comments[forloop.index] }}
|
||||
</p>
|
||||
<div class="small">
|
||||
<span class="text-success me-1">+{{ forloop.index | random_number: 20, 50 }}</span>
|
||||
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Vote Up">{% include "ui/icon.html" icon="chevron-up" %}</a>
|
||||
<a href="#" class="me-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Vote Down">
|
||||
{% include "ui/icon.html" icon="chevron-down" %}
|
||||
</a>
|
||||
<span class="me-1">·</span>
|
||||
<a href="#" class="me-1 text-secondary">Reply</a>
|
||||
<span class="me-1">·</span>
|
||||
<a href="#" class="text-secondary">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Company Employees</h4>
|
||||
</div>
|
||||
<table class="table card-table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Name</th>
|
||||
<th>Department</th>
|
||||
<th colspan="2" class="w-25">Progress</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{% for person in people limit: 5 offset: 20 %}
|
||||
<tr>
|
||||
<td class="w-1">{% include "ui/avatar.html" src=person.photo %}</td>
|
||||
<td><a href="#" class="text-reset">{{ person.full_name }}</a></td>
|
||||
<td>{{ person.department }}</td>
|
||||
<td class="w-1 pe-0">{{ forloop.index | random_number: 30, 90 }}%</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-{{ forloop.index | random_number: 30, 90 | number_color }}" role="progressbar" style="width: {{ forloop.index | random_number: 30, 90 }}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><a href="{{ page | relative }}" class="text-secondary">{% include "ui/icon.html" icon="dots" %}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,204 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center mb-4">
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-lg rounded d-block"
|
||||
style="background-image: url(https://logo.clearbit.com/amazon.com?size=100)"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="h3 m-0 fw-normal">amazon.com</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Name</h5>
|
||||
<div class="text-secondary-dark">Amazon.com</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Legal Name</h5>
|
||||
<div class="text-secondary-dark">Amazon.com, Inc.</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Ticker</h5>
|
||||
<div class="text-secondary-dark">AMZN</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Founded Year</h5>
|
||||
<div class="text-secondary-dark">1995</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Type</h5>
|
||||
<div class="text-secondary-dark">Public</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Employees</h5>
|
||||
<div class="text-secondary-dark">341,400</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Annual Revenue</h5>
|
||||
<div class="text-secondary-dark">$135B</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row gutters-lg">
|
||||
<div class="col-7">
|
||||
<div class="row mb-5">
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Location</h5>
|
||||
<div class="text-secondary-dark">207 Boren Ave, Seattle, WA 98109, USA</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Timezone</h5>
|
||||
<div class="text-secondary-dark">America/Los_Angeles</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="map-static"
|
||||
style="background-image: url(https://maps.googleapis.com/maps/api/staticmap?center=47.620057,-122.3362675&size=640x120&scale=2&zoom=13&markers=color:blue|47.620057,-122.3362675&key={{ site.googleMapsKey }});"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h5 class="mb-4">Recent News</h5>
|
||||
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-5">
|
||||
<a href="#">Amazons Super Bowl commercial might contain a clue about where HQ2 will be</a>
|
||||
<p class="mb-1">Eagleeyed viewers of the Super Bowl spotted something most people missed in Amazons
|
||||
commercial for its Alexa voice assistant Before Alexa lo…</p>
|
||||
<div class="row">
|
||||
<div class="col text-secondary">businessinsider.com</div>
|
||||
<div class="col text-secondary text-end">2 days ago</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-5">
|
||||
<a href="#">Holiday performance propels Amazon to stellar quarter results</a>
|
||||
<p>This story was delivered to BI Intelligence ECommerce Briefing subscribers hours before appearing
|
||||
on Business Insider To be the first to kno…</p>
|
||||
<div class="row">
|
||||
<div class="col text-secondary">businessinsider.com</div>
|
||||
<div class="col text-secondary text-end">2 days ago</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-5">
|
||||
<a href="#">12 highpaying jobs Amazons HQ2 will likely bring to its future city</a>
|
||||
<p class="mb-1">These Amazon jobs all earn over 90000tanleimagesShutterstock</p>
|
||||
<div class="row">
|
||||
<div class="col text-secondary">businessinsider.com</div>
|
||||
<div class="col text-secondary text-end" title="2018-02-02T12:32:00.000Z">4 days ago</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-5">
|
||||
<a href="http://businessinsider.com/amazon-dominates-online-shopping-2018-2">Amazon is tightening its
|
||||
iron grip online</a>
|
||||
<p class="mb-1">ReutersLindsey Wasson To say Amazon is doing well would be an understatement In its
|
||||
latest earnings report the company reported 6045 billion…</p>
|
||||
<div class="row">
|
||||
<div class="col text-secondary">businessinsider.com</div>
|
||||
<div class="col text-secondary text-end" title="2018-02-02T10:45:00.000Z">5 days ago</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="http://businessinsider.com/tough-amazon-interview-questions-you-should-be-prepared-to-answer-2018-1">21
|
||||
tough interview questions you may have to answer if you want to work at Amazon</a>
|
||||
<p class="mb-1">How would you answer Amazon is a peculiar company whats peculiar about youAlex
|
||||
WongGetty Images</p>
|
||||
<div class="row">
|
||||
<div class="col text-secondary">businessinsider.com</div>
|
||||
<div class="col text-secondary text-end" title="2018-02-01T11:25:00.000Z">6 days ago</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<ul class="list-unstyled list-separated">
|
||||
<li>
|
||||
<h5>Description</h5>
|
||||
<div class="text-secondary-dark">
|
||||
Online shopping from the earth's biggest selection of books, magazines, music, DVDs, videos,
|
||||
electronics, computers, software, apparel & acc…
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5>Tags</h5>
|
||||
<div>
|
||||
<span class="tag">E-Commerce & Marketplaces</span>
|
||||
<span class="tag">E-commerce</span>
|
||||
<span class="tag">B2C</span>
|
||||
<span class="tag">Internet</span>
|
||||
<span class="tag">Consumer Discretionary</span>
|
||||
<span class="tag">Technology</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">Industry</h5>
|
||||
<div>Internet Software & Services</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">Sector</h5>
|
||||
<div>Information Technology</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">SIC Code</h5>
|
||||
<div>59</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">NAICS Code</h5>
|
||||
<div>45</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">EIN</h5>
|
||||
<div>911646860</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">Technologies</h5>
|
||||
<div>
|
||||
<span class="tag text-uppercase">amazon associates</span>
|
||||
<span class="tag text-uppercase">amazon ses</span>
|
||||
<span class="tag text-uppercase">dyn dns</span>
|
||||
<span class="tag text-uppercase">omniture adobe analytics</span>
|
||||
<span class="tag text-uppercase">typekit by adobe</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">Alexa US Rank</h5>
|
||||
<div>5</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">Alexa Global Rank</h5>
|
||||
<div>10</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">Fiscal Year End</h5>
|
||||
<div>End of December</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">Phone</h5>
|
||||
<div>
|
||||
<a href="tel:+1 206-266-1000">+1 206-266-1000</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">Crunchbase</h5>
|
||||
<div>
|
||||
<a href="#">crunchbase.com/organization/amazon</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">Twitter</h5>
|
||||
<div>
|
||||
<a href="#">twitter.com/amazon</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h5 class="mb-1">Facebook</h5>
|
||||
<div>
|
||||
<a href="#">facebook.com/amazon</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,33 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Configuration
|
||||
</h3>
|
||||
<div class="card-actions">
|
||||
<a href="#">
|
||||
Edit configuration{% include "ui/icon.html" icon="edit" class="ms-1" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<dl class="row">
|
||||
<dt class="col-5">Date:</dt>
|
||||
<dd class="col-7">2020-01-05 16:42:29 UTC</dd>
|
||||
|
||||
<dt class="col-5">Account:</dt>
|
||||
<dd class="col-7">tabler</dd>
|
||||
|
||||
<dt class="col-5">Location:</dt>
|
||||
<dd class="col-7">{% include "ui/flag.html" flag="pl" %} Poland</dd>
|
||||
|
||||
<dt class="col-5">IP Address:</dt>
|
||||
<dd class="col-7">46.113.11.3</dd>
|
||||
|
||||
<dt class="col-5">Operating system:</dt>
|
||||
<dd class="col-7">OS X 10.15.2 64-bit</dd>
|
||||
|
||||
<dt class="col-5">Browser:</dt>
|
||||
<dd class="col-7">Chrome</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,47 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Card number</div>
|
||||
{% include "ui/form/input-mask.html" mask="0000 0000 0000 0000" visible=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Card name</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Expiration date</label>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<select class="form-select">
|
||||
{% for month in (1..12) %}
|
||||
<option value="{{ month }}">{{ month }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="form-select">
|
||||
{% for year in (2020..2030) %}
|
||||
<option value="{{ year }}">{{ year }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<div class="form-label">CVV</div>
|
||||
<input type="number" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
{% include "ui/button.html" text="Pay now" color="primary" block=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,45 @@
|
||||
<div class="card">
|
||||
<div class="card-header border-0">
|
||||
<div class="card-title">Development activity</div>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<div class="position-absolute top-0 left-0 px-3 mt-1 w-75">
|
||||
<div class="row g-2">
|
||||
<div class="col-auto">{% include "ui/chart-sparkline.html" id="activity" percentage=35 type="donut" %}</div>
|
||||
<div class="col">
|
||||
<div>Today's Earning: $4,262.40</div>
|
||||
<div class="text-secondary">{% include "ui/icon.html" icon="trending-up" color="green" class="icon-inline" %} +5% more than yesterday</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/chart.html" chart-id="development-activity" height=12 %}
|
||||
</div>
|
||||
|
||||
<div class="card-table table-responsive">
|
||||
<table class="table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Commit</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for commit in commits limit: 5 %}
|
||||
<tr>
|
||||
<td class="w-1">
|
||||
{% include "ui/avatar.html" person-id=forloop.index size="sm" %}
|
||||
</td>
|
||||
<td class="td-truncate">
|
||||
<div class="text-truncate">
|
||||
{{ commit.description }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-nowrap text-secondary">{{ commit.date | date_to_string }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
<form class="card card-md" action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-center mb-4">Forgot password</h2>
|
||||
|
||||
<p class="text-secondary mb-4">Enter your email address and your password will be reset and emailed to you.</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
{% include "ui/button.html" text="Send me new password" block=true color="primary" icon="mail" %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="text-center text-secondary mt-3">
|
||||
Forget it, <a href="{{ page | relative }}/sign-in.html">send me back</a> to the sign in screen.
|
||||
</div>
|
||||
@@ -0,0 +1,71 @@
|
||||
{% assign horizontal = include.horizontal | default: false %}
|
||||
<form class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3{% if horizontal %} row{% endif %}">
|
||||
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Email address</label>
|
||||
<div{% if horizontal %} class="col"{% endif %}>
|
||||
<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small class="form-hint">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3{% if horizontal %} row{% endif %}">
|
||||
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Password</label>
|
||||
<div{% if horizontal %} class="col"{% endif %}>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
<small class="form-hint">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain
|
||||
spaces, special characters, or emoji.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3{% if horizontal %} row{% endif %}">
|
||||
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %}">Select</label>
|
||||
<div{% if horizontal %} class="col"{% endif %}>
|
||||
<select class="form-select">
|
||||
<option>Option 1</option>
|
||||
<optgroup label="Optgroup 1">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</optgroup>
|
||||
<option>Option 2</option>
|
||||
<optgroup label="Optgroup 2">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</optgroup>
|
||||
<optgroup label="Optgroup 3">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</optgroup>
|
||||
<option>Option 3</option>
|
||||
<option>Option 4</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="{% if horizontal %}row{% else %}mb-3{% endif %}">
|
||||
<label class="{% if horizontal %}col-3 col-form-label pt-0{% else %}form-label{% endif %}">Checkboxes</label>
|
||||
<div{% if horizontal %} class="col"{% endif %}>
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox" checked>
|
||||
<span class="form-check-label">Option 1</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<span class="form-check-label">Option 2</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox" disabled>
|
||||
<span class="form-check-label">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,28 @@
|
||||
<div class="card card-sm">
|
||||
<a href="#" class="d-block"><img src="{{ page | relative }}/static/photos/{{ photo.file }}" class="card-img-top"></a>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
{% include "ui/avatar.html" person=include.person class="me-3 rounded" %}
|
||||
<div>
|
||||
<div>{{ include.person.full_name }}</div>
|
||||
<div class="text-secondary">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
|
||||
</div>
|
||||
{% unless include.hide-likes %}
|
||||
<div class="ms-auto">
|
||||
<a href="#" class="text-secondary">
|
||||
{% include "ui/icon.html" icon="eye" %}
|
||||
{{ forloop.index | random_number: 300, 600 }}
|
||||
</a>
|
||||
<a href="#" class="ms-3 text-secondary">
|
||||
{% assign class = false %}
|
||||
{% if forloop.index > 2 and forloop.index < 9 or forloop.index == 10 %}
|
||||
{% assign class = "icon-filled text-red" %}
|
||||
{% endif %}
|
||||
{% include "ui/icon.html" icon="heart" class=class %}
|
||||
{{ forloop.index | random_number: 20, 100 }}
|
||||
</a>
|
||||
</div>
|
||||
{% endunless %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
{% assign icons-count = icons-info.count %}
|
||||
|
||||
<div class="card card-md sticky-top{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<div class="card-stamp card-stamp-lg">
|
||||
<div class="card-stamp-icon bg-primary">
|
||||
{% include "ui/icon.html" icon="ghost" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-10">
|
||||
<h3 class="h1">Tabler Icons</h3>
|
||||
<div class="markdown text-secondary">
|
||||
All icons come from the Tabler Icons set and are MIT-licensed. Visit
|
||||
<a href="{{ site.icons.link }}" target="_blank" rel="noopener">tabler.io/icons</a>,
|
||||
download any of the {{ icons-count }} icons in SVG, PNG or React and use them in your favourite design tools.
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href="{{ site.icons.link }}" class="btn btn-primary" target="_blank" rel="noopener">
|
||||
{% include "ui/icon.html" icon="download" %}
|
||||
Download icons
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
{% assign type = include.type | default: "outline" %}
|
||||
|
||||
{% assign limit = Infinity %}
|
||||
{% if environment == 'development' %}
|
||||
{% assign limit = 20 %}
|
||||
{% endif %}
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">{{ include.title }}</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="demo-icons-list-wrap">
|
||||
<div class="demo-icons-list">
|
||||
{% for icon in icons limit: limit %}
|
||||
{% assign icon-name = icon[0] %}
|
||||
{% if icon[1].svg[type] %}
|
||||
<a href="https://tabler.io/icons/icon/{{ icon-name }}" target="_blank" rel="noopener" class="demo-icons-list-item" title="{{ icon-name }}" data-bs-toggle="tooltip" data-bs-placement="top">
|
||||
{% include "ui/icon.html" icon=icon-name type=type %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for icon in (0..20) %}
|
||||
<div></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,95 @@
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<p class="h3">Company</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ltd@example.com
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="h3">Client</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ctr@example.com
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-5">
|
||||
<h1>Invoice INV/001/15</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table table-transparent table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width: 1%"></th>
|
||||
<th>Product</th>
|
||||
<th class="text-center" style="width: 1%">Qnt</th>
|
||||
<th class="text-end" style="width: 1%">Unit</th>
|
||||
<th class="text-end" style="width: 1%">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="text-center">1</td>
|
||||
<td>
|
||||
<p class="strong mb-1">Logo Creation</p>
|
||||
<div class="text-secondary">Logo and business cards design</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-end">$1.800,00</td>
|
||||
<td class="text-end">$1.800,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">2</td>
|
||||
<td>
|
||||
<p class="strong mb-1">Online Store Design & Development</p>
|
||||
<div class="text-secondary">Design/Development for all popular modern browsers</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-end">$20.000,00</td>
|
||||
<td class="text-end">$20.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">3</td>
|
||||
<td>
|
||||
<p class="strong mb-1">App Design</p>
|
||||
<div class="text-secondary">Promotional mobile application</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-end">$3.200,00</td>
|
||||
<td class="text-end">$3.200,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-end">Subtotal</td>
|
||||
<td class="text-end">$25.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-end">Vat Rate</td>
|
||||
<td class="text-end">20%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-end">Vat Due</td>
|
||||
<td class="text-end">$5.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-weight-bold text-uppercase text-end">Total Due</td>
|
||||
<td class="font-weight-bold text-end">$30.000,00</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="text-secondary text-center mt-5">Thank you very much for doing business with us. We look forward to working with
|
||||
you again!</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,76 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Invoices</h3>
|
||||
</div>
|
||||
<div class="card-body border-bottom py-3">
|
||||
|
||||
<div class="d-flex">
|
||||
<div class="text-secondary">
|
||||
Show
|
||||
<div class="mx-2 d-inline-block">
|
||||
<input type="text" class="form-control form-control-sm" value="8" size="3" aria-label="Invoices count">
|
||||
</div>
|
||||
entries
|
||||
</div>
|
||||
|
||||
<div class="ms-auto text-secondary">
|
||||
Search:
|
||||
<div class="ms-2 d-inline-block">
|
||||
<input type="text" class="form-control form-control-sm" aria-label="Search invoice">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter text-nowrap datatable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all invoices"></th>
|
||||
<th class="w-1">No. {% include "ui/icon.html" icon="chevron-up" class="icon-sm icon-thick" %}</th>
|
||||
<th>Invoice Subject</th>
|
||||
<th>Client</th>
|
||||
<th>VAT No.</th>
|
||||
<th>Created</th>
|
||||
<th>Status</th>
|
||||
<th>Price</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for invoice in invoices limit: 8 %}
|
||||
<tr>
|
||||
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
|
||||
<td><span class="text-secondary">00{{ forloop.index | plus: 1400 }}</span></td>
|
||||
<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
|
||||
<td>
|
||||
{% include "ui/flag.html" flag=invoice.country size="xs" class="me-2" %}{{ invoice.client }}
|
||||
</td>
|
||||
<td>
|
||||
{{ invoice.vat-no }}
|
||||
</td>
|
||||
<td>
|
||||
{{ invoice.date }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-{{ invoice.status }} me-1"></span> {{ invoice.status-name }}
|
||||
</td>
|
||||
<td>{{ invoice.price }}</td>
|
||||
|
||||
<td class="text-end">
|
||||
<span class="dropdown">
|
||||
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
|
||||
{% include "ui/dropdown-menu.html" right=true %}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer d-flex align-items-center">
|
||||
<p class="m-0 text-secondary">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
|
||||
{% include "ui/pagination.html" class="m-0 ms-auto" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
{% assign map = include.map | default: "world" %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% if include.title %}
|
||||
<h3 class="card-title">{{ include.title }}</h3>
|
||||
{% endif %}
|
||||
{% include "ui/map-vector.html" map-id=map color="primary" ratio="21x9" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Most Visited Pages</h3>
|
||||
</div>
|
||||
<div class="card-table table-responsive">
|
||||
<table class="table table-vcenter">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Page name</th>
|
||||
<th>Visitors</th>
|
||||
<th>Unique</th>
|
||||
<th colspan="2">Bounce rate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{% for page in pages limit: 6 %}
|
||||
{% assign data = page.data | join: ',' %}
|
||||
{% assign id = "bounce-rate-" | append: forloop.index %}
|
||||
<tr>
|
||||
<td>
|
||||
{{ page.uri }}
|
||||
<a href="#" class="ms-1" aria-label="Open website">{% include "ui/icon.html" icon="link" %}</a>
|
||||
</td>
|
||||
<td class="text-secondary">{{ page.visitors | format_number }}</td>
|
||||
<td class="text-secondary">{{ page.unique | format_number }}</td>
|
||||
<td class="text-secondary">{{ page.bounce }}</td>
|
||||
<td class="text-end w-1">
|
||||
{% include "ui/chart-sparkline.html" type="line" data=data id=id small=true color="primary" %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
{% assign track-id = include.track-id | default: 5 %}
|
||||
{% assign track = tracks[track-id] %}
|
||||
<div class="card">
|
||||
<div class="row row-0">
|
||||
<div class="col-auto">
|
||||
<img src="{{ page | relative }}/static/tracks/{{ track.album.images[1].path }}" class="rounded-start" alt="{{ track.name | escape }}" width="80" height="80">
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body">
|
||||
{{ track.name }}
|
||||
<div class="text-secondary">
|
||||
{% for artist in track.artists %}
|
||||
{{ artist.name }}{% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,38 @@
|
||||
<div class="card">
|
||||
<div class="list-group card-list-group">
|
||||
{% for track in tracks limit: 12 %}
|
||||
<div class="list-group-item">
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col-auto fs-3">
|
||||
{{ forloop.index }}
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<img src="{{ page | relative }}/static/tracks/{{ track.album.images[1].path }}" class="rounded" alt="{{ track.name | escape }}" width="40" height="40">
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ track.name }}
|
||||
<div class="text-secondary">
|
||||
{% for artist in track.artists %}
|
||||
{{ artist.name }}{% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto text-secondary">
|
||||
{{ track.duration_ms | miliseconds_to_minutes }}
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="link-secondary">
|
||||
{% include "ui/switch-icon.html" icon="heart" %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto lh-1">
|
||||
<div class="dropdown">
|
||||
<a href="#" class="link-secondary" data-bs-toggle="dropdown">{% include "ui/icon.html" icon="dots" %}</a>
|
||||
{% include "ui/dropdown-menu.html" right=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,71 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Last updates</h3>
|
||||
</div>
|
||||
<div class="list-group list-group-flush list-group-hoverable">
|
||||
<div class="list-group-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
|
||||
<div class="col text-truncate">
|
||||
<a href="#" class="text-body d-block">Example 1</a>
|
||||
<div class="d-block text-secondary text-truncate mt-n1">
|
||||
Change deprecated html tags to text decoration classes (#29604)
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="list-group-item-actions">
|
||||
{% include "ui/icon.html" icon="star" color="muted" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto"><span class="status-dot d-block"></span></div>
|
||||
<div class="col text-truncate">
|
||||
<a href="#" class="text-body d-block">Example 2</a>
|
||||
<div class="d-block text-secondary text-truncate mt-n1">
|
||||
justify-content:between ⇒ justify-content:space-between (#29734)
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="list-group-item-actions show">
|
||||
{% include "ui/icon.html" icon="star" color="yellow" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto"><span class="status-dot d-block"></span></div>
|
||||
<div class="col text-truncate">
|
||||
<a href="#" class="text-body d-block">Example 3</a>
|
||||
<div class="d-block text-secondary text-truncate mt-n1">
|
||||
Update change-version.js (#29736)
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="list-group-item-actions">
|
||||
{% include "ui/icon.html" icon="star" color="muted" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
|
||||
<div class="col text-truncate">
|
||||
<a href="#" class="text-body d-block">Example 4</a>
|
||||
<div class="d-block text-secondary text-truncate mt-n1">
|
||||
Regenerate package-lock.json (#29730)
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="list-group-item-actions">
|
||||
{% include "ui/icon.html" icon="star" color="muted" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<div>Total orders</div>
|
||||
|
||||
<div class="d-flex align-items-baseline mb-3">
|
||||
<div class="h1 mb-0 me-2">2,137</div>
|
||||
<div class="me-auto">{% include "ui/trending.html" value=7 %}</div>
|
||||
</div>
|
||||
|
||||
{% include "ui/progress.html" values="40,15,25,15,5" class="mb-4" %}
|
||||
|
||||
<ul class="list-unstyled">
|
||||
{% for item in orders %}
|
||||
<li class="row g-2 align-items-center mb-2">
|
||||
<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
|
||||
<div class="col">
|
||||
{{ item.title }}
|
||||
<div class="fs-6 text-secondary">{{ item.subtitle }}</div>
|
||||
</div>
|
||||
<div class="col-auto small text-secondary"><strong class="text-body">{{ forloop.index | random_number: 500, 2000
|
||||
| intcomma }}</strong> orders
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="card placeholder-glow">
|
||||
<div class="ratio ratio-21x9 card-img-top placeholder"></div>
|
||||
<div class="card-body">
|
||||
<div class="placeholder col-9 mb-3"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
<div class="placeholder placeholder-xs col-11"></div>
|
||||
|
||||
<div class="mt-3">
|
||||
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="card">
|
||||
<div class="row g-0 align-items-center placeholder-glow">
|
||||
<div class="col-3">
|
||||
<div class="ratio ratio-1x1 card-img-start placeholder"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body">
|
||||
<div class="placeholder col-9 mb-3"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
<div class="placeholder placeholder-xs col-11"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-rounded placeholder"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="placeholder placeholder-xs col-9"></div>
|
||||
<div class="placeholder placeholder-xs col-7"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="card">
|
||||
<div class="card-body py-5 text-center">
|
||||
<div>
|
||||
<div class="avatar avatar-rounded avatar-lg placeholder mb-3"></div>
|
||||
</div>
|
||||
<div class="mt w-75 mx-auto">
|
||||
<div class="placeholder col-9 mb-3"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="card">
|
||||
<div class="card-body text-end placeholder-glow">
|
||||
<div class="placeholder col-9 mb-3"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
<div class="placeholder placeholder-xs col-12"></div>
|
||||
<div class="placeholder placeholder-xs col-11"></div>
|
||||
<div class="placeholder placeholder-xs col-8"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
<div class="card">
|
||||
<ul class="list-group list-group-flush placeholder-glow">
|
||||
{% for i in (1..4) %}
|
||||
<li class="list-group-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-rounded placeholder"></div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="placeholder placeholder-xs col-9"></div>
|
||||
<div class="placeholder placeholder-xs col-7"></div>
|
||||
</div>
|
||||
<div class="col-2 ms-auto text-end">
|
||||
<div class="placeholder placeholder-xs col-8"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="card card-md">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="h3">Enterprise-ready. Reach out for a custom quote.</h2>
|
||||
<p class="m-0 text-secondary">Tabler is designed to work great for large enterprises. Take a look at our feature comparison.</p>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/button.html" text="Book a demo" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
{% assign features = "Sharing Tools|Design Tools|Private Messages|Twitter API" | split: '|' %}
|
||||
{% assign available-features = include.features | default: '1000' | split: '' %}
|
||||
<div class="card card-md">
|
||||
{% if include.featured-color %}
|
||||
{% include "ui/ribbon.html" color=include.featured-color bookmark=true top=true filled=true %}
|
||||
{% endif %}
|
||||
|
||||
<div class="card-body text-center">
|
||||
<div class="text-uppercase text-secondary font-weight-medium">{{ include.category | default: 'Enterprise' }}</div>
|
||||
|
||||
<div class="display-5 fw-bold my-3">${{ include.price | default: '79' }}</div>
|
||||
|
||||
<ul class="list-unstyled lh-lg">
|
||||
<li><strong>{{ include.users | default: 10 }}</strong> Users</li>
|
||||
{% for feature in features %}
|
||||
<li>
|
||||
{% if available-features[forloop.index0] == '1' %}
|
||||
{% include "ui/icon.html" icon="check" class="me-1 text-success" %}
|
||||
{% else %}
|
||||
{% include "ui/icon.html" icon="x" class="me-1 text-danger" %}
|
||||
{% endif %}
|
||||
{{ feature }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a href="#" class="btn{% if include.featured-color %} btn-{{ include.featured-color }}{% endif %} w-100">Choose plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
{% include "ui/avatar.html" person-id=8 size="xl" %}
|
||||
<div class="media-body ms-4">
|
||||
<h3>{{ people[20].first_name }} {{ people[20].last_name }}</h3>
|
||||
<p class="text-secondary mb-0">{{ people[20].job_title }}</p>
|
||||
|
||||
<ul class="social-links list-inline mb-0 mt-2">
|
||||
<li class="list-inline-item">
|
||||
<a href="#" title="Facebook" data-bs-toggle="tooltip">
|
||||
{% include "ui/icon.html" icon="brand-facebook" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#" title="X" data-bs-toggle="tooltip">
|
||||
{% include "ui/icon.html" icon="brand-x" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#" title="1234567890" data-bs-toggle="tooltip">
|
||||
{% include "ui/icon.html" icon="phone" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,76 @@
|
||||
<form class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Edit Profile</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Company</label>
|
||||
<input type="text" class="form-control" disabled placeholder="Company" value="Creative Code Inc.">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Username</label>
|
||||
<input type="text" class="form-control" placeholder="Username" value="michael23">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" placeholder="Company" value="Chet">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" placeholder="Last Name" value="Faker">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Address</label>
|
||||
<input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">City</label>
|
||||
<input type="text" class="form-control" placeholder="City" value="Melbourne">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Postal Code</label>
|
||||
<input type="number" class="form-control" placeholder="ZIP Code">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-select">
|
||||
<option value="">Germany</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="mb-2 mb-0">
|
||||
<label class="form-label">About Me</label>
|
||||
<textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
|
||||
You doubt I'll bother, reading into it
|
||||
I'll probably won't, left to my own devices
|
||||
But that's the difference in our opinions.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<button type="submit" class="btn btn-primary">Update Profile</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,39 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">My Profile</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="row mb-3">
|
||||
<div class="col-auto">
|
||||
<span class="avatar avatar-lg" style="background-image: url({{ people[11].photo }})"></span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Bio</label>
|
||||
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com"/>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" value="password"/>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button class="btn btn-primary w-100">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,100 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Message">
|
||||
{% include "ui/button.html" icon="camera" icon-only=true %}
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-group card-list-group">
|
||||
<li class="list-group-item py-4">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
{% include "ui/avatar.html" person-id=5 class="me-3" %}
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div>
|
||||
<small class="float-right text-secondary">4 min</small>
|
||||
<h4>{{ people[4].first_name }} {{ people[4].last_name }}</h4>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
|
||||
justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes,
|
||||
nascetur ridiculus mus.
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled">
|
||||
<li class="d-flex mt-4">
|
||||
<div>
|
||||
{% include "ui/avatar.html" person-id=8 class="me-3" %}
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<strong>{{ people[7].first_name }} {{ people[7].last_name }}: </strong>
|
||||
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
|
||||
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex mt-4">
|
||||
<div>
|
||||
{% include "ui/avatar.html" person-id=10 class="me-3" %}
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<strong>{{ people[9].first_name }} {{ people[9].last_name }}: </strong>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
|
||||
amet risus.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item py-4">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
{% include "ui/avatar.html" person-id=11 class="me-3" %}
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div>
|
||||
<small class="float-right text-secondary">12 min</small>
|
||||
<h4>{{ people[10].first_name }} {{ people[10].last_name }}</h4>
|
||||
</div>
|
||||
<div>
|
||||
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis
|
||||
parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item py-4">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
{% include "ui/avatar.html" person-id=15 class="me-3" %}
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div>
|
||||
<small class="float-right text-secondary">34 min</small>
|
||||
<h4>{{ people[14].first_name }} {{ people[14].last_name }}</h4>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
|
||||
venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled">
|
||||
<li class="d-flex mt-4">
|
||||
<div>
|
||||
{% include "ui/avatar.html" person-id=6 class="me-3" %}
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<strong>{{ people[5].first_name }} {{ people[5].last_name }}: </strong>
|
||||
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
|
||||
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<h2 class="mb-3">{{ people[4].first_name }} {{ people[4].last_name }}</h2>
|
||||
|
||||
<p class="mb-4">
|
||||
Big belly rude boy, million dollar hustler. Unemployed.
|
||||
</p>
|
||||
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
{% include "ui/icon.html" icon="brand-x" %}
|
||||
Follow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
{% assign offset = include.offset | default: 40 %}
|
||||
{% assign limit = include.limit | default: 7 %}
|
||||
{% assign percentage = include.percentage | default: 20 %}
|
||||
{% assign percentage-color = include.percentage-color | default: "green" %}
|
||||
{% assign due = include.due | default: "2 days" %}
|
||||
<div class="card">
|
||||
{% include "ui/progress.html" value=percentage class="card-progress" color=percentage-color %}
|
||||
<div class="card-body">
|
||||
|
||||
<h3 class="card-title">
|
||||
<a href="#">{{ include.title | default: 'Task Title' }}</a>
|
||||
{% if include.badge %} <span class="badge ms-2">{{ include.badge }}</span>{% endif %}
|
||||
</h3>
|
||||
|
||||
{% include "ui/avatar-list.html" offset=offset limit=limit stacked=true class="mb-3" %}
|
||||
|
||||
<div class="card-meta d-flex justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
{% include "ui/icon.html" icon="check" class="me-2" %}
|
||||
<span>5/10</span>
|
||||
</div>
|
||||
<span>Due {{ due }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
{% assign project-id = include.project-id | default: 0 %}
|
||||
{% assign project = projects[project-id] %}
|
||||
{% assign progress = include.progress | default: 25 %}
|
||||
{% assign days-ago = include.days-ago | default: 2 %}
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-3">
|
||||
<img src="{{ project.image }}" alt="{{ project.title | escape }}" class="rounded">
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="card-title mb-1">
|
||||
<a href="#" class="text-reset">{{ project.title }}</a>
|
||||
</h3>
|
||||
<div class="text-secondary">
|
||||
Updated 2 hours ago
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col-auto">
|
||||
{{ progress }}%
|
||||
</div>
|
||||
<div class="col">
|
||||
{% include "ui/progress.html" value=progress size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/card-dropdown.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="card">
|
||||
<div class="card-body p-4 py-5 text-center">
|
||||
{% include "ui/avatar.html" size="xl" placeholder="W" class="mb-4" color=include.project-color rounded=true %}
|
||||
<h3 class="mb-0">{{ include.title | default: "New website" }}</h3>
|
||||
<p class="text-secondary">Due to: {{ include.date | default: '28 Aug 2019' }}</p>
|
||||
<p class="mb-3">
|
||||
<span class="badge bg-{{ include.stage-color | default: 'green' }}-lt">{{ include.stage | default: 'Waiting' }}</span>
|
||||
</p>
|
||||
<div>
|
||||
{% include "ui/avatar-list.html" stacked=true offset=include.avatar-offset limit=include.avatar-limit %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/progress.html" class="card-progress" value=include.percentage color=include.percentage-color %}
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
{% assign product-id = include.product-id | default: 0 %}
|
||||
{% assign product = products[product-id] %}
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body"{% unless include.lorem %} style="height: 5rem"{% endunless %}>
|
||||
{% if include.lorem %}
|
||||
<h3 class="card-title">Card with ribbon</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include "ui/ribbon.html" color=include.color top=include.top left=include.left bottom=include.bottom bookmark=include.bookmark %}
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="card card-md">
|
||||
<div class="card-body">
|
||||
<h2 class="h2 text-center mb-4">Login to your account</h2>
|
||||
|
||||
{% include "forms/sign-in.html" %}
|
||||
</div>
|
||||
|
||||
{% include "ui/hr.html" text="or" %}
|
||||
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">{% include "ui/button.html" block=true icon="brand-github" icon-color="github" text="Login with Github" %}</div>
|
||||
<div class="col">{% include "ui/button.html" block=true icon="brand-x" icon-color="x" text="Login with X" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-secondary mt-3">
|
||||
Don't have account yet? <a href="{{ page | relative }}/sign-up.html" tabindex="-1">Sign up</a>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
<form class="card card-md" action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-center mb-4">Create new account</h2>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" placeholder="Enter name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
{% include "ui/form/input-group.html" type="password" append-button="eye:Show password" flat=true placeholder="Password" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-check">
|
||||
<input type="checkbox" class="form-check-input"/>
|
||||
<span class="form-check-label">Agree the <a href="{{ page | relative }}/terms-of-service.html" tabindex="-1">terms and policy</a>.</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary w-100">Create new account</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center text-secondary mt-3">
|
||||
Already have account? <a href="{{ page | relative }}/sign-in.html" tabindex="-1">Sign in</a>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
{% assign icon = include.icon | default: "user" %}
|
||||
{% if include.growth > 0 %}
|
||||
{% assign color="green" %}
|
||||
{% assign arrow="arrow-up" %}
|
||||
{% elsif include.growth < 0 %}
|
||||
{% assign color="red" %}
|
||||
{% assign arrow="arrow-down" %}
|
||||
{% else %}
|
||||
{% assign color="grey" %}
|
||||
{% assign arrow="clock" %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="card" data-color={{color}}>
|
||||
<div class="card-body">
|
||||
<div class="float-right avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
|
||||
{% include "ui/icon.html" icon=icon %}
|
||||
</div>
|
||||
<div class="text-secondary fw-normal mt-0">{{ include.title | default: 'Customers' }}</div>
|
||||
<h3 class="h2 mt-2 mb-3">{{ include.count | default: "1,850" }}</h3>
|
||||
<p class="mb-0 text-secondary">
|
||||
{% include "ui/trending.html" value=include.growth %}
|
||||
<span class="text-nowrap">{{ include.description | default: 'Since last month' }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="card">
|
||||
<div class="card-body p-2 text-center">
|
||||
<div class="text-end {% if include.percentage > 0 %}text-green{% elsif include.percentage < 0 %}text-red{% endif %}">
|
||||
{% include "ui/trending.html" value=include.percentage %}
|
||||
</div>
|
||||
<div class="h1 m-0">{{ include.number }}</div>
|
||||
<div class="text-secondary mb-3">{{ include.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
{% assign chart-type = include.chart-type | default: 'line' %}
|
||||
{% assign chart-position = include.chart-position | default: 'right' %}
|
||||
<div class="card card-sm">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
{% if include.icon %}
|
||||
<div class="col-auto">
|
||||
<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar">{% include "ui/icon.html" icon=include.icon %}</span>
|
||||
</div>
|
||||
{% elsif include.person-id %}
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" person-id=include.person-id %}
|
||||
</div>
|
||||
{% elsif include.chart-data and chart-position == "left" %}
|
||||
<div class="col-auto">
|
||||
{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="col">
|
||||
<div class="font-weight-medium">
|
||||
{{ include.title | default: 1700 }}
|
||||
{% if include.small-icon %}
|
||||
{% include "ui/icon.html" icon=include.small-icon color=include.color class="icon-sm ms-1" %}
|
||||
{% endif %}
|
||||
{% if include.description-value %}
|
||||
<span class="float-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-secondary">
|
||||
{{ include.description | default: "Users" }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if include.chart-data and chart-position=="right" %}
|
||||
<div class="col-auto">
|
||||
{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
{% assign services = 'Instagram:3550,Twitter:1798,Facebook:1245,TikTok:986,Pinterest:854,VK:650,Pinterest:420' | split: ',' %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Social Media Traffic</h3>
|
||||
</div>
|
||||
<table class="table card-table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Network</th>
|
||||
<th colspan="2">Visitors</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for service in services %}
|
||||
{% assign s = service | split: ':' %}
|
||||
<tr>
|
||||
<td>{{ s[0] }}</td>
|
||||
<td>{{ s[1] | format_number }}</td>
|
||||
<td class="w-50">
|
||||
<div class="progress progress-xs">
|
||||
|
||||
<div class="progress-bar bg-primary" style="width: {{ s[1] | divided_by: 5000.0 | times: 100 }}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<a href="{{ site.sponsorUrl }}" class="card card-sponsor" target="_blank" rel="noopener" style="background-image: url({{ page | relative }}/static/sponsor-banner-homepage.svg)" aria-label="Sponsor Tabler!">
|
||||
<div class="card-body"></div>
|
||||
</a>
|
||||
@@ -0,0 +1,22 @@
|
||||
<div class="card">
|
||||
<table class="table card-table table-vcenter">
|
||||
{% for product in products %}
|
||||
<tr>
|
||||
<td><img src="{{ page | relative }}/img/products/{{ product.image }}" alt="" class="h-16"></td>
|
||||
<td>
|
||||
{{ product.name }}
|
||||
|
||||
{% assign mod = forloop.index | modulo: 2 %}
|
||||
{% if mod == 0 %}
|
||||
<span class="badge badge-secondary-lt">New</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end text-secondary d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 100 }} reviews</td>
|
||||
<td class="text-end text-secondary d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 50 }} offers</td>
|
||||
<td class="text-end">
|
||||
<strong>{{ product.price }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="row">
|
||||
{% for product in products%}
|
||||
<div class="col-lg-3">
|
||||
<div class="card p-3">
|
||||
<img src="{{ page | relative }}/img/products/{{ product.image }}" alt="" class="mb-3">
|
||||
<h3 class="mb-0">{{product.name}}</h3>
|
||||
<div class="text-secondary mb-2">{{product.producer}}</div>
|
||||
<h1 class="text-azure">{{product.price}}$</h1>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
{% include "ui/stars.html" %}
|
||||
|
||||
<a href="#" class="btn btn-primary">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
{% include "ui/pagination.html" class="ms-auto" %}
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
{% assign product-id = include.product-id | default: 1 %}
|
||||
{% assign product = products[product-id] %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-4 text-center">
|
||||
<img src="{{ page | relative }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
|
||||
</div>
|
||||
<h4 class="card-title"><a href="#">{{ product.name }}</a></h4>
|
||||
<div class="mt-5 d-flex align-items-center">
|
||||
<div class="h3 mb-0">
|
||||
<strong>{{ product.price }}</strong>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<a href="#" class="btn btn-primary">{% include "ui/icon.html" icon='plus' %} Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
{% assign person-id = include.person-id | default: 0 %}
|
||||
{% assign person = people[person-id] %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" person=person size="lg" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="card-title m-0">
|
||||
<a href="#">{{ person.full_name }}</a>
|
||||
</h4>
|
||||
<div class="text-secondary">
|
||||
Working in {{ person.company }}
|
||||
</div>
|
||||
<div class="small mt-1">
|
||||
<span class="badge bg-green"></span> Online
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="btn">
|
||||
Subscribe
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/card-dropdown.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,67 @@
|
||||
<div class="card">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-outline table-vcenter text-nowrap card-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">User</th>
|
||||
<th>Usage</th>
|
||||
<th class="text-center">Payment</th>
|
||||
<th>Activity</th>
|
||||
<th class="w-1">Satisfaction</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{% for person in people limit: 8 offset: 50 %}
|
||||
{% assign percentage = forloop.index | random_number %}
|
||||
{% assign time_offset = forloop.index | random_number: 0, 800 %}
|
||||
{% assign register_offset = forloop.index | random_number: 0, 8000000 %}
|
||||
{% assign percentage_color = percentage | number_color %}
|
||||
|
||||
<tr>
|
||||
<td class="text-center w-1">
|
||||
{% include "ui/avatar.html" person-id=person.id %}
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ person.full_name }}</div>
|
||||
<div class="small text-secondary">
|
||||
Registered: {{ 'now' | date: "%s" | minus: register_offset | date: '%b %-d, %Y' }}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>{{ percentage }}%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/progress.html" value=percentage size="sm" color=percentage_color %}
|
||||
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% capture payment %}
|
||||
{%- cycle 'visa', 'googlewallet', 'mastercard', 'shopify', 'ebay', 'paypal' -%}
|
||||
{% endcapture %}
|
||||
{% include "ui/payment.html" payment=payment %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-secondary">Last login</div>
|
||||
<div>{{ 'now' | date: "%s" | minus: time_offset | to_pretty_time }}</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% assign percentage = forloop.index | random_number: 0, 100 %}
|
||||
<!-- <div class="mx-auto" data-value="{{ circle-percentage | divide: 100 }}"-->
|
||||
<!-- data-thickness="3" data-color="primary">-->
|
||||
<!-- <div class="chart-circle-value">{{ percentage }}%</div>-->
|
||||
<!-- </div>-->
|
||||
{% include "ui/chart-sparkline.html" percentage=percentage type="donut" %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Top Pages</h3>
|
||||
|
||||
<table class="table table-sm table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Page</th>
|
||||
<th class="text-end">Visitors</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for page in pages %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="progressbg">
|
||||
{% include "ui/progress.html" value=page.bounce class="progressbg-progress" color="primary-lt" %}
|
||||
<div class="progressbg-text">{{ page.uri }}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-1 fw-bold text-end">{{ page.visitors }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,67 @@
|
||||
{% assign id = include.id %}
|
||||
{% assign icon-class = "me-2" %}
|
||||
{% if include.hide-text %}
|
||||
{% assign icon-class = "" %}
|
||||
{% endif %}
|
||||
{% assign reverse = include.reverse | default: false %}
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-bs-toggle="tabs">
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-home-{{ id }}" class="nav-link active" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-profile-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
|
||||
</li>
|
||||
|
||||
{% if include.activity %}
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-activity-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if include.disabled %}
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if include.dropdown %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
{% include "ui/dropdown-menu.html" %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if include.settings %}
|
||||
<li class="nav-item {% if reverse %}me-auto{% else %}ms-auto{% endif %}">
|
||||
<a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-bs-toggle="tab">{% include "ui/icon.html" icon="settings" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane{% if include.animation %} fade{% endif %} active show" id="tabs-home-{{ id }}">
|
||||
<h4>Home tab</h4>
|
||||
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
|
||||
</div>
|
||||
<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-profile-{{ id }}">
|
||||
<h4>Profile tab</h4>
|
||||
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
|
||||
</div>
|
||||
{% if include.settings %}
|
||||
<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-settings-{{ id }}">
|
||||
<h4>Settings tab</h4>
|
||||
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if include.activity %}
|
||||
<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-activity-{{ id }}">
|
||||
<h4>Activity tab</h4>
|
||||
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tasks</h3>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter">
|
||||
{% for task in tasks-list %}
|
||||
<tr>
|
||||
<td class="w-1 pe-0">
|
||||
<input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task"{% if task.checked %} checked{% endif %} >
|
||||
</td>
|
||||
<td class="w-100">
|
||||
<a href="#" class="text-reset">{{ task.name }}</a>
|
||||
</td>
|
||||
<td class="text-nowrap text-secondary">
|
||||
{% include "ui/icon.html" icon="calendar" %}
|
||||
{{ forloop.index | random_date: site.randomDateFrom, site.randomDateTo | date: '%B %d, %Y' }}
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
<a href="#" class="text-secondary">
|
||||
{% include "ui/icon.html" icon="check" %}
|
||||
{{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
<a href="#" class="text-secondary">
|
||||
{% include "ui/icon.html" icon="message" %} {{ forloop.index | random_number: 0, 12 }}</a>
|
||||
</td>
|
||||
<td>
|
||||
{% include "ui/avatar.html" size="sm" person-id=forloop.index %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,90 @@
|
||||
<ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-x-lt">{% include "ui/icon.html" icon="brand-x" %}</div>
|
||||
<div class="card timeline-event-card">
|
||||
<div class="card-body">
|
||||
<div class="text-secondary float-end">10 hrs ago</div>
|
||||
<h4>+1150 Followers</h4>
|
||||
<p class="text-secondary">You’re getting more and more followers, keep it up!</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon">{% include "ui/icon.html" icon="briefcase" %}</div>
|
||||
<div class="card timeline-event-card">
|
||||
<div class="card-body">
|
||||
<div class="text-secondary float-end">2 hrs ago</div>
|
||||
<h4>+3 New Products were added!</h4>
|
||||
<p class="text-secondary">Congratulations!</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon">{% include "ui/icon.html" icon="check" %}</div>
|
||||
<div class="card timeline-event-card">
|
||||
<div class="card-body">
|
||||
<div class="text-secondary float-end">1 day ago</div>
|
||||
<h4>Database backup completed!</h4>
|
||||
<p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-facebook-lt">{% include "ui/icon.html" icon="brand-facebook" %}</div>
|
||||
<div class="card timeline-event-card">
|
||||
<div class="card-body">
|
||||
<div class="text-secondary float-end">1 day ago</div>
|
||||
<h4>+290 Page Likes</h4>
|
||||
<p class="text-secondary">This is great, keep it up!</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon">{% include "ui/icon.html" icon="user-plus" %}</div>
|
||||
<div class="card timeline-event-card">
|
||||
<div class="card-body">
|
||||
<div class="text-secondary float-end">2 days ago</div>
|
||||
<h4>+3 Friend Requests</h4>
|
||||
<div class="avatar-list mt-3">
|
||||
{% for person in people limit: 3 %}
|
||||
{% include "ui/avatar.html" person=person status="success" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon">{% include "ui/icon.html" icon="photo" %}</div>
|
||||
<div class="card timeline-event-card">
|
||||
<div class="card-body">
|
||||
<div class="text-secondary float-end">3 days ago</div>
|
||||
<h4>+2 New photos</h4>
|
||||
<div class="mt-3">
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<div class="media media-2x1 rounded">
|
||||
<a class="media-content" style="background-image: url({% include "ui/photo.html" id=6 %})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="media media-2x1 rounded">
|
||||
<a class="media-content" style="background-image: url({% include "ui/photo.html" id=7 %})"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon">{% include "ui/icon.html" icon="settings" %}</div>
|
||||
<div class="card timeline-event-card">
|
||||
<div class="card-body">
|
||||
<div class="text-secondary float-end">2 weeks ago</div>
|
||||
<h4>System updated to v2.02</h4>
|
||||
<p class="text-secondary">Check the complete changelog at the <a href="#">activity
|
||||
page</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -0,0 +1,11 @@
|
||||
{% assign person-id = include.person-id | default: 0 %}
|
||||
{% assign person = people[person-id] %}
|
||||
<a class="card card-link" href="#">
|
||||
<div class="card-cover card-cover-blurred text-center{% if include.blurred %} card-cover-blurred{% endif %}" style="background-image: url({% include "ui/photo.html" id=person-id %})">
|
||||
{% include "ui/avatar.html" size="xl" person=person thumb=true rounded=true %}
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="card-title mb-1">{{ person.full_name }}</div>
|
||||
<div class="text-secondary">{{ person.job_title }}</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -0,0 +1,12 @@
|
||||
{% assign person-id = include.person-id | default: 0 %}
|
||||
{% assign person = people[person-id] %}
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
{% include "ui/avatar.html" size="xl" person=person rounded=true %}
|
||||
</div>
|
||||
<div class="card-title mb-1">{{ person.full_name }}</div>
|
||||
<div class="text-secondary">{{ person.job_title }}</div>
|
||||
</div>
|
||||
<a href="#" class="card-btn">View full profile</a>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
{% assign person-id = include.person-id | default: 0 %}
|
||||
{% assign person = people[person-id] %}
|
||||
{% capture col-avatar %}
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" person=person class="rounded" %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<a class="card card-link" href="#">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
{% unless include.right %}{{ col-avatar }}{% endunless %}
|
||||
<div class="col">
|
||||
<div class="font-weight-medium">{{ person.full_name }}</div>
|
||||
<div class="text-secondary">{{ person.job_title }}</div>
|
||||
</div>
|
||||
{% if include.right %}{{ col-avatar }}{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -0,0 +1,32 @@
|
||||
{% assign person-id = include.person-id | default: 25 | minus: 1 %}
|
||||
{% assign person = people[person-id] %}
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-title">{{ include.title | default: 'Basic info' }}</div>
|
||||
<div class="mb-2">
|
||||
{% include "ui/icon.html" icon="book" class="me-2 text-secondary" %}
|
||||
Went to: <strong>{{ person.university }}</strong>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
{% include "ui/icon.html" icon="briefcase" class="me-2 text-secondary" %}
|
||||
Worked at: <strong>{{ person.company }}</strong>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
{% include "ui/icon.html" icon="home" class="me-2 text-secondary" %}
|
||||
Lives in: <strong>{{ person.city }}, {{ person.country }}</strong>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
{% include "ui/icon.html" icon="map-pin" class="me-2 text-secondary" %}
|
||||
From: <strong>{% include "ui/flag.html" size="xs" flag=person.country_code %} {{ person.country }}</strong>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
{% include "ui/icon.html" icon="calendar" class="me-2 text-secondary" %}
|
||||
Birth date: <strong>{{ person.birth_date }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/icon.html" icon="clock" class="me-2 text-secondary" %}
|
||||
Time zone: <strong>{{ person.time_zone }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
{% assign limit = include.limit | default: 10 %}
|
||||
{% assign offset = include.offset | default: 0 %}
|
||||
<div class="card{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ include.title | default: 'Top users' }}</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
|
||||
{% for person in people limit: limit offset: offset %}
|
||||
{% assign color = forloop.index | plus: 5 | random_item: colors %}
|
||||
<div class="col-6">
|
||||
<div class="row g-3 align-items-center">
|
||||
<a href="#" class="col-auto">
|
||||
{% include "ui/avatar.html" person=person status=color %}
|
||||
</a>
|
||||
<div class="col text-truncate">
|
||||
<a href="#" class="text-reset d-block text-truncate">{{ person.full_name }}</a>
|
||||
<div class="text-secondary text-truncate mt-n1">{{ forloop.index | random_date_ago: 6 | timeago }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ include.title | default: 'People' }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="list-group list-group-flush overflow-auto" style="max-height: 35rem">
|
||||
{% assign prev-letter = '' %}
|
||||
{% assign people = people | sort: 'last_name' %}
|
||||
|
||||
{% for person in people %}
|
||||
{% assign first-letter = person.last_name | slice: 0 %}
|
||||
{% if prev-letter != first-letter %}
|
||||
{% assign prev-letter = first-letter %}
|
||||
<div class="list-group-header sticky-top">{{ prev-letter }}</div>
|
||||
{% endif %}
|
||||
<div class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<a href="#">
|
||||
{% include "ui/avatar.html" person=person %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col text-truncate">
|
||||
<a href="#" class="text-body d-block">{{ person.full_name }}</a>
|
||||
{% assign i = forloop.index | plus: offset %}
|
||||
<div class="text-secondary text-truncate mt-n1">{{ commits[i].description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,46 @@
|
||||
{% assign limit = include.limit | default: 8 %}
|
||||
{% assign offset = include.offset | default: 0 %}
|
||||
{% assign hoverable = include.hoverable | default: false %}
|
||||
{% assign checked-ids = include.checked-ids | default: '' | split: ',' %}
|
||||
<div class="card{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ include.title | default: 'Last commits' }}</h3>
|
||||
</div>
|
||||
<div class="list-group list-group-flush{% if hoverable %} list-group-hoverable{% endif %}">
|
||||
{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
|
||||
{% for person in people limit: limit offset: offset %}
|
||||
{% assign color = forloop.index | plus: 5 | random_item: colors %}
|
||||
{% assign index = '' | append: forloop.index %}
|
||||
<div class="list-group-item{% if checked-ids contains index %} active{% endif %}">
|
||||
<div class="row align-items-center">
|
||||
{% if include.checkbox %}
|
||||
<div class="col-auto"><input type="checkbox" class="form-check-input"{% if checked-ids contains index %} checked{% endif %}></div>
|
||||
{% else %}
|
||||
<div class="col-auto"><span class="badge{% if color != 'x' %} bg-{{ color }}{% endif %}"></span></div>
|
||||
{% endif %}
|
||||
<div class="col-auto">
|
||||
<a href="#">
|
||||
{% include "ui/avatar.html" person=person %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col text-truncate">
|
||||
<a href="#" class="text-reset d-block">{{ person.full_name }}</a>
|
||||
{% assign i = forloop.index | plus: offset %}
|
||||
<div class="d-block text-secondary text-truncate mt-n1">{{ commits[i].description }}</div>
|
||||
</div>
|
||||
{% if hoverable %}
|
||||
{% if checked-ids contains index %}
|
||||
{% assign star-color = 'text-yellow' %}
|
||||
{% else %}
|
||||
{% assign star-color = 'text-secondary' %}
|
||||
{% endif %}
|
||||
<div class="col-auto">
|
||||
<a href="#" class="list-group-item-actions{% if checked-ids contains index %} show{% endif %}">{% include "ui/icon.html" icon="star" class=star-color %}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
{% assign colors = include.colors | default: site.colors %}
|
||||
{% assign light = include.light %}
|
||||
|
||||
<div class="example">
|
||||
<div class="mb-n3">
|
||||
{% for color in colors %}
|
||||
<div class="row g-2 mb-3 align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="font-weight-semibold">{{ color[1].title }}</span><br/>
|
||||
<code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
{% include "parts/form/input.html" type="static" %}
|
||||
{% include "parts/form/input.html" type="text" hint="Here's some more info." %}
|
||||
{% include "parts/form/input.html" type="password" hint="Here's some more info." %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Disabled</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled..."
|
||||
value="Well, she turned me into a newt." disabled>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Readonly</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Readonly..."
|
||||
value="Well, how'd you become king, then?" readonly>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Required</label>
|
||||
<input type="text" class="form-control" name="example-required-input" placeholder="Required..." >
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
|
||||
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
|
||||
</div>
|
||||
|
||||
{% include "parts/form/select.html" %}
|
||||
{% include "parts/form/select.html" label="Select multiple" multiple=true %}
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Select multiple states</div>
|
||||
{% include "ui/select.html" key="states" multiple=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input group</label>
|
||||
<div class="input-group mb-2">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
{% include "ui/dropdown-menu.html" %}
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input group buttons</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<button type="button" class="btn">Action</button>
|
||||
<button data-bs-toggle="dropdown" type="button" class="btn dropdown-toggle dropdown-toggle-split"></button>
|
||||
{% include "ui/dropdown-menu.html" right=true %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "parts/form/input-icon.html" %}
|
||||
{% include "parts/form/input-icon-separated.html" %}
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with help icon</label>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<div class="col-auto align-self-center">
|
||||
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"
|
||||
data-bs-html="true">?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,73 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Form control rounded</label>
|
||||
<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
|
||||
{% include "ui/form/input-icon.html" input-class="form-control-rounded" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Form control flush</label>
|
||||
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input group</label>
|
||||
{% include "ui/form/input-group.html" prepend="@" placeholder="username" class="mb-2" %}
|
||||
{% include "ui/form/input-group.html" append=".tabler.io" placeholder="subdomain" class="mb-2" %}
|
||||
{% include "ui/form/input-group.html" prepend="https://" append=".tabler.io" placeholder="subdomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with checkbox or radios</label>
|
||||
{% include "ui/form/input-group.html" prepend="checkbox" class="mb-2" %}
|
||||
{% include "ui/form/input-group.html" append="radio" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with prepended text</label>
|
||||
{% include "ui/form/input-group.html" prepend="https://tabler.io/users/" flat=true input-class="ps-0" value="yourfancyusername" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with appended text</label>
|
||||
{% include "ui/form/input-group.html" append=".tabler.io" input-class="text-end pe-0" flat=true value="yourfancydomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with appended link</label>
|
||||
{% include "ui/form/input-group.html" append-link="Show password" flat=true type="password" value="ultrastrongpassword" %}
|
||||
</div>
|
||||
|
||||
{% capture html %}
|
||||
<kbd>ctrl + K</kbd>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with appended kbd</label>
|
||||
{% include "ui/form/input-group.html" append-html=html flat=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with appended icon links</label>
|
||||
{% include "ui/form/input-group.html" append-button="x:Clear search,adjustments:Search settings,bell:Add notification" flat=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Floating inputs</label>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="email" class="form-control" id="floating-input" value="name@example.com" autocomplete="off">
|
||||
<label for="floating-input">Email address</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="password" class="form-control" id="floating-password" value="Password" autocomplete="off">
|
||||
<label for="floating-password">Password</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label for="floatingSelect">Select</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
{% include "parts/form/input-image.html" %}
|
||||
{% include "parts/form/input-image-radio.html" offset=10 %}
|
||||
{% include "parts/form/input-color.html" %}
|
||||
{% include "parts/form/input-color.html" name="color-rounded" rounded=true %}
|
||||
{% include "parts/form/input-colorpicker.html" %}
|
||||
|
||||
{% include "parts/form/validation-states.html" %}
|
||||
{% include "parts/form/validation-states.html" lite=true %}
|
||||
|
||||
<label class="form-label">Form fieldset</label>
|
||||
{% include "parts/form/fieldset.html" %}
|
||||
@@ -0,0 +1,34 @@
|
||||
|
||||
{% include "parts/form/input-selectgroups.html" %}
|
||||
{% include "parts/form/selectgroup-payments.html" %}
|
||||
{% include "parts/form/selectgroup-project-manager.html" %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Buttons group</label>
|
||||
{% include "ui/button-group.html" items="1 min,5 min,10 min,30 min" fluid=true radio=true id="basic" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Buttons group with dropdown</label>
|
||||
{% include "ui/button-group.html" items="Option 1,Option 2" dropdown=true fluid=true radio=true id="dropdown" %}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Vertical buttons group</label>
|
||||
{% include "ui/button-group.html" items="Button 1,Button 2,Button 3,Button 4,Button 5" fluid=true vertical=true radio=true id="vertical"%}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Vertical with dropdown</label>
|
||||
{% include "ui/button-group.html" items="Button 1,Button 2,Button 3,Button 4" fluid=true vertical=true dropdown=true radio=true id="vertical-dropdown" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Toolbar</label>
|
||||
{% include "ui/button-group.html" icons="bold,italic,underline,copy,scissors,file-plus,file-minus" fluid=true radio=true id="toolbar" %}
|
||||
</div>
|
||||
@@ -0,0 +1,99 @@
|
||||
{% include "parts/form/input-radios.html" %}
|
||||
{% include "parts/form/input-radios-inline.html" %}
|
||||
|
||||
{% include "parts/form/input-checkboxes.html" %}
|
||||
{% include "parts/form/input-checkboxes-inline.html" %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Checkboxes with description</label>
|
||||
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<span class="form-check-label">
|
||||
Default checkbox
|
||||
</span>
|
||||
<span class="form-check-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<span class="form-check-label">
|
||||
Longer checkbox item that wraps on to two separate lines
|
||||
</span>
|
||||
<span class="form-check-description">
|
||||
Ab alias aut, consequuntur cumque esse eveniet incidunt laborum minus molestiae.
|
||||
</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<span class="form-check-label">
|
||||
Default checkbox without description
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{% include "parts/form/input-toggle.html" %}
|
||||
{% include "parts/form/input-toggle-single.html" %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Notification</label>
|
||||
{% include "parts/form/checkboxes-list.html" %}
|
||||
</div>
|
||||
|
||||
{% include "parts/form/input-file.html" %}
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Date of birth</label>
|
||||
<div class="row g-2">
|
||||
<div class="col-5">
|
||||
<select name="user[month]" class="form-select">
|
||||
<option value="">Month</option>
|
||||
<option value="1">January</option>
|
||||
<option value="2">February</option>
|
||||
<option value="3">March</option>
|
||||
<option value="4">April</option>
|
||||
<option value="5">May</option>
|
||||
<option selected="selected" value="6">June</option>
|
||||
<option value="7">July</option>
|
||||
<option value="8">August</option>
|
||||
<option value="9">September</option>
|
||||
<option value="10">October</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<select name="user[day]" class="form-select">
|
||||
<option value="">Day</option>
|
||||
{% for i in (1..31) %}
|
||||
<option value="{{ i }}" {% if i== 20 %} selected{% endif %}>{{ i }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<select name="user[year]" class="form-select">
|
||||
<option value="">Year</option>
|
||||
{% for i in (1897..2014) reversed %}
|
||||
<option value="{{ i }}" {% if i== 1989 %} selected{% endif %}>{{ i }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Text mask</label>
|
||||
{% include "ui/form/input-mask.html" mask="00/00/0000" placeholder="00/00/0000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Telephone mask</label>
|
||||
{% include "ui/form/input-mask.html" mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Autosize textarea</label>
|
||||
{% include "ui/form/textarea-autosize.html" %}
|
||||
</div>
|
||||
@@ -0,0 +1,68 @@
|
||||
{% include "parts/form/input-datalist.html" %}
|
||||
{% include "parts/form/input-range.html" %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Datepicker</label>
|
||||
{% include "ui/datepicker.html" id="default" class="mb-2" %}
|
||||
{% include "ui/datepicker.html" id="icon" layout="icon" class="mb-2" %}
|
||||
{% include "ui/datepicker.html" id="icon-prepend" layout="icon-prepend" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Inline datepicker</label>
|
||||
{% include "ui/datepicker.html" id="inline" inline=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Progress</label>
|
||||
{% include "ui/progress.html" class="mb-2" %}
|
||||
{% include "ui/progress.html" indeterminate=true color="green" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Form buttons</label>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{% include "ui/button.html" block=true icon="brand-github" icon-color="github" text="Login with Github" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
{% include "ui/button.html" block=true icon="brand-x" icon-color="x" text="Login with X" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tags input</label>
|
||||
{% include "ui/select.html" key="tags" placeholder="Select tags" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Advanced select</label>
|
||||
{% include "ui/select.html" key="users" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Advanced select with optgroup</label>
|
||||
{% include "ui/select.html" key="optgroups" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select with avatars</label>
|
||||
{% include "ui/select.html" key="people" indicator="avatar" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select with flags</label>
|
||||
{% include "ui/select.html" key="countries" indicator="flag" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select with labels</label>
|
||||
{% include "ui/select.html" key="labels" indicator="label" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Advanced select with validation state</label>
|
||||
{% include "ui/select.html" id="countries-valid" key="countries" state="valid" class="mb-3" %}
|
||||
{% include "ui/select.html" id="countries-invalid" key="countries" state="invalid" %}
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
<form action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="your@email.com" autocomplete="off">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">
|
||||
Password
|
||||
<span class="form-label-description">
|
||||
<a href="{{ page | relative }}/forgot-password.html">I forgot password</a>
|
||||
</span>
|
||||
</label>
|
||||
{% include "ui/form/input-group.html" type="password" append-button="eye:Show password" flat=true placeholder="Your password" %}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-check">
|
||||
<input type="checkbox" class="form-check-input"/>
|
||||
<span class="form-check-label">Remember me on this device</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary w-100">Sign in</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
let sliderTriggerList = [].slice.call(document.querySelectorAll("[data-slider]"));
|
||||
sliderTriggerList.map(function (sliderTriggerEl) {
|
||||
let options = {};
|
||||
if (sliderTriggerEl.getAttribute("data-slider")) {
|
||||
options = JSON.parse(sliderTriggerEl.getAttribute("data-slider"));
|
||||
}
|
||||
let slider = noUiSlider.create(sliderTriggerEl, options);
|
||||
if (options['js-name']) {
|
||||
window[options['js-name']] = slider;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1 @@
|
||||
<script defer data-api="/stats/api/event" data-domain="preview.tabler.io" src="/stats/js/script.js"></script>
|
||||
@@ -0,0 +1,8 @@
|
||||
<!--
|
||||
* Tabler - {{ site.description }}
|
||||
* @version {{ package.version }}
|
||||
* @link {{ site.homepage }}
|
||||
* Copyright 2018-{{ 'now' | date: "%Y" }} The Tabler Authors
|
||||
* Copyright 2018-{{ 'now' | date: "%Y" }} codecalm.net Paweł Kuna
|
||||
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
|
||||
-->
|
||||
@@ -0,0 +1,23 @@
|
||||
<!-- CSS files -->
|
||||
{% if site.useIconfont %}
|
||||
<link href="https://www.unpkg.com/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" rel="stylesheet" />
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if page-libs %}
|
||||
{% for lib in libs.css %}
|
||||
{% if page-libs contains lib[0] %}
|
||||
{% for file in lib[1] %}
|
||||
<link href="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ page | relative }}/libs/{% if environment != 'development' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}{% endif %}" rel="stylesheet"/>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<link href="{{ page | relative }}/core/css/tabler{% if layout-rtl %}.rtl{% endif %}{% if environment != 'development' %}.min{% endif %}.css{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" rel="stylesheet"/>
|
||||
|
||||
{% for plugin in site.tablerCssPlugins %}
|
||||
<link href="{{ page | relative }}/core/css/{{ plugin }}{% if layout-rtl %}.rtl{% endif %}{% if environment != 'development' %}.min{% endif %}.css{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" rel="stylesheet"/>
|
||||
{% endfor %}
|
||||
|
||||
<link href="{{ page | relative }}/demo/css/demo{% if layout-rtl %}.rtl{% endif %}{% if environment != 'development' %}.min{% endif %}.css{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" rel="stylesheet"/>
|
||||
@@ -0,0 +1,81 @@
|
||||
<div class="debug">
|
||||
<a href="#" data-debug="dark">Dark mode</a>
|
||||
<a href="#" data-debug="rtl">RTL mode</a>
|
||||
<a href="#" data-debug="code">Show cards code</a>
|
||||
<a href="#" data-debug="folded">Folded sidebar</a>
|
||||
<a href="#" data-debug="fullscreen">Fullscreen</a>
|
||||
<a href="#" data-debug="header-sticky">Sticky header</a>
|
||||
<a href="{{ page | relative }}/pages.html">All pages</a>
|
||||
</div>
|
||||
<style>
|
||||
.card-debug {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: 1;
|
||||
font-size: 11px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.debug-info {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.card-debug a {
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.card-debug a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.debug {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
padding: .5rem .75rem;
|
||||
font-size: 12px;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
z-index: 3000;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.debug a {
|
||||
color: inherit;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.debug a[data-debug]:after {
|
||||
content: "";
|
||||
margin: 0 0 1px .25rem;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, .3);
|
||||
border-radius: $border-radius-pill;
|
||||
}
|
||||
|
||||
body.show-debug-code .card-debug {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.debug {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.show-debug-code a[data-debug="code"]:after,
|
||||
html[dir="rtl"] a[data-debug="rtl"]:after,
|
||||
body.theme-dark a[data-debug="dark"]:after,
|
||||
:fullscreen a[data-debug="fullscreen"]:after,
|
||||
body.header-sticky a[data-debug="header-sticky"]:after,
|
||||
body.sidebar-folded a[data-debug="folded"]:after {
|
||||
background: #5eba00;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<footer class="footer footer-transparent d-print-none">
|
||||
<div class="container-xl">
|
||||
<div class="row text-center align-items-center flex-row-reverse">
|
||||
<div class="col-lg-auto ms-lg-auto">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item"><a href="{{ site.docsUrl }}" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
|
||||
<li class="list-inline-item"><a href="{{ page | relative }}/license.html" class="link-secondary">License</a></li>
|
||||
<li class="list-inline-item"><a href="{{ site.githubUrl }}" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
|
||||
<li class="list-inline-item">
|
||||
<a href="{{ site.githubSponsorsUrl }}" target="_blank" class="link-secondary" rel="noopener">
|
||||
{% include "ui/icon.html" icon="heart" inline=true filled=true color="pink" %}
|
||||
Sponsor
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item">
|
||||
Copyright © {{ 'now' | date: '%Y' }}
|
||||
<a href="{{ page | relative }}" class="link-secondary">{{ site.title }}</a>.
|
||||
All rights reserved.
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
{% if environment == 'production' %}
|
||||
<a href="{{ page | relative }}/changelog.html" class="link-secondary" rel="noopener">
|
||||
v{{ package.version }}
|
||||
</a>
|
||||
{% else %}
|
||||
Generated {{ 'now' | date: '%Y-%m-%d %H:%M %Z' }}
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1 @@
|
||||
{% include "ui/button.html" color="primary" icon="plus" text="Add board" %}
|
||||
@@ -0,0 +1 @@
|
||||
{% include "ui/button.html" color="primary" icon="plus" text="Post a job" %}
|
||||
@@ -0,0 +1,6 @@
|
||||
{% assign pages = "Tabler,Pages," %}
|
||||
{% assign pages = pages | append: page.page-header %}
|
||||
|
||||
<div class="d-flex">
|
||||
{% include "ui/breadcrumb.html" pages=pages class="breadcrumb-arrows" %}
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="btn-list">
|
||||
<span class="d-none d-sm-inline">
|
||||
{% if layout-navbar-overlap and layout-navbar-dark %}
|
||||
{% include "ui/button.html" text="New view" color="dark" %}
|
||||
{% else %}
|
||||
{% include "ui/button.html" text="New view" %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% include "ui/button.html" icon="plus" text="Create new report" color="primary" class="d-none d-sm-inline-block" modal-id="report" %}
|
||||
{% include "ui/button.html" icon="plus" icon-only=true color="primary" class="d-sm-none" text="Create new report" modal-id="report" %}
|
||||
</div>
|
||||
|
||||
{% include "ui/modal.html" modal-id="report" size="lg" top=true %}
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="d-flex">
|
||||
{% include "ui/button.html" text="Add event" color="primary" icon="plus" %}
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{% include "ui/button.html" text="New project" icon="plus" color="primary" %}
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
{% include "ui/form/input-icon.html" %}
|
||||
</div>
|
||||
{% include "ui/button.html" text="Add event" color="primary" icon="plus" %}
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<button type="button" class="btn btn-primary" onclick="javascript:window.print();">
|
||||
{% include "ui/icon.html" icon="printer" %} Print Invoice
|
||||
</button>
|
||||
@@ -0,0 +1,4 @@
|
||||
<div class="d-flex">
|
||||
<input type="search" class="form-control d-inline-block w-9 me-3" placeholder="Search user…"/>
|
||||
{% include "ui/button.html" text="New user" color="primary" icon="plus" %}
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
{% assign person = people[0] %}
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" person=person size="md" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<h2 class="page-title">{{ person.full_name }}</h2>
|
||||
<div class="page-subtitle">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include "ui/icon.html" icon="building-skyscraper" %}
|
||||
<a href="#" class="text-reset">{{ person.job_title }} at {{ person.company }}</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/icon.html" icon="users" %}
|
||||
<a href="#" class="text-reset">194 friends</a>
|
||||
</div>
|
||||
<div class="col-auto text-success">
|
||||
{% include "ui/icon.html" icon="check" color="green" %} Verified
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto d-none d-md-flex">
|
||||
{% include "ui/button.html" icon="plus" color="primary" icon="message" text="Send message" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user