jacs/goffeetabler
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

base tabler

Browse source
This commit is contained in:
JACS 2026-05-01 12:46:11 -05:00
parent ac2cfa9fe1
commit 0f84beacf1
1432 changed files with 28760 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

25
liquid/includes/parts/activity.html Normal file
View file

@ -0,0 +1,25 @@
{% assign limit = include.limit | default: 40 %}
<div class="divide-y">
{% for item in activity limit: limit %}
{% assign person = people[forloop.index] %}
<div>
<div class="row">
<div class="col-auto">
{% include "ui/avatar.html" person=person %}
</div>
<div class="col">
<div class="text-truncate">
{{ item.text | replace: '%p', person.full_name | replace: '%c', person.company }}
</div>
<div class="text-secondary">{{ forloop.index | random_date_ago: 4 | timeago }}</div>
</div>
{% if forloop.index < 5 %}
<div class="col-auto align-self-center">
<div class="badge bg-primary"></div>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>

42
liquid/includes/parts/calendar.html Normal file
View file

@ -0,0 +1,42 @@
{% assign day-names = "Sun,Mon,Tue,Wed,Thu,Fri,Sat" | split: "," %}
{% assign start-day = include.start-day | default: -2 %}
{% assign today = include.today | default: 8 %}
{% assign days = include.days | default: 30 %}
{% assign all-days = days | minus: start-day | plus: 1 | divide: 7.0 | ceil | times: 7 %}
{% assign end-day = all-days | plus: start-day | minus: 1 %}
{% assign range-start = include.range-start | default: 14 %}
{% assign range-end = include.range-end | default: 21 %}
<div class="calendar{% if include.class %} {{ include.class }}{% endif %}">
<div class="calendar-nav">
<button class="btn btn-action btn-link btn-lg">
{% include "ui/icon.html" icon="chevron-left" %}
</button>
<div class="calendar-title">{{ include.title | default: 'March 2017' }}</div>
<button class="btn btn-action btn-link btn-lg">
{% include "ui/icon.html" icon="chevron-right" %}
</button>
</div>
<div class="calendar-container">
<div class="calendar-header">
{% for col in (1..7) %}
<div class="calendar-date">{{ day-names[forloop.index0] }}</div>
{% endfor %}
</div>
<div class="calendar-body">
{% for day in (start-day..end-day) %}
{% if day <= 0 %}
{% assign d = 31 | plus: day %}
{% elsif day > days %}
{% assign d = day | minus: days %}
{% else %}
{% assign d = day %}
{% endif %}
<div class="calendar-date{% if day <= 0 %} prev-month{% elsif day > days %} next-month{% endif %}{% if range-start and day >= range-start and range-end and day <= range-end %} calendar-range{% if day == range-start %} range-start{% endif %}{% if day == range-end %} range-end{% endif %}{% endif %}">
<a href="#" class="date-item{% if day == today %} date-today{% endif %}">{{ d }}</a>
</div>
{% endfor %}
</div>
</div>
</div>

38
liquid/includes/parts/charts/activity.html Normal file
View file

@ -0,0 +1,38 @@
<div class="card">
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Active users</h3>
<div class="ms-auto">
{% include "parts/dropdown/days.html" id="active-users" label="Select time range for active users" %}
</div>
</div>
<div class="row">
<div class="col">
{% include "ui/chart.html" chart-id="active-users-2" %}
</div>
<div class="col{% unless include.hide-breakpoint %}-md{% endunless %}-auto">
<div class="divide-y divide-y-fill">
<div class="px-3">
<div class="text-secondary">
<span class="status-dot bg-primary"></span> Mobile
</div>
<div class="h2">11,425</div>
</div>
<div class="px-3">
<div class="text-secondary">
<span class="status-dot bg-azure"></span> Desktop
</div>
<div class="h2">6,458</div>
</div>
<div class="px-3">
<div class="text-secondary">
<span class="status-dot bg-green"></span> Tablet
</div>
<div class="h2">3,985</div>
</div>
</div>
</div>
</div>
</div>
</div>

72
liquid/includes/parts/datagrid.html Normal file
View file

@ -0,0 +1,72 @@
<div class="datagrid">
<div class="datagrid-item">
<div class="datagrid-title">Registrar</div>
<div class="datagrid-content">Third Party</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Nameservers</div>
<div class="datagrid-content">Third Party</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Port number</div>
<div class="datagrid-content">3306</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Expiration date</div>
<div class="datagrid-content">–</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Creator</div>
<div class="datagrid-content">
{% assign creator = people[0] %}
<div class="d-flex align-items-center">
{% include "ui/avatar.html" person=creator rounded=true size="xs" class="me-2" %}
{{ creator.full_name }}
</div>
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Age</div>
<div class="datagrid-content">15 days</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Edge network</div>
<div class="datagrid-content">
{% include "ui/status.html" text="Active" color="green" %}
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Avatars list</div>
<div class="datagrid-content">
{% include "ui/avatar-list.html" stacked=true text="+3" size="xs" %}
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Checkbox</div>
<div class="datagrid-content">
<label class="form-check">
<input class="form-check-input" type="checkbox" checked>
<span class="form-check-label">Click me</span>
</label>
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Icon</div>
<div class="datagrid-content">
{% include "ui/icon.html" icon="check" color="green" %}
Checked
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Form control</div>
<div class="datagrid-content">
<input type="text" class="form-control form-control-flush" placeholder="Input placeholder">
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Longer description</div>
<div class="datagrid-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>

19
liquid/includes/parts/demo-layout.html Normal file
View file

@ -0,0 +1,19 @@
{% assign config = include.config %}
<div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
<div class="row row-0 flex-fill">
{% if config.sidebar %}
<div class="{% if config.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if config.sidebar-dark %}bg-dark{% else %}border-end bg-white{% endif %}"></div>
{% endif %}
<div class="col">
{% unless config.hide-topnav %}
<div class="h-2 {% if config.topnav-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
{% endunless %}
{% if config.topmenu %}
<div class="h-2 {% if config.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
{% endif %}
</div>
{% if config.sidebar-end %}
<div class="{% if config.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if config.sidebar-dark %}bg-dark{% else %}border-start bg-white{% endif %}"></div>
{% endif %}
</div>
</div>

8
liquid/includes/parts/dropdown/days.html Normal file
View file

@ -0,0 +1,8 @@
<div class="dropdown">
<a class="dropdown-toggle text-secondary"{% if include.id %} id="{{ include.id }}-dropdown"{% endif %} href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{{ include.label | default: 'Select time range' }}">{{ include.value | default: 'Last 7 days' }}</a>
<div class="dropdown-menu dropdown-menu-end"{% if include.id %} aria-labelledby="{{ include.id }}-dropdown"{% endif %}>
<a class="dropdown-item active" href="#" aria-current="true">Last 7 days</a>
<a class="dropdown-item" href="#">Last 30 days</a>
<a class="dropdown-item" href="#">Last 3 months</a>
</div>
</div>

8
liquid/includes/parts/dropdown/months.html Normal file
View file

@ -0,0 +1,8 @@
<div class="dropdown">
<a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ include.value | default: 'Current month' }}</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item active" href="#">Current month</a>
<a class="dropdown-item" href="#">Last month</a>
<a class="dropdown-item" href="#">Last 3 months</a>
</div>
</div>

17
liquid/includes/parts/form/checkboxes-list.html Normal file
View file

@ -0,0 +1,17 @@
{% assign items = include.items | default: "Push Notifications:1,SMS Notifications,Email Notifications:1" | split: ',' %}
<div class="divide-y{% if include.class %} {{ include.class }}{% endif %}">
{% for item in items %}
{% assign item-options = item | split: ':' %}
<div>
<label class="row">
<span class="col">{{ item-options[0] }}</span>
<span class="col-auto">
<label class="form-check form-check-single form-switch">
<input class="form-check-input" type="checkbox"{% if item-options[1] == '1' %} checked{% endif %}>
</label>
</span>
</label>
</div>
{% endfor %}
</div>

22
liquid/includes/parts/form/fieldset.html Normal file
View file

@ -0,0 +1,22 @@
<fieldset class="form-fieldset">
<div class="mb-3">
<label class="form-label required">Full name</label>
<input type="text" class="form-control" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label required">Company</label>
<input type="text" class="form-control" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label required">Email</label>
<input type="email" class="form-control" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label">Phone number</label>
<input type="tel" class="form-control" autocomplete="off"/>
</div>
<label class="form-check">
<input type="checkbox" class="form-check-input"/>
<span class="form-check-label required">I agree to the Terms & Conditions</span>
</label>
</fieldset>

8
liquid/includes/parts/form/input-checkboxes-inline.html Normal file
View file

@ -0,0 +1,8 @@
<div class="mb-3">
<div class="form-label">Inline Checkboxes</div>
<div>
{% include "ui/form/check.html" inline=true title="Option 1" type="checkbox" %}
{% include "ui/form/check.html" inline=true title="Option 2" type="checkbox" disabled=true %}
{% include "ui/form/check.html" inline=true title="Option 3" type="checkbox" checked=true %}
</div>
</div>

8
liquid/includes/parts/form/input-checkboxes.html Normal file
View file

@ -0,0 +1,8 @@
<div class="mb-3">
<div class="form-label">Checkboxes</div>
<div>
{% include "ui/form/check.html" type="checkbox" %}
{% include "ui/form/check.html" type="checkbox" disabled=true %}
{% include "ui/form/check.html" type="checkbox" checked=true %}
</div>
</div>

22
liquid/includes/parts/form/input-color.html Normal file
View file

@ -0,0 +1,22 @@
{% assign colors = '' | split: ',' %}
{% unless include.hide-black-white %}
{% assign colors = 'dark,white' | split: ',' %}
{% endunless %}
{% for color in site.colors limit: 10 %}
{% assign colors = colors | push: color[0] %}
{% endfor %}
<div class="mb-3">
<label class="form-label">{{ include.label | default: 'Color Input' }}</label>
<div class="row g-2">
{% for color in colors -%}
<div class="col-auto">
<label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}">
<input name="{{ include.name | default: 'color' }}" type="{{ include.type | default: 'radio' }}" value="{{ color }}" class="form-colorinput-input" {% if forloop.index == 2 %} checked{% endif %}/>
<span class="form-colorinput-color bg-{{ color }}{% if include.rounded %} rounded-circle{% endif %}"></span>
</label>
</div>
{%- endfor %}
</div>
</div>

4
liquid/includes/parts/form/input-colorpicker.html Normal file
View file

@ -0,0 +1,4 @@
<div class="mb-3">
<label class="form-label">{{ include.label | default: 'Color picker' }}</label>
<input type="color" class="form-control form-control-color" value="{{ include.color | default: site.colors.blue.hex }}" title="Choose your color">
</div>

8
liquid/includes/parts/form/input-datalist.html Normal file
View file

@ -0,0 +1,8 @@
<div class="mb-3">
<label class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
<datalist id="datalistOptions">
{% for country in flags limit: 10 %}
<option value="{{ country.name | escape }}"/>{% endfor %}
</datalist>
</div>

4
liquid/includes/parts/form/input-file.html Normal file
View file

@ -0,0 +1,4 @@
<div class="mb-3">
<div class="form-label">{{ include.label | default: 'Custom File Input' }}</div>
{% include "ui/form/input-file.html" %}
</div>

11
liquid/includes/parts/form/input-icon-separated.html Normal file
View file

@ -0,0 +1,11 @@
<div class="mb-3">
<label class="form-label">Separated inputs</label>
<div class="row g-2">
<div class="col">
<input type="text" class="form-control" placeholder="Search for…">
</div>
<div class="col-auto">
{% include "ui/button.html" icon="search" icon-only=true %}
</div>
</div>
</div>

11
liquid/includes/parts/form/input-icon.html Normal file
View file

@ -0,0 +1,11 @@
<div class="mb-3">
<label class="form-label">Icon input</label>
{% include "ui/form/input-icon.html" class="mb-3" %}
{% include "ui/form/input-icon.html" class="mb-3" icon="user" prepend=true placeholder="Username" %}
</div>
<div class="mb-3">
<label class="form-label">Loader input</label>
{% include "ui/form/input-icon.html" loader=true class="mb-3" placeholder="Loading…" %}
{% include "ui/form/input-icon.html" loader=true class="mb-3" icon="user" prepend=true placeholder="Loading…" %}
</div>

20
liquid/includes/parts/form/input-image-people.html Normal file
View file

@ -0,0 +1,20 @@
{% assign limit = include.limit | default: 9 %}
{% assign offset = include.offset | default: 8 %}
{% assign avatar-size = include.avatar-size | default: "md" %}
<div class="mb-3">
<label class="form-label">Person Check</label>
<div class="row g-2">
{% for person in people limit: limit offset: offset %}
<div class="col-auto">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
{% include "ui/avatar.html" size=avatar-size person=person %}
</span>
</span>
</label>
</div>
{% endfor %}
</div>
</div>

20
liquid/includes/parts/form/input-image-radio.html Normal file
View file

@ -0,0 +1,20 @@
{% assign limit = include.limit | default: 6 %}
{% assign offset = include.offset | default: 0 %}
{% assign filtered-photos = photos | where: 'horizontal', true %}
<div class="mb-3">
<label class="form-label">Image Check Radio</label>
<div class="row g-2">
{% for photo in filtered-photos limit: limit offset: offset%}
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="form-imagecheck-figure">
<img src="{{ page | relative }}/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="form-imagecheck-image">
</span>
</label>
</div>
{% endfor %}
</div>
</div>

19
liquid/includes/parts/form/input-image.html Normal file
View file

@ -0,0 +1,19 @@
{% assign limit = include.limit | default: 6 %}
{% assign offset = include.offset | default: 0 %}
<div class="mb-3">
<label class="form-label">Image Check</label>
<div class="row g-2">
{% assign filtered-photos = photos | where: 'horizontal', true %}
{% for photo in filtered-photos limit: limit offset: offset %}
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="form-imagecheck-figure">
<img src="{{ page | relative }}/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="form-imagecheck-image">
</span>
</label>
</div>
{% endfor %}
</div>
</div>

8
liquid/includes/parts/form/input-radios-inline.html Normal file
View file

@ -0,0 +1,8 @@
<div class="mb-3">
<div class="form-label">Inline Radios</div>
<div>
{% include "ui/form/check.html" title="Option 1" type="radio" name="radios-inline" inline=true checked=true %}
{% include "ui/form/check.html" title="Option 2" type="radio" name="radios-inline" inline=true %}
{% include "ui/form/check.html" title="Option 3" type="radio" name="radios-inline" inline=true disabled=true %}
</div>
</div>

9
liquid/includes/parts/form/input-radios.html Normal file
View file

@ -0,0 +1,9 @@
<div class="mb-3">
<div class="form-label">Radios</div>
<div>
{% include "ui/form/check.html" title="Option 1" type="radio" name="radios" checked=true %}
{% include "ui/form/check.html" title="Option 2" type="radio" name="radios" %}
{% include "ui/form/check.html" title="Option 3" type="radio" disabled=true %}
{% include "ui/form/check.html" title="Option 4" type="radio" disabled=true checked=true %}
</div>
</div>

8
liquid/includes/parts/form/input-range.html Normal file
View file

@ -0,0 +1,8 @@
<div class="mb-3">
<label class="form-label">Range input</label>
{% include "ui/range.html" value=40 %}
{% include "ui/range.html" value="20" id="simple" connect=true %}
{% include "ui/range.html" value="60,90" id="connect" %}
{% include "ui/range.html" value="40" id="color" class="text-green" connect=true %}
</div>

19
liquid/includes/parts/form/input-selectgroups.html Normal file
View file

@ -0,0 +1,19 @@
<div class="mb-3">
<label class="form-label">Simple selectgroup</label>
{% include "ui/form/input-selectgroup.html" values="HTML,CSS,PHP,JavaScript" %}
</div>
<div class="mb-3">
<label class="form-label">Icon input</label>
{% include "ui/form/input-selectgroup.html" values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" %}
</div>
<div class="mb-3">
<label class="form-label">Selectgroup with icons and text</label>
{% include "ui/form/input-selectgroup.html" values="i:home,i:user,i:circle,i:square" type="radio" name="icons" with-text=true %}
</div>
<div class="mb-3">
<label class="form-label">Different style</label>
{% include "ui/form/input-selectgroup.html" values="HTML,CSS,PHP,JavaScript" class="form-selectgroup-pills" %}
</div>

6
liquid/includes/parts/form/input-sizes.html Normal file
View file

@ -0,0 +1,6 @@
<div class="mb-3">
<label class="form-label">Input sizing</label>
<input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg">
<input class="form-control mb-2" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>

4
liquid/includes/parts/form/input-toggle-single.html Normal file
View file

@ -0,0 +1,4 @@
<div class="mb-3">
<div class="form-label">Single switch</div>
{% include "ui/form/check.html" switch=true title="I agree with terms and conditions" %}
</div>

6
liquid/includes/parts/form/input-toggle.html Normal file
View file

@ -0,0 +1,6 @@
<div class="mb-3">
<div class="form-label">Toggle switches</div>
{% include "ui/form/check.html" switch=true title="Option 1" checked=true %}
{% include "ui/form/check.html" switch=true title="Option 2" %}
{% include "ui/form/check.html" switch=true title="Option 3" %}
</div>

28
liquid/includes/parts/form/input.html Normal file
View file

@ -0,0 +1,28 @@
{% assign type = include.type %}
{% if type == 'static' %}
<div class="mb-3">
<label class="form-label">{{ include.label | default: 'Static' }}</label>
<div class="form-control-plaintext">{{ include.value | default: 'Input value' }}</div>
</div>
{% elsif type == 'password' %}
<div class="mb-3">
<label class="form-label">{{ include.label | default: 'Password' }}</label>
<input type="text" class="form-control" name="example-password-input" placeholder="{{ include.placeholder | default: 'Input placeholder' }}">
</div>
{% elsif type == 'textarea' %}
<div class="mb-3">
<label class="form-label">{{ include.label | default: 'Textarea' }}</label>
<textarea class="form-control" name="example-textarea" placeholder="{{ include.placeholder | default: 'Textarea placeholder' }}">{{ include.value }}</textarea>
</div>
{% else %}
<div class="mb-3">
<label class="form-label">{{ include.label | default: 'Text' }}</label>
<input type="text" class="form-control" name="example-text-input" placeholder="{{ include.placeholder | default: 'Input placeholder' }}">
</div>
{% endif %}

9
liquid/includes/parts/form/select.html Normal file
View file

@ -0,0 +1,9 @@
{% assign options = include.options | default: "One,Two,Three" | split: "," %}
<div class="mb-3">
<div class="form-label">{{ include.label | default: 'Select' }}</div>
<select class="form-select" {% if include.multiple %} multiple{% endif %}>
{% for option in options %}
<option value="{{ forloop.index }}">{{ option }}</option>
{% endfor %}
</select>
</div>

24
liquid/includes/parts/form/selectgroup-payments.html Normal file
View file

@ -0,0 +1,24 @@
<div class="mb-3">
<label class="form-label">Payment method</label>
{% assign items = "visa,mastercard,paypal" | split: ',' %}
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
{% for item in items %}
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index == 2 %} checked{% endif %}>
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-{{ item }} payment-xs me-2"></span>
{% if forloop.index < 3 %}
ending in <strong>{{ forloop.index | random_number: 1000, 9999 }}</strong>
{% endif %}
</div>
</div>
</label>
{% endfor %}
</div>
</div>

24
liquid/includes/parts/form/selectgroup-project-manager.html Normal file
View file

@ -0,0 +1,24 @@
<div class="mb-3">
<label class="form-label">Project Manager</label>
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
{% for person in people limit: 5 %}
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="{{ person.id }}" class="form-selectgroup-input" {%
if forloop.index== 2 %} checked{% endif %}>
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-label-content d-flex align-items-center">
{% include "ui/avatar.html" person=person class="me-3" %}
<div>
<div class="fw-medium">{{ person.full_name }}</div>
<div class="text-secondary">{{ person.job_title }}</div>
</div>
</div>
</div>
</label>
{% endfor %}
</div>
</div>

6
liquid/includes/parts/form/validation-states.html Normal file
View file

@ -0,0 +1,6 @@
<div class="mb-3">
<label class="form-label">Validation States {% if include.lite %}(lite){% endif %}</label>
<input type="text" class="form-control is-valid{% if include.lite %} is-valid-lite{% endif %} mb-2" placeholder="Valid State..">
<input type="text" class="form-control is-invalid{% if include.lite %} is-invalid-lite{% endif %}" placeholder="Invalid State..">
{% unless include.lite %}<div class="invalid-feedback">Invalid feedback</div>{% endunless %}
</div>

45
liquid/includes/parts/modals/add-task.html Normal file
View file

@ -0,0 +1,45 @@
<div class="modal-header">
<h4 class="modal-title">Add task</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" placeholder="Task name">
</div>
<div class="mb-3">
<label class="form-label">Assigned To</label>
<select class="form-select">
<option value="">Select person</option>
{% assign selected_people = "5,6,2,3" | split: "," %}
{% for person_id_str in selected_people %}
{% assign person_id = person_id_str | plus: 0 | minus: 1 %}
{% assign person = people[person_id] %}
<option value="{{ person.id }}">{{ person.full_name }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label class="form-label">Priority</label>
<select class="form-select">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Description</label>
<textarea class="form-control" rows="3" placeholder="Task description"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
Save
</button>
</div>

138
liquid/includes/parts/modals/change-password.html Normal file
View file

@ -0,0 +1,138 @@
<div class="modal-header">
<h4 class="modal-title" id="password-modal-label">Change password</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-4">
<label class="form-label" for="password-current">Current password</label>
{% include "ui/form/input-group.html" type="password" id="password-current" placeholder="Enter your current password" append-button="eye:Show password" flat=true %}
</div>
<div class="mb-4">
<label class="form-label" for="password-new">New password</label>
{% include "ui/form/input-group.html" type="password" id="password-new" placeholder="Enter new password" append-button="eye:Show password" flat=true %}
<small class="form-hint">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain
spaces, special characters, or emoji.
</small>
<div class="mt-2">
<div class="progress" style="height: 4px;">
<div class="progress-bar" id="password-strength" role="progressbar" style="width: 0%"></div>
</div>
<div class="text-secondary text-xs mt-1" id="password-strength-text"></div>
</div>
</div>
<div class="mb-4">
<label class="form-label" for="password-confirm">Confirm new password</label>
{% include "ui/form/input-group.html" type="password" id="password-confirm" placeholder="Confirm your new password" append-button="eye:Show password" flat=true %}
<div class="invalid-feedback d-none" id="password-match-error">
Passwords do not match.
</div>
</div>
{% include "ui/button.html" type="submit" text="Update password" color="primary" block=true class="mt-4" %}
</form>
</div>
{% capture_script %}
<script>
document.addEventListener("DOMContentLoaded", function () {
function setupPasswordToggle(inputId) {
const input = document.getElementById(inputId);
if (!input) return;
const inputGroup = input.closest('.input-group');
if (!inputGroup) return;
const toggleLink = inputGroup.querySelector('a.link-secondary');
if (!toggleLink) return;
toggleLink.addEventListener('click', function(e) {
e.preventDefault();
const isPassword = input.type === 'password';
input.type = isPassword ? 'text' : 'password';
// Update tooltip text
const tooltipText = isPassword ? 'Hide password' : 'Show password';
this.setAttribute('title', tooltipText);
this.setAttribute('data-bs-original-title', tooltipText);
// Update icon (simple approach - toggle classes if needed)
const svg = this.querySelector('svg');
if (svg) {
const use = svg.querySelector('use');
if (use) {
use.setAttribute('href', isPassword ? '#icon-eye-off' : '#icon-eye');
}
}
});
}
setupPasswordToggle('password-current');
setupPasswordToggle('password-new');
setupPasswordToggle('password-confirm');
const newPasswordInput = document.getElementById('password-new');
const strengthBar = document.getElementById('password-strength');
const strengthText = document.getElementById('password-strength-text');
if (newPasswordInput && strengthBar && strengthText) {
newPasswordInput.addEventListener('input', function() {
const password = this.value;
let strength = 0;
let strengthLabel = '';
if (password.length >= 8) strength++;
if (password.length >= 12) strength++;
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
if (/\d/.test(password)) strength++;
if (/[^a-zA-Z0-9]/.test(password)) strength++;
const percentage = (strength / 5) * 100;
strengthBar.style.width = percentage + '%';
if (strength <= 2) {
strengthBar.className = 'progress-bar bg-danger';
strengthLabel = 'Weak';
} else if (strength <= 3) {
strengthBar.className = 'progress-bar bg-warning';
strengthLabel = 'Fair';
} else if (strength <= 4) {
strengthBar.className = 'progress-bar bg-info';
strengthLabel = 'Good';
} else {
strengthBar.className = 'progress-bar bg-success';
strengthLabel = 'Strong';
}
strengthText.textContent = password ? strengthLabel : '';
});
}
const confirmPasswordInput = document.getElementById('password-confirm');
const matchError = document.getElementById('password-match-error');
if (newPasswordInput && confirmPasswordInput && matchError) {
function validateMatch() {
const newPassword = newPasswordInput.value;
const confirmPassword = confirmPasswordInput.value;
if (confirmPassword && newPassword !== confirmPassword) {
confirmPasswordInput.classList.add('is-invalid');
matchError.classList.remove('d-none');
} else {
confirmPasswordInput.classList.remove('is-invalid');
matchError.classList.add('d-none');
}
}
newPasswordInput.addEventListener('input', validateMatch);
confirmPasswordInput.addEventListener('input', validateMatch);
}
});
</script>
{% endcapture_script %}

56
liquid/includes/parts/modals/confirm-delete.html Normal file
View file

@ -0,0 +1,56 @@
{% include "ui/modal/close.html" %}
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
{% include "ui/icon.html" icon="alert-triangle" color="danger" size="lg" class="mb-2" %}
<h3 id="confirm-delete-title">Are you sure?</h3>
<div class="text-secondary mb-4">
<p id="confirm-delete-message">Do you really want to delete this item? This action cannot be undone.</p>
<div id="confirm-delete-items" class="text-start d-none">
<div class="card card-sm mt-3">
<div class="card-body">
<div class="fw-bold mb-2">Items to be deleted:</div>
<ul class="list-unstyled mb-0" id="confirm-delete-list">
<li>• Item 1</li>
<li>• Item 2</li>
<li>• Item 3</li>
</ul>
</div>
</div>
</div>
</div>
<label class="form-check text-start">
<input class="form-check-input" type="checkbox" id="confirm-delete-checkbox">
<span class="form-check-label">I understand this action cannot be undone</span>
</label>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col">{% include "ui/button.html" dismiss=true text="Cancel" block=true %}</div>
<div class="col">
<button type="button" class="btn btn-danger w-100" data-bs-dismiss="modal" id="confirm-delete-button" disabled>
Delete
</button>
</div>
</div>
</div>
</div>
{% capture_script %}
<script>
document.addEventListener("DOMContentLoaded", function () {
const checkbox = document.getElementById("confirm-delete-checkbox");
const deleteButton = document.getElementById("confirm-delete-button");
if (checkbox && deleteButton) {
checkbox.addEventListener("change", function() {
deleteButton.disabled = !this.checked;
});
}
});
</script>
{% endcapture_script %}

18
liquid/includes/parts/modals/danger.html Normal file
View file

@ -0,0 +1,18 @@
{% include "ui/modal/close.html" %}
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
{% include "ui/icon.html" icon="alert-triangle" color="danger" size="lg" class="mb-2" %}
<h3>Are you sure?</h3>
<div class="text-secondary">Do you really want to remove 84 files? What you've done cannot be undone.</div>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col">{% include "ui/button.html" dismiss=true text="Cancel" block=true %}</div>
<div class="col">{% include "ui/button.html" color="danger" dismiss=true text="Delete 84 items" block=true %}</div>
</div>
</div>
</div>

19
liquid/includes/parts/modals/deactivate.html Normal file
View file

@ -0,0 +1,19 @@
<div class="modal-body">
<div class="row">
<div class="col-auto">{% include "ui/avatar.html" color="red" icon="alert-triangle" class="avatar-rounded" %}</div>
<div class="col">
<div class="h3">Are you sure you want to delete your account?
</div>
<div class="text-secondary">Deleting your account is permanent and will remove all content including comments,
avatars and profile settings. Are you sure you want to delete your account?
</div>
<div class="mt">
<div class="btn-list justify-content-end">
<div class="btn">Cancel</div>
<div class="btn btn-danger">Deactivate</div>
</div>
</div>
</div>
</div>
</div>

92
liquid/includes/parts/modals/edit-profile.html Normal file
View file

@ -0,0 +1,92 @@
<div class="modal-header">
<h4 class="modal-title" id="profile-modal-label">Edit profile</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-4">
<div class="row align-items-end">
<div class="col-auto">
{% include "ui/avatar-upload.html" class="rounded" size="lg" %}
</div>
<div class="col">
<label class="form-label">Avatar</label>
<div class="text-secondary">Click to upload a new avatar</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="profile-first-name">First name</label>
<input class="form-control" id="profile-first-name" type="text" placeholder="John">
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="profile-last-name">Last name</label>
<input class="form-control" id="profile-last-name" type="text" placeholder="Doe">
</div>
</div>
</div>
<div class="mb-4">
<label class="form-label" for="profile-email">Email</label>
<input class="form-control" id="profile-email" type="email" placeholder="john.doe@example.com">
</div>
<div class="mb-4">
<label class="form-label" for="profile-phone">Phone</label>
<input class="form-control" id="profile-phone" type="tel" placeholder="+1 (555) 123-4567">
</div>
<div class="mb-4">
<label class="form-label" for="profile-bio">Bio</label>
<textarea class="form-control" id="profile-bio" rows="4" placeholder="Tell us about yourself..."></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="profile-location">Location</label>
<input class="form-control" id="profile-location" type="text" placeholder="City, Country">
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="profile-birthdate">Date of birth</label>
{% include "ui/datepicker.html" layout="icon" id="profile-birthdate" %}
</div>
</div>
</div>
<div class="mb-4">
<label class="form-label">Social links</label>
<div class="row g-2">
<div class="col-12">
<div class="input-group">
<span class="input-group-text">{% include "ui/icon.html" icon="brand-twitter" %}</span>
<input type="text" class="form-control" placeholder="twitter.com/username">
</div>
</div>
<div class="col-12">
<div class="input-group">
<span class="input-group-text">{% include "ui/icon.html" icon="brand-github" %}</span>
<input type="text" class="form-control" placeholder="github.com/username">
</div>
</div>
<div class="col-12">
<div class="input-group">
<span class="input-group-text">{% include "ui/icon.html" icon="brand-linkedin" %}</span>
<input type="text" class="form-control" placeholder="linkedin.com/in/username">
</div>
</div>
</div>
</div>
{% include "ui/button.html" type="submit" text="Save changes" color="primary" block=true class="mt-4" %}
</form>
</div>

5
liquid/includes/parts/modals/full-width.html Normal file
View file

@ -0,0 +1,5 @@
{% include "ui/modal/header.html" title="Full width modal" %}
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
</div>
{% include "ui/modal/footer.html" %}

5
liquid/includes/parts/modals/large.html Normal file
View file

@ -0,0 +1,5 @@
{% include "ui/modal/header.html" title="Large modal" %}
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
</div>
{% include "ui/modal/footer.html" %}

27
liquid/includes/parts/modals/new-email.html Normal file
View file

@ -0,0 +1,27 @@
<div class="modal-header">
<h4 class="modal-title">New Message</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label class="form-label">To</label>
<input type="text" class="form-control" placeholder="Example@email.com">
</div>
<div class="mb-3">
<label class="form-label">Subject</label>
<input type="text" class="form-control" placeholder="Your subject">
</div>
<div>
<label class="form-label">Message</label>
{% include "ui/wysiwyg.html" id="email-message" %}
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
{% include "ui/icon.html" icon="send" %} Send Message
</button>
</div>

33
liquid/includes/parts/modals/new-event.html Normal file
View file

@ -0,0 +1,33 @@
<div class="modal-header">
<h4 class="modal-title" id="event-modal-label">New event</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-4">
<label class="form-label" for="event-title">Title</label>
<input class="form-control" id="event-title" type="text" placeholder="Event title">
</div>
<div class="mb-4">
<label class="form-label" for="event-description">Description</label>
<textarea class="form-control" id="event-description" rows="3" placeholder="Event description"></textarea>
</div>
<div class="row">
<div class="col">
<div class="mb-4">
<label class="form-label" for="event-start">Start</label>
{% include "ui/datepicker.html" layout="icon" id="event-start" %}
</div>
</div>
<div class="col">
<div class="mb-4">
<label class="form-label" for="event-end">End</label>
{% include "ui/datepicker.html" layout="icon" id="event-end" %}
</div>
</div>
</div>
{% include "ui/button.html" type="submit" text="Create event" color="primary" block=true class="mt-4" %}
</form>
</div>

51
liquid/includes/parts/modals/new-task.html Normal file
View file

@ -0,0 +1,51 @@
<div class="modal-header">
<h4 class="modal-title" id="task-modal-label">New task</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-4">
<label class="form-label" for="task-name">Task name</label>
<input class="form-control" id="task-name" type="text" placeholder="Enter task name">
</div>
<div class="mb-4">
<label class="form-label" for="task-description">Description</label>
<textarea class="form-control" id="task-description" rows="3" placeholder="Enter task description"></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="task-assigned">Assigned to</label>
{% include "ui/select.html" key="people" id="task-assigned" indicator="avatar" %}
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="task-priority">Priority</label>
<select class="form-select" id="task-priority">
<option value="low">Low</option>
<option value="medium" selected>Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="task-due-date">Due date</label>
{% include "ui/datepicker.html" layout="icon" id="task-due-date" %}
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="task-category">Category / Tags</label>
{% include "ui/select.html" key="tags" id="task-category" %}
</div>
</div>
</div>
{% include "ui/button.html" type="submit" text="Create task" color="primary" block=true class="mt-4" %}
</form>
</div>

79
liquid/includes/parts/modals/report.html Normal file
View file

@ -0,0 +1,79 @@
{% include "ui/modal/header.html" title="New report" %}
{% assign reports = "Simple:Provide only basic data needed for the report,Advanced:Insert charts and additional advanced analyses to be inserted in the report" | split: "," %}
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
</div>
<label class="form-label">Report type</label>
<div class="form-selectgroup-boxes row mb-3">
{% for report in reports %}
{% assign r = report | split: ':' %}
<div class="col-lg-6">
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input"{% if forloop.index == 1 %} checked{% endif %}>
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
<span class="form-selectgroup-title strong mb-1">{{ r[0] }}</span>
<span class="d-block text-secondary">{{ r[1] }}</span>
</span>
</span>
</label>
</div>
{% endfor %}
</div>
<div class="row">
<div class="col-lg-8">
<div class="mb-3">
<label class="form-label">Report url</label>
{% include "ui/form/input-group.html" prepend="https://tabler.io/reports/" flat=true input-class="ps-0" value="report-01" %}
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Visibility</label>
{% assign options = "Private,Public,Hidden" | split: "," %}
<select class="form-select">
{% for option in options %}
<option value="{{ forloop.index }}"{% if forloop.index == 1 %} selected{% endif %}>{{ option }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">Client name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">Reporting period</label>
<input type="date" class="form-control">
</div>
</div>
<div class="col-lg-12">
<div>
<label class="form-label">Additional information</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
{% include "ui/button.html" text="Cancel" color="link link-secondary" dismiss=true %}
{% include "ui/button.html" text="Create new report" icon="plus" color="primary" dismiss=true class="ms-auto" %}
</div>

40
liquid/includes/parts/modals/scrollable.html Normal file
View file

@ -0,0 +1,40 @@
{% include "ui/modal/header.html" title="Scrollable modal" %}
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
{% include "ui/modal/footer.html" %}

23
liquid/includes/parts/modals/signature.html Normal file
View file

@ -0,0 +1,23 @@
{% include "ui/modal/close.html" %}
<div class="modal-body">
<h3 class="card-title">Confirm transfer</h3>
<p class="card-subtitle">Please confirm the transfer of funds by signing below.</p>
<form action="">
<div class="mb-3">
<label class="form-label required">Signature</label>
<div class="position-relative select-none">
{% include "ui/signature.html" sample clear width=684 height=400 %}
</div>
</div>
</form>
<div class="text-secondary fs-5">
I agree that the signature and initials will be the electronic representation of my signature and initials for
all purposes when I (or my agent) use
them on documents, including legally binding contracts - just the same as a pen-and-paper signature or initial.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn">Cancel</button>
<button type="button" class="btn btn-primary ms-auto">Confirm transfer</button>
</div>

5
liquid/includes/parts/modals/simple.html Normal file
View file

@ -0,0 +1,5 @@
{% include "ui/modal/header.html" %}
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
</div>
{% include "ui/modal/footer.html" %}

8
liquid/includes/parts/modals/small.html Normal file
View file

@ -0,0 +1,8 @@
<div class="modal-body">
<div class="modal-title">Are you sure?</div>
<div>If you proceed, you will lose all your personal data.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Yes, delete all my data</button>
</div>

17
liquid/includes/parts/modals/success.html Normal file
View file

@ -0,0 +1,17 @@
{% include "ui/modal/close.html" %}
<div class="modal-status bg-success"></div>
<div class="modal-body text-center py-4">
{% include "ui/icon.html" icon="circle-check" color="green" size="lg" class="mb-2" %}
<h3>Payment succedeed</h3>
<div class="text-secondary">Your payment of $290 has been successfully submitted. Your invoice has been sent to {{ site.email }}.</div>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col">{% include "ui/button.html" dismiss=true text="Go to dashboard" block=true %}</div>
<div class="col">{% include "ui/button.html" color="success" dismiss=true text="View invoice" block=true %}</div>
</div>
</div>
</div>

24
liquid/includes/parts/modals/team.html Normal file
View file

@ -0,0 +1,24 @@
{% include "ui/modal/header.html" title="Add a new team" %}
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col-auto">
{% include "ui/avatar-upload.html" class="rounded" size="xl" %}
</div>
<div class="col">
<label class="form-label">Name</label>
<input type="text" class="form-control" />
</div>
</div>
{% include "parts/form/input-color.html" label="Pick your team color" %}
<div>
<label class="form-label">Additional info</label>
<textarea class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add Team</button>
</div>

62
liquid/includes/parts/nav/nav-aside.html Normal file
View file

@ -0,0 +1,62 @@
<form action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
<div class="subheader mb-2">Category</div>
{% assign items = "Games,Clothing,Jewelery,Toys" | split: "," %}
<nav class="list-group list-group-transparent mb-3">
{% for item in items %}
<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#">
{{ item }}
<small class="text-secondary ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
</a>
{% endfor %}
</nav>
<div class="subheader mb-2">Rating</div>
{% assign items = "5 stars,4 stars,3 stars,2 and less stars" | split: "," %}
<div class="mb-3">
{% for item in items %}
<label class="form-check">
<input type="radio" class="form-check-input" name="form-stars" value="{{ item | escape }}"{% if forloop.first %} checked{% endif %}>
<span class="form-check-label">{{ item }}</span>
</label>
{% endfor %}
</div>
<div class="subheader mb-2">Tags</div>
{% assign items = "business,evening,leisure,party" | split: "," %}
<div class="mb-3">
{% for item in items %}
<label class="form-check">
<input type="checkbox" class="form-check-input" name="form-tags[]" value="{{ item | escape }}"{% if forloop.first %} checked{% endif %}>
<span class="form-check-label">{{ item }}</span>
</label>
{% endfor %}
</div>
<div class="subheader mb-2">Price</div>
<div class="row g-2 align-items-center mb-3">
<div class="col">
{% include "ui/form/input-group.html" prepend="$" placeholder="from" value="3" %}
</div>
<div class="col-auto">—</div>
<div class="col">
{% include "ui/form/input-group.html" prepend="$" placeholder="to" %}
</div>
</div>
<div class="subheader mb-2">Shipping</div>
<div>
<select name="" class="form-select">
<option>United Kingdom</option>
<option>USA</option>
<option>Germany</option>
<option>Poland</option>
<option>Other…</option>
</select>
</div>
<div class="mt-5">
{% include "ui/button.html" text="Confirm changes" color="primary" block=true element="button" %}
{% include "ui/button.html" text="Reset to defaults" color="link" block=true %}
</div>
</form>

100
liquid/includes/parts/tasks.html Normal file
View file

@ -0,0 +1,100 @@
{% assign data = include.data | default: tasks %}
<div class="row{% if include.class %} {{ include.class }}{% endif %}">
{% for column in data.columns %}
<div class="col-12 col-md-6 col-lg">
<h2 class="mb-3">{{ column.name }}</h2>
<div class="mb-4">
<div class="row row-cards">
{% for task in column.tasks %}
<div class="col-12">
<div class="card card-sm">
{% if task.color %}
<div class="card-status-top bg-{{ task.color }}"></div>
{% endif %}
{% if task.starred %}
<div class="ribbon ribbon-top ribbon-bookmark bg-yellow">
{% include "ui/icon.html" icon="star" %}
</div>
{% endif %}
<div class="card-body">
<h3 class="card-title">{{ task.name }}</h3>
{% if task.description %}
<div class="text-secondary">{{ task.description }}</div>
{% endif %}
{% if task.image %}
<div class="ratio ratio-16x9">
<img src="{{ page | relative }}/{{ task.image }}" class="rounded object-cover" alt="{{ task.name }}">
</div>
{% endif %}
<div class="mt-4">
<div class="row">
<div class="col">
{% if task.users %}
{% include "ui/avatar-list.html" limit=task.users offset=task.users-offset stacked=true size="xs" %}
{% endif %}
</div>
{% if task.due-date %}
<div class="col-auto">
<a href="#" class="link-warning">
{% include "ui/icon.html" icon="calendar" %}
{{ task.due-date }}
</a>
</div>
{% endif %}
<div class="col-auto text-secondary">
{% include "ui/switch-icon.html" icon="heart" icon-b-color="red" variant="scale" active=task.favorite %}
{% if task.likes %}{{ task.likes }}{% endif %}
</div>
{% if task.subtasks %}
<div class="col-auto">
<a href="#" class="link-secondary">
{% include "ui/icon.html" icon="activity" %}
1/{{ task.subtasks.size }}
</a>
</div>
{% endif %}
{% if task.comments %}
<div class="col-auto">
<a href="#" class="link-secondary">{% include "ui/icon.html" icon="message" %} {{ task.comments }}</a>
</div>
{% endif %}
<div class="col-auto">
<a href="#" class="link-secondary">{% include "ui/icon.html" icon="share" %}</a>
</div>
</div>
</div>
{% if task.subtasks %}
<div class="divide-y-2 mt-4">
{% for subtask in task.subtasks %}
<div>
{% if subtask.done %}
{% include "ui/icon.html" icon="check" color="muted" %}
<span class="text-secondary text-decoration-line-through">{{ subtask.name }}</span>
{% else %}
{% include "ui/icon.html" icon="check" color="green" %}
{{ subtask.name }}
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>