mirror of
https://github.com/tabler/tabler.git
synced 2026-08-11 22:02: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>
|
||||
Reference in New Issue
Block a user