mirror of
https://github.com/tabler/tabler.git
synced 2026-08-04 09:24:40 +04:00
jekyll dirs
This commit is contained in:
codecalm
@@ -0,0 +1,6 @@
|
||||
<div class="alert alert-warning alert-dismissible show mb-5" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="{{ site.data.photos[5].small }}" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<ul class="list-group card-list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
<div class="card-body">
|
||||
<a href="javascript:void(0)" class="card-link">Card link</a>
|
||||
<a href="javascript:void(0)" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="card card-aside">
|
||||
<div class="card-aside-column" style="background-image: url({{ site.data.photos[49].small }})"></div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Card with aside</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,60 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Authentication</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled list-separated">
|
||||
<li class="list-separated-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto w-8 text-center text-muted h1 m-0">
|
||||
<i class="si si-user"></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="h5 mb-1">Everyone can look me up</div>
|
||||
<p class="text-muted m-0">A Jedi can feel the Force flowing through him. You mean it controls your actions</p>
|
||||
</div>
|
||||
<div class="col-auto text-right">
|
||||
<label class="custom-switch">
|
||||
<input type="checkbox" class="custom-switch-input">
|
||||
<span class="custom-switch-indicator"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto w-8 text-center text-muted h1 m-0">
|
||||
<i class="si si-screen-smartphone"></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="h5 mb-1">Everyone can contact me</div>
|
||||
<p class="text-muted m-0">When we heard about Alderaan, we were afraid that you were</p>
|
||||
</div>
|
||||
<div class="col-auto text-right">
|
||||
<label class="custom-switch">
|
||||
<input type="checkbox" class="custom-switch-input" checked>
|
||||
<span class="custom-switch-indicator"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto w-8 text-center text-muted h1 m-0">
|
||||
<i class="si si-location-pin"></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="h5 mb-1">Show my location</div>
|
||||
<p class="text-muted m-0"> I said, all systems have been alerted to your presence, sir. </p>
|
||||
</div>
|
||||
<div class="col-auto text-right">
|
||||
<label class="custom-switch">
|
||||
<input type="checkbox" class="custom-switch-input" checked>
|
||||
<span class="custom-switch-indicator"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,41 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">New users</h4>
|
||||
<div class="card-options">
|
||||
<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
|
||||
<i class="si si-pencil"></i>
|
||||
</button>
|
||||
<div class="dropdown card-options-dropdown">
|
||||
<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-bell mr-3"></i>News
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-envelope mr-3"></i>Messages
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-pencil mr-3"></i>Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<ul class="avatar-list">
|
||||
{% for user in site.data.users limit: 10 offset: 16 %}
|
||||
<li class="avatar-list-item">
|
||||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url({{ user.photo }})">
|
||||
{% if forloop.index > 3 and forloop.index < 7 or forloop.index == 9 %}
|
||||
<span class="avatar-status bg-green"></span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
{% assign article = include.article | default: site.data.articles[0] %}
|
||||
{% assign type = include.type | default: 'none' %}
|
||||
{% assign author = site.data.users[article.author] %}
|
||||
{% assign liked = include.liked | default: false %}
|
||||
{% assign truncate = include.truncate | default: 100 %}
|
||||
|
||||
<div class="card{% if type == 'aside' %} card-aside{% endif %}">
|
||||
{% if type == 'image' %}
|
||||
<a href="#"><img class="card-img-top" src="{{ site.base }}/{{ site.data.photos[article.image].small }}" alt="{{ article.title | escape}}"></a>
|
||||
{% endif %}
|
||||
|
||||
{% if type == 'aside' %}
|
||||
<a href="#" class="card-aside-column{% if include.aside-class %} {{ include.aside-class }}{% endif %}" style="background-image: url({{ site.base }}/{{ site.data.photos[article.image].small }})"></a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h4><a href="#">{{ article.title }}</a></h4>
|
||||
|
||||
<div class="text-muted">{{ article.description | truncate: truncate }}</div>
|
||||
|
||||
<div class="d-flex align-items-center pt-5 mt-auto">
|
||||
<div class="avatar avatar-md mr-3" style="background-image: url({{ site.base }}/{{ author.photo }})"></div>
|
||||
<div>
|
||||
<a href="{{ site.base }}/profile.html" class="text-default">{{ author.name }} {{ author.surname }}</a>
|
||||
<small class="d-block text-muted">3 days ago</small>
|
||||
</div>
|
||||
<div class="ml-auto {% if liked %}text-red{% else %}text-muted{% endif %}">
|
||||
<a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="card border-{{ include.color }}">
|
||||
<div class="card-body text-{{ include.color }}">
|
||||
<h4 class="card-title">
|
||||
{{ include.color | capitalize }} card title
|
||||
</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,37 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Browser Stats</h4>
|
||||
</div>
|
||||
<table class="table card-table">
|
||||
<tr>
|
||||
<td width="1"><i class="fa fa-chrome text-muted"></i></td>
|
||||
<td>Google Chrome</td>
|
||||
<td class="text-right"><span class="text-muted">23%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-firefox text-muted"></i></td>
|
||||
<td>Mozila Firefox</td>
|
||||
<td class="text-right"><span class="text-muted">15%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-safari text-muted"></i></td>
|
||||
<td>Apple Safari</td>
|
||||
<td class="text-right"><span class="text-muted">7%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-internet-explorer text-muted"></i></td>
|
||||
<td>Internet Explorer</td>
|
||||
<td class="text-right"><span class="text-muted">9%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-opera text-muted"></i></td>
|
||||
<td>Opera mini</td>
|
||||
<td class="text-right"><span class="text-muted">23%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-edge text-muted"></i></td>
|
||||
<td>Microsoft edge</td>
|
||||
<td class="text-right"><span class="text-muted">9%</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Default</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<button type="button" class="btn btn-outline-default">Default</button>
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<button type="button" class="btn btn-outline-info">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,80 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title text-center">December 2017</h3>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<table class="table table-calendar">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Mo</th>
|
||||
<th>Tu</th>
|
||||
<th>We</th>
|
||||
<th>Th</th>
|
||||
<th>Fr</th>
|
||||
<th>Sa</th>
|
||||
<th>Su</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">27</td>
|
||||
<td class="text-muted">28</td>
|
||||
<td class="text-muted">29</td>
|
||||
<td class="text-muted">30</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="javascript:void(0)" class="table-calendar-link">4</a></td>
|
||||
<td>5</td>
|
||||
<td><a href="javascript:void(0)" class="table-calendar-link">6</a></td>
|
||||
<td>7</td>
|
||||
<td>8</td>
|
||||
<td>9</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td><a href="javascript:void(0)" class="table-calendar-link">12</a></td>
|
||||
<td>13</td>
|
||||
<td>14</td>
|
||||
<td><a href="javascript:void(0)">15</a></td>
|
||||
<td>16</td>
|
||||
<td>17</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td><a href="javascript:void(0)" class="table-calendar-link">19</a></td>
|
||||
<td><a href="javascript:void(0)" class="table-calendar-link">20</a></td>
|
||||
<td>21</td>
|
||||
<td>22</td>
|
||||
<td>23</td>
|
||||
<td>24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>26</td>
|
||||
<td>27</td>
|
||||
<td>28</td>
|
||||
<td>29</td>
|
||||
<td>30</td>
|
||||
<td class="text-muted">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<ul class="list-group card-list-group">
|
||||
<li class="list-group-item list-group-item-red">
|
||||
<a href="javascript:void(0)" class="text-inherit">Cras justo odio</a>
|
||||
<span class="pull-right text-muted">16 Dec</span>
|
||||
</li>
|
||||
<li class="list-group-item list-group-item-blue">
|
||||
<a href="javascript:void(0)" class="text-inherit">Dapibus ac facilisis in</a>
|
||||
<span class="pull-right text-muted">22 Dec</span>
|
||||
</li>
|
||||
<li class="list-group-item list-group-item-red">
|
||||
<a href="javascript:void(0)" class="text-inherit">Vestibulum at eros</a>
|
||||
<span class="pull-right text-muted">29 Dec</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,40 @@
|
||||
<div class="card{% if include.collapsed %} card-collapsed{% endif %}">
|
||||
{% if include.status or include.status-left %}
|
||||
<div class="card-status{% if include.status-left %} card-status-left{% endif %} bg-{{ include.status | default: include.status-left }}"></div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card-header">
|
||||
{% if include.title %}
|
||||
<h3 class="card-title">{{ include.title }}</h3>
|
||||
{% endif %}
|
||||
|
||||
{% unless include.hide-options %}
|
||||
<div class="card-options">
|
||||
{% if include.options %}
|
||||
{{ include.options }}
|
||||
{% else %}
|
||||
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
||||
{% if include.show-fullscreen %}
|
||||
<a href="#" class="card-options-fullscreen" data-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
|
||||
{% endif %}
|
||||
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
</div>
|
||||
{% if include.alert %}
|
||||
<div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
|
||||
{{ include.alert }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
||||
</p>
|
||||
</div>
|
||||
{% if include.show-footer %}
|
||||
<div class="card-footer">
|
||||
This is standard card footer
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
{% assign color = include.color | default: 'blue' %}
|
||||
{% assign offset = include.offset | default: 0 %}
|
||||
{% assign limit = include.limit | default: 20 %}
|
||||
{% assign aggregate = include.aggregate | default: false %}
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-value pull-right text-{{ color }}">{{ include.rate | default: '+5%' }}</div>
|
||||
<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
|
||||
<div class="text-muted">{{ include.description | default: 'Users online' }}</div>
|
||||
</div>
|
||||
<div class="card-chart-bg">
|
||||
<div id="{{ include.id }}" style="height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% contentfor scripts %}
|
||||
{% include js/chart-bg.js id=include.id color=color %}
|
||||
{% endcontentfor %}
|
||||
@@ -0,0 +1,65 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Browsers traffic</h3>
|
||||
<div>
|
||||
<div id="chart-browsers" style="height: 15rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table card-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="1"><i class="browser browser-chrome"></i></td>
|
||||
<td>Google Chrome</td>
|
||||
<td class="text-right"><span class="text-muted">23%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="browser browser-firefox"></i></td>
|
||||
<td>Mozila Firefox</td>
|
||||
<td class="text-right"><span class="text-muted">15%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="browser browser-safari"></i></td>
|
||||
<td>Apple Safari</td>
|
||||
<td class="text-right"><span class="text-muted">7%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="browser browser-opera"></i></td>
|
||||
<td>Opera mini</td>
|
||||
<td class="text-right"><span class="text-muted">23%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="browser browser-edge"></i></td>
|
||||
<td>Microsoft edge</td>
|
||||
<td class="text-right"><span class="text-muted">9%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
require(['c3', 'jquery'], function (c3) {
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-browsers',
|
||||
data: {
|
||||
columns: [
|
||||
['Chrome', 36],
|
||||
['Firefox', 5],
|
||||
['Safari', 9],
|
||||
['Edge', 20],
|
||||
['Opera', 30],
|
||||
],
|
||||
colors: {
|
||||
Chrome: '{{ site.colors.green }}',
|
||||
Firefox: '{{ site.colors.orange }}',
|
||||
Safari: '{{ site.colors.blue }}',
|
||||
Edge: '{{ site.colors.azure }}',
|
||||
Opera: '{{ site.colors.red }}',
|
||||
},
|
||||
type: 'donut'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,87 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Gained & Lost Followers</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="chart-followers" style="height: 16rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
require(['c3', 'jquery'], function (c3, $) {
|
||||
$(document).ready(function () {
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-followers',
|
||||
padding: {
|
||||
bottom: 24,
|
||||
top: 0
|
||||
},
|
||||
data: {
|
||||
names: {
|
||||
data1: 'Gained followers',
|
||||
data2: 'Lost followers',
|
||||
data3: 'Posts',
|
||||
},
|
||||
colors: {
|
||||
data1: '{{ site.colors.blue }}',
|
||||
data2: '{{ site.colors.gray }}',
|
||||
data3: '{{ site.colors.lime }}',
|
||||
},
|
||||
columns: [
|
||||
['data1', 200, 290, 110, 80, 300, 90, 120],
|
||||
['data2', 0, -35, -20, -10, -50, -10, 0],
|
||||
['data3', 1, 2, 2, 0, 1, 1, 0]
|
||||
],
|
||||
type: 'bar',
|
||||
types: {
|
||||
data3: 'line'
|
||||
},
|
||||
groups: [
|
||||
['data1', 'data2']
|
||||
],
|
||||
axes: {
|
||||
data3: 'y2'
|
||||
}
|
||||
},
|
||||
bar: {
|
||||
width: 16
|
||||
},
|
||||
legend: {
|
||||
padding: 16
|
||||
},
|
||||
axis: {
|
||||
y: {
|
||||
min: -100,
|
||||
tick: {
|
||||
count: 5
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
}
|
||||
},
|
||||
y2: {
|
||||
min: -1,
|
||||
max: 3,
|
||||
show: true,
|
||||
tick: {
|
||||
format: d3.format('d')
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true,
|
||||
lines: [
|
||||
{value: 0.0}
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Pie chart</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="chart-pie" style="height: 250px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% contentfor scripts %}
|
||||
{% include js/pie.js %}
|
||||
{% endcontentfor %}
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Radar chart</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="canvas1" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% contentfor scripts %}
|
||||
{% endcontentfor %}
|
||||
@@ -0,0 +1,60 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Total Revenue</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="chart-revenue" style="height: 20rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
require(['c3', 'jquery'], function(c3) {
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-revenue',
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 39, 44, 47, 50, 55, 66, 79, 84, 86, 87, 92, 95],
|
||||
['data2', 65, 73, 83, 95, 96, 97, 99, 100, 103, 116, 138, 143],
|
||||
['data3', 101, 104, 119, 125, 132, 143, 145, 161, 167, 187, 191, 194]
|
||||
],
|
||||
type: 'bar',
|
||||
groups: [
|
||||
['data1', 'data2', 'data3']
|
||||
],
|
||||
colors: {
|
||||
'data1': tabler.colors.red,
|
||||
'data2': tabler.colors.green,
|
||||
'data3': tabler.colors.blue,
|
||||
},
|
||||
names: {
|
||||
'data1': '2015',
|
||||
'data2': '2016',
|
||||
'data3': '2017',
|
||||
}
|
||||
},
|
||||
axis : {
|
||||
x: {
|
||||
type: 'category',
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
},
|
||||
y: {
|
||||
tick: {
|
||||
format: d3.format("$")
|
||||
}
|
||||
}
|
||||
},
|
||||
bar: {
|
||||
width: 32
|
||||
},
|
||||
padding: {
|
||||
bottom: 24,
|
||||
top: 0
|
||||
},
|
||||
legend: {
|
||||
padding: 16
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,120 @@
|
||||
<div class="card">
|
||||
<div class="card-tabs">
|
||||
<div class="card-tabs-item">
|
||||
<div class="row">
|
||||
<div class="col-auto align-self-center">
|
||||
<div class="chart-circle chart-circle-xs" data-value="0.8" data-thickness="4" data-color="#fca328"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-muted">Projects</div>
|
||||
<div class="h3 m-0">11,164</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-tabs-item">
|
||||
<div class="row">
|
||||
<div class="col-auto align-self-center">
|
||||
<div class="chart-circle chart-circle-xs" data-value="0.2" data-thickness="4" data-color="#7bd235"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-muted">Calls</div>
|
||||
<div class="h3 m-0">986</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-tabs-item">
|
||||
<div class="row">
|
||||
<div class="col-auto align-self-center">
|
||||
<div class="chart-circle chart-circle-xs" data-value="0.45" data-thickness="4" data-color="#76befe"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-muted">Referrals</div>
|
||||
<div class="h3 m-0">1,986</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-tabs-item">
|
||||
<div class="row">
|
||||
<div class="col-auto align-self-center">
|
||||
<div class="chart-circle chart-circle-xs" data-value="0.6" data-thickness="4" data-color="#f90049"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-muted">Revenue</div>
|
||||
<div class="h3 m-0">$640</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="chart-visitors" style="min-height: 18rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
require(['c3', 'jquery'], function (c3) {
|
||||
$(document).ready(function() {
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-visitors',
|
||||
padding: {
|
||||
bottom: 24
|
||||
},
|
||||
data: {
|
||||
x: 'x',
|
||||
names: {
|
||||
data1: 'Referral',
|
||||
data2: 'Calls',
|
||||
data3: 'Prospects',
|
||||
},
|
||||
columns: [
|
||||
['x', '2013-07-12', '2013-07-13', '2013-07-14', '2013-07-15', '2013-07-16', '2013-07-17', '2013-07-18', '2013-07-19', '2013-07-20', '2013-07-21', '2013-07-22'],
|
||||
['data1', 22, 28, 21, 46, 48, 38, 48, 52, 28, 57, 32],
|
||||
['data2', 72, 61, 102, 104, 132, 86, 74, 108, 78, 106, 144],
|
||||
['data3', 125, 100, 72, 132, 154, 141, 178, 142, 146, 72, 186],
|
||||
],
|
||||
types: {
|
||||
data1: 'area',
|
||||
}
|
||||
},
|
||||
point: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
padding: 16
|
||||
},
|
||||
transition: {
|
||||
duration: 0
|
||||
},
|
||||
axis: {
|
||||
y: {
|
||||
tick: {
|
||||
fit: true
|
||||
}
|
||||
},
|
||||
x: {
|
||||
type: 'timeseries',
|
||||
tick: {
|
||||
format: '%d %b'
|
||||
},
|
||||
padding: {
|
||||
top: 10,
|
||||
bottom: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
color: {
|
||||
pattern: [
|
||||
'#fca328',
|
||||
'#7bd235',
|
||||
'#76befe',
|
||||
]
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Chat</h3>
|
||||
</div>
|
||||
<div class="card-body card-body-scrollable">
|
||||
{% include chat-content.html %}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="row xs-gutters">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Message to Bob…">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-primary"><i class="si si-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="chips">
|
||||
{% for user in site.data.users limit: 10 %}
|
||||
<a href="javascript:void(0)" class="chip">
|
||||
<span class="avatar" style="background-image: url({{ user.photo }})"></span> {{ user.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,88 @@
|
||||
<form class="card" action="">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Create new classroom</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Name of Class</label>
|
||||
<input type="text" class="form-control" placeholder="e.g. English Class" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Section</label>
|
||||
<input type="text" class="form-control" placeholder="e.g. English" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Target Language (L1)</label>
|
||||
<select class="form-control custom-select">
|
||||
<option value="english">English</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Target Language (L2)</label>
|
||||
<select class="form-control custom-select">
|
||||
<option value="french">French</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Home Country</label>
|
||||
<select class="form-control custom-select">
|
||||
<option value="french">United States</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="form-label">School</label>
|
||||
<input type="text" class="form-control" placeholder="Where do you teach?" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label">What kind of classroom would you like to connect with?</label>
|
||||
<input type="text" class="form-control" placeholder="Where do you teach?" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Which tools would you like to use?</label>
|
||||
<select class="form-control custom-select">
|
||||
<option value="french">Blogging, Video Chat, Quizzes, +3 Others</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="form-label">What Age Group are you going to teach?</label>
|
||||
<div>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" name="classroom-age" class="custom-control-input" checked>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">K-12</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" name="classroom-age" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Value</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:void(0)" class="text-muted">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary ml-auto">Create classroom</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,61 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Client card</h3>
|
||||
<div class="card-options">
|
||||
<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
|
||||
<i class="si si-pencil"></i>
|
||||
</button>
|
||||
<div class="dropdown card-options-dropdown">
|
||||
<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-bell mr-3"></i>News
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-envelope mr-3"></i>Messages
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-pencil mr-3"></i>Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-map card-map-placeholder"></div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="media mb-5">
|
||||
<img class="d-flex mr-5 rounded" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ec911398e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ec911398e%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5>Axa Global Group</h5>
|
||||
<address class="text-muted small">
|
||||
1290 Avenua of The Americas<br>
|
||||
New York, NY 101040105
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="h6">Relationship</div>
|
||||
<p>Client</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="h6">Business Type</div>
|
||||
<p>Insurance Company</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="h6">Website</div>
|
||||
<p><a href="javascript:void(0)">http://www.axa.com</a></p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="h6">Office Phone</div>
|
||||
<p>+123456789</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h6">Description</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dignissimos doloribus eum fugiat itaque laboriosam maiores nisi nostrum perspiciatis vero.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="card text-white bg-{{ include.color }}">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">
|
||||
{{ include.color | capitalize }} card title
|
||||
</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">
|
||||
Colors
|
||||
</h4>
|
||||
<div>
|
||||
{% for color in site.colors %}
|
||||
<div class="d-inline-block bg-{{ color[0] }} w-6 h-6 rounded mr-1"></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,196 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center mb-6">
|
||||
<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 font-weight-normal">amazon.com</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Name</h5>
|
||||
<div class="text-muted-dark">Amazon.com</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Legal Name</h5>
|
||||
<div class="text-muted-dark">Amazon.com, Inc.</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Ticker</h5>
|
||||
<div class="text-muted-dark">AMZN</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Founded Year</h5>
|
||||
<div class="text-muted-dark">1995</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Type</h5>
|
||||
<div class="text-muted-dark">Public</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Employees</h5>
|
||||
<div class="text-muted-dark">341,400</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Annual Revenue</h5>
|
||||
<div class="text-muted-dark">$135B</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row lg-gutters">
|
||||
<div class="col-7">
|
||||
<div class="row mb-5">
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Location</h5>
|
||||
<div class="text-muted-dark">207 Boren Ave, Seattle, WA 98109, USA</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="mb-1">Timezone</h5>
|
||||
<div class="text-muted-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.google-maps-key }});"></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-muted">businessinsider.com</div>
|
||||
<div class="col text-muted text-right">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-muted">businessinsider.com</div>
|
||||
<div class="col text-muted text-right">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-muted">businessinsider.com</div>
|
||||
<div class="col text-muted text-right" 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-muted">businessinsider.com</div>
|
||||
<div class="col text-muted text-right" 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-muted">businessinsider.com</div>
|
||||
<div class="col text-muted text-right" 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 class="list-separated-item">
|
||||
<h5>Description</h5>
|
||||
<div class="text-muted-dark">
|
||||
Online shopping from the earth's biggest selection of books, magazines, music, DVDs, videos, electronics, computers, software, apparel & acc…
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<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 class="list-separated-item">
|
||||
<h5 class="mb-1">Industry</h5>
|
||||
<div>Internet Software & Services</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<h5 class="mb-1">Sector</h5>
|
||||
<div>Information Technology</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<h5 class="mb-1">SIC Code</h5>
|
||||
<div>59</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<h5 class="mb-1">NAICS Code</h5>
|
||||
<div>45</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<h5 class="mb-1">EIN</h5>
|
||||
<div>911646860</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<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 class="list-separated-item">
|
||||
<h5 class="mb-1">Alexa US Rank</h5>
|
||||
<div>5</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<h5 class="mb-1">Alexa Global Rank</h5>
|
||||
<div>10</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<h5 class="mb-1">Fiscal Year End</h5>
|
||||
<div>End of December</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<h5 class="mb-1">Phone</h5>
|
||||
<div>
|
||||
<a href="tel:+1 206-266-1000">+1 206-266-1000</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<h5 class="mb-1">Crunchbase</h5>
|
||||
<div>
|
||||
<a href="#">crunchbase.com/organization/amazon</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<h5 class="mb-1">Twitter</h5>
|
||||
<div>
|
||||
<a href="#">twitter.com/amazon</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-separated-item">
|
||||
<h5 class="mb-1">Facebook</h5>
|
||||
<div>
|
||||
<a href="#">facebook.com/amazon</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,69 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Top Countries</h4>
|
||||
</div>
|
||||
<table class="table card-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="1"><i class="flag flag-us"></i></td>
|
||||
<td>
|
||||
USA
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar" style="width: 78%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td width="1" class="text-right"><span class="text-muted">$6425</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag flag-pl"></i></td>
|
||||
<td>
|
||||
Poland
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar" style="width: 62%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right"><span class="text-muted">$5582</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag flag-de"></i></td>
|
||||
<td>
|
||||
Germany
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar" style="width: 48%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right"><span class="text-muted">$4587</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag flag-ru"></i></td>
|
||||
<td>
|
||||
Russia
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar" style="width: 35%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right"><span class="text-muted">$2520</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag flag-au"></i></td>
|
||||
<td>
|
||||
Australia
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right"><span class="text-muted">$1899</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag flag-gb"></i></td>
|
||||
<td>
|
||||
Great Britain
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar" style="width: 22%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right"><span class="text-muted">$1056</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!-- Creadit Card component -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Cardholder's name</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Card number</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="row sm-gutters">
|
||||
<div class="col">
|
||||
<label class="form-label">Expiry Date</label>
|
||||
<div class="row sm-gutters">
|
||||
<div class="col">
|
||||
<select name="" class="form-control custom-select">
|
||||
<option value="">January</option>
|
||||
<option value="">February</option>
|
||||
<option value="">March</option>
|
||||
<option value="">April</option>
|
||||
<option value="">May</option>
|
||||
<option value="">June</option>
|
||||
<option value="">Juli</option>
|
||||
<option value="">August</option>
|
||||
<option value="">September</option>
|
||||
<option value="">October</option>
|
||||
<option value="">November</option>
|
||||
<option value="">December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<select name="" class="form-control custom-select">
|
||||
<option value="">2017</option>
|
||||
<option value="">2018</option>
|
||||
<option value="">2019</option>
|
||||
<option value="">2020</option>
|
||||
<option value="">2021</option>
|
||||
<option value="">2022</option>
|
||||
<option value="">2023</option>
|
||||
<option value="">2024</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<label class="form-label">CVV</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex">
|
||||
<a href="" class="btn btn-link">Cancel</a>
|
||||
<button class="btn btn-primary ml-auto">Complete Order</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
{% assign width = include.width | default: '54%' %}
|
||||
{% assign color = include.color | default: 'blue' %}
|
||||
{% assign title = include.title | default: 'Today Expenses' %}
|
||||
{% assign digit = include.digit | default: '$8500' %}
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="h5">{{ title }}</div>
|
||||
<div class="display-4 font-weight-bold mb-4">{{ digit }}</div>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-{{ color }}" style="width: {{ width }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Email Statistics</h3>
|
||||
<div>
|
||||
<div id="chart-emails" style="height: 15rem"></div>
|
||||
|
||||
{% include js/chart-circle.js id="chart-emails" data='{"Open": [30, "blue"], "Bounce": [50, "red"], "Unsubscribe": [25, "yellow"]}' type="donut" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<i class="fa fa-clock-o"></i> Campaign sent 2 days ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores atque beatae commodi, deserunt dolores eligendi esse est harum maxime nesciunt non nostrum quibusdam quisquam ratione repudiandae saepe soluta sunt.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores atque beatae commodi, deserunt dolores eligendi esse est harum maxime nesciunt non nostrum quibusdam quisquam ratione repudiandae saepe soluta sunt.
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,62 @@
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<h4 class="card-title">Feeds</h4>
|
||||
<div class="card-options">
|
||||
<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
|
||||
<i class="si si-pencil"></i>
|
||||
</button>
|
||||
<div class="dropdown card-options-dropdown">
|
||||
<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-bell mr-3"></i>News
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-envelope mr-3"></i>Messages
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-pencil mr-3"></i>Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-body">
|
||||
<div class="media mb-3">
|
||||
<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[4].photo }})"></span></div>
|
||||
<div class="media-body">
|
||||
<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Some of the fantastic things people have had to say about Ooooh</a></h5>
|
||||
<small class="text-muted">2 days ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media mb-3">
|
||||
<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[5].photo }})"></span></div>
|
||||
<div class="media-body">
|
||||
<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Here are just some of the magazine reviews we have had</a></h5>
|
||||
<small class="text-muted">1 day ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media mb-3">
|
||||
<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[6].photo }})"></span></div>
|
||||
<div class="media-body">
|
||||
<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Lorem ipsum dolor amet, consectetur adipisicing elit.</a></h5>
|
||||
<small class="text-muted">2 days ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media mb-3">
|
||||
<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[7].photo }})"></span></div>
|
||||
<div class="media-body">
|
||||
<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">“It’s just brilliant. I will recommend it to everyone!”</a></h5>
|
||||
<small class="text-muted">2 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[8].photo }})"></span></div>
|
||||
<div class="media-body">
|
||||
<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">John has just started working on the project</a></h5>
|
||||
<small class="text-muted">right now</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,63 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Finance Stats
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="h5 mb-0">
|
||||
IPO Margin
|
||||
</div>
|
||||
<span class="small text-muted">Awerage IPO Margin</span>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<span class="h4 text-primary font-weight-bold">+24%</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="h5 mb-0">
|
||||
Payments
|
||||
</div>
|
||||
<span class="small text-muted">Yearly Expenses</span>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<span class="h4 text-info font-weight-bold">+$560,800</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="h5 mb-0">
|
||||
Logistics
|
||||
</div>
|
||||
<span class="small text-muted">Overall Regional Logistics</span>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<span class="h4 text-warning font-weight-bold">-10%</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="h5 mb-0">
|
||||
Expenses
|
||||
</div>
|
||||
<span class="small text-muted">Balance</span>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<span class="h4 text-danger font-weight-bold">$345,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,50 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Follow</h4>
|
||||
</div>
|
||||
|
||||
<table class="table card-table">
|
||||
<tr>
|
||||
<td class="align-middle" width="1">
|
||||
<span class="avatar avatar-md" style="background-image: url({{ site.data.users[38].photo }})"></span>
|
||||
</td>
|
||||
<td>
|
||||
<strong>Jacob Thornton</strong>
|
||||
<small class="d-block text-muted">@fat</small>
|
||||
</td>
|
||||
<td class="align-middle" width="1">
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<span class="fa fa-twitter"></span> Follow
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="align-middle" width="1">
|
||||
<span class="avatar avatar-md" style="background-image: url({{ site.data.users[39].photo }})"></span>
|
||||
</td>
|
||||
<td>
|
||||
<strong>Dave Gamache</strong>
|
||||
<small class="d-block text-muted">@dhg</small>
|
||||
</td>
|
||||
<td class="align-middle" width="1">
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<span class="fa fa-twitter"></span> Follow
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="align-middle" width="1">
|
||||
<span class="avatar avatar-md" style="background-image: url({{ site.data.users[40].photo }})"></span>
|
||||
</td>
|
||||
<td>
|
||||
<strong>Mark Otto</strong>
|
||||
<small class="d-block text-muted">@mdo</small>
|
||||
</td>
|
||||
<td class="align-middle" width="1">
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<span class="fa fa-twitter"></span> Follow
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid architecto commodi dolorum nam odio perspiciatis quo sapiente vitae voluptatem? Accusamus beatae distinctio dolores laborum nobis, obcaecati odio quia reprehenderit.
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Card with footer content
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
<form class="card" action="" method="get">
|
||||
|
||||
|
||||
<div class="card-body">
|
||||
<div class="card-title">Forgot password</div>
|
||||
|
||||
<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary btn-block">Send me new password</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="login.html"><i class="mdi mdi-arrow-left"></i> Back to login form</a>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,660 @@
|
||||
<form action="https://httpbin.org/post" method="post" class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Form elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Static</label>
|
||||
<div class="form-control-plaintext">Username</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-text-input">Text</label>
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-disabled-input">Disabled</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
||||
value="Well, she turned me into a newt."
|
||||
disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-disabled-input">Readonly</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
||||
value="Well, how'd you become king, then?"
|
||||
readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-textarea-input">Textarea <span class="form-label-small">56/100</span></label>
|
||||
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
|
||||
</div>
|
||||
|
||||
{% include parts/input-image.html %}
|
||||
|
||||
{% include parts/input-color.html %}
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Input group</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-primary" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Input group buttons</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-primary">Action</button>
|
||||
<button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle"></button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
News
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
Messages
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include parts/input-icon.html %}
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Separated inputs</label>
|
||||
<div class="row xs-gutters">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
</div>
|
||||
<span class="col-auto">
|
||||
<button class="btn btn-secondary" type="button"><i class="fe fe-search"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">ZIP Code</label>
|
||||
<div class="row sm-gutters">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
</div>
|
||||
<span class="col-auto align-self-center">
|
||||
<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-password-input">Password</label>
|
||||
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-text-input-valid">Valid State</label>
|
||||
<input type="text" class="form-control is-valid" name="example-text-input-valid" placeholder="Valid State..">
|
||||
|
||||
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-text-input-invalid">Invalid State</label>
|
||||
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
|
||||
placeholder="Invalid State..">
|
||||
<div class="invalid-feedback">Invalid feedback</div>
|
||||
|
||||
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-control custom-select">
|
||||
<option value="">Germany</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Ratios</label>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<input type="range" class="form-control custom-range" step="5" min="0" max="50">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input type="number" class="form-control w-8" value="45">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Size</label>
|
||||
<div class="selectgroup w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="50" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button">S</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="100" class="selectgroup-input">
|
||||
<span class="selectgroup-button">M</span>
|
||||
</label>
|
||||
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="150" class="selectgroup-input">
|
||||
<span class="selectgroup-button">L</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="200" class="selectgroup-input">
|
||||
<span class="selectgroup-button">XL</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Icons input</label>
|
||||
<div class="selectgroup w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="2" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-smartphone"></i></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="1" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-tablet"></i></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="6" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-monitor"></i></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="6" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-x"></i></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Icons input</label>
|
||||
<div class="selectgroup selectgroup-pills">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-male"></i></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="2" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-female"></i></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Your skills</label>
|
||||
<div class="selectgroup selectgroup-pills">
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="HTML" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button">HTML</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="CSS" class="selectgroup-input">
|
||||
<span class="selectgroup-button">CSS</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="PHP" class="selectgroup-input">
|
||||
<span class="selectgroup-button">PHP</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="JavaScript" class="selectgroup-input">
|
||||
<span class="selectgroup-button">JavaScript</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Ruby</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Ruby</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="C++" class="selectgroup-input">
|
||||
<span class="selectgroup-button">C++</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include parts/input-toggle.html %}
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-label">Toggle switch single</div>
|
||||
<label class="custom-switch">
|
||||
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description">I agree with terms and conditions</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{% include parts/form-fieldset.html %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Radios</label>
|
||||
<div class="custom-controls-stacked">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
|
||||
<div class="custom-control-label">Option 1</div>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-radios" value="option2">
|
||||
<div class="custom-control-label">Option 2</div>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-radios" value="option3" disabled>
|
||||
<div class="custom-control-label">Option Disabled</div>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-radios2" value="option4" disabled checked>
|
||||
<div class="custom-control-label">Option Disabled Checked</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-label">Inline Radios</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
|
||||
<span class="custom-control-label">Option 1</span>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
|
||||
<span class="custom-control-label">Option 2</span>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
|
||||
<span class="custom-control-label">Option 3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Checkboxes</label>
|
||||
<div class="custom-controls-stacked">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
|
||||
<label class="custom-control-label">Option 1</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
|
||||
<label class="custom-control-label">Option 2</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
|
||||
<label class="custom-control-label">Option Disabled</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
|
||||
<label class="custom-control-label">Option Disabled Checked</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-label">Inline Checkboxes</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
|
||||
checked="">
|
||||
<label class="custom-control-label">Option 1</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
|
||||
<label class="custom-control-label">Option 2</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
|
||||
<label class="custom-control-label">Option 3</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-label">Bootstrap's Custom File Input</div>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" name="example-file-input-custom">
|
||||
<label class="custom-file-label">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Date of birth</label>
|
||||
<div class="row xs-gutters">
|
||||
<div class="col-5">
|
||||
<select name="user[month]" class="form-control custom-select">
|
||||
<option value="">Month</option>
|
||||
<option value="1">January</option>
|
||||
<option value="2">February</option>
|
||||
<option value="3">March</option>
|
||||
<option value="4">April</option>
|
||||
<option value="5">May</option>
|
||||
<option selected="selected" value="6">June</option>
|
||||
<option value="7">July</option>
|
||||
<option value="8">August</option>
|
||||
<option value="9">September</option>
|
||||
<option value="10">October</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<select name="user[day]" class="form-control custom-select">
|
||||
<option value="">Day</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option value="14">14</option>
|
||||
<option value="15">15</option>
|
||||
<option value="16">16</option>
|
||||
<option value="17">17</option>
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
<option selected="selected" value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="28">28</option>
|
||||
<option value="29">29</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<select name="user[year]" class="form-control custom-select">
|
||||
<option value="">Year</option>
|
||||
<option value="2014">2014</option>
|
||||
<option value="2013">2013</option>
|
||||
<option value="2012">2012</option>
|
||||
<option value="2011">2011</option>
|
||||
<option value="2010">2010</option>
|
||||
<option value="2009">2009</option>
|
||||
<option value="2008">2008</option>
|
||||
<option value="2007">2007</option>
|
||||
<option value="2006">2006</option>
|
||||
<option value="2005">2005</option>
|
||||
<option value="2004">2004</option>
|
||||
<option value="2003">2003</option>
|
||||
<option value="2002">2002</option>
|
||||
<option value="2001">2001</option>
|
||||
<option value="2000">2000</option>
|
||||
<option value="1999">1999</option>
|
||||
<option value="1998">1998</option>
|
||||
<option value="1997">1997</option>
|
||||
<option value="1996">1996</option>
|
||||
<option value="1995">1995</option>
|
||||
<option value="1994">1994</option>
|
||||
<option value="1993">1993</option>
|
||||
<option value="1992">1992</option>
|
||||
<option value="1991">1991</option>
|
||||
<option value="1990">1990</option>
|
||||
<option selected="selected" value="1989">1989</option>
|
||||
<option value="1988">1988</option>
|
||||
<option value="1987">1987</option>
|
||||
<option value="1986">1986</option>
|
||||
<option value="1985">1985</option>
|
||||
<option value="1984">1984</option>
|
||||
<option value="1983">1983</option>
|
||||
<option value="1982">1982</option>
|
||||
<option value="1981">1981</option>
|
||||
<option value="1980">1980</option>
|
||||
<option value="1979">1979</option>
|
||||
<option value="1978">1978</option>
|
||||
<option value="1977">1977</option>
|
||||
<option value="1976">1976</option>
|
||||
<option value="1975">1975</option>
|
||||
<option value="1974">1974</option>
|
||||
<option value="1973">1973</option>
|
||||
<option value="1972">1972</option>
|
||||
<option value="1971">1971</option>
|
||||
<option value="1970">1970</option>
|
||||
<option value="1969">1969</option>
|
||||
<option value="1968">1968</option>
|
||||
<option value="1967">1967</option>
|
||||
<option value="1966">1966</option>
|
||||
<option value="1965">1965</option>
|
||||
<option value="1964">1964</option>
|
||||
<option value="1963">1963</option>
|
||||
<option value="1962">1962</option>
|
||||
<option value="1961">1961</option>
|
||||
<option value="1960">1960</option>
|
||||
<option value="1959">1959</option>
|
||||
<option value="1958">1958</option>
|
||||
<option value="1957">1957</option>
|
||||
<option value="1956">1956</option>
|
||||
<option value="1955">1955</option>
|
||||
<option value="1954">1954</option>
|
||||
<option value="1953">1953</option>
|
||||
<option value="1952">1952</option>
|
||||
<option value="1951">1951</option>
|
||||
<option value="1950">1950</option>
|
||||
<option value="1949">1949</option>
|
||||
<option value="1948">1948</option>
|
||||
<option value="1947">1947</option>
|
||||
<option value="1946">1946</option>
|
||||
<option value="1945">1945</option>
|
||||
<option value="1944">1944</option>
|
||||
<option value="1943">1943</option>
|
||||
<option value="1942">1942</option>
|
||||
<option value="1941">1941</option>
|
||||
<option value="1940">1940</option>
|
||||
<option value="1939">1939</option>
|
||||
<option value="1938">1938</option>
|
||||
<option value="1937">1937</option>
|
||||
<option value="1936">1936</option>
|
||||
<option value="1935">1935</option>
|
||||
<option value="1934">1934</option>
|
||||
<option value="1933">1933</option>
|
||||
<option value="1932">1932</option>
|
||||
<option value="1931">1931</option>
|
||||
<option value="1930">1930</option>
|
||||
<option value="1929">1929</option>
|
||||
<option value="1928">1928</option>
|
||||
<option value="1927">1927</option>
|
||||
<option value="1926">1926</option>
|
||||
<option value="1925">1925</option>
|
||||
<option value="1924">1924</option>
|
||||
<option value="1923">1923</option>
|
||||
<option value="1922">1922</option>
|
||||
<option value="1921">1921</option>
|
||||
<option value="1920">1920</option>
|
||||
<option value="1919">1919</option>
|
||||
<option value="1918">1918</option>
|
||||
<option value="1917">1917</option>
|
||||
<option value="1916">1916</option>
|
||||
<option value="1915">1915</option>
|
||||
<option value="1914">1914</option>
|
||||
<option value="1913">1913</option>
|
||||
<option value="1912">1912</option>
|
||||
<option value="1911">1911</option>
|
||||
<option value="1910">1910</option>
|
||||
<option value="1909">1909</option>
|
||||
<option value="1908">1908</option>
|
||||
<option value="1907">1907</option>
|
||||
<option value="1906">1906</option>
|
||||
<option value="1905">1905</option>
|
||||
<option value="1904">1904</option>
|
||||
<option value="1903">1903</option>
|
||||
<option value="1902">1902</option>
|
||||
<option value="1901">1901</option>
|
||||
<option value="1900">1900</option>
|
||||
<option value="1899">1899</option>
|
||||
<option value="1898">1898</option>
|
||||
<option value="1897">1897</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-prepend" id="basic-addon1">
|
||||
<span class="input-group-text">@</span>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Subdomain</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Your subdomain" aria-label="Recipient's username" aria-describedby="basic-addon2">
|
||||
<span class="input-group-append" id="basic-addon2">
|
||||
<span class="input-group-text">.example.com</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Your vanity URL</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-prepend" id="basic-addon3">
|
||||
<span class="input-group-text">https://example.com/users/</span>
|
||||
</span>
|
||||
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Price</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</span>
|
||||
<input type="text" class="form-control text-right" aria-label="Amount (to the nearest dollar)">
|
||||
<span class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Button input</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:void(0)">Action</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tags</label>
|
||||
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Beast</label>
|
||||
<select name="beast" id="select-beast" class="form-control custom-select">
|
||||
<option value="1">Chuck Testa</option>
|
||||
<option value="4">Sage Cattabriga-Alosa</option>
|
||||
<option value="3">Nikola Tesla</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Users list</label>
|
||||
<select name="user" id="select-users" class="form-control custom-select">
|
||||
{% for user in site.data.users %}
|
||||
<option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>{{ user.name }} {{ user.surname }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Countries</label>
|
||||
<select name="country" id="select-countries" class="form-control custom-select">
|
||||
<option value="br" data-data='{"image": "./assets/images/flags/br.svg"}'>Brazil</option>
|
||||
<option value="cz" data-data='{"image": "./assets/images/flags/cz.svg"}'>Czech Republic</option>
|
||||
<option value="de" data-data='{"image": "./assets/images/flags/de.svg"}'>Germany</option>
|
||||
<option value="pl" data-data='{"image": "./assets/images/flags/pl.svg"}' selected>Poland</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<div class="d-flex">
|
||||
<a href="javascript:void(0)" class="btn btn-link">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary ml-auto">Send data</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% contentfor js %}
|
||||
<script>
|
||||
require(['jquery', 'selectize'], function ($, selectize) {
|
||||
$(document).ready(function () {
|
||||
$('#input-tags').selectize({
|
||||
delimiter: ',',
|
||||
persist: false,
|
||||
create: function (input) {
|
||||
return {
|
||||
value: input,
|
||||
text: input
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#select-beast').selectize({});
|
||||
|
||||
$('#select-users').selectize({
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
|
||||
'<span class="title">' + escape(data.text) + '</span>' +
|
||||
'</div>';
|
||||
},
|
||||
item: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
|
||||
escape(data.text) +
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#select-countries').selectize({
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
|
||||
'<span class="title">' + escape(data.text) + '</span>' +
|
||||
'</div>';
|
||||
},
|
||||
item: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
|
||||
escape(data.text) +
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endcontentfor %}
|
||||
@@ -0,0 +1,447 @@
|
||||
<div class="card">
|
||||
<div class="card-header card-header-default">
|
||||
<h3 class="card-title">Default Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Static</label>
|
||||
<div class="form-control-plaintext">Username</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-text-input">Text</label>
|
||||
<input type="text" class="form-control" id="example-text-input" name="example-text-input" placeholder="Text..">
|
||||
<div class="form-text text-muted">Further info about this input</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-email-input">Email</label>
|
||||
<input type="email" class="form-control" id="example-email-input" name="example-email-input" placeholder="Email..">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-password-input">Password</label>
|
||||
<input type="password" class="form-control" id="example-password-input" name="example-password-input" placeholder="Password..">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-text-input-valid">Valid State</label>
|
||||
<input type="text" class="form-control is-valid" id="example-text-input-valid" name="example-text-input-valid" placeholder="Valid State..">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-text-input-invalid">Invalid State</label>
|
||||
<input type="text" class="form-control is-invalid" id="example-text-input-invalid" name="example-text-input-invalid"
|
||||
placeholder="Invalid State..">
|
||||
<div class="invalid-feedback">Invalid feedback</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-disabled-input">Disabled</label>
|
||||
<input type="text" class="form-control" id="example-disabled-input" name="example-disabled-input" placeholder="Disabled.." disabled="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-textarea-input">Textarea</label>
|
||||
<textarea class="form-control" id="example-textarea-input" name="example-textarea-input" rows="6" placeholder="Content.."></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-select">Select</label>
|
||||
<select class="form-control" id="example-select" name="example-select">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-custom-select">Custom Select</label>
|
||||
<select class="form-control custom-select" id="example-custom-select" name="example-custom-select">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-multiple-select">Multiple Select</label>
|
||||
<select class="form-control" id="example-multiple-select" name="example-multiple-select" size="7" multiple="">
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
<option value="4">Option #4</option>
|
||||
<option value="5">Option #5</option>
|
||||
<option value="6">Option #6</option>
|
||||
<option value="7">Option #7</option>
|
||||
<option value="8">Option #8</option>
|
||||
<option value="9">Option #9</option>
|
||||
<option value="10">Option #10</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Radios</label>
|
||||
<div class="custom-controls-stacked">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" id="example-radio1" name="example-radios" value="option1" checked="">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 1</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" id="example-radio2" name="example-radios" value="option2">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 2</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" id="example-radio3" name="example-radios" value="option3">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Inline Radios</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" id="example-inline-radio1" name="example-inline-radios" value="option1" checked="">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 1</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" id="example-inline-radio2" name="example-inline-radios" value="option2">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 2</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" id="example-inline-radio3" name="example-inline-radios" value="option3">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Checkboxes</label>
|
||||
<div class="custom-controls-stacked">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="example-checkbox1" name="example-checkbox1" value="option1" checked="">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 1</span>
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="example-checkbox2" name="example-checkbox2" value="option2">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 2</span>
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="example-checkbox3" name="example-checkbox3" value="option3">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Inline Checkboxes</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="example-inline-checkbox1" name="example-inline-checkbox1" value="option1"
|
||||
checked="">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 1</span>
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="example-inline-checkbox2" name="example-inline-checkbox2" value="option2">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 2</span>
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="example-inline-checkbox3" name="example-inline-checkbox3" value="option3">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-file-input">File Input</label>
|
||||
<input type="file" id="example-file-input" name="example-file-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-file-multiple-input">File Input (Multiple)</label>
|
||||
<input type="file" id="example-file-multiple-input" name="example-file-multiple-input" multiple="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Bootstrap's Custom File Input</label>
|
||||
<label class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="example-file-input-custom" name="example-file-input-custom">
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Bootstrap's Custom File Input (Multiple)</label>
|
||||
<label class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="example-file-multiple-input-custom" name="example-file-multiple-input-custom" multiple="">
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-select-2">Selectize.js</label>
|
||||
<select class="form-control custom-select" id="example-select-2" name="example-select" data-selectize>
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="example-select-2">Selectize.js</label>
|
||||
<select class="form-control custom-select" id="example-select-3" name="example-select">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Country</label>
|
||||
<select id="select-country" class="form-control custom-select" placeholder="Select a country..." data-selectize>
|
||||
<option value="">Select a country...</option>
|
||||
<option value="AF">Afghanistan</option>
|
||||
<option value="AX">Åland Islands</option>
|
||||
<option value="AL">Albania</option>
|
||||
<option value="DZ">Algeria</option>
|
||||
<option value="AS">American Samoa</option>
|
||||
<option value="AD">Andorra</option>
|
||||
<option value="AO">Angola</option>
|
||||
<option value="AI">Anguilla</option>
|
||||
<option value="AQ">Antarctica</option>
|
||||
<option value="AG">Antigua and Barbuda</option>
|
||||
<option value="AR">Argentina</option>
|
||||
<option value="AM">Armenia</option>
|
||||
<option value="AW">Aruba</option>
|
||||
<option value="AU">Australia</option>
|
||||
<option value="AT">Austria</option>
|
||||
<option value="AZ">Azerbaijan</option>
|
||||
<option value="BS">Bahamas</option>
|
||||
<option value="BH">Bahrain</option>
|
||||
<option value="BD">Bangladesh</option>
|
||||
<option value="BB">Barbados</option>
|
||||
<option value="BY">Belarus</option>
|
||||
<option value="BE">Belgium</option>
|
||||
<option value="BZ">Belize</option>
|
||||
<option value="BJ">Benin</option>
|
||||
<option value="BM">Bermuda</option>
|
||||
<option value="BT">Bhutan</option>
|
||||
<option value="BO">Bolivia, Plurinational State of</option>
|
||||
<option value="BA">Bosnia and Herzegovina</option>
|
||||
<option value="BW">Botswana</option>
|
||||
<option value="BV">Bouvet Island</option>
|
||||
<option value="BR">Brazil</option>
|
||||
<option value="IO">British Indian Ocean Territory</option>
|
||||
<option value="BN">Brunei Darussalam</option>
|
||||
<option value="BG">Bulgaria</option>
|
||||
<option value="BF">Burkina Faso</option>
|
||||
<option value="BI">Burundi</option>
|
||||
<option value="KH">Cambodia</option>
|
||||
<option value="CM">Cameroon</option>
|
||||
<option value="CA">Canada</option>
|
||||
<option value="CV">Cape Verde</option>
|
||||
<option value="KY">Cayman Islands</option>
|
||||
<option value="CF">Central African Republic</option>
|
||||
<option value="TD">Chad</option>
|
||||
<option value="CL">Chile</option>
|
||||
<option value="CN">China</option>
|
||||
<option value="CX">Christmas Island</option>
|
||||
<option value="CC">Cocos (Keeling) Islands</option>
|
||||
<option value="CO">Colombia</option>
|
||||
<option value="KM">Comoros</option>
|
||||
<option value="CG">Congo</option>
|
||||
<option value="CD">Congo, the Democratic Republic of the</option>
|
||||
<option value="CK">Cook Islands</option>
|
||||
<option value="CR">Costa Rica</option>
|
||||
<option value="CI">Côte d'Ivoire</option>
|
||||
<option value="HR">Croatia</option>
|
||||
<option value="CU">Cuba</option>
|
||||
<option value="CY">Cyprus</option>
|
||||
<option value="CZ">Czech Republic</option>
|
||||
<option value="DK">Denmark</option>
|
||||
<option value="DJ">Djibouti</option>
|
||||
<option value="DM">Dominica</option>
|
||||
<option value="DO">Dominican Republic</option>
|
||||
<option value="EC">Ecuador</option>
|
||||
<option value="EG">Egypt</option>
|
||||
<option value="SV">El Salvador</option>
|
||||
<option value="GQ">Equatorial Guinea</option>
|
||||
<option value="ER">Eritrea</option>
|
||||
<option value="EE">Estonia</option>
|
||||
<option value="ET">Ethiopia</option>
|
||||
<option value="FK">Falkland Islands (Malvinas)</option>
|
||||
<option value="FO">Faroe Islands</option>
|
||||
<option value="FJ">Fiji</option>
|
||||
<option value="FI">Finland</option>
|
||||
<option value="FR">France</option>
|
||||
<option value="GF">French Guiana</option>
|
||||
<option value="PF">French Polynesia</option>
|
||||
<option value="TF">French Southern Territories</option>
|
||||
<option value="GA">Gabon</option>
|
||||
<option value="GM">Gambia</option>
|
||||
<option value="GE">Georgia</option>
|
||||
<option value="DE">Germany</option>
|
||||
<option value="GH">Ghana</option>
|
||||
<option value="GI">Gibraltar</option>
|
||||
<option value="GR">Greece</option>
|
||||
<option value="GL">Greenland</option>
|
||||
<option value="GD">Grenada</option>
|
||||
<option value="GP">Guadeloupe</option>
|
||||
<option value="GU">Guam</option>
|
||||
<option value="GT">Guatemala</option>
|
||||
<option value="GG">Guernsey</option>
|
||||
<option value="GN">Guinea</option>
|
||||
<option value="GW">Guinea-Bissau</option>
|
||||
<option value="GY">Guyana</option>
|
||||
<option value="HT">Haiti</option>
|
||||
<option value="HM">Heard Island and McDonald Islands</option>
|
||||
<option value="VA">Holy See (Vatican City State)</option>
|
||||
<option value="HN">Honduras</option>
|
||||
<option value="HK">Hong Kong</option>
|
||||
<option value="HU">Hungary</option>
|
||||
<option value="IS">Iceland</option>
|
||||
<option value="IN">India</option>
|
||||
<option value="ID">Indonesia</option>
|
||||
<option value="IR">Iran, Islamic Republic of</option>
|
||||
<option value="IQ">Iraq</option>
|
||||
<option value="IE">Ireland</option>
|
||||
<option value="IM">Isle of Man</option>
|
||||
<option value="IL">Israel</option>
|
||||
<option value="IT">Italy</option>
|
||||
<option value="JM">Jamaica</option>
|
||||
<option value="JP">Japan</option>
|
||||
<option value="JE">Jersey</option>
|
||||
<option value="JO">Jordan</option>
|
||||
<option value="KZ">Kazakhstan</option>
|
||||
<option value="KE">Kenya</option>
|
||||
<option value="KI">Kiribati</option>
|
||||
<option value="KP">Korea, Democratic People's Republic of</option>
|
||||
<option value="KR">Korea, Republic of</option>
|
||||
<option value="KW">Kuwait</option>
|
||||
<option value="KG">Kyrgyzstan</option>
|
||||
<option value="LA">Lao People's Democratic Republic</option>
|
||||
<option value="LV">Latvia</option>
|
||||
<option value="LB">Lebanon</option>
|
||||
<option value="LS">Lesotho</option>
|
||||
<option value="LR">Liberia</option>
|
||||
<option value="LY">Libyan Arab Jamahiriya</option>
|
||||
<option value="LI">Liechtenstein</option>
|
||||
<option value="LT">Lithuania</option>
|
||||
<option value="LU">Luxembourg</option>
|
||||
<option value="MO">Macao</option>
|
||||
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
|
||||
<option value="MG">Madagascar</option>
|
||||
<option value="MW">Malawi</option>
|
||||
<option value="MY">Malaysia</option>
|
||||
<option value="MV">Maldives</option>
|
||||
<option value="ML">Mali</option>
|
||||
<option value="MT">Malta</option>
|
||||
<option value="MH">Marshall Islands</option>
|
||||
<option value="MQ">Martinique</option>
|
||||
<option value="MR">Mauritania</option>
|
||||
<option value="MU">Mauritius</option>
|
||||
<option value="YT">Mayotte</option>
|
||||
<option value="MX">Mexico</option>
|
||||
<option value="FM">Micronesia, Federated States of</option>
|
||||
<option value="MD">Moldova, Republic of</option>
|
||||
<option value="MC">Monaco</option>
|
||||
<option value="MN">Mongolia</option>
|
||||
<option value="ME">Montenegro</option>
|
||||
<option value="MS">Montserrat</option>
|
||||
<option value="MA">Morocco</option>
|
||||
<option value="MZ">Mozambique</option>
|
||||
<option value="MM">Myanmar</option>
|
||||
<option value="NA">Namibia</option>
|
||||
<option value="NR">Nauru</option>
|
||||
<option value="NP">Nepal</option>
|
||||
<option value="NL">Netherlands</option>
|
||||
<option value="AN">Netherlands Antilles</option>
|
||||
<option value="NC">New Caledonia</option>
|
||||
<option value="NZ">New Zealand</option>
|
||||
<option value="NI">Nicaragua</option>
|
||||
<option value="NE">Niger</option>
|
||||
<option value="NG">Nigeria</option>
|
||||
<option value="NU">Niue</option>
|
||||
<option value="NF">Norfolk Island</option>
|
||||
<option value="MP">Northern Mariana Islands</option>
|
||||
<option value="NO">Norway</option>
|
||||
<option value="OM">Oman</option>
|
||||
<option value="PK">Pakistan</option>
|
||||
<option value="PW">Palau</option>
|
||||
<option value="PS">Palestinian Territory, Occupied</option>
|
||||
<option value="PA">Panama</option>
|
||||
<option value="PG">Papua New Guinea</option>
|
||||
<option value="PY">Paraguay</option>
|
||||
<option value="PE">Peru</option>
|
||||
<option value="PH">Philippines</option>
|
||||
<option value="PN">Pitcairn</option>
|
||||
<option value="PL">Poland</option>
|
||||
<option value="PT">Portugal</option>
|
||||
<option value="PR">Puerto Rico</option>
|
||||
<option value="QA">Qatar</option>
|
||||
<option value="RE">Réunion</option>
|
||||
<option value="RO">Romania</option>
|
||||
<option value="RU">Russian Federation</option>
|
||||
<option value="RW">Rwanda</option>
|
||||
<option value="BL">Saint Barthélemy</option>
|
||||
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
|
||||
<option value="KN">Saint Kitts and Nevis</option>
|
||||
<option value="LC">Saint Lucia</option>
|
||||
<option value="MF">Saint Martin (French part)</option>
|
||||
<option value="PM">Saint Pierre and Miquelon</option>
|
||||
<option value="VC">Saint Vincent and the Grenadines</option>
|
||||
<option value="WS">Samoa</option>
|
||||
<option value="SM">San Marino</option>
|
||||
<option value="ST">Sao Tome and Principe</option>
|
||||
<option value="SA">Saudi Arabia</option>
|
||||
<option value="SN">Senegal</option>
|
||||
<option value="RS">Serbia</option>
|
||||
<option value="SC">Seychelles</option>
|
||||
<option value="SL">Sierra Leone</option>
|
||||
<option value="SG">Singapore</option>
|
||||
<option value="SK">Slovakia</option>
|
||||
<option value="SI">Slovenia</option>
|
||||
<option value="SB">Solomon Islands</option>
|
||||
<option value="SO">Somalia</option>
|
||||
<option value="ZA">South Africa</option>
|
||||
<option value="GS">South Georgia and the South Sandwich Islands</option>
|
||||
<option value="ES">Spain</option>
|
||||
<option value="LK">Sri Lanka</option>
|
||||
<option value="SD">Sudan</option>
|
||||
<option value="SR">Suriname</option>
|
||||
<option value="SJ">Svalbard and Jan Mayen</option>
|
||||
<option value="SZ">Swaziland</option>
|
||||
<option value="SE">Sweden</option>
|
||||
<option value="CH">Switzerland</option>
|
||||
<option value="SY">Syrian Arab Republic</option>
|
||||
<option value="TW">Taiwan, Province of China</option>
|
||||
<option value="TJ">Tajikistan</option>
|
||||
<option value="TZ">Tanzania, United Republic of</option>
|
||||
<option value="TH">Thailand</option>
|
||||
<option value="TL">Timor-Leste</option>
|
||||
<option value="TG">Togo</option>
|
||||
<option value="TK">Tokelau</option>
|
||||
<option value="TO">Tonga</option>
|
||||
<option value="TT">Trinidad and Tobago</option>
|
||||
<option value="TN">Tunisia</option>
|
||||
<option value="TR">Turkey</option>
|
||||
<option value="TM">Turkmenistan</option>
|
||||
<option value="TC">Turks and Caicos Islands</option>
|
||||
<option value="TV">Tuvalu</option>
|
||||
<option value="UG">Uganda</option>
|
||||
<option value="UA">Ukraine</option>
|
||||
<option value="AE">United Arab Emirates</option>
|
||||
<option value="GB">United Kingdom</option>
|
||||
<option value="US">United States</option>
|
||||
<option value="UM">United States Minor Outlying Islands</option>
|
||||
<option value="UY">Uruguay</option>
|
||||
<option value="UZ">Uzbekistan</option>
|
||||
<option value="VU">Vanuatu</option>
|
||||
<option value="VE">Venezuela, Bolivarian Republic of</option>
|
||||
<option value="VN">Viet Nam</option>
|
||||
<option value="VG">Virgin Islands, British</option>
|
||||
<option value="VI">Virgin Islands, U.S.</option>
|
||||
<option value="WF">Wallis and Futuna</option>
|
||||
<option value="EH">Western Sahara</option>
|
||||
<option value="YE">Yemen</option>
|
||||
<option value="ZM">Zambia</option>
|
||||
<option value="ZW">Zimbabwe</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Button Groups</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
<i class="fa fa-search"></i> Search
|
||||
</button>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="example-input1-group2" name="example-input1-group2" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group ">
|
||||
<div class="input-group">
|
||||
<input type="email" class="form-control" id="example-input2-group2" name="example-input2-group2" placeholder="Email">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
<i class="fa fa-facebook"></i>
|
||||
</button>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="example-input3-group2" name="example-input3-group2" placeholder="Search">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,88 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Dropdown Groups</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary">Options</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-bell mr-5"></i>News
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="example-input1-group3" name="example-input1-group3" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group ">
|
||||
<div class="input-group">
|
||||
<input type="email" class="form-control" id="example-input2-group3" name="example-input2-group3" placeholder="Email">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
|
||||
<i class="fa fa-angle-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-bell mr-5"></i>News
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group ">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn dropup">
|
||||
<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
|
||||
<i class="fa fa-angle-up"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-bell mr-5"></i>News
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="example-input3-group3" name="example-input3-group3" placeholder="..">
|
||||
<div class="input-group-btn dropup">
|
||||
<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
|
||||
<i class="fa fa-angle-up"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-bell mr-5"></i>News
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,41 @@
|
||||
<div class="card">
|
||||
<form class="card-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationServer01">First name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationServer02">Last name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationServer03">City</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationServer04">State</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationServer05">Zip</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icon/Text Groups</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-prepend"><i class="fa fa-user"></i></span>
|
||||
<input type="text" class="form-control" id="example-input1-group1" name="example-input1-group1" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="email" class="form-control" id="example-input2-group1" name="example-input2-group1" placeholder="Email">
|
||||
<span class="input-group-append"><i class="fa fa-envelope-o"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-prepend"><i class="fa fa-euro"></i></span>
|
||||
<input type="text" class="form-control" id="example-input3-group1" name="example-input3-group1" placeholder="..">
|
||||
<span class="input-group-append">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,117 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="name@example.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Example select</label>
|
||||
<select class="form-control">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Example select</label>
|
||||
<select class="form-control">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Example multiple select</label>
|
||||
<select multiple class="form-control">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Example textarea</label>
|
||||
<textarea class="form-control" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="validationDefault03">City</label>
|
||||
<input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-7 form-group">
|
||||
<label for="validationDefault04">State</label>
|
||||
<input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 form-group">
|
||||
<label for="validationDefault05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Example file input</label>
|
||||
<input type="file" class="form-control-file">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control">
|
||||
<small class="form-text text-muted">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Custom select</label>
|
||||
<select class="">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Custom file input</label>
|
||||
<label class="custom-file custom-file-block">
|
||||
<input type="file" id="file2" class="custom-file-input">
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-controls-stacked">
|
||||
<label class="custom-control custom-radio">
|
||||
<input name="radio-stacked" type="radio" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Toggle this custom radio</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input name="radio-stacked" type="radio" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Or toggle this other custom radio</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input name="radio-stacked" type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Toggle this custom radio</span>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,96 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="fullcalendar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
require(['fullcalendar', 'jquery'], function () {
|
||||
$(document).ready(function () {
|
||||
$('#fullcalendar').fullCalendar({
|
||||
eventColor: tabler.colors.blue,
|
||||
displayEventTime: true,
|
||||
defaultDate: '2017-11-12',
|
||||
editable: true,
|
||||
eventLimit: true,
|
||||
columnFormat: 'dddd',
|
||||
timeFormat: 'H:mm',
|
||||
header: {
|
||||
left: 'today',
|
||||
center: 'title',
|
||||
right: 'prev,next'
|
||||
},
|
||||
viewRender: function(view, element) {
|
||||
if(view.name === 'month') {
|
||||
element.find('.fc-head-container').addClass('table');
|
||||
}
|
||||
},
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: '2017-11-01',
|
||||
color: tabler.colors.red
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: '2017-11-07',
|
||||
end: '2017-11-10'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2017-11-09T16:00:00',
|
||||
color: tabler.colors.yellow
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2017-11-16T16:00:00',
|
||||
color: tabler.colors.yellow
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2017-11-23T16:00:00',
|
||||
color: tabler.colors.yellow
|
||||
},
|
||||
{
|
||||
title: 'Conference',
|
||||
start: '2017-11-11',
|
||||
end: '2017-11-13'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2017-11-12T10:30:00',
|
||||
end: '2017-11-12T12:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: '2017-11-12T12:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2017-11-12T14:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Happy Hour',
|
||||
start: '2017-11-12T17:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Dinner',
|
||||
start: '2017-11-12T20:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: '2017-11-13T07:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
url: 'http://google.com/',
|
||||
start: '2017-11-28'
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
Card with header content
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid architecto commodi dolorum nam odio perspiciatis quo sapiente vitae voluptatem? Accusamus beatae distinctio dolores laborum nobis, obcaecati odio quia reprehenderit.
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,167 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">HTTP Request</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-4 col-md-2">
|
||||
<label class="form-label">
|
||||
Method <span class="form-required">*</span>
|
||||
</label>
|
||||
<select class="custom-select">
|
||||
<option value="GET">GET</option>
|
||||
<option value="POST">POST</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="HEAD">HEAD</option>
|
||||
<option value="DELETE">DELETE</option>
|
||||
<option value="PATCH">PATCH</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-sm-8 col-md-10">
|
||||
<label class="form-label">
|
||||
URL <span class="form-required">*</span>
|
||||
</label>
|
||||
<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-label">Assertions</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="pl-0">Source</th>
|
||||
<th>Property</th>
|
||||
<th>Comparison</th>
|
||||
<th class="pr-0">Target</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="pl-0">
|
||||
<select class="custom-select">
|
||||
<option value="STATUS_CODE" selected>Status code</option>
|
||||
<option value="JSON_BODY">JSON body</option>
|
||||
<option value="HEADERS">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control"></td>
|
||||
<td>
|
||||
<select class="custom-select">
|
||||
<option value="EQUALS" selected>Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="pr-0">
|
||||
<input type="text" class="form-control" value="200">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pl-0">
|
||||
<select class="custom-select">
|
||||
<option value="STATUS_CODE">Status code</option>
|
||||
<option value="JSON_BODY" selected>JSON body</option>
|
||||
<option value="HEADERS">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="parameters.alt.type">
|
||||
</td>
|
||||
<td>
|
||||
<select class="custom-select">
|
||||
<option value="EQUALS">Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE" selected>Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="pr-0">
|
||||
<input type="text" class="form-control" value="string">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pl-0">
|
||||
<select class="custom-select">
|
||||
<option value="STATUS_CODE">Status code</option>
|
||||
<option value="JSON_BODY">JSON body</option>
|
||||
<option value="HEADERS">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME" selected>Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control"></td>
|
||||
<td>
|
||||
<select class="custom-select">
|
||||
<option value="EQUALS">Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN" selected>Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="pr-0">
|
||||
<input type="text" class="form-control" value="500">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pl-0">
|
||||
<select class="custom-select">
|
||||
<option value="STATUS_CODE">Status code</option>
|
||||
<option value="JSON_BODY">JSON body</option>
|
||||
<option value="HEADERS" selected>Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="content-type">
|
||||
</td>
|
||||
<td>
|
||||
<select class="custom-select">
|
||||
<option value="EQUALS" selected>Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="pr-0">
|
||||
<input type="text" class="form-control" value="application/json; charset=UTF-8">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<button type="submit" class="btn btn-primary">Make request</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="card p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="stamp stamp-md bg-{{ include.color | default: 'red' }} mr-3">
|
||||
<i class="{{ include.icon | default: 'fa fa-dollar' }}"></i>
|
||||
</span>
|
||||
<div>
|
||||
<h4 class="m-0"><a href="javascript:void(0)">{{ include.value | default: '16' }} <small>{{ include.description | default: 'Sales' }}</small></a></h4>
|
||||
<small class="text-muted">{{ include.subtitle | default: '6 waiting payments' }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
<div class="card {% if include.bg-color %}bg-{{ include.bg-color }} text-white{% endif %}">
|
||||
<div class="card-body p-4">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="stamp stamp-md {% if include.icon-color %}bg-{{ include.icon-color }}{% endif %}">
|
||||
<i class="{{ include.icon }}"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<div class="small text-muted">{{ include.title }}</div>
|
||||
<div class="h4 m-0">{{ include.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">{{ include.title }}</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<p>{{ include.description }} For more info <a href="{{ include.url }}" target="_blank">click here</a>.</p>
|
||||
<p><code><i class="{{ include.icon_class }} {{ include.icon_class }}-ICON_NAME"></i></code></p>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="icons-list-wrap">
|
||||
<ul class="icons-list">
|
||||
{% for icon in include.icons %}
|
||||
<li class="icons-list-item"><i class="{{ include.icon_class }} {{ icon }}" data-toggle="tooltip" title="{{ include.icon_class }} {{ icon }}"></i></li>
|
||||
{% endfor %}
|
||||
{% for icon in (0..20) %}
|
||||
<li></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
<div class="card bg-dark text-white">
|
||||
<img class="card-img" src="{{ site.data.photos[43].small }}" alt="Card image">
|
||||
<div class="card-img-overlay justify-content-end">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,68 @@
|
||||
<div class="card">
|
||||
<img src="{{ site.data.photos[1].small }}" class="card-img-top" alt="">
|
||||
<div class="card-body">
|
||||
|
||||
<h4 class="mb-4">Girl & Lake</h4>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-5">
|
||||
<i class="mdi mdi-camera mr-1"></i>ISO 200
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<i class="mdi mdi-camera-iris mr-1"></i>1/1000
|
||||
</div>
|
||||
<div class="col-5">3780 x 2984</div>
|
||||
<div class="col-7">9.54 MB</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5"><strong>Created:</strong></div>
|
||||
<div class="col-7">09 Jun 2017 11:32AM</div>
|
||||
<div class="col-5"><strong>Updated:</strong></div>
|
||||
<div class="col-7">19 Jun 2017 9:43PM</div>
|
||||
<div class="col-5"><strong>Bit Depth:</strong></div>
|
||||
<div class="col-7">16 bit</div>
|
||||
<div class="col-5"><strong>Creator:</strong></div>
|
||||
<div class="col-7">{{ site.data.users[1].name }} {{ site.data.users[1].surname }}</div>
|
||||
<div class="col-5"><strong>Used colors:</strong></div>
|
||||
<div class="col-7">
|
||||
<div class="colors-list">
|
||||
<span class="colors-list-item" style="background-color: #646432"></span>
|
||||
<span class="colors-list-item" style="background-color: #323232"></span>
|
||||
<span class="colors-list-item" style="background-color: #c8c8fa"></span>
|
||||
<span class="colors-list-item" style="background-color: #969696"></span>
|
||||
<span class="colors-list-item" style="background-color: #6496c8"></span>
|
||||
<span class="colors-list-item" style="background-color: #939f5f"></span>
|
||||
<span class="colors-list-item" style="background-color: #3264c8"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row align-items-center mb-4">
|
||||
<div class="col-5"><strong>Privacy</strong></div>
|
||||
<div class="col-7">
|
||||
<select class="custom-select custom-select-sm">
|
||||
<option value="">Public</option>
|
||||
<option value="">Private</option>
|
||||
<option value="">Friends</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-5"><strong>Collaborators</strong></div>
|
||||
<div class="col-7">
|
||||
<ul class="avatar-list avatar-list-stacked">
|
||||
{% for user in site.data.users limit: 6 offset: 1 %}
|
||||
<li class="avatar-list-item">
|
||||
<span class="avatar avatar-sm" style="background-image: url({{ user.photo }})"></span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="{{ site.data.photos[17].small }}" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<div class="card-subtitle">Lorem ipsum dolor sit amet.</div>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,98 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">#INV0015</h3>
|
||||
<div class="card-options">
|
||||
<button type="button" class="btn btn-primary" onclick="javascript:window.print();"><i class="si si-printer"></i> Print Invoice</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row my-8">
|
||||
<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-right">
|
||||
<p class="h3">Client</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ctr@example.com
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive push">
|
||||
<table class="table table-bordered table-hover">
|
||||
<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-right" style="width: 1%">Unit</th>
|
||||
<th class="text-right" style="width: 1%">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center">1</td>
|
||||
<td>
|
||||
<p class="font-w600 mb-1">Logo Creation</p>
|
||||
<div class="text-muted">Logo and business cards design</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$1.800,00</td>
|
||||
<td class="text-right">$1.800,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">2</td>
|
||||
<td>
|
||||
<p class="font-w600 mb-1">Online Store Design & Development</p>
|
||||
<div class="text-muted">Design/Development for all popular modern browsers</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$20.000,00</td>
|
||||
<td class="text-right">$20.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">3</td>
|
||||
<td>
|
||||
<p class="font-w600 mb-1">App Design</p>
|
||||
<div class="text-muted">Promotional mobile application</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$3.200,00</td>
|
||||
<td class="text-right">$3.200,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-w600 text-right">Subtotal</td>
|
||||
<td class="text-right">$25.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-w600 text-right">Vat Rate</td>
|
||||
<td class="text-right">20%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-w600 text-right">Vat Due</td>
|
||||
<td class="text-right">$5.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-weight-bold text-uppercase text-right">Total Due</td>
|
||||
<td class="font-weight-bold text-right">$30.000,00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="text-muted text-center">Thank you very much for doing business with us. We look forward to working with you again!</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,61 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Invoices</h3>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1">No.</th>
|
||||
<th>Invoice Subject</th>
|
||||
<th>Client</th>
|
||||
<th>VAT No.</th>
|
||||
<th>Created</th>
|
||||
<th>Status</th>
|
||||
<th>Price</th>
|
||||
<th>
|
||||
<span class="sr-only">Actions</span>
|
||||
</th>
|
||||
<th>
|
||||
<span class="sr-only">Download</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for invoice in site.data.invoices limit: 6 %}
|
||||
<tr>
|
||||
<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
|
||||
<td><a href="invoice.html" class="text-inherit">{{ invoice.name }}</a></td>
|
||||
<td>
|
||||
{{ invoice.client }}
|
||||
</td>
|
||||
<td>
|
||||
{{ invoice.vat-no }}
|
||||
</td>
|
||||
<td>
|
||||
{{ invoice.date }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-icon bg-{{ invoice.status }}"></span> {{ invoice.status-name }}
|
||||
</td>
|
||||
<td>{{ invoice.price }}</td>
|
||||
|
||||
<td class="text-right">
|
||||
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a class="icon" href="javascript:void(0)">
|
||||
<i class="fe fe-edit"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<h6 class="card-subtitle">Card subtitle</h6>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<div>
|
||||
<a href="javascript:void(0)" class="card-link">Card link</a>
|
||||
<a href="javascript:void(0)" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="{{ site.data.photos[7].small }}" alt="Card image cap">
|
||||
<ul class="list-group card-list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Content loader</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="dimmer active">
|
||||
<div class="loader"></div>
|
||||
<div class="dimmer-content">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
<form class="card" action="" method="get">
|
||||
|
||||
<div class="card-body">
|
||||
<div class="card-title">Sign In</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="exampleInputPassword1">
|
||||
Password
|
||||
<a href="./forgot-password.html" class="pull-right small">I forgot password</a>
|
||||
</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,81 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Audit Log
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-success"></span>
|
||||
<span class="timeline-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus enim eos ipsa voluptas. Adipisci dignissimos, dolores excepturi fugiat inventore minus molestias nam necessitatibus pariatur, quia sint totam. Blanditiis, praesentium temporibus?</span>
|
||||
<span class="timeline-time">Just now</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-info"></span>
|
||||
<span class="timeline-text">System shutdown <span class="badge badge-success">pending</span></span>
|
||||
<span class="timeline-time">14 mins</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-danger"></span>
|
||||
<span class="timeline-text">New invoice received</span>
|
||||
<span class="timeline-time">20 mins</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-accent"></span>
|
||||
<span class="timeline-text">DB overloaded 80% <span class="badge badge-warning">settled</span></span>
|
||||
<span class="timeline-time">1 hr</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-warning"></span>
|
||||
<span class="timeline-text">System error - <a href="javascript:void(0)">Check</a></span>
|
||||
<span class="timeline-time">2 hrs</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-brand"></span>
|
||||
<span class="timeline-text">Production server down</span>
|
||||
<span class="timeline-time">3 hrs</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-info"></span>
|
||||
<span class="timeline-text">Production server up</span>
|
||||
<span class="timeline-time">5 hrs</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-success"></span>
|
||||
<span class="timeline-text">New order received <span class="badge badge-danger">urgent</span></span>
|
||||
<span class="timeline-time">7 hrs</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-success"></span>
|
||||
<span class="timeline-text">12 new users registered</span>
|
||||
<span class="timeline-time">Just now</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-info"></span>
|
||||
<span class="timeline-text">System shutdown <span class="badge badge-success">pending</span></span>
|
||||
<span class="timeline-time">14 mins</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-danger"></span>
|
||||
<span class="timeline-text">New invoice received</span>
|
||||
<span class="timeline-time">20 mins</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-accent"></span>
|
||||
<span class="timeline-text">DB overloaded 80% <span class="badge badge-warning">settled</span></span>
|
||||
<span class="timeline-time">1 hr</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-danger"></span>
|
||||
<span class="timeline-text">New invoice received</span>
|
||||
<span class="timeline-time">20 mins</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-badge bg-accent"></span>
|
||||
<span class="timeline-text">DB overloaded 80% <span class="badge badge-warning">settled</span></span>
|
||||
<span class="timeline-time">1 hr</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Germany map</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="map map-square">
|
||||
<div class="map-content" id="map-germany-svg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
{% include js/map-world.js id="map-germany-svg" map="de_merc" data=site.data.map-germany %}
|
||||
</script>
|
||||
@@ -0,0 +1,54 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Map of Warsaw metro</h3>
|
||||
<div class="card-options">
|
||||
<div class="stamp bg-red">L2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-map" id="map-metro"></div>
|
||||
|
||||
<div class="card-body">
|
||||
<ul class="timeline">
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge bg-red"></div>
|
||||
Rondo Daszyńskiego
|
||||
<div class="timeline-time">2 min. ago</div>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge"></div>
|
||||
Rondo ONZ
|
||||
<div class="timeline-time">1 min ago</div>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge bg-primary"></div>
|
||||
<div>
|
||||
<strong>Świętokrzyska</strong>
|
||||
<small class="d-block text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
|
||||
</div>
|
||||
<div class="timeline-time text-muted-dark">now</div>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge"></div>
|
||||
Nowy Świat-Uniwersytet
|
||||
<div class="timeline-time">2 min.</div>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge"></div>
|
||||
Centrum Nauki Kopernik
|
||||
<div class="timeline-time">3 min.</div>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge"></div>
|
||||
Stadion Narodowy
|
||||
<div class="timeline-time">5 min.</div>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge bg-green"></div>
|
||||
Dworzec Wileński
|
||||
<div class="timeline-time">7 min.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include js-google-maps.html id="map-metro" data="metro" %}
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Visitors map</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="map">
|
||||
<div class="map-content" id="map-world-svg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
{% include js/map-world.js id="map-world-svg" map="world_mill" data=site.data.map-world %}
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Match results</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center sm-gutters">
|
||||
<div class="col text-left">
|
||||
<img src="assets/images/teams/real-madrid.png" alt="">
|
||||
</div>
|
||||
<div class="col-auto text-center">
|
||||
<div class="display-4 font-weight-bold">2:4</div>
|
||||
<div class="text-muted">Today, 20:45</div>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<img src="assets/images/teams/fc-barcelona.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="card-table table table-center table-md mt-4">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="font-weight-bold">Match stats</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Fouls</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Yellow Cards</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>0</td>
|
||||
<td>Red Cards</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>0</td>
|
||||
<td>Offsides</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Corner Kicks</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Saves</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
<div class="card bg-{{ include.color | default: 'success' }}">
|
||||
<div class="card-body text-white">
|
||||
<div class="card-value pull-right">{{ include.rate | default: '23%' }}</div>
|
||||
<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
|
||||
<div>{{ include.description | default: 'Users online' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-value pull-right text-{{ include.color | default: 'success' }}">{{ include.rate | default: '23%' }}</div>
|
||||
<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
|
||||
<div>{{ include.description | default: 'Users online' }}</div>
|
||||
{% if include.progress %}
|
||||
<div class="mt-4">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-{{ include.color | default: 'success' }}" style="width: {{ include.progress }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,39 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Members</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="height: 15rem">
|
||||
<ul class="list-unstyled list-separated">
|
||||
|
||||
{% for user in site.data.users limit: 6 offset: 30 %}
|
||||
<li class="list-separated-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<span class="avatar avatar-md d-block" style="background-image: url({{ user.photo }})"></span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
<a href="javascript:void(0)" class="text-inherit">{{ user.name }} {{ user.surname }}</a>
|
||||
</div>
|
||||
<small class="d-block item-except text-sm text-muted h-1x">{{ user.email }}</small>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="item-action dropdown">
|
||||
<a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
|
||||
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
|
||||
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Private message</h3>
|
||||
<div class="card-subtitle"> Send private message to Olivia Wenscombe </div>
|
||||
<form action="">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Subject</label>
|
||||
<input placeholder="Message subject" class="form-control" type="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Message</label>
|
||||
<textarea rows="3" placeholder="Your message" class="form-control"></textarea>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-block">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 15%">15%</div>
|
||||
<div class="progress-bar bg-success" style="width: 35%">35%</div>
|
||||
<div class="progress-bar bg-warning" style="width: 44%">44%</div>
|
||||
<div class="progress-bar bg-danger" style="width: 16%">16%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Client Notifications</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled">
|
||||
<li class="media align-items-center">
|
||||
<div class="media-icon align-self-start bg-danger text-white mr-3">
|
||||
<i class="si si-home"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
2 day delay - Schedule a Meeting with <a href="javascript:void(0)">{{ site.data.users[16].name }} {{ site.data.users[16].surname }}</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media align-items-center mt-4">
|
||||
<div class="media-icon align-self-start bg-primary text-white mr-3">
|
||||
<i class="si si-present"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
Client 1 Year Anniversary <a href="">Send Email</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media align-items-center mt-4">
|
||||
<div class="media-icon align-self-start bg-warning text-white mr-3">
|
||||
<i class="si si-home"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
Reminder - Call <a href="">{{ site.data.users[12].name }} {{ site.data.users[12].surname }}</a> to confirm affiliate pricing
|
||||
</div>
|
||||
</li>
|
||||
<li class="media align-items-center mt-4">
|
||||
<div class="media-icon align-self-start bg-success text-white mr-3">
|
||||
<i class="si si-home"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
Contact signed by <a href="">{{ site.data.users[11].name }} {{ site.data.users[11].surname }}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href=""><i class="si si-plus"></i> Add Task</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Card with options</h4>
|
||||
<div class="card-options">
|
||||
<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
|
||||
<i class="si si-pencil"></i>
|
||||
</button>
|
||||
<div class="dropdown card-options-dropdown">
|
||||
<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-bell mr-3"></i>News
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-envelope mr-3"></i>Messages
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-pencil mr-3"></i>Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi fugiat fugit numquam quae rerum sed ut! Ad, blanditiis consequatur corporis cumque deserunt dolorem id perferendis recusandae repellendus sed, suscipit vitae.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<div class="card">
|
||||
<div class="card-tabs">
|
||||
<a href="" class="card-tabs-item">
|
||||
<h3 class="mb-1">72</h3>
|
||||
<div class="text-uppercase text-success font-weight-bold h6 m-0 text-nowrap">Up to date</div>
|
||||
</a>
|
||||
<a href="" class="card-tabs-item">
|
||||
<h3 class="mb-1">25</h3>
|
||||
<div class="text-uppercase text-warning font-weight-bold h6 m-0 text-nowrap">Outdated</div>
|
||||
</a>
|
||||
<a href="" class="card-tabs-item active">
|
||||
<h3 class="mb-1">2</h3>
|
||||
<div class="text-uppercase text-danger font-weight-bold h6 m-0 text-nowrap">Danger</div>
|
||||
</a>
|
||||
</div>
|
||||
<table class="table card-table">
|
||||
<tr>
|
||||
<td>
|
||||
<strong><a href="javascript:void(0)" class="text-inherit">uglify-js</a></strong>
|
||||
</td>
|
||||
<td class="text-right">3.0.10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong><a href="javascript:void(0)" class="text-inherit">moment</a></strong>
|
||||
</td>
|
||||
<td class="text-right">2.18.1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Best Pictures for Today</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="row img-gallery">
|
||||
{% for photo in site.data.photos limit:4 offset:30 %}
|
||||
<div class="col-6">
|
||||
<a href="javascript:void(0)" class="d-block link-overlay">
|
||||
<img class="d-block img-fluid rounded" src="{{ photo.small }}" alt="">
|
||||
<span class="link-overlay-bg rounded">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-pills card-header-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:void(0)">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:void(0)">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
{% assign change = include.change | default: 12 %}
|
||||
<div class="card p-3 px-4">
|
||||
<div>
|
||||
{{ include.title | default: 'Total revenue' }}
|
||||
</div>
|
||||
<div class="py-4 m-0 text-center h1 text-{{ include.color | default: 'default' }}">{{ include.value | default: '$14,320' }}</div>
|
||||
<div class="d-flex">
|
||||
<small class="text-muted">{{ include.subtitle | default: 'Income' }}</small>
|
||||
<div class="ml-auto">
|
||||
{% if change > 0 %}
|
||||
<i class="fa fa-caret-up text-green"></i>
|
||||
{% elsif change < 0 %}
|
||||
<i class="fa fa-caret-down text-red"></i>
|
||||
{% endif %}
|
||||
|
||||
{{ change | abs }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
<span class="avatar avatar-xxl mr-5" style="background-image: url({{ site.data.users[20].photo }})"></span>
|
||||
<div class="media-body">
|
||||
<h4 class="m-0">{{ site.data.users[20].name }} {{ site.data.users[20].surname }}</h4>
|
||||
<p class="text-muted mb-0">Webdeveloper</p>
|
||||
|
||||
<ul class="social-links list-inline mb-0 mt-2">
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript:void(0)" title="Facebook" data-toggle="tooltip"><i class="fa fa-facebook"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript:void(0)" title="Twitter" data-toggle="tooltip"><i class="fa fa-twitter"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript:void(0)" title="1234567890" data-toggle="tooltip"><i class="fa fa-phone"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript:void(0)" title="@skypename" data-toggle="tooltip"><i class="fa fa-skype"></i></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="form-group">
|
||||
<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="form-group">
|
||||
<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="form-group">
|
||||
<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="form-group">
|
||||
<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="form-group">
|
||||
<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="form-group">
|
||||
<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="form-group">
|
||||
<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="form-group">
|
||||
<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="form-group">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-control custom-select">
|
||||
<option value="">Germany</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="form-group 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-right">
|
||||
<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">
|
||||
<div class="col-auto">
|
||||
<span class="avatar avatar-xl" style="background-image: url({{ site.data.users[46].photo }})"></span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Bio</label>
|
||||
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com"/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" value="password"/>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button class="btn btn-primary btn-block">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,92 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Message">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
<i class="si si-camera"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-group card-list-group">
|
||||
<li class="list-group-item py-5">
|
||||
<div class="media">
|
||||
<div class="media-object avatar avatar-md mr-4" style="background-image: url({{ site.data.users[4].photo }})"></div>
|
||||
<div class="media-body">
|
||||
<div class="media-heading">
|
||||
<small class="float-right text-muted">4 min</small>
|
||||
<h5>{{ site.data.users[4].name }} {{ site.data.users[4].surname }}</h5>
|
||||
</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="media-list">
|
||||
<li class="media mt-4">
|
||||
<div class="media-object avatar mr-4" style="background-image: url({{ site.data.users[7].photo }})"></div>
|
||||
<div class="media-body">
|
||||
<strong>{{ site.data.users[7].name }} {{ site.data.users[7].surname }}: </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="media mt-4">
|
||||
<div class="media-object avatar mr-4" style="background-image: url({{ site.data.users[9].photo }})"></div>
|
||||
<div class="media-body">
|
||||
<strong>{{ site.data.users[9].name }} {{ site.data.users[9].surname }}: </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-5">
|
||||
<div class="media">
|
||||
<div class="media-object avatar avatar-md mr-4" style="background-image: url({{ site.data.users[4].photo }})"></div>
|
||||
<div class="media-body">
|
||||
<div class="media-heading">
|
||||
<small class="float-right text-muted">12 min</small>
|
||||
<h5>{{ site.data.users[4].name }} {{ site.data.users[4].surname }}</h5>
|
||||
</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-5">
|
||||
<div class="media">
|
||||
<div class="media-object avatar avatar-md mr-4" style="background-image: url({{ site.data.users[4].photo }})"></div>
|
||||
<div class="media-body">
|
||||
<div class="media-heading">
|
||||
<small class="float-right text-muted">34 min</small>
|
||||
<h5>{{ site.data.users[4].name }} {{ site.data.users[4].surname }}</h5>
|
||||
</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="media-list">
|
||||
<li class="media mt-4">
|
||||
<div class="media-object avatar mr-4" style="background-image: url({{ site.data.users[5].photo }})"></div>
|
||||
<div class="media-body">
|
||||
<strong>{{ site.data.users[5].name }} {{ site.data.users[5].surname }}: </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,16 @@
|
||||
<div class="card card-profile">
|
||||
<div class="card-header" style="background-image: url({{ site.data.photos[18].small }});"></div>
|
||||
<div class="card-body text-center">
|
||||
<img class="card-profile-img" src="{{ site.data.users[4].photo }}">
|
||||
|
||||
<h3 class="mb-3">{{ site.data.users[4].name }} {{ site.data.users[4].surname }}</h3>
|
||||
|
||||
<p class="mb-4">
|
||||
Big belly rude boy, million dollar hustler. Unemployed.
|
||||
</p>
|
||||
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<span class="fa fa-twitter"></span> Follow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="chart-circle" data-value="0.8" data-thickness="8">
|
||||
<div class="chart-circle-value">1800 <small>users</small></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="chart-circle" data-value="0.3" data-thickness="8" data-color="{{ site.theme-colors.warning }}">
|
||||
<div class="chart-circle-value">1350 <small>tasks</small></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Progress bars</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress progress-sm mb-3">
|
||||
<div class="progress-bar" style="width: 20%"></div>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-sm mb-3">
|
||||
<div class="progress-bar bg-danger" style="width: 45%"></div>
|
||||
<div class="progress-bar bg-warning" style="width: 30%"></div>
|
||||
<div class="progress-bar bg-success" style="width: 12%"></div>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-sm mb-3">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 63%"></div>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar progress-bar-indeterminate"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Projects</h2>
|
||||
</div>
|
||||
<table class="table card-table">
|
||||
<tr>
|
||||
<td>Admin Template</td>
|
||||
<td class="text-right">
|
||||
<span class="badge badge-default">65%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Landing Page</td>
|
||||
<td class="text-right">
|
||||
<span class="badge badge-success">Finished</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Backend UI</td>
|
||||
<td class="text-right">
|
||||
<span class="badge badge-danger">Rejected</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Personal Blog</td>
|
||||
<td class="text-right">
|
||||
<span class="badge badge-default">40%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>E-mail Templates</td>
|
||||
<td class="text-right">
|
||||
<span class="badge badge-default">13%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Corporate Website</td>
|
||||
<td class="text-right">
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
<form class="card" action="" method="get">
|
||||
|
||||
|
||||
<div class="card-body">
|
||||
<div class="card-title">Create new account</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" placeholder="Enter name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
Agree the <a href="terms.html">terms and policy</a>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary btn-block">Create new account</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,104 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Sales Stats
|
||||
</h3>
|
||||
</div>
|
||||
<table class="table card-table">
|
||||
<tr>
|
||||
<th>
|
||||
Scheduled
|
||||
</th>
|
||||
<th>
|
||||
Count
|
||||
</th>
|
||||
<th class="text-right">
|
||||
Amount
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">
|
||||
13.06.2017
|
||||
</td>
|
||||
<td>
|
||||
67
|
||||
</td>
|
||||
<td class="text-right">
|
||||
$14,740
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">
|
||||
28.02.2017
|
||||
</td>
|
||||
<td>
|
||||
120
|
||||
</td>
|
||||
<td class="text-right">
|
||||
$11,002
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">
|
||||
06.03.2017
|
||||
</td>
|
||||
<td>
|
||||
32
|
||||
</td>
|
||||
<td class="text-right">
|
||||
$10,900
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">
|
||||
21.10.2017
|
||||
</td>
|
||||
<td>
|
||||
130
|
||||
</td>
|
||||
<td class="text-right">
|
||||
$14,740
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">
|
||||
02.01.2017
|
||||
</td>
|
||||
<td>
|
||||
5
|
||||
</td>
|
||||
<td class="text-right">
|
||||
$18,540
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">
|
||||
06.03.2017
|
||||
</td>
|
||||
<td>
|
||||
32
|
||||
</td>
|
||||
<td class="text-right">
|
||||
$10,900
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">
|
||||
31.12.2017
|
||||
</td>
|
||||
<td>
|
||||
201
|
||||
</td>
|
||||
<td class="text-right">
|
||||
$25,609
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="card-footer">
|
||||
<div class="text-right">
|
||||
<button type="button" class="btn btn-primary">
|
||||
<i class="mdi mdi-export mr-2"></i>Export data
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,82 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Search</label>
|
||||
<input type="text" class="form-control"/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Ratios</label>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<input type="range" class="form-control custom-range" step="5" min="0" max="50">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input type="number" class="form-control w-8" value="45"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Intensity</label>
|
||||
<div class="selectgroup w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="intensity" value="low" class="selectgroup-input" checked>
|
||||
<span class="selectgroup-button">Low</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="intensity" value="medium" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Medium</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="intensity" value="high" class="selectgroup-input">
|
||||
<span class="selectgroup-button">High</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Size</label>
|
||||
<div class="selectgroup w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="50" class="selectgroup-input" checked>
|
||||
<span class="selectgroup-button">S</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="100" class="selectgroup-input">
|
||||
<span class="selectgroup-button">M</span>
|
||||
</label>
|
||||
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="150" class="selectgroup-input">
|
||||
<span class="selectgroup-button">L</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="200" class="selectgroup-input">
|
||||
<span class="selectgroup-button">XL</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Company</label>
|
||||
<input type="text" class="form-control" placeholder="e.g. ACME Technology"/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Add to list</label>
|
||||
<select class="form-control custom-select">
|
||||
<option>Base</option>
|
||||
<option>Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-footer text-right">
|
||||
<button type="submit" class="btn btn-primary">Search</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,62 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
Server params
|
||||
</div>
|
||||
<div class="card-options">
|
||||
<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
|
||||
<i class="mdi mdi-lead-pencil"></i>
|
||||
</button>
|
||||
<div class="dropdown card-options-dropdown">
|
||||
<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="mdi mdi-dots-horizontal"></i></button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-bell mr-3"></i>News
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-envelope mr-3"></i>Messages
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">
|
||||
<i class="si si-pencil mr-3"></i>Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<div class="mt-0">
|
||||
<small class="pull-right text-muted">10/200 GB</small>
|
||||
<h5>Memory</h5>
|
||||
<div class="progress progress-sm">
|
||||
<div style="width: 60%;" class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<small class="pull-right text-muted">20 GB</small>
|
||||
<h5>Bandwidth</h5>
|
||||
<div class="progress progress-sm">
|
||||
<div style="width: 50%;" class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<small class="pull-right text-muted">73%</small>
|
||||
<h5>Activity</h5>
|
||||
<div class="progress progress-sm">
|
||||
<div style="width: 40%;" class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<small class="pull-right text-muted">400 GB</small>
|
||||
<h5>FTP</h5>
|
||||
<div class="progress progress-sm">
|
||||
<div style="width: 80%;" class="progress-bar bg-danger"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,28 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:void(0)">My Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:void(0)">Preferences</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:void(0)">Payment Methods</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:void(0)">API Access</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:void(0)">Limits</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<div class="card-text">
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
{% assign color = include.color | default: 'blue' %}
|
||||
{% assign chart_type = include.type | default: 'bar' %}
|
||||
{% assign limit = include.limit | default: 20 %}
|
||||
{% assign offset = include.offset | default: 0 %}
|
||||
{% assign aggregate = include.aggregate | default: false %}
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-value pull-right text-warning">
|
||||
<div class="sparkline" data-sparkline="{% include chart-data.html limit=limit offset=offset aggregate=aggregate %}" data-sparkline-color="{{ site.colors[color] }}" data-sparkline-type="{{ chart_type }}"></div>
|
||||
</div>
|
||||
<h3 class="mb-1">$10M <i class="mdi mdi-trending-up text-success"></i></h3>
|
||||
<div class="text-muted">Profit for this month</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="card">
|
||||
<div class="card-body p-3 text-center">
|
||||
<div class="text-right {% if include.percentage > 0 %}text-green{% elsif include.percentage < 0 %}text-red{% endif %}">
|
||||
{{ include.percentage }}%
|
||||
{% if include.percentage > 0 %}
|
||||
<i class="fe fe-chevron-up"></i>
|
||||
{% elsif include.percentage < 0 %}
|
||||
<i class="fe fe-chevron-down"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="h1 m-0">{{ include.number }}</div>
|
||||
<div class="text-muted mb-4">{{ include.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-2 status status-danger">Missing Success URL</div>
|
||||
<div class="mb-2 status status-warning status-animated">Waiting in queue</div>
|
||||
<div class="mb-2 status status-success">Everything is ready</div>
|
||||
<div class="status">Unknown status</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,51 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Portfolio</div>
|
||||
</div>
|
||||
<table class="table card-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-weight-bold">AAPL</td>
|
||||
<td class="text-right">
|
||||
115.52
|
||||
<span class="text-success">(0.34%) <i class="fa fa-caret-up"></i></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-weight-bold">GOOG</td>
|
||||
<td class="text-right">
|
||||
635.3
|
||||
<span class="text-danger">(-1.15%) <i class="fa fa-caret-down"></i></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-weight-bold">MSFT</td>
|
||||
<td class="text-right">
|
||||
46.74
|
||||
<span class="text-success">(0.26%) <i class="fa fa-caret-up"></i></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-weight-bold">LNKD</td>
|
||||
<td class="text-right">
|
||||
190.04
|
||||
<span class="text-success">(0.28%) <i class="fa fa-caret-up"></i></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-weight-bold">TSLA</td>
|
||||
<td class="text-right">
|
||||
181.47
|
||||
<span class="text-danger">(-0.23%) <i class="fa fa-caret-down"></i></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-weight-bold">YA</td>
|
||||
<td class="text-right">
|
||||
37.75
|
||||
<span class="text-danger">(-0.74%) <i class="fa fa-caret-down"></i></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,28 @@
|
||||
<div class="card">
|
||||
<table class="table card-table">
|
||||
{% for product in site.data.products %}
|
||||
<tr>
|
||||
<td><img src="{{ product.image }}" alt="" style="width: 15rem"></td>
|
||||
<td>
|
||||
<h4 class="mb-5"><a href="#">{{ product.name }}</a></h4>
|
||||
|
||||
<div class="row mb-5">
|
||||
<div class="col-auto">32 reviews</div>
|
||||
<div class="col-auto">20 offers</div>
|
||||
</div>
|
||||
<div class="row text-muted">
|
||||
<div class="col-lg-6">Camera 12MP, Auto Focus</div>
|
||||
<div class="col-lg-6">Retina HD display</div>
|
||||
<div class="col-lg-6">4.7-inch (diagonal) widescreen LCD</div>
|
||||
<div class="col-lg-6">Multi-Touch display with IPS technology</div>
|
||||
<div class="col-lg-6">1334-by-750-pixel resolution at 326 ppi</div>
|
||||
<div class="col-lg-6">1400:1 contrast ratio (typical)</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="h4">{{ product.price }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
<div class="card">
|
||||
<table class="table card-table table-vcenter">
|
||||
{% for product in site.data.products %}
|
||||
<tr>
|
||||
<td><img src="{{ product.image }}" alt="" class="h-8"></td>
|
||||
<td>
|
||||
{{ product.name }}
|
||||
|
||||
{% assign mod = forloop.index | modulo: 2 %}
|
||||
{% if mod == 0 %}
|
||||
<div class="badge badge-default badge-md">New</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 50 }} reviews</td>
|
||||
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 50, 100 }} offers</td>
|
||||
<td class="text-right">
|
||||
<strong>{{ product.price }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
{% assign product = site.data.products[include.product] %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-4 text-center">
|
||||
<img src="{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
|
||||
</div>
|
||||
<h4 class="card-title"><a href="javascript:void(0)">{{ product.name }}</a></h4>
|
||||
<div class="card-subtitle">
|
||||
{{ product.producer }}
|
||||
</div>
|
||||
<div class="mt-5 d-flex align-items-center">
|
||||
<div class="product-price">
|
||||
<strong>{{ product.price }}</strong>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<a href="javascript:void(0)" class="btn btn-primary"><i class="fe fe-plus"></i> Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
{% for task in site.data.tasks %}
|
||||
<div class="card">
|
||||
<div class="card-status bg-{{ task.background }}"></div>
|
||||
<div class="card-body">
|
||||
<h4 class="mb-3">{{ task.name }}</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="text-muted-dark"><i class="mdi mdi-calendar mr-1 text-muted w-4 text-center"></i> {{ task.date }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="text-muted-dark"><i class="mdi mdi-map-marker mr-1 text-muted w-4 text-center"></i> {{ task.place }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,60 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Support Request</h3>
|
||||
</div>
|
||||
|
||||
<table class="table card-table table-vcenter table-responsive-lg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>name</th>
|
||||
<th>email</th>
|
||||
<th>time</th>
|
||||
<th>phone number</th>
|
||||
<th>city</th>
|
||||
<th>status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-weight-bold">Cecilia Welch</td>
|
||||
<td class="text-muted">heather_keeling@gottileb.ca</td>
|
||||
<td class="text-muted">01:06AM</td>
|
||||
<td class="text-muted">215-593-5846</td>
|
||||
<td class="text-muted">South Marine</td>
|
||||
<td>
|
||||
<button class="btn btn-primary btn-sm">Sent</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-weight-bold">Cecilia Welch</td>
|
||||
<td class="text-muted">heather_keeling@gottileb.ca</td>
|
||||
<td class="text-muted">01:06AM</td>
|
||||
<td class="text-muted">215-593-5846</td>
|
||||
<td class="text-muted">South Marine</td>
|
||||
<td>
|
||||
<button class="btn btn-primary btn-sm">Sent</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-weight-bold">Cecilia Welch</td>
|
||||
<td class="text-muted">heather_keeling@gottileb.ca</td>
|
||||
<td class="text-muted">01:06AM</td>
|
||||
<td class="text-muted">215-593-5846</td>
|
||||
<td class="text-muted">South Marine</td>
|
||||
<td>
|
||||
<button class="btn btn-secondary btn-sm">Open</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-weight-bold">Cecilia Welch</td>
|
||||
<td class="text-muted">heather_keeling@gottileb.ca</td>
|
||||
<td class="text-muted">01:06AM</td>
|
||||
<td class="text-muted">215-593-5846</td>
|
||||
<td class="text-muted">South Marine</td>
|
||||
<td>
|
||||
<button class="btn btn-secondary btn-sm">Open</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,75 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Last commits</h3>
|
||||
</div>
|
||||
<table class="card-table table table-striped table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:1%;">
|
||||
<label class="custom-control custom-checkbox m-0 d-block">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
</label>
|
||||
</th>
|
||||
<th colspan="2">User</th>
|
||||
<th>Last Commit</th>
|
||||
<th>Milestone</th>
|
||||
<th>Branch</th>
|
||||
<th>Date</th>
|
||||
<th style="width: 1%"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for commit in site.data.commits limit: 5 %}
|
||||
<tr>
|
||||
<td>
|
||||
<label class="custom-control custom-checkbox m-0 d-block">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td style="width: 1%;">
|
||||
<div class="avatar d-block" style="background-image: url({{ site.data.users[forloop.index].photo }})"></div>
|
||||
</td>
|
||||
<td class="user-avatar cell-detail user-info">
|
||||
<div>{{ site.data.users[forloop.index].name }} {{ site.data.users[forloop.index].surname }}</div>
|
||||
<div class="small text-muted">{{ commit.commiter.position }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ commit.commit.name }}</div>
|
||||
<div class="small text-muted">{{ commit.commit.project }}</div>
|
||||
</td>
|
||||
<td class="milestone">
|
||||
<div class="row mb-1">
|
||||
<div class="col small text-muted">v1.1.5</div>
|
||||
<div class="col small text-muted text-right">{{ commit.milestone.start }} / {{ commit.milestone.end }}</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div style="width: {{ commit.milestone.percentage }}%" class="progress-bar progress-bar-primary"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ commit.branch }}</div>
|
||||
<div class="small text-muted">{{ commit.commit.md5 }}</div>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
<div>{{ commit.commit.date }}</div>
|
||||
<div class="small text-muted">{{ commit.commit.hour }}</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="btn-group">
|
||||
<button type="button" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle">Open</button>
|
||||
<div role="menu" class="dropdown-menu dropdown-menu-right">
|
||||
<a href="javascript:void(0)" class="dropdown-item" onclick="javascript:void(0);">Action</a>
|
||||
<a href="javascript:void(0)" class="dropdown-item" onclick="javascript:void(0);">Another action</a>
|
||||
<a href="javascript:void(0)" class="dropdown-item" onclick="javascript:void(0);">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="javascript:void(0)" class="dropdown-item" onclick="javascript:void(0);">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Partial Table</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-striped table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width: 1%"> </th>
|
||||
<th>Name</th>
|
||||
<th class="d-none d-sm-table-cell" style="width: 40%">Email</th>
|
||||
<th class="d-none d-md-table-cell" style="width: 1%">Access</th>
|
||||
<th class="text-center" style="width: 1%">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{% for user in site.data.users limit: 10 %}
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<span class="avatar avatar-md d-block" style="background-image: url({{ user.photo }})"></span>
|
||||
</td>
|
||||
<td class="font-weight-bold">{{ user.name }} {{ user.surname }}</td>
|
||||
<td class="d-none d-sm-table-cell">{{ user.email }}</td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
<span class="badge badge-info">Business</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-secondary js-tooltip-enabled" data-toggle="tooltip" title="" data-original-title="Edit">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary js-tooltip-enabled" data-toggle="tooltip" title="" data-original-title="Delete">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,42 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Responsive Table</h3>
|
||||
|
||||
<table class="table table-responsive table-striped table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width: 1%"> </th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th class="text-center" style="width: 1%">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{% for user in site.data.users limit: 10 %}
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<span class="avatar avatar-md d-block" style="background-image: url({{ user.photo }})"></span>
|
||||
</td>
|
||||
<td class="font-weight-bold">{{ user.name }} {{ user.surname }}</td>
|
||||
<td>{{ user.email }}</td>
|
||||
<td>
|
||||
{{ user.phone }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-secondary js-tooltip-enabled" data-toggle="tooltip" title="" data-original-title="Edit">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary js-tooltip-enabled" data-toggle="tooltip" title="" data-original-title="Delete">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,55 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Sorted Table</h3>
|
||||
</div>
|
||||
<table id="js-table-sorted" class="table table-responsive table-striped table-vcenter card-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 1%"> </th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th style="width: 1%">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{% for user in site.data.users limit: 8 offset: 10 %}
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<span class="avatar avatar-md d-block" style="background-image: url({{ user.photo }})"></span>
|
||||
</td>
|
||||
<td class="font-weight-bold">{{ user.name }} {{ user.surname }}</td>
|
||||
<td>{{ user.email }}</td>
|
||||
<td>
|
||||
{{ user.phone }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Edit">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Delete">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% contentfor scripts %}
|
||||
requirejs(['tablesorter'], function() {
|
||||
$('#js-table-sorted').tablesorter({
|
||||
cssHeader: 'table-header',
|
||||
cssAsc: 'table-header-asc',
|
||||
cssDesc: 'table-header-desc',
|
||||
headers: {
|
||||
0: { sorter: false },
|
||||
4: { sorter: false },
|
||||
}
|
||||
});
|
||||
});
|
||||
{% endcontentfor %}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user