bert.hausmans/band-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial commit - Band Management application

Browse Source
This commit is contained in:
Bert Hausmans
2026-01-06 03:11:46 +01:00
commit 34e12e00b3
24543 changed files with 3991790 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_account_settings_account.html Normal file
View File

@@ -0,0 +1,218 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Account settings - Account{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/animate-css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-account-settings-account.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-md-row mb-6 gap-md-0 gap-2">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-users icon-sm me-1_5"></i> Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-security' %}"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i> Security</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-billing' %}"><i class="icon-base ti tabler-bookmark icon-sm me-1_5"></i> Billing & Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-notifications' %}"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i> Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-connections' %}"><i class="icon-base ti tabler-link icon-sm me-1_5"></i> Connections</a>
</li>
</ul>
</div>
<div class="card mb-6">
<!-- Account -->
<div class="card-body">
<div class="d-flex align-items-start align-items-sm-center gap-6">
{% if request.user|has_group:"admin" %}
<img src="{% static 'img/avatars/1.png' %}" alt="user-avatar" class="d-block w-px-100 h-px-100 rounded" id="uploadedAvatar" />
{% else %}
<img src="{% static 'img/avatars/3.png' %}" alt="user-avatar" class="d-block w-px-100 h-px-100 rounded" id="uploadedAvatar" />
{% endif %}
<div class="button-wrapper">
<label for="upload" class="btn btn-primary me-3 mb-4" tabindex="0">
<span class="d-none d-sm-block">Upload new photo</span>
<i class="icon-base ti tabler-upload d-block d-sm-none"></i>
<input type="file" id="upload" class="account-file-input" hidden accept="image/png, image/jpeg" />
</label>
<button type="button" class="btn btn-label-secondary account-image-reset mb-4">
<i class="icon-base ti tabler-reset d-block d-sm-none"></i>
<span class="d-none d-sm-block">Reset</span>
</button>
<div>Allowed JPG, GIF or PNG. Max size of 800K</div>
</div>
</div>
</div>
<div class="card-body pt-4">
<form id="formAccountSettings" method="POST" onsubmit="return false">
<div class="row gy-4 gx-6 mb-6">
<div class="col-md-6 form-control-validation">
<label for="firstName" class="form-label">First Name</label>
<input class="form-control" type="text" id="firstName" name="firstName" value="{{ request.user.username| capfirst }}" autofocus />
</div>
<div class="col-md-6 form-control-validation">
<label for="lastName" class="form-label">Last Name</label>
<input class="form-control" type="text" name="lastName" id="lastName" value="Doe" />
</div>
<div class="col-md-6">
<label for="email" class="form-label">E-mail</label>
<input class="form-control" type="text" id="email" name="email" value="{{ request.user.email }}" placeholder="john.doe@example.com" />
</div>
<div class="col-md-6">
<label for="organization" class="form-label">Organization</label>
<input type="text" class="form-control" id="organization" name="organization" value="{% get_theme_variables 'creator_name' %}" />
</div>
<div class="col-md-6">
<label class="form-label" for="phoneNumber">Phone Number</label>
<div class="input-group input-group-merge">
<span class="input-group-text">US (+1)</span>
<input type="text" id="phoneNumber" name="phoneNumber" class="form-control" placeholder="202 555 0111" />
</div>
</div>
<div class="col-md-6">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address" name="address" placeholder="Address" />
</div>
<div class="col-md-6">
<label for="state" class="form-label">State</label>
<input class="form-control" type="text" id="state" name="state" placeholder="California" />
</div>
<div class="col-md-6">
<label for="zipCode" class="form-label">Zip Code</label>
<input type="text" class="form-control" id="zipCode" name="zipCode" placeholder="231465" maxlength="6" />
</div>
<div class="col-md-6">
<label class="form-label" for="country">Country</label>
<select id="country" class="select2 form-select">
<option value="">Select</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="col-md-6">
<label for="language" class="form-label">Language</label>
<select id="language" class="select2 form-select">
<option value="">Select Language</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="pt">Portuguese</option>
</select>
</div>
<div class="col-md-6">
<label for="timeZones" class="form-label">Timezone</label>
<select id="timeZones" class="select2 form-select">
<option value="">Select Timezone</option>
<option value="-12">(GMT-12:00) International Date Line West</option>
<option value="-11">(GMT-11:00) Midway Island, Samoa</option>
<option value="-10">(GMT-10:00) Hawaii</option>
<option value="-9">(GMT-09:00) Alaska</option>
<option value="-8">(GMT-08:00) Pacific Time (US & Canada)</option>
<option value="-8">(GMT-08:00) Tijuana, Baja California</option>
<option value="-7">(GMT-07:00) Arizona</option>
<option value="-7">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
<option value="-7">(GMT-07:00) Mountain Time (US & Canada)</option>
<option value="-6">(GMT-06:00) Central America</option>
<option value="-6">(GMT-06:00) Central Time (US & Canada)</option>
<option value="-6">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
<option value="-6">(GMT-06:00) Saskatchewan</option>
<option value="-5">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
<option value="-5">(GMT-05:00) Eastern Time (US & Canada)</option>
<option value="-5">(GMT-05:00) Indiana (East)</option>
<option value="-4">(GMT-04:00) Atlantic Time (Canada)</option>
<option value="-4">(GMT-04:00) Caracas, La Paz</option>
</select>
</div>
<div class="col-md-6">
<label for="currency" class="form-label">Currency</label>
<select id="currency" class="select2 form-select">
<option value="">Select Currency</option>
<option value="usd">USD</option>
<option value="euro">Euro</option>
<option value="pound">Pound</option>
<option value="bitcoin">Bitcoin</option>
</select>
</div>
</div>
<div class="mt-2">
<button type="submit" class="btn btn-primary me-3">Save changes</button>
<button type="reset" class="btn btn-label-secondary">Cancel</button>
</div>
</form>
</div>
<!-- /Account -->
</div>
<div class="card">
<h5 class="card-header">Delete Account</h5>
<div class="card-body">
<div class="mb-6 col-12 mb-0">
<div class="alert alert-warning">
<h5 class="alert-heading mb-1">Are you sure you want to delete your account?</h5>
<p class="mb-0">Once you delete your account, there is no going back. Please be certain.</p>
</div>
</div>
<form id="formAccountDeactivation" onsubmit="return false">
<div class="form-check my-8">
<input class="form-check-input" type="checkbox" name="accountActivation" id="accountActivation" />
<label class="form-check-label" for="accountActivation">I confirm my account deactivation</label>
</div>
<button type="submit" class="btn btn-danger deactivate-account" disabled>Deactivate Account</button>
</form>
</div>
</div>
</div>
</div>
{% endblock %}

291
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_account_settings_billing.html Normal file
View File

@@ -0,0 +1,291 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Account settings - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/animate-css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-pricing.js' %}"></script>
<script src="{% static 'js/pages-account-settings-billing.js' %}"></script>
<script src="{% static 'js/app-invoice-list.js' %}"></script>
<script src="{% static 'js/modal-edit-cc.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-md-row mb-6">
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-account' %}"><i class="icon-base ti tabler-users icon-sm me-1_5"></i> Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-security' %}"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i> Security</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-bookmark icon-sm me-1_5"></i> Billing & Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-notifications' %}"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i> Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-connections' %}"><i class="icon-base ti tabler-link icon-sm me-1_5"></i> Connections</a>
</li>
</ul>
</div>
<div class="card mb-6">
<!-- Current Plan -->
<h5 class="card-header">Current Plan</h5>
<div class="card-body">
<div class="row row-gap-6">
<div class="col-md-6 mb-1">
<div class="mb-6">
<h6 class="mb-1">Your Current Plan is Basic</h6>
<p>A simple start for everyone</p>
</div>
<div class="mb-6">
<h6 class="mb-1">Active until Dec 09, 2021</h6>
<p>We will send you a notification upon Subscription expiration</p>
</div>
<div>
<h6 class="mb-1"><span class="me-1">$199 Per Month</span> <span class="badge bg-label-primary rounded-pill">Popular</span></h6>
<p class="mb-1">Standard plan for small to medium businesses</p>
</div>
</div>
<div class="col-md-6">
<div class="alert alert-warning mb-6" role="alert">
<h5 class="alert-heading mb-1 d-flex align-items-center">
<span class="alert-icon rounded"><i class="icon-base ti tabler-alert-triangle icon-md"></i></span>
<span>We need your attention!</span>
</h5>
<span class="ms-11 ps-1">Your plan requires update</span>
</div>
<div class="plan-statistics">
<div class="d-flex justify-content-between">
<h6 class="mb-1">Days</h6>
<h6 class="mb-1">12 of 30 Days</h6>
</div>
<div class="progress rounded mb-1">
<div class="progress-bar w-25 rounded" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>18 days remaining until your plan requires update</small>
</div>
</div>
<div class="col-12 d-flex gap-2 flex-wrap">
<button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#pricingModal">Upgrade Plan</button>
<button class="btn btn-label-danger cancel-subscription">Cancel Subscription</button>
</div>
</div>
</div>
<!-- /Current Plan -->
</div>
<div class="card mb-6">
<h5 class="card-header">Payment Methods</h5>
<div class="card-body">
<div class="row gx-6">
<div class="col-md-6">
<form id="creditCardForm" class="row g-6" onsubmit="return false">
<div class="col-12 mb-2">
<div class="form-check form-check-inline my-2 ms-2 me-6">
<input name="collapsible-payment" class="form-check-input" type="radio" value="" id="collapsible-payment-cc" checked="" />
<label class="form-check-label" for="collapsible-payment-cc">Credit/Debit/ATM Card</label>
</div>
<div class="form-check form-check-inline ms-2 my-2">
<input name="collapsible-payment" class="form-check-input" type="radio" value="" id="collapsible-payment-cash" />
<label class="form-check-label" for="collapsible-payment-cash">Paypal account</label>
</div>
</div>
<div class="col-12">
<label class="form-label w-100" for="paymentCard">Card Number</label>
<div class="input-group input-group-merge">
<input id="paymentCard" name="paymentCard" class="form-control credit-card-mask" type="text" placeholder="1356 3215 6548 7898" aria-describedby="paymentCard2" />
<span class="input-group-text cursor-pointer" id="paymentCard2"><span class="card-type"></span></span>
</div>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="paymentName">Name</label>
<input type="text" id="paymentName" class="form-control" placeholder="John Doe" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="paymentExpiryDate">Exp. Date</label>
<input type="text" id="paymentExpiryDate" class="form-control expiry-date-mask" placeholder="MM/YY" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="paymentCvv">CVV Code</label>
<div class="input-group input-group-merge">
<input type="text" id="paymentCvv" class="form-control cvv-code-mask" maxlength="3" placeholder="654" />
<span class="input-group-text cursor-pointer" id="paymentCvv2"><i class="icon-base ti tabler-help-circle text-body-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch ms-2 my-2">
<input type="checkbox" class="form-check-input" id="future-billing" />
<label for="future-billing" class="switch-label">Save card for future billing?</label>
</div>
</div>
<div class="col-12 mt-6">
<button type="submit" class="btn btn-primary me-3">Save Changes</button>
<button type="reset" class="btn btn-label-secondary">Cancel</button>
</div>
</form>
</div>
<div class="col-md-6 mt-12 mt-md-0">
<h6 class="mb-6">My Cards</h6>
<div class="added-cards">
<div class="cardMaster p-6 bg-lighter rounded mb-6">
<div class="d-flex justify-content-between flex-sm-row flex-column">
<div class="card-information me-2">
<img class="mb-2" src="{% static 'img/icons/payments/mastercard.png' %}" alt="Master Card" />
<div class="d-flex align-items-center mb-2 flex-wrap gap-2">
<h6 class="mb-0 me-2">Tom McBride</h6>
<span class="badge bg-label-primary">Primary</span>
</div>
<span class="card-number">&#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; 9856</span>
</div>
<div class="d-flex flex-column text-start text-lg-end">
<div class="d-flex order-sm-0 order-1 mt-sm-0 mt-4">
<button class="btn btn-sm btn-label-primary me-4" data-bs-toggle="modal" data-bs-target="#editCCModal">Edit</button>
<button class="btn btn-sm btn-label-danger">Delete</button>
</div>
<small class="mt-sm-4 mt-2 order-sm-1 order-0">Card expires at 12/26</small>
</div>
</div>
</div>
<div class="cardMaster p-6 bg-lighter rounded">
<div class="d-flex justify-content-between flex-sm-row flex-column">
<div class="card-information me-2">
<img class="mb-2" src="{% static 'img/icons/payments/visa.png' %}" alt="Visa Card" />
<h6 class="mb-2">Mildred Wagner</h6>
<span class="card-number">&#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; 5896</span>
</div>
<div class="d-flex flex-column text-start text-lg-end">
<div class="d-flex order-sm-0 order-1 mt-sm-0 mt-4">
<button class="btn btn-sm btn-label-primary me-4" data-bs-toggle="modal" data-bs-target="#editCCModal">Edit</button>
<button class="btn btn-sm btn-label-danger">Delete</button>
</div>
<small class="mt-sm-4 mt-2 order-sm-1 order-0">Card expires at 10/27</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-6">
<!-- Billing Address -->
<h5 class="card-header">Billing Address</h5>
<div class="card-body">
<form id="formAccountSettings" onsubmit="return false">
<div class="row g-6">
<div class="col-sm-6 form-control-validation">
<label for="companyName" class="form-label">Company Name</label>
<input type="text" id="companyName" name="companyName" class="form-control" placeholder="{% get_theme_variables 'creator_name' %}" />
</div>
<div class="col-sm-6 form-control-validation">
<label for="billingEmail" class="form-label">Billing Email</label>
<input class="form-control" type="text" id="billingEmail" name="billingEmail" placeholder="john.doe@example.com" />
</div>
<div class="col-sm-6">
<label for="taxId" class="form-label">Tax ID</label>
<input type="text" id="taxId" name="taxId" class="form-control" placeholder="Enter Tax ID" />
</div>
<div class="col-sm-6">
<label for="vatNumber" class="form-label">VAT Number</label>
<input class="form-control" type="text" id="vatNumber" name="vatNumber" placeholder="Enter VAT Number" />
</div>
<div class="col-sm-6">
<label for="mobileNumber" class="form-label">Mobile</label>
<div class="input-group input-group-merge">
<span class="input-group-text">US (+1)</span>
<input class="form-control mobile-number" type="text" id="mobileNumber" name="mobileNumber" placeholder="202 555 0111" />
</div>
</div>
<div class="col-sm-6">
<label for="country" class="form-label">Country</label>
<select id="country" class="form-select select2" name="country">
<option selected>USA</option>
<option>Canada</option>
<option>UK</option>
<option>Germany</option>
<option>France</option>
</select>
</div>
<div class="col-12">
<label for="billingAddress" class="form-label">Billing Address</label>
<input type="text" class="form-control" id="billingAddress" name="billingAddress" placeholder="Billing Address" />
</div>
<div class="col-sm-6">
<label for="state" class="form-label">State</label>
<input class="form-control" type="text" id="state" name="state" placeholder="California" />
</div>
<div class="col-sm-6">
<label for="zipCode" class="form-label">Zip Code</label>
<input type="text" class="form-control zip-code" id="zipCode" name="zipCode" placeholder="231465" maxlength="6" />
</div>
</div>
<div class="mt-6">
<button type="submit" class="btn btn-primary me-3">Save changes</button>
<button type="reset" class="btn btn-label-secondary">Discard</button>
</div>
</form>
</div>
<!-- /Billing Address -->
</div>
<div class="card">
<!-- Billing History -->
<h5 class="card-header text-md-start text-center">Billing History</h5>
<div class="card-datatable border-top">
<table class="invoice-list-table table border-top">
<thead>
<tr>
<th></th>
<th></th>
<th>#</th>
<th><i class="icon-base ti tabler-trending-up"></i></th>
<th>Client</th>
<th>Total</th>
<th class="text-truncate">Issued Date</th>
<th>Balance</th>
<th>Invoice Status</th>
<th class="cell-fit">Action</th>
</tr>
</thead>
</table>
</div>
<!--/ Billing History -->
</div>
</div>
</div>
<!-- Modal -->
{% include "partials/_modals/modal_edit_cc.html" %}
{% include "partials/_modals/modal_pricing.html" %}
<!--/ Modal -->
{% endblock %}

205
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_account_settings_connections.html Normal file
View File

@@ -0,0 +1,205 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Account settings - Pages{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-md-row mb-6 gap-md-0 gap-2">
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-account' %}"><i class="icon-base ti tabler-users icon-sm me-1_5"></i> Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-security' %}"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i> Security</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-billing' %}"><i class="icon-base ti tabler-bookmark icon-sm me-1_5"></i> Billing & Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-notifications' %}"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i> Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-link icon-sm me-1_5"></i> Connections</a>
</li>
</ul>
</div>
<div class="card">
<div class="row">
<div class="col-md-6 col-12">
<div class="card-header">
<h5 class="mb-0">Connected Accounts</h5>
<p class="my-0 card-subtitle">Display content from your connected accounts on your site</p>
</div>
<div class="card-body">
<div class="d-flex mb-4 align-items-center">
<div class="flex-shrink-0">
<img src="{% static 'img/icons/brands/google.png' %}" alt="google" class="me-4" height="32" />
</div>
<div class="flex-grow-1 d-flex align-items-center justify-content-between">
<div class="mb-sm-0 mb-2">
<h6 class="mb-0">Google</h6>
<small>Calendar and contacts</small>
</div>
<div class="text-end">
<div class="form-check form-switch mb-0">
<input type="checkbox" class="form-check-input" checked />
</div>
</div>
</div>
</div>
<div class="d-flex mb-4 align-items-center">
<div class="flex-shrink-0">
<img src="{% static 'img/icons/brands/slack.png' %}" alt="slack" class="me-4" height="32" />
</div>
<div class="flex-grow-1 d-flex align-items-center justify-content-between">
<div class="mb-sm-0 mb-2">
<h6 class="mb-0">Slack</h6>
<small>Communication</small>
</div>
<div class="text-end">
<div class="form-check form-switch mb-0">
<input type="checkbox" class="form-check-input" />
</div>
</div>
</div>
</div>
<div class="d-flex mb-4 align-items-center">
<div class="flex-shrink-0">
<img src="{% static 'img/icons/brands/github.png' %}" alt="github" class="me-4" height="32" />
</div>
<div class="flex-grow-1 d-flex align-items-center justify-content-between">
<div class="mb-sm-0 mb-2">
<h6 class="mb-0">Github</h6>
<small>Manage your Git repositories</small>
</div>
<div class="text-end">
<div class="form-check form-switch mb-0">
<input type="checkbox" class="form-check-input" checked />
</div>
</div>
</div>
</div>
<div class="d-flex mb-4 align-items-center">
<div class="flex-shrink-0">
<img src="{% static 'img/icons/brands/mailchimp.png' %}" alt="mailchimp" class="me-4" height="32" />
</div>
<div class="flex-grow-1 d-flex align-items-center justify-content-between">
<div class="mb-sm-0 mb-2">
<h6 class="mb-0">Mailchimp</h6>
<small>Email marketing service</small>
</div>
<div class="text-end">
<div class="form-check form-switch mb-0">
<input type="checkbox" class="form-check-input" checked />
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="{% static 'img/icons/brands/asana.png' %}" alt="asana" class="me-4" height="32" />
</div>
<div class="flex-grow-1 d-flex align-items-center justify-content-between">
<div class="mb-sm-0 mb-2">
<h6 class="mb-0">Asana</h6>
<small>Communication</small>
</div>
<div class="text-end">
<div class="form-check form-switch mb-0">
<input type="checkbox" class="form-check-input" />
</div>
</div>
</div>
</div>
<!-- /Connections -->
</div>
</div>
<div class="col-md-6 col-12">
<div class="card-header">
<h5 class="mb-0">Social Accounts</h5>
<p class="my-0 card-subtitle">Display content from social accounts on your site</p>
</div>
<div class="card-body">
<!-- Social Accounts -->
<div class="d-flex mb-4 align-items-center">
<div class="flex-shrink-0">
<img src="{% static 'img/icons/brands/facebook.png' %}" alt="facebook" class="me-4" height="32" />
</div>
<div class="flex-grow-1 row">
<div class="col-7">
<h6 class="mb-0">Facebook</h6>
<small>Not Connected</small>
</div>
<div class="col-5 text-end mt-sm-0 mt-2">
<button class="btn btn-icon btn-label-secondary"><i class="icon-base icon-22px ti tabler-link"></i></button>
</div>
</div>
</div>
<div class="d-flex mb-4 align-items-center">
<div class="flex-shrink-0">
<img src="{% static 'img/icons/brands/twitter-' %}{{ COOKIES.theme|default:theme }}.png" alt="twitter" class="me-4" height="32" data-app-dark-img="icons/brands/twitter-dark.png" data-app-light-img="icons/brands/twitter-light.png" />
</div>
<div class="flex-grow-1 row">
<div class="col-7">
<h6 class="mb-0">Twitter</h6>
<a href="{% get_theme_variables 'twitter_url' %}" target="_blank" class="small">@{% get_theme_variables 'creator_name' %}</a>
</div>
<div class="col-5 text-end mt-sm-0 mt-2">
<button class="btn btn-icon btn-label-danger"><i class="icon-base icon-22px ti tabler-trash"></i></button>
</div>
</div>
</div>
<div class="d-flex mb-4 align-items-center">
<div class="flex-shrink-0">
<img src="{% static 'img/icons/brands/instagram.png' %}" alt="instagram" class="me-4" height="32" />
</div>
<div class="flex-grow-1 row">
<div class="col-7">
<h6 class="mb-0">instagram</h6>
<a href="{% get_theme_variables 'instagram_url' %}" target="_blank" class="small">@{% get_theme_variables 'creator_name' %}</a>
</div>
<div class="col-5 text-end mt-sm-0 mt-2">
<button class="btn btn-icon btn-label-danger"><i class="icon-base icon-22px ti tabler-trash"></i></button>
</div>
</div>
</div>
<div class="d-flex mb-4 align-items-center">
<div class="flex-shrink-0">
<img src="{% static 'img/icons/brands/dribbble.png' %}" alt="dribbble" class="me-4" height="32" />
</div>
<div class="flex-grow-1 row">
<div class="col-7">
<h6 class="mb-0">Dribbble</h6>
<small>Not Connected</small>
</div>
<div class="col-5 text-end mt-sm-0 mt-2">
<button class="btn btn-icon btn-label-secondary"><i class="icon-base icon-22px ti tabler-link"></i></button>
</div>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="{% static 'img/icons/brands/behance.png' %}" alt="behance" class="me-4" height="32" />
</div>
<div class="flex-grow-1 row align-items-center">
<div class="col-7">
<h6 class="mb-0">Behance</h6>
<small>Not Connected</small>
</div>
<div class="col-5 text-end">
<button class="btn btn-icon btn-label-secondary"><i class="icon-base icon-22px ti tabler-link"></i></button>
</div>
</div>
</div>
<!-- /Social Accounts -->
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

156
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_account_settings_notifications.html Normal file
View File

@@ -0,0 +1,156 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Account settings - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
{% endblock vendor_js %}
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-md-row mb-6 gap-md-0 gap-2">
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-account' %}"><i class="icon-base ti tabler-users icon-sm me-1_5"></i> Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-security' %}"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i> Security</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-billing' %}"><i class="icon-base ti tabler-bookmark icon-sm me-1_5"></i> Billing & Plans</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i> Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-connections' %}"><i class="icon-base ti tabler-link icon-sm me-1_5"></i> Connections</a>
</li>
</ul>
</div>
<div class="card">
<!-- Notifications -->
<div class="card-body">
<h5 class="mb-1">Recent Devices</h5>
<span class="card-subtitle"
>We need permission from your browser to show notifications. <span class="notificationRequest"><a href="javascript:void(0);" class="text-primary">Request Permission</a></span></span
>
<div class="error"></div>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-nowrap">Type</th>
<th class="text-nowrap text-center">Email</th>
<th class="text-nowrap text-center">Browser</th>
<th class="text-nowrap text-center">App</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap text-heading">New for you</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck1" checked />
</div>
</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck2" checked />
</div>
</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck3" checked />
</div>
</td>
</tr>
<tr>
<td class="text-nowrap text-heading">Account activity</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck4" checked />
</div>
</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck5" checked />
</div>
</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck6" checked />
</div>
</td>
</tr>
<tr>
<td class="text-nowrap text-heading">A new browser used to sign in</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck7" checked />
</div>
</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck8" checked />
</div>
</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck9" />
</div>
</td>
</tr>
<tr>
<td class="text-nowrap text-heading">A new device is linked</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck10" checked />
</div>
</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck11" />
</div>
</td>
<td>
<div class="form-check mb-0 d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" id="defaultCheck12" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-body">
<h6 class="text-body mb-6">When should we send you notifications?</h6>
<form action="javascript:void(0);">
<div class="row">
<div class="col-sm-6">
<select id="sendNotification" class="form-select" name="sendNotification">
<option selected>Only when I'm online</option>
<option>Anytime</option>
</select>
</div>
<div class="mt-6">
<button type="submit" class="btn btn-primary me-3">Save changes</button>
<button type="reset" class="btn btn-label-secondary">Discard</button>
</div>
</div>
</form>
</div>
<!-- /Notifications -->
</div>
</div>
</div>
{% endblock %}

258
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_account_settings_security.html Normal file
View File

@@ -0,0 +1,258 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Account settings - Security{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-account-settings-security.js' %}"></script>
<script src="{% static 'js/modal-enable-otp.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-md-row mb-6 gap-md-0 gap-2">
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-account' %}"><i class="icon-base ti tabler-users icon-sm me-1_5"></i> Account</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i> Security</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-billing' %}"><i class="icon-base ti tabler-bookmark icon-sm me-1_5"></i> Billing & Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-notifications' %}"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i> Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-account-settings-connections' %}"><i class="icon-base ti tabler-link icon-sm me-1_5"></i> Connections</a>
</li>
</ul>
</div>
<!-- Change Password -->
<div class="card mb-6">
<h5 class="card-header">Change Password</h5>
<div class="card-body pt-1">
<form id="formAccountSettings" method="POST" onsubmit="return false">
<div class="row mb-sm-6 mb-2">
<div class="col-md-6 form-password-toggle form-control-validation">
<label class="form-label" for="currentPassword">Current Password</label>
<div class="input-group input-group-merge">
<input class="form-control" type="password" name="currentPassword" id="currentPassword" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off icon-xs"></i></span>
</div>
</div>
</div>
<div class="row gy-sm-6 gy-2 mb-sm-0 mb-2">
<div class="mb-6 col-md-6 form-password-toggle form-control-validation">
<label class="form-label" for="newPassword">New Password</label>
<div class="input-group input-group-merge">
<input class="form-control" type="password" id="newPassword" name="newPassword" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off icon-xs"></i></span>
</div>
</div>
<div class="mb-6 col-md-6 form-password-toggle form-control-validation">
<label class="form-label" for="confirmPassword">Confirm New Password</label>
<div class="input-group input-group-merge">
<input class="form-control" type="password" name="confirmPassword" id="confirmPassword" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off icon-xs"></i></span>
</div>
</div>
</div>
<h6 class="text-body">Password Requirements:</h6>
<ul class="ps-4 mb-0">
<li class="mb-4">Minimum 8 characters long - the more, the better</li>
<li class="mb-4">At least one lowercase character</li>
<li>At least one number, symbol, or whitespace character</li>
</ul>
<div class="mt-6">
<button type="submit" class="btn btn-primary me-3">Save changes</button>
<button type="reset" class="btn btn-label-secondary">Reset</button>
</div>
</form>
</div>
</div>
<!--/ Change Password -->
<!-- Two-steps verification -->
<div class="card mb-6">
<div class="card-body">
<h5 class="mb-6">Two-steps verification</h5>
<h5 class="mb-4 text-body">Two factor authentication is not enabled yet.</h5>
<p class="w-75">
Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in.
<a href="javascript:void(0);" class="text-nowrap">Learn more.</a>
</p>
<button class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#enableOTP">Enable Two-Factor Authentication</button>
</div>
</div>
<!-- Modal -->
{% include "partials/_modals/modal_enable_otp.html" %}
<!-- /Modal -->
<!--/ Two-steps verification -->
<!-- Create an API key -->
<div class="card mb-6">
<h5 class="card-header">Create an API key</h5>
<div class="row">
<div class="col-md-5 order-md-0 order-1">
<div class="card-body">
<form id="formAccountSettingsApiKey" method="POST" onsubmit="return false">
<div class="row">
<div class="mb-5 col-12">
<label for="apiAccess" class="form-label">Choose the Api key type you want to create</label>
<select id="apiAccess" class="select2 form-select">
<option value="">Choose Key Type</option>
<option value="full">Full Control</option>
<option value="modify">Modify</option>
<option value="read-execute">Read & Execute</option>
<option value="folders">List Folder Contents</option>
<option value="read">Read Only</option>
<option value="read-write">Read & Write</option>
</select>
</div>
<div class="mb-5 col-12">
<label for="apiKey" class="form-label">Name the API key</label>
<input type="text" class="form-control" id="apiKey" name="apiKey" placeholder="Server Key 1" />
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary me-2 d-grid w-100">Create Key</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-7 order-md-1 order-0">
<div class="text-center mt-4 mx-3 mx-md-0">
<img src="{% static 'img/illustrations/girl-with-laptop.png' %}" class="img-fluid" alt="Api Key Image" width="202" />
</div>
</div>
</div>
</div>
<!--/ Create an API key -->
<!-- API Key List & Access -->
<div class="card mb-6">
<div class="card-body">
<h5>API Key List & Access</h5>
<p class="mb-6">An API key is a simple encrypted string that identifies an application without any principal. They are useful for accessing public data anonymously, and are used to associate API requests with your project for quota and billing.</p>
<div class="row">
<div class="col-md-12">
<div class="bg-lighter rounded p-4 mb-6 position-relative">
<div class="d-flex align-items-center mb-2">
<h5 class="mb-0 me-3">Server Key 1</h5>
<span class="badge bg-label-primary">Full Access</span>
</div>
<div class="d-flex align-items-center mb-2">
<p class="me-3 mb-0 fw-medium">23eaf7f0-f4f7-495e-8b86-fad3261282ac</p>
<span class="cursor-pointer"><i class="icon-base ti tabler-copy"></i></span>
</div>
<span class="text-body-secondary">Created on 28 Apr 2021, 18:20 GTM+4:10</span>
</div>
<div class="bg-lighter rounded p-4 position-relative mb-6">
<div class="d-flex align-items-center mb-2">
<h5 class="mb-0 me-3">Server Key 2</h5>
<span class="badge bg-label-primary">Read Only</span>
</div>
<div class="d-flex align-items-center mb-2">
<p class="me-3 mb-0 fw-medium">bb98e571-a2e2-4de8-90a9-2e231b5e99</p>
<span class="cursor-pointer"><i class="icon-base ti tabler-copy"></i></span>
</div>
<span class="text-body-secondary">Created on 12 Feb 2021, 10:30 GTM+2:30</span>
</div>
<div class="bg-lighter rounded p-4 position-relative">
<div class="d-flex align-items-center mb-2">
<h5 class="mb-0 me-3">Server Key 3</h5>
<span class="badge bg-label-primary">Full Access</span>
</div>
<div class="d-flex align-items-center mb-2">
<p class="me-3 mb-0 fw-medium">2e915e59-3105-47f2-8838-6e46bf83b711</p>
<span class="cursor-pointer"><i class="icon-base ti tabler-copy"></i></span>
</div>
<span class="text-body-secondary">Created on 28 Dec 2020, 12:21 GTM+4:10</span>
</div>
</div>
</div>
</div>
</div>
<!--/ API Key List & Access -->
<!-- Recent Devices -->
<div class="card mb-6">
<h5 class="card-header">Recent Devices</h5>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-truncate">Browser</th>
<th class="text-truncate">Device</th>
<th class="text-truncate">Location</th>
<th class="text-truncate">Recent Activities</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-truncate text-heading fw-medium"><i class="icon-base ti tabler-brand-windows icon-md align-top text-info me-2"></i>Chrome on Windows</td>
<td class="text-truncate">HP Spectre 360</td>
<td class="text-truncate">Switzerland</td>
<td class="text-truncate">10, July 2021 20:07</td>
</tr>
<tr>
<td class="text-truncate text-heading fw-medium"><i class="icon-base ti tabler-device-mobile icon-md align-top text-danger me-2"></i>Chrome on iPhone</td>
<td class="text-truncate">iPhone 12x</td>
<td class="text-truncate">Australia</td>
<td class="text-truncate">13, July 2021 10:10</td>
</tr>
<tr>
<td class="text-truncate text-heading fw-medium"><i class="icon-base ti tabler-brand-android icon-md align-top text-success me-2"></i>Chrome on Android</td>
<td class="text-truncate">Oneplus 9 Pro</td>
<td class="text-truncate">Dubai</td>
<td class="text-truncate">14, July 2021 15:15</td>
</tr>
<tr>
<td class="text-truncate text-heading fw-medium"><i class="icon-base ti tabler-brand-apple icon-md align-top me-2"></i>Chrome on MacOS</td>
<td class="text-truncate">Apple iMac</td>
<td class="text-truncate">India</td>
<td class="text-truncate">16, July 2021 16:17</td>
</tr>
<tr>
<td class="text-truncate text-heading fw-medium"><i class="icon-base ti tabler-brand-windows icon-md align-top text-warning me-2"></i>Chrome on Windows</td>
<td class="text-truncate">HP Spectre 360</td>
<td class="text-truncate">Switzerland</td>
<td class="text-truncate">20, July 2021 21:01</td>
</tr>
<tr class="border-transparent">
<td class="text-truncate text-heading fw-medium"><i class="icon-base ti tabler-brand-android icon-md align-top text-success me-2"></i>Chrome on Android</td>
<td class="text-truncate">Oneplus 9 Pro</td>
<td class="text-truncate">Dubai</td>
<td class="text-truncate">21, July 2021 12:22</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--/ Recent Devices -->
</div>
</div>
{% endblock %}

370
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_faq.html Normal file
View File

@@ -0,0 +1,370 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}FAQ - Pages{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-faq.css' %}" />
{% endblock page_css %}
{% block content %}
<div class="faq-header d-flex flex-column justify-content-center align-items-center h-px-300 position-relative">
<img src="{% static 'img/pages/header.png' %}" class="scaleX-n1-rtl faq-banner-img z-n1 rounded" alt="background image" />
<h4 class="text-center mb-2">Hello, how can we help?</h4>
<p class="text-center mb-0 px-4">or choose a category to quickly find the help you need</p>
<div class="input-wrapper mt-4 input-group input-group-merge">
<span class="input-group-text" id="basic-addon1"><i class="icon-base ti tabler-search icon-xs"></i></span>
<input type="text" class="form-control" placeholder="Search articles..." aria-label="Search" aria-describedby="basic-addon1" />
</div>
</div>
<div class="row mt-6">
<!-- Navigation -->
<div class="col-lg-3 col-md-4 col-12 mb-md-0 mb-4">
<div class="d-flex justify-content-between flex-column nav-align-left mb-2 mb-md-0">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#payment">
<i class="icon-base ti tabler-credit-card icon-sm faq-nav-icon me-1_5"></i>
<span class="align-middle">Payment</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#delivery">
<i class="icon-base ti tabler-briefcase icon-sm faq-nav-icon me-1_5"></i>
<span class="align-middle">Delivery</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#cancellation">
<i class="icon-base ti tabler-rotate-clockwise-2 icon-sm faq-nav-icon me-1_5"></i>
<span class="align-middle">Cancellation & Return</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#orders">
<i class="icon-base ti tabler-box icon-sm faq-nav-icon me-1_5"></i>
<span class="align-middle">My Orders</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#product">
<i class="icon-base ti tabler-settings icon-sm faq-nav-icon me-1_5"></i>
<span class="align-middle">Product & Services</span>
</button>
</li>
</ul>
<div class="d-none d-md-block">
<div class="mt-4">
<img src="{% static 'img/illustrations/girl-sitting-with-laptop.png' %}" class="img-fluid" width="270" alt="FAQ Image" />
</div>
</div>
</div>
</div>
<!-- /Navigation -->
<!-- FAQ's -->
<div class="col-lg-9 col-md-8 col-12">
<div class="tab-content p-0">
<div class="tab-pane fade show active" id="payment" role="tabpanel">
<div class="d-flex mb-4 gap-4 align-items-center">
<div>
<span class="badge bg-label-primary rounded h-px-50 py-2">
<i class="icon-base ti tabler-credit-card icon-30px"></i>
</span>
</div>
<div>
<h5 class="mb-0">
<span class="align-middle">Payment</span>
</h5>
<span>Get help with payment</span>
</div>
</div>
<div id="accordionPayment" class="accordion">
<div class="card accordion-item active">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" aria-expanded="true" data-bs-target="#accordionPayment-1" aria-controls="accordionPayment-1">When is payment taken for my order?</button>
</h2>
<div id="accordionPayment-1" class="accordion-collapse collapse show">
<div class="accordion-body">Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionPayment-2" aria-controls="accordionPayment-2">How do I pay for my order?</button>
</h2>
<div id="accordionPayment-2" class="accordion-collapse collapse">
<div class="accordion-body">We accept Visa®, MasterCard®, American Express®, and PayPal®. Our servers encrypt all information submitted to them, so you can be confident that your credit card information will be kept safe and secure.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionPayment-3" aria-controls="accordionPayment-3">What should I do if I'm having trouble placing an order?</button>
</h2>
<div id="accordionPayment-3" class="accordion-collapse collapse">
<div class="accordion-body">
For any technical difficulties you are experiencing with our website, please contact us at our
<a href="javascript:void(0);">support portal</a>, or you can call us toll-free at <span class="fw-medium">1-000-000-000</span>, or email us at
<a href="javascript:void(0);">order@companymail.com</a>
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionPayment-4" aria-controls="accordionPayment-4">Which license do I need for an end product that is only accessible to paying users?</button>
</h2>
<div id="accordionPayment-4" class="accordion-collapse collapse">
<div class="accordion-body">If you have paying users or you are developing any SaaS products then you need an Extended License. For each products, you need a license. You can get free lifetime updates as well.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionPayment-5" aria-controls="accordionPayment-5">Does my subscription automatically renew?</button>
</h2>
<div id="accordionPayment-5" class="accordion-collapse collapse">
<div class="accordion-body">No, This is not subscription based item.Pastry pudding cookie toffee bonbon jujubes jujubes powder topping. Jelly beans gummi bears sweet roll bonbon muffin liquorice. Wafer lollipop sesame snaps.</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="delivery" role="tabpanel">
<div class="d-flex mb-4 gap-4">
<div>
<span class="badge bg-label-primary rounded h-px-50 py-2">
<i class="icon-base ti tabler-briefcase icon-30px"></i>
</span>
</div>
<div>
<h5 class="mb-0">
<span class="align-middle">Delivery</span>
</h5>
<span>Get help with delivery</span>
</div>
</div>
<div id="accordionDelivery" class="accordion">
<div class="card accordion-item active">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" aria-expanded="true" data-bs-target="#accordionDelivery-1" aria-controls="accordionDelivery-1">How would you ship my order?</button>
</h2>
<div id="accordionDelivery-1" class="accordion-collapse collapse show">
<div class="accordion-body">For large products, we deliver your product via a third party logistics company offering you the “room of choice” scheduled delivery service. For small products, we offer free parcel delivery.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionDelivery-2" aria-controls="accordionDelivery-2">What is the delivery cost of my order?</button>
</h2>
<div id="accordionDelivery-2" class="accordion-collapse collapse">
<div class="accordion-body">The cost of scheduled delivery is $69 or $99 per order, depending on the destination postal code. The parcel delivery is free.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionDelivery-4" aria-controls="accordionDelivery-4">What to do if my product arrives damaged?</button>
</h2>
<div id="accordionDelivery-4" class="accordion-collapse collapse">
<div class="accordion-body">
We will promptly replace any product that is damaged in transit. Just contact our
<a href="javascript:void(0);">support team</a>, to notify us of the situation within 48 hours of product arrival.
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="cancellation" role="tabpanel">
<div class="d-flex mb-4 gap-4">
<div>
<span class="badge bg-label-primary rounded h-px-50 py-2">
<i class="icon-base ti tabler-rotate-clockwise-2 icon-30px"></i>
</span>
</div>
<div>
<h5 class="mb-0"><span class="align-middle">Cancellation & Return</span></h5>
<span>Get help with cancellation & return</span>
</div>
</div>
<div id="accordionCancellation" class="accordion">
<div class="card accordion-item active">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" aria-expanded="true" data-bs-target="#accordionCancellation-1" aria-controls="accordionCancellation-1">Can I cancel my order?</button>
</h2>
<div id="accordionCancellation-1" class="accordion-collapse collapse show">
<div class="accordion-body">
<p>Scheduled delivery orders can be cancelled 72 hours prior to your selected delivery date for full refund.</p>
<p class="mb-0">Parcel delivery orders cannot be cancelled, however a free return label can be provided upon request.</p>
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionCancellation-2" aria-controls="accordionCancellation-2">Can I return my product?</button>
</h2>
<div id="accordionCancellation-2" class="accordion-collapse collapse">
<div class="accordion-body">
You can return your product within 15 days of delivery, by contacting our
<a href="javascript:void(0);">support team</a>, All merchandise returned must be in the original packaging with all original items.
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" aria-controls="accordionCancellation-3" data-bs-target="#accordionCancellation-3">Where can I view status of return?</button>
</h2>
<div id="accordionCancellation-3" class="accordion-collapse collapse">
<div class="accordion-body">
<p>Locate the item from Your <a href="javascript:void(0);">Orders</a></p>
<p class="mb-0">Select <span class="fw-medium">Return/Refund</span> status</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="orders" role="tabpanel">
<div class="d-flex mb-4 gap-4">
<div>
<span class="badge bg-label-primary rounded h-px-50 py-2">
<i class="icon-base ti tabler-box icon-30px"></i>
</span>
</div>
<div>
<h5 class="mb-0">
<span class="align-middle">My Orders</span>
</h5>
<span>Order details</span>
</div>
</div>
<div id="accordionOrders" class="accordion">
<div class="card accordion-item active">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" aria-expanded="true" data-bs-target="#accordionOrders-1" aria-controls="accordionOrders-1">Has my order been successful?</button>
</h2>
<div id="accordionOrders-1" class="accordion-collapse collapse show">
<div class="accordion-body">
<p>All successful order transactions will receive an order confirmation email once the order has been processed. If you have not received your order confirmation email within 24 hours, check your junk email or spam folder.</p>
<p class="mb-0">Alternatively, log in to your account to check your order summary. If you do not have a account, you can contact our Customer Care Team on <span class="fw-medium">1-000-000-000</span>.</p>
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionOrders-2" aria-controls="accordionOrders-2">My Promotion Code is not working, what can I do?</button>
</h2>
<div id="accordionOrders-2" class="accordion-collapse collapse">
<div class="accordion-body">If you are having issues with a promotion code, please contact us at <span class="fw-medium">1 000 000 000</span> for assistance.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionOrders-3" aria-controls="accordionOrders-3">How do I track my Orders?</button>
</h2>
<div id="accordionOrders-3" class="accordion-collapse collapse">
<div class="accordion-body">
<p>
If you have an account just sign into your account from
<a href="javascript:void(0);">here</a> and select <span class="fw-medium">“My Orders”</span>.
</p>
<p class="mb-0">
If you have a a guest account track your order from
<a href="javascript:void(0);">here</a> using the order number and the email address.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="product" role="tabpanel">
<div class="d-flex mb-4 gap-4">
<div>
<span class="badge bg-label-primary rounded h-px-50 py-2">
<i class="icon-base ti tabler-camera icon-30px"></i>
</span>
</div>
<div>
<h5 class="mb-0">
<span class="align-middle">Product & Services</span>
</h5>
<span>Get help with product & services</span>
</div>
</div>
<div id="accordionProduct" class="accordion">
<div class="card accordion-item active">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" aria-expanded="true" data-bs-target="#accordionProduct-1" aria-controls="accordionProduct-1">Will I be notified once my order has shipped?</button>
</h2>
<div id="accordionProduct-1" class="accordion-collapse collapse show">
<div class="accordion-body">Yes, We will send you an email once your order has been shipped. This email will contain tracking and order information.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionProduct-2" aria-controls="accordionProduct-2">Where can I find warranty information?</button>
</h2>
<div id="accordionProduct-2" class="accordion-collapse collapse">
<div class="accordion-body">We are committed to quality products. For information on warranty period and warranty services, visit our Warranty section <a href="javascript:void(0);">here</a>.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionProduct-3" aria-controls="accordionProduct-3">How can I purchase additional warranty coverage?</button>
</h2>
<div id="accordionProduct-3" class="accordion-collapse collapse">
<div class="accordion-body">For the peace of your mind, we offer extended warranty plans that add additional year(s) of protection to the standard manufacturer’s warranty provided by us. To purchase or find out more about the extended warranty program, visit Extended Warranty section <a href="javascript:void(0);">here</a>.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /FAQ's -->
</div>
<!-- Contact -->
<div class="row my-6">
<div class="col-12 text-center my-6">
<div class="badge bg-label-primary">Question?</div>
<h4 class="my-2">You still have a question?</h4>
<p class="mb-0">If you can't find question in our FAQ, you can contact us. We'll answer you shortly!</p>
</div>
</div>
<div class="row justify-content-center gap-md-0 gap-6">
<div class="col-md-6">
<div class="py-6 rounded bg-faq-section text-center">
<span class="badge bg-label-primary p-2">
<i class="icon-base ti tabler-phone icon-26px mx-50 mt-50"></i>
</span>
<h5 class="mt-4 mb-1"><a class="text-heading" href="tel:+(1)25482568">+(1) 2548 2568</a></h5>
<p class="mb-0">We are always happy to help</p>
</div>
</div>
<div class="col-md-6">
<div class="py-6 rounded bg-faq-section text-center">
<span class="badge bg-label-primary p-2">
<i class="icon-base ti tabler-mail icon-26px mx-50 mt-50"></i>
</span>
<h5 class="mt-4 mb-1"><a class="text-heading" href="mailto:help@help.com">help@help.com</a></h5>
<p class="mb-0">Best way to get a quick answer</p>
</div>
</div>
</div>
<!-- /Contact -->
{% endblock %}

36
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_misc_comingsoon.html Normal file
View File

@@ -0,0 +1,36 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Coming Soon - Pages{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-misc.css' %}" />
{% endblock page_css %}
{% block content %}
<!-- Coming Soon -->
<div class="container-xxl container-p-y py-4">
<div class="misc-wrapper">
<h4 class="mb-2 mx-2">We are launching soon 🚀</h4>
<p class="mb-6 mx-2">Our website is opening soon. Please register to get notified when it's ready!</p>
<form onsubmit="return false">
<div class="mb-0">
<div class="mb-0 d-flex gap-4">
<input type="text" class="form-control" placeholder="Enter your email" autofocus />
<button type="submit" class="btn btn-primary">Notify</button>
</div>
</div>
</form>
<div class="mt-12">
<img src="{% static 'img/illustrations/page-misc-launching-soon.png' %}" alt="page-misc-launching-soon" width="263" class="img-fluid" />
</div>
</div>
</div>
<div class="container-fluid misc-bg-wrapper">
<img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" height="355" alt="page-misc-coming-soon" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
</div>
<!-- /Coming Soon -->
{% endblock %}

31
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_misc_error.html Normal file
View File

@@ -0,0 +1,31 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Error - Pages{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-misc.css' %}" />
{% endblock page_css %}
{% block content %}
<!-- Error -->
<div class="container-xxl container-p-y">
<div class="misc-wrapper">
<h1 class="mb-2 mx-2" style="line-height: 6rem;font-size: 6rem;">404</h1>
<h4 class="mb-2 mx-2">Page Not Found️ ⚠️</h4>
<p class="mb-6 mx-2">we couldn't find the page you are looking for</p>
<a href="{% url 'index' %}" class="btn btn-primary mb-10">Back to home</a>
<div class="mt-4">
<img src="{% static 'img/illustrations/page-misc-error.png' %}" alt="page-misc-error" width="225" class="img-fluid">
</div>
</div>
</div>
<div class="container-fluid misc-bg-wrapper">
<img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" height="355" alt="page-misc-error" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png">
</div>
<!-- /Error -->
{% endblock %}

30
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_misc_not_authorized.html Normal file
View File

@@ -0,0 +1,30 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Not Authorized - Pages{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-misc.css' %}" />
{% endblock page_css %}
{% block content %}
<!-- Not Authorized -->
<div class="container-xxl container-p-y">
<div class="misc-wrapper">
<h1 class="mb-2 mx-2" style="line-height: 6rem;font-size: 6rem;">401</h1>
<h4 class="mb-2 mx-2">You are not authorized! 🔐</h4>
<p class="mb-6 mx-2">You don’t have permission to access this page. Go Home!</p>
<a href="{% url 'index' %}" class="btn btn-primary">Back to home</a>
<div class="mt-12">
<img src="{% static 'img/illustrations/page-misc-you-are-not-authorized.png' %}" alt="page-misc-not-authorized" width="170" class="img-fluid">
</div>
</div>
</div>
<div class="container-fluid misc-bg-wrapper">
<img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" height="355" alt="page-misc-not-authorized" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png">
</div>
<!-- /Not Authorized -->
{% endblock %}

29
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_misc_under_maintenance.html Normal file
View File

@@ -0,0 +1,29 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Under Maintenance - Pages{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-misc.css' %}" />
{% endblock page_css %}
{% block content %}
<!--Under Maintenance -->
<div class="container-xxl container-p-y">
<div class="misc-wrapper">
<h4 class="mb-2 mx-2">Under Maintenance! 🚧</h4>
<p class="mb-6 mx-2">Sorry for the inconvenience but we're performing some maintenance at the moment</p>
<a href="{% url 'index' %}" class="btn btn-primary">Back to home</a>
<div class="mt-12">
<img src="{% static 'img/illustrations/page-misc-under-maintenance.png' %}" alt="page-misc-under-maintenance" width="550" class="img-fluid" />
</div>
</div>
</div>
<div class="container-fluid misc-bg-wrapper misc-under-maintenance-bg-wrapper">
<img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" height="355" alt="page-misc-under-maintenance" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
</div>
<!-- /Under Maintenance -->
{% endblock %}

147
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_pricing.html Normal file
View File

@@ -0,0 +1,147 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Pricing - Pages{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-pricing.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-pricing.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="card">
<!-- Pricing Plans -->
<div class="pb-4 rounded-top">
<div class="container py-12 px-xl-10 px-4">
<h3 class="text-center mb-2 mt-4">Pricing Plans</h3>
<p class="text-center mb-0">
All plans include 40+ advanced tools and features to boost your product.<br />
Choose the best plan to fit your needs.
</p>
<div class="d-flex align-items-center justify-content-center flex-wrap gap-1 pt-9 pb-3 mb-50">
<label class="switch switch-sm ms-sm-12 ps-sm-12 me-0">
<span class="switch-label text-body fs-6 fw-medium">Monthly</span>
<input type="checkbox" class="switch-input price-duration-toggler" checked />
<span class="switch-toggle-slider">
<span class="switch-on"></span>
<span class="switch-off"></span>
</span>
<span class="switch-label text-body fs-6 fw-medium">Annually</span>
</label>
<div class="mt-n5 ms-n10 ml-2 mb-12 d-none d-sm-flex align-items-center gap-1">
<i class="icon-base ti tabler-corner-left-down icon-lg text-body-secondary scaleX-n1-rtl"></i>
<span class="badge badge-sm bg-label-primary rounded-1 mb-3 ">Save up to 10%</span>
</div>
</div>
<div class="row mx-0 px-lg-12 gy-6">
<!-- Basic -->
<div class="col-xl mb-md-0">
<div class="card border rounded shadow-none">
<div class="card-body pt-12 px-5">
<div class="mt-3 mb-5 text-center">
<img src="{% static 'img/illustrations/page-pricing-basic.png' %}" alt="Basic Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Basic</h4>
<p class="text-center mb-5">A simple start for everyone</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="mb-0 text-primary">0</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1 ms-1">/month</sub>
</div>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">100 responses a month</li>
<li class="mb-4">Unlimited forms and surveys</li>
<li class="mb-4">Unlimited fields</li>
<li class="mb-4">Basic form creation tools</li>
<li class="mb-0">Up to 2 subdomains</li>
</ul>
<a href="{% url 'auth-register-basic' %}" class="btn btn-label-success d-grid w-100">Your Current Plan</a>
</div>
</div>
</div>
<!-- Pro -->
<div class="col-xl mb-md-0">
<div class="card border-primary border shadow-none">
<div class="card-body position-relative pt-4 px-5">
<div class="position-absolute end-0 me-5 top-0 mt-4">
<span class="badge bg-label-primary rounded-1">Popular</span>
</div>
<div class="my-5 pt-6 text-center">
<img src="{% static 'img/illustrations/page-pricing-standard.png' %}" alt="Pro Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Standard</h4>
<p class="text-center mb-5">For small to medium businesses</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="price-toggle price-yearly text-primary mb-0">7</h1>
<h1 class="price-toggle price-monthly text-primary mb-0 d-none">9</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1 ms-1">/month</sub>
</div>
<small class="price-yearly price-yearly-toggle text-body-secondary">USD 480 / year</small>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">Unlimited responses</li>
<li class="mb-4">Unlimited forms and surveys</li>
<li class="mb-4">Instagram profile page</li>
<li class="mb-4">Google Docs integration</li>
<li class="mb-0">Custom “Thank you” page</li>
</ul>
<a href="{% url 'auth-register-basic' %}" class="btn btn-primary d-grid w-100">Upgrade</a>
</div>
</div>
</div>
<!-- Enterprise -->
<div class="col-xl">
<div class="card border rounded shadow-none">
<div class="card-body pt-12 px-5">
<div class="mt-3 mb-5 text-center">
<img src="{% static 'img/illustrations/page-pricing-enterprise.png' %}" alt="Enterprise Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Enterprise</h4>
<p class="text-center mb-5">Solution for big organizations</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="price-toggle price-yearly text-primary mb-0">16</h1>
<h1 class="price-toggle price-monthly text-primary mb-0 d-none">19</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1 ms-1">/month</sub>
</div>
<small class="price-yearly price-yearly-toggle text-body-secondary">USD 960 / year</small>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">PayPal payments</li>
<li class="mb-4">Logic Jumps</li>
<li class="mb-4">File upload with 5GB storage</li>
<li class="mb-4">Custom domain support</li>
<li class="mb-0">Stripe integration</li>
</ul>
<a href="{% url 'auth-register-basic' %}" class="btn btn-label-primary d-grid w-100">Upgrade</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Pricing Plans -->
</div>
{% endblock %}

347
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_profile_connections.html Normal file
View File

@@ -0,0 +1,347 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}User Profile - Connections{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-profile.css' %}" />
{% endblock page_css %}
{% block content %}
<!-- Header -->
<div class="row">
<div class="col-12">
<div class="card mb-6">
<div class="user-profile-header-banner">
<img src="{% static 'img/pages/profile-banner.png' %}" alt="Banner image" class="rounded-top" />
</div>
<div class="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-5">
<div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">
{% if request.user|has_group:"admin" %}
<img src="{% static 'img/avatars/1.png' %}" alt="user image" class="d-block h-auto ms-0 ms-sm-6 rounded user-profile-img">
{% else %}
<img src="{% static 'img/avatars/3.png' %}" alt="user image" class="d-block h-auto ms-0 ms-sm-6 rounded user-profile-img">
{% endif %}
</div>
<div class="flex-grow-1 mt-3 mt-lg-5">
<div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
<div class="user-profile-info">
<h4 class="mb-2 mt-lg-6">{{ request.user.username }}</h4>
<ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4">
<li class="list-inline-item"><i class="icon-base ti tabler-palette icon-lg me-2"></i> UX Designer</li>
<li class="list-inline-item"><i class="icon-base ti tabler-map-pin icon-lg me-2"></i> Vatican City</li>
<li class="list-inline-item"><i class="icon-base ti tabler-calendar icon-lg me-2"></i> Joined April 2021</li>
</ul>
</div>
<a href="javascript:void(0)" class="btn btn-primary mb-1"> <i class="icon-base ti tabler-user-check icon-xs me-2"></i>Connected </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Header -->
<!-- Navbar pills -->
<div class="row">
<div class="col-md-12">
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-sm-row mb-6 gap-sm-0 gap-2">
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-user' %}"><i class="icon-base ti tabler-user icon-sm me-1_5"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-teams' %}"><i class="icon-base ti tabler-users icon-sm me-1_5"></i> Teams</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-projects' %}"><i class="icon-base ti tabler-layout-grid icon-sm me-1_5"></i> Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-link icon-sm me-1_5"></i> Connections</a>
</li>
</ul>
</div>
</div>
</div>
<!--/ Navbar pills -->
<!-- Connection Cards -->
<div class="row g-6">
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body text-center">
<div class="dropdown btn-pinned">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share connection</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Block connection</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
</ul>
</div>
<div class="mx-auto my-6">
<img src="{% static 'img/avatars/3.png' %}" alt="Avatar Image" class="rounded-circle w-px-100 h-px-100" />
</div>
<h5 class="mb-0 card-title">Mark Gilbert</h5>
<span>UI Designer</span>
<div class="d-flex align-items-center justify-content-center my-6 gap-2">
<a href="javascript:;" class="me-2"><span class="badge bg-label-secondary">Figma</span></a>
<a href="javascript:;"><span class="badge bg-label-warning">Sketch</span></a>
</div>
<div class="d-flex align-items-center justify-content-around mb-6">
<div>
<h5 class="mb-0">18</h5>
<span>Projects</span>
</div>
<div>
<h5 class="mb-0">834</h5>
<span>Tasks</span>
</div>
<div>
<h5 class="mb-0">129</h5>
<span>Connections</span>
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<a href="javascript:;" class="btn btn-primary d-flex align-items-center me-4"><i class="icon-base ti tabler-user-check icon-xs me-2"></i>Connected</a>
<a href="javascript:;" class="btn btn-label-secondary btn-icon"><i class="icon-base ti tabler-mail icon-22px"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body text-center">
<div class="dropdown btn-pinned">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share connection</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Block connection</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
</ul>
</div>
<div class="mx-auto my-6">
<img src="{% static 'img/avatars/12.png' %}" alt="Avatar Image" class="rounded-circle w-px-100 h-px-100" />
</div>
<h5 class="mb-0 card-title">Eugenia Parsons</h5>
<span>Developer</span>
<div class="d-flex align-items-center justify-content-center my-6 gap-2">
<a href="javascript:;" class="me-2"><span class="badge bg-label-danger">Angular</span></a>
<a href="javascript:;"><span class="badge bg-label-info">React</span></a>
</div>
<div class="d-flex align-items-center justify-content-around mb-6">
<div>
<h5 class="mb-0">112</h5>
<span>Projects</span>
</div>
<div>
<h5 class="mb-0">23.1k</h5>
<span>Tasks</span>
</div>
<div>
<h5 class="mb-0">1.28k</h5>
<span>Connections</span>
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<a href="javascript:;" class="btn btn-label-primary d-flex align-items-center me-4"><i class="icon-base ti tabler-user-plus icon-xs me-2"></i>Connect</a>
<a href="javascript:;" class="btn btn-label-secondary btn-icon"><i class="icon-base ti tabler-mail icon-22px"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body text-center">
<div class="dropdown btn-pinned">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share connection</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Block connection</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
</ul>
</div>
<div class="mx-auto my-6">
<img src="{% static 'img/avatars/5.png' %}" alt="Avatar Image" class="rounded-circle w-px-100 h-px-100" />
</div>
<h5 class="mb-0 card-title">Francis Byrd</h5>
<span>Developer</span>
<div class="d-flex align-items-center justify-content-center my-6 gap-2">
<a href="javascript:;" class="me-2"><span class="badge bg-label-primary">React</span></a>
<a href="javascript:;"><span class="badge bg-label-info">HTML</span></a>
</div>
<div class="d-flex align-items-center justify-content-around mb-6">
<div>
<h5 class="mb-0">32</h5>
<span>Projects</span>
</div>
<div>
<h5 class="mb-0">1.25k</h5>
<span>Tasks</span>
</div>
<div>
<h5 class="mb-0">890</h5>
<span>Connections</span>
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<a href="javascript:;" class="btn btn-label-primary d-flex align-items-center me-4"><i class="icon-base ti tabler-user-plus icon-xs me-2"></i>Connect</a>
<a href="javascript:;" class="btn btn-label-secondary btn-icon"><i class="icon-base ti tabler-mail icon-22px"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body text-center">
<div class="dropdown btn-pinned">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share connection</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Block connection</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
</ul>
</div>
<div class="mx-auto my-6">
<img src="{% static 'img/avatars/8.png' %}" alt="Avatar Image" class="rounded-circle w-px-100 h-px-100" />
</div>
<h5 class="mb-0 card-title">Leon Lucas</h5>
<span>UI/UX Designer</span>
<div class="d-flex align-items-center justify-content-center my-6 gap-2">
<a href="javascript:;" class="me-2"><span class="badge bg-label-secondary">Figma</span></a>
<a href="javascript:;" class="me-2"><span class="badge bg-label-warning">Sketch</span></a>
<a href="javascript:;"><span class="badge bg-label-primary">Photoshop</span></a>
</div>
<div class="d-flex align-items-center justify-content-around mb-6">
<div>
<h5 class="mb-0">86</h5>
<span>Projects</span>
</div>
<div>
<h5 class="mb-0">12.4k</h5>
<span>Tasks</span>
</div>
<div>
<h5 class="mb-0">890</h5>
<span>Connections</span>
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<a href="javascript:;" class="btn btn-label-primary d-flex align-items-center me-4"><i class="icon-base ti tabler-user-plus icon-xs me-2"></i>Connect</a>
<a href="javascript:;" class="btn btn-label-secondary btn-icon"><i class="icon-base ti tabler-mail icon-22px"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body text-center">
<div class="dropdown btn-pinned">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share connection</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Block connection</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
</ul>
</div>
<div class="mx-auto my-6">
<img src="{% static 'img/avatars/9.png' %}" alt="Avatar Image" class="rounded-circle w-px-100 h-px-100" />
</div>
<h5 class="mb-0 card-title">Jayden Rogers</h5>
<span>Full Stack Developer</span>
<div class="d-flex align-items-center justify-content-center my-6 gap-2">
<a href="javascript:;" class="me-2"><span class="badge bg-label-info">React</span></a>
<a href="javascript:;" class="me-2"><span class="badge bg-label-warning">Angular</span></a>
<a href="javascript:;"><span class="badge bg-label-success">Node.js</span></a>
</div>
<div class="d-flex align-items-center justify-content-around mb-6">
<div>
<h5 class="mb-0">244</h5>
<span>Projects</span>
</div>
<div>
<h5 class="mb-0">23.8k</h5>
<span>Tasks</span>
</div>
<div>
<h5 class="mb-0">2.14k</h5>
<span>Connections</span>
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<a href="javascript:;" class="btn btn-primary d-flex align-items-center me-4"><i class="icon-base ti tabler-user-check icon-xs me-2"></i>Connected</a>
<a href="javascript:;" class="btn btn-label-secondary btn-icon"><i class="icon-base ti tabler-mail icon-22px"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body text-center">
<div class="dropdown btn-pinned">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share connection</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Block connection</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
</ul>
</div>
<div class="mx-auto my-6">
<img src="{% static 'img/avatars/10.png' %}" alt="Avatar Image" class="rounded-circle w-px-100 h-px-100" />
</div>
<h5 class="mb-0 card-title">Jeanette Powell</h5>
<span>SEO</span>
<div class="d-flex align-items-center justify-content-center my-6 gap-2">
<a href="javascript:;" class="me-2"><span class="badge bg-label-secondary">Analysis</span></a>
<a href="javascript:;"><span class="badge bg-label-success">Node.js</span></a>
</div>
<div class="d-flex align-items-center justify-content-around mb-6">
<div>
<h5 class="mb-0">32</h5>
<span>Projects</span>
</div>
<div>
<h5 class="mb-0">1.28k</h5>
<span>Tasks</span>
</div>
<div>
<h5 class="mb-0">1.27k</h5>
<span>Connections</span>
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<a href="javascript:;" class="btn btn-label-primary d-flex align-items-center me-4"><i class="icon-base ti tabler-user-plus icon-xs me-2"></i>Connect</a>
<a href="javascript:;" class="btn btn-label-secondary btn-icon"><i class="icon-base ti tabler-mail icon-22px"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--/ Connection Cards -->
{% endblock %}

531
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_profile_projects.html Normal file
View File

@@ -0,0 +1,531 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}User Profile - Projects{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-profile.css' %}" />
{% endblock page_css %}
{% block content %}
<!-- Header -->
<div class="row">
<div class="col-12">
<div class="card mb-6">
<div class="user-profile-header-banner">
<img src="{% static 'img/pages/profile-banner.png' %}" alt="Banner image" class="rounded-top" />
</div>
<div class="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-5">
<div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">
{% if request.user|has_group:"admin" %}
<img src="{% static 'img/avatars/1.png' %}" alt="user image" class="d-block h-auto ms-0 ms-sm-6 rounded user-profile-img">
{% else %}
<img src="{% static 'img/avatars/3.png' %}" alt="user image" class="d-block h-auto ms-0 ms-sm-6 rounded user-profile-img">
{% endif %}
</div>
<div class="flex-grow-1 mt-3 mt-lg-5">
<div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
<div class="user-profile-info">
<h4 class="mb-2 mt-lg-6">{{ request.user.username }}</h4>
<ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 my-2">
<li class="list-inline-item"><i class="icon-base ti tabler-palette icon-lg me-2"></i> UX Designer</li>
<li class="list-inline-item"><i class="icon-base ti tabler-map-pin icon-lg me-2"></i> Vatican City</li>
<li class="list-inline-item"><i class="icon-base ti tabler-calendar icon-lg"></i><span class="fw-medium"> Joined April 2021</span></li>
</ul>
</div>
<a href="javascript:void(0)" class="btn btn-primary mb-1"> <i class="icon-base ti tabler-user-check icon-xs me-2"></i>Connected </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Header -->
<!-- Navbar pills -->
<div class="row">
<div class="col-md-12">
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-sm-row mb-6 gap-sm-0 gap-2">
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-user' %}"><i class="icon-base ti tabler-user-check icon-sm me-1_5"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-teams' %}"><i class="icon-base ti tabler-users icon-sm me-1_5"></i> Teams</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-layout-grid icon-sm me-1_5"></i> Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-connections' %}"><i class="icon-base ti tabler-link icon-sm me-1_5"></i> Connections</a>
</li>
</ul>
</div>
</div>
</div>
<!--/ Navbar pills -->
<!-- Project Cards -->
<div class="row g-6">
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card h-100">
<div class="card-header pb-4">
<div class="d-flex align-items-start">
<div class="d-flex align-items-center">
<div class="avatar me-4">
<img src="{% static 'img/icons/brands/social-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h5 class="mb-0"><a href="javascript:;" class="stretched-link text-heading">Social Banners</a></h5>
<div class="client-info text-body"><span class="fw-medium">Client: </span><span>Christian Jimenez</span></div>
</div>
</div>
<div class="ms-auto">
<div class="dropdown z-2">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename project</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Leave Project</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center flex-wrap">
<div class="bg-lighter px-3 py-2 rounded me-auto mb-4">
<p class="mb-1"><span class="fw-medium text-heading">$24.8k</span> / $18.2k</p>
<span class="text-body">Total Budget</span>
</div>
<div class="text-start mb-4">
<p class="mb-1"><span class="text-heading fw-medium">Start Date: </span> <span>14/2/21</span></p>
<p class="mb-1"><span class="text-heading fw-medium">Deadline: </span> <span>28/2/22</span></p>
</div>
</div>
<p class="mb-0">We are Consulting, Software Development and Web Development Services.</p>
</div>
<div class="card-body border-top">
<div class="d-flex align-items-center mb-4">
<p class="mb-1"><span class="text-heading fw-medium">All Hours: </span>380/244</p>
<span class="badge bg-label-success ms-auto">28 Days left</span>
</div>
<div class="d-flex justify-content-between align-items-center mb-2">
<small class="text-body">Task: 290/344</small>
<small class="text-body">95% Completed</small>
</div>
<div class="progress mb-4 rounded" style="height: 8px;">
<div class="progress-bar rounded" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar avatar-sm pull-up me-3">
<img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
</li>
<li><small class="text-body-secondary">280 Members</small></li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:void(0);" class="text-body-secondary d-flex align-items-center"><i class="icon-base ti tabler-message-dots icon-lg me-1"></i> 15</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card h-100">
<div class="card-header pb-4">
<div class="d-flex align-items-start">
<div class="d-flex align-items-center">
<div class="avatar me-4">
<img src="{% static 'img/icons/brands/react-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h5 class="mb-0"><a href="javascript:;" class="stretched-link text-heading">Admin Template</a></h5>
<div class="client-info text-body"><span class="fw-medium">Client: </span><span>Jeffrey Phillips</span></div>
</div>
</div>
<div class="ms-auto">
<div class="dropdown z-2">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename project</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Leave Project</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center flex-wrap">
<div class="bg-lighter px-3 py-2 rounded me-auto mb-4">
<p class="mb-1"><span class="fw-medium text-heading">$2.4k</span> / 1.8k</p>
<span class="text-body">Total Budget</span>
</div>
<div class="text-start mb-4">
<p class="mb-1"><span class="text-heading fw-medium">Start Date: </span> <span>18/8/21</span></p>
<p class="mb-1"><span class="text-heading fw-medium">Deadline: </span> <span>21/6/22</span></p>
</div>
</div>
<p class="mb-0">Time is our most valuable asset, that's why we want to help you save it by creating…</p>
</div>
<div class="card-body border-top">
<div class="d-flex align-items-center mb-4">
<p class="mb-1"><span class="text-heading fw-medium">All Hours: </span>98/135</p>
<span class="badge bg-label-warning ms-auto">15 Days left</span>
</div>
<div class="d-flex justify-content-between align-items-center mb-2">
<small class="text-body">Task: 12/90</small>
<small class="text-body">42% Completed</small>
</div>
<div class="progress mb-4 rounded" style="height: 8px;">
<div class="progress-bar rounded" role="progressbar" style="width: 42%;" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kaith D'souza" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="John Doe" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Alan Walker" class="avatar avatar-sm pull-up me-3">
<img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
</li>
<li><small class="text-body-secondary">1.1k Members</small></li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:void(0);" class="text-body-secondary d-flex align-items-center"><i class="icon-base ti tabler-message-dots icon-lg me-2"></i> 236</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-header pb-4">
<div class="d-flex align-items-start">
<div class="d-flex align-items-center">
<div class="avatar me-4">
<img src="{% static 'img/icons/brands/vue-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h5 class="mb-0"><a href="javascript:;" class="stretched-link text-heading">App Design</a></h5>
<div class="client-info text-body"><span class="fw-medium">Client: </span><span>Ricky McDonald</span></div>
</div>
</div>
<div class="ms-auto">
<div class="dropdown z-2">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename project</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Leave Project</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center flex-wrap">
<div class="bg-lighter px-3 py-2 rounded me-auto mb-4">
<p class="mb-1"><span class="fw-medium text-heading">$980</span> <span>/ $420</span></p>
<span class="text-body">Total Budget</span>
</div>
<div class="text-start mb-4">
<p class="mb-1"><span class="text-heading fw-medium">Start Date: </span> <span>24/7/21</span></p>
<p class="mb-1"><span class="text-heading fw-medium">Deadline: </span> <span>8/10/21</span></p>
</div>
</div>
<p class="mb-0">App design combines the user interface (UI) and user experience (UX).</p>
</div>
<div class="card-body border-top">
<div class="d-flex align-items-center mb-4">
<p class="mb-1"><span class="text-heading fw-medium">All Hours: </span> <span>880/421</span></p>
<span class="badge bg-label-danger ms-auto">45 Days left</span>
</div>
<div class="d-flex justify-content-between align-items-center mb-2">
<small class="text-body">Task: 22/140</small>
<small class="text-body">68% Completed</small>
</div>
<div class="progress mb-4 rounded" style="height: 8px;">
<div class="progress-bar rounded" role="progressbar" style="width: 68%;" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Jimmy Ressula" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kristi Lawker" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/2.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Danny Paul" class="avatar avatar-sm pull-up me-3">
<img class="rounded-circle" src="{% static 'img/avatars/7.png' %}" alt="Avatar" />
</li>
<li><small class="text-body-secondary">458 Members</small></li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:void(0);" class="text-body-secondary d-flex align-items-center"><i class="icon-base ti tabler-message-dots icon-lg me-1"></i> 98</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-header pb-4">
<div class="d-flex align-items-start">
<div class="d-flex align-items-center">
<div class="avatar me-4">
<img src="{% static 'img/icons/brands/html-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h5 class="mb-0"><a href="javascript:;" class="stretched-link text-heading">Create Website</a></h5>
<div class="client-info text-body"><span class="fw-medium">Client: </span><span>Hulda Wright</span></div>
</div>
</div>
<div class="ms-auto">
<div class="dropdown z-2">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename project</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Leave Project</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center flex-wrap">
<div class="bg-lighter px-3 py-2 rounded me-auto mb-4">
<p class="mb-1"><span class="fw-medium text-heading">$8.5k</span> <span>/ $2.43k</span></p>
<span class="text-body">Total Budget</span>
</div>
<div class="text-start mb-4">
<p class="mb-1"><span class="text-heading fw-medium">Start Date: </span> <span>10/2/19</span></p>
<p class="mb-1"><span class="text-heading fw-medium">Deadline: </span> <span>12/9/22</span></p>
</div>
</div>
<p class="mb-0">Your domain name should reflect your products or services so that your...</p>
</div>
<div class="card-body border-top">
<div class="d-flex align-items-center mb-4">
<p class="mb-1"><span class="text-heading fw-medium">All Hours: </span> <span>1.2k/820</span></p>
<span class="badge bg-label-warning ms-auto">126 Days left</span>
</div>
<div class="d-flex justify-content-between align-items-center mb-2">
<small class="text-body">Task: 237/420</small>
<small class="text-body">72% Completed</small>
</div>
<div class="progress mb-4 rounded" style="height: 8px;">
<div class="progress-bar rounded" role="progressbar" style="width: 72%;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Andrew Tye" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Rishi Swaat" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/9.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Rossie Kim" class="avatar avatar-sm pull-up me-3">
<img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
</li>
<li><small class="text-body-secondary">137 Members</small></li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:void(0);" class="text-body-secondary d-flex align-items-center"><i class="icon-base ti tabler-message-dots icon-lg me-1"></i> 120</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-header pb-4">
<div class="d-flex align-items-start">
<div class="d-flex align-items-center">
<div class="avatar me-4">
<img src="{% static 'img/icons/brands/figma-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h5 class="mb-0"><a href="javascript:;" class="stretched-link text-heading">Figma Dashboard</a></h5>
<div class="client-info text-body"><span class="fw-medium">Client: </span><span>Jerry Greene</span></div>
</div>
</div>
<div class="ms-auto">
<div class="dropdown z-2">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename project</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Leave Project</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center flex-wrap">
<div class="bg-lighter px-3 py-2 rounded me-auto mb-4">
<p class="mb-1"><span class="fw-medium text-heading">$52.7k</span> <span>/ $28.4k</span></p>
<span class="text-body">Total Budget</span>
</div>
<div class="text-start mb-4">
<p class="mb-1"><span class="text-heading fw-medium">Start Date: </span> <span>12/12/20</span></p>
<p class="mb-1"><span class="text-heading fw-medium">Deadline: </span> <span>25/12/21</span></p>
</div>
</div>
<p class="mb-0">Use this template to organize your design project. Some of the key features are…</p>
</div>
<div class="card-body border-top">
<div class="d-flex align-items-center mb-4">
<p class="mb-1"><span class="text-heading fw-medium">All Hours: </span> <span>142/420</span></p>
<span class="badge bg-label-danger ms-auto">5 Days left</span>
</div>
<div class="d-flex justify-content-between align-items-center mb-2">
<small class="text-body">Task: 29/285</small>
<small class="text-body">35% Completed</small>
</div>
<div class="progress mb-4 rounded" style="height: 8px;">
<div class="progress-bar rounded" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kim Merchent" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/10.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Sam D'souza" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/13.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Nurvi Karlos" class="avatar avatar-sm pull-up me-3">
<img class="rounded-circle" src="{% static 'img/avatars/15.png' %}" alt="Avatar" />
</li>
<li><small class="text-body-secondary">82 Members</small></li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:void(0);" class="text-body-secondary d-flex align-items-center"><i class="icon-base ti tabler-message-dots icon-lg me-1"></i> 20</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-header pb-4">
<div class="d-flex align-items-start">
<div class="d-flex align-items-center">
<div class="avatar me-4">
<img src="{% static 'img/icons/brands/xd-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h5 class="mb-0"><a href="javascript:;" class="stretched-link text-heading">Logo Design</a></h5>
<div class="client-info text-body"><span class="fw-medium">Client: </span><span>Olive Strickland</span></div>
</div>
</div>
<div class="ms-auto">
<div class="dropdown z-2">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename project</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Leave Project</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center flex-wrap">
<div class="bg-lighter px-3 py-2 rounded me-auto mb-4">
<p class="mb-1"><span class="fw-medium text-heading">$1.3k</span> <span>/ $655</span></p>
<span class="text-body">Total Budget</span>
</div>
<div class="text-start mb-4">
<p class="mb-1"><span class="text-heading fw-medium">Start Date: </span> <span>17/8/21</span></p>
<p class="mb-1"><span class="text-heading fw-medium">Deadline: </span> <span>02/11/21</span></p>
</div>
</div>
<p class="mb-0">Premium logo designs created by top logo designers. Create the branding of business.</p>
</div>
<div class="card-body border-top">
<div class="d-flex align-items-center mb-4">
<p class="mb-1"><span class="text-heading fw-medium">All Hours: </span> <span>580/445</span></p>
<span class="badge bg-label-success ms-auto">4 Days left</span>
</div>
<div class="d-flex justify-content-between align-items-center mb-2">
<small class="text-body">Task: 290/290</small>
<small class="text-body">100% Completed</small>
</div>
<div class="progress mb-4 rounded" style="height: 8px;">
<div class="progress-bar rounded" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kim Karlos" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/3.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Katy Turner" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/9.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Peter Adward" class="avatar avatar-sm pull-up me-3">
<img class="rounded-circle" src="{% static 'img/avatars/15.png' %}" alt="Avatar" />
</li>
<li><small class="text-body-secondary">16 Members</small></li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:void(0);" class="text-body-secondary d-flex align-items-center"><i class="icon-base ti tabler-message-dots icon-lg me-1"></i> 37</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Project Cards -->
{% endblock %}

582
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_profile_teams.html Normal file
View File

@@ -0,0 +1,582 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}User Profile - Teams{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-profile.css' %}" />
{% endblock page_css %}
{% block content %}
<!-- Header -->
<div class="row">
<div class="col-12">
<div class="card mb-6">
<div class="user-profile-header-banner">
<img src="{% static 'img/pages/profile-banner.png' %}" alt="Banner image" class="rounded-top" />
</div>
<div class="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-5">
<div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">
{% if request.user|has_group:"admin" %}
<img src="{% static 'img/avatars/1.png' %}" alt="user image" class="d-block h-auto ms-0 ms-sm-6 rounded user-profile-img">
{% else %}
<img src="{% static 'img/avatars/3.png' %}" alt="user image" class="d-block h-auto ms-0 ms-sm-6 rounded user-profile-img">
{% endif %}
</div>
<div class="flex-grow-1 mt-3 mt-lg-5">
<div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
<div class="user-profile-info">
<h4 class="mb-2 mt-lg-6">{{ request.user.username }}</h4>
<ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 my-2">
<li class="list-inline-item"><i class="icon-base ti tabler-palette icon-lg me-2"></i> UX Designer</li>
<li class="list-inline-item"><i class="icon-base ti tabler-map-pin icon-lg me-2"></i> Vatican City</li>
<li class="list-inline-item"><i class="icon-base ti tabler-calendar icon-lg me-2"></i> Joined April 2021</li>
</ul>
</div>
<a href="javascript:void(0)" class="btn btn-primary mb-1"> <i class="icon-base ti tabler-user-check icon-xs me-2"></i>Connected </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Header -->
<!-- Navbar pills -->
<div class="row">
<div class="col-md-12">
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-sm-row mb-6 gap-sm-0 gap-2">
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-user' %}"><i class="icon-base ti tabler-user-check icon-sm me-1_5"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-users icon-sm me-1_5"></i> Teams</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-projects' %}"><i class="icon-base ti tabler-layout-grid icon-sm me-1_5"></i> Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-connections' %}"><i class="icon-base ti tabler-link icon-sm me-1_5"></i> Connections</a>
</li>
</ul>
</div>
</div>
</div>
<!--/ Navbar pills -->
<!-- Teams Cards -->
<div class="row g-6">
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3 pb-1">
<a href="javascript:;" class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/react-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2 text-heading h5 mb-0">React Developers</div>
</a>
<div class="ms-auto">
<ul class="list-inline mb-0 d-flex align-items-center">
<li class="list-inline-item me-0">
<a href="javascript:void(0);" class="d-flex align-self-center btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px text-body-secondary"></i></a>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename Team</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View Details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete Team</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<p class="mb-3 pb-1">We don’t make assumptions about the rest of your technology stack, so you can develop new features...</p>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
</li>
<li class="avatar avatar-sm">
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="top" title="9 more">+9</span>
</li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:;" class="me-1"><span class="badge bg-label-primary">React</span></a>
<a href="javascript:;"><span class="badge bg-label-info">MUI</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card h-100">
<div class="card-body">
<div class="d-flex align-items-center mb-3 pb-1">
<a href="javascript:;" class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/vue-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2 text-heading h5 mb-0">Vue.js Dev Team</div>
</a>
<div class="ms-auto">
<ul class="list-inline mb-0 d-flex align-items-center">
<li class="list-inline-item me-0">
<a href="javascript:void(0);" class="d-flex align-self-center btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px text-body-secondary"></i></a>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename Team</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View Details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete Team</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<p class="mb-3 pb-1">The development of Vue and its ecosystem is guided by an international team, some of whom have chosen.</p>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kaith D'souza" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="John Doe" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Alan Walker" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
</li>
<li class="avatar avatar-sm">
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="top" title="14 more">+4</span>
</li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:;" class="me-2"><span class="badge bg-label-success">Vuejs</span></a>
<a href="javascript:;"><span class="badge bg-label-danger">Developer</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3 pb-1">
<a href="javascript:;" class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/xd-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2 text-heading h5 mb-0">Creative Designers</div>
</a>
<div class="ms-auto">
<ul class="list-inline mb-0 d-flex align-items-center">
<li class="list-inline-item me-0">
<a href="javascript:void(0);" class="d-flex align-self-center btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px text-body-secondary"></i></a>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename Team</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View Details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete Team</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<p class="mb-3 pb-1">A design or product team is more than just the people on it. A team includes the people, the roles they play.</p>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Jimmy Ressula" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kristi Lawker" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/2.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Danny Paul" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/7.png' %}" alt="Avatar" />
</li>
<li class="avatar avatar-sm">
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="top" title="19 more">+2</span>
</li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:;" class="me-1"><span class="badge bg-label-warning">Sketch</span></a>
<a href="javascript:;"><span class="badge bg-label-danger">XD</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3 pb-1">
<a href="javascript:;" class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/support-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2 text-heading h5 mb-0">Support Team</div>
</a>
<div class="ms-auto">
<ul class="list-inline mb-0 d-flex align-items-center">
<li class="list-inline-item me-0">
<a href="javascript:void(0);" class="d-flex align-self-center btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px text-body-secondary"></i></a>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename Team</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View Details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Delete Team</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<p class="mb-3 pb-1">Support your team. Your customer support team is fielding the good, the bad, and the ugly day in out.</p>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Andrew Tye" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Rishi Swaat" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/9.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Rossie Kim" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
</li>
<li class="avatar avatar-sm">
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="top" title="7 more">+7</span>
</li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-info">Zendesk</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3 pb-1">
<a href="javascript:;" class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/social-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2 text-heading h5 mb-0">Digital Marketing</div>
</a>
<div class="ms-auto">
<ul class="list-inline mb-0 d-flex align-items-center">
<li class="list-inline-item me-0">
<a href="javascript:void(0);" class="d-flex align-self-center btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px text-body-secondary"></i></a>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename Team</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View Details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete Team</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<p class="mb-3 pb-1">Digital marketing refers to advertising delivered through digital channels such as search engines, websites…</p>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kim Merchent" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/10.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Sam D'souza" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/13.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Nurvi Karlos" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:;" class="me-1"><span class="badge bg-label-primary">Twitter</span></a>
<a href="javascript:;"><span class="badge bg-label-success">Email</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3 pb-1">
<a href="javascript:;" class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/event-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2 text-heading h5 mb-0">Event</div>
</a>
<div class="ms-auto">
<ul class="list-inline mb-0 d-flex align-items-center">
<li class="list-inline-item me-0">
<a href="javascript:void(0);" class="d-flex align-self-center btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px text-body-secondary"></i></a>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename Team</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View Details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete Team</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<p class="mb-3 pb-1">Event is defined as a particular contest which is part of a program of contests. An example of an event is...</p>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/9.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/8.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/7.png' %}" alt="Avatar" />
</li>
<li class="avatar avatar-sm">
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="top" title="2 more">+2</span>
</li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-success">Hubilo</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3 pb-1">
<a href="javascript:;" class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/figma-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2 text-heading h5 mb-0">Figma Resources</div>
</a>
<div class="ms-auto">
<ul class="list-inline mb-0 d-flex align-items-center">
<li class="list-inline-item me-0">
<a href="javascript:void(0);" class="d-flex align-self-center btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px text-body-secondary"></i></a>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename Team</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View Details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete Team</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<p class="mb-3 pb-1">Explore, install, use, and remix thousands of plugins and files published to the Figma Community by designers.</p>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Andrew Mostowy" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Micky Ressula" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="Avatar" />
</li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:;" class="me-1"><span class="badge bg-label-success">UI/UX</span></a>
<a href="javascript:;"><span class="badge bg-label-warning">Figma</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3 pb-1">
<a href="javascript:;" class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/react-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2 text-heading h5 mb-0">Native Mobile App</div>
</a>
<div class="ms-auto">
<ul class="list-inline mb-0 d-flex align-items-center">
<li class="list-inline-item me-0">
<a href="javascript:void(0);" class="d-flex align-self-center btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px text-body-secondary"></i></a>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename Team</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View Details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete Team</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<p class="mb-3 pb-1">React Native lets you create truly native apps and doesn't compromise your users' experiences....</p>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
</li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:;" class="me-1"><span class="badge bg-label-primary">React</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3 pb-1">
<a href="javascript:;" class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/html-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2 text-heading h5 mb-0">Only Beginners</div>
</a>
<div class="ms-auto">
<ul class="list-inline mb-0 d-flex align-items-center">
<li class="list-inline-item me-0">
<a href="javascript:void(0);" class="d-flex align-self-center btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px text-body-secondary"></i></a>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Rename Team</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">View Details</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Add to favorites</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete Team</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<p class="mb-3 pb-1">Learn the basics of how websites work, front-end vs back-end, and using a code editor.</p>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kim Karlos" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/3.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Katy Turner" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/9.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Peter Adward" class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li class="avatar avatar-sm">
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="top" title="8 more">+8</span>
</li>
</ul>
</div>
<div class="ms-auto">
<a href="javascript:;" class="me-1"><span class="badge bg-label-info">CSS</span></a>
<a href="javascript:;"><span class="badge bg-label-primary">HTML</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Teams Cards -->
{% endblock %}

469
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/pages/templates/pages_profile_user.html Normal file
View File

@@ -0,0 +1,469 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}User Profile - Profile{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-profile.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-user-view-account.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- Header -->
<div class="row">
<div class="col-12">
<div class="card mb-6">
<div class="user-profile-header-banner">
<img src="{% static 'img/pages/profile-banner.png' %}" alt="Banner image" class="rounded-top" />
</div>
<div class="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-5">
<div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">
{% if request.user|has_group:"admin" %}
<img src="{% static 'img/avatars/1.png' %}" alt="user image" class="d-block h-auto ms-0 ms-sm-6 rounded user-profile-img">
{% else %}
<img src="{% static 'img/avatars/3.png' %}" alt="user image" class="d-block h-auto ms-0 ms-sm-6 rounded user-profile-img">
{% endif %}
</div>
<div class="flex-grow-1 mt-3 mt-lg-5">
<div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
<div class="user-profile-info">
<h4 class="mb-2 mt-lg-6">{{ request.user.username| capfirst }}</h4>
<ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 my-2">
<li class="list-inline-item d-flex gap-2 align-items-center"><i class="icon-base ti tabler-palette icon-lg"></i><span class="fw-medium">UX Designer</span></li>
<li class="list-inline-item d-flex gap-2 align-items-center"><i class="icon-base ti tabler-map-pin icon-lg"></i><span class="fw-medium">Vatican City</span></li>
<li class="list-inline-item d-flex gap-2 align-items-center"><i class="icon-base ti tabler-calendar icon-lg"></i><span class="fw-medium"> Joined April 2021</span></li>
</ul>
</div>
<a href="javascript:void(0)" class="btn btn-primary mb-1"> <i class="icon-base ti tabler-user-check icon-xs me-2"></i>Connected </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Header -->
<!-- Navbar pills -->
<div class="row">
<div class="col-md-12">
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-sm-row mb-6 gap-sm-0 gap-2">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-user-check icon-sm me-1_5"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-teams' %}"><i class="icon-base ti tabler-users icon-sm me-1_5"></i> Teams</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-projects' %}"><i class="icon-base ti tabler-layout-grid icon-sm me-1_5"></i> Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages-profile-connections' %}"><i class="icon-base ti tabler-link icon-sm me-1_5"></i> Connections</a>
</li>
</ul>
</div>
</div>
</div>
<!--/ Navbar pills -->
<!-- User Profile Content -->
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-5">
<!-- About User -->
<div class="card mb-6">
<div class="card-body">
<p class="card-text text-uppercase text-body-secondary small mb-0">About</p>
<ul class="list-unstyled my-3 py-1">
<li class="d-flex align-items-center mb-4"><i class="icon-base ti tabler-user icon-lg"></i><span class="fw-medium mx-2">Full Name:</span> <span>John Doe</span></li>
<li class="d-flex align-items-center mb-4"><i class="icon-base ti tabler-check icon-lg"></i><span class="fw-medium mx-2">Status:</span> <span>Active</span></li>
<li class="d-flex align-items-center mb-4"><i class="icon-base ti tabler-crown icon-lg"></i><span class="fw-medium mx-2">Role:</span> <span>Developer</span></li>
<li class="d-flex align-items-center mb-4"><i class="icon-base ti tabler-flag icon-lg"></i><span class="fw-medium mx-2">Country:</span> <span>USA</span></li>
<li class="d-flex align-items-center mb-2"><i class="icon-base ti tabler-language icon-lg"></i><span class="fw-medium mx-2">Languages:</span> <span>English</span></li>
</ul>
<p class="card-text text-uppercase text-body-secondary small mb-0">Contacts</p>
<ul class="list-unstyled my-3 py-1">
<li class="d-flex align-items-center mb-4">
<i class="icon-base ti tabler-phone-call icon-lg"></i><span class="fw-medium mx-2">Contact:</span>
<span>(123) 456-7890</span>
</li>
<li class="d-flex align-items-center mb-4"><i class="icon-base ti tabler-messages icon-lg"></i><span class="fw-medium mx-2">Skype:</span> <span>john.doe</span></li>
<li class="d-flex align-items-center mb-4">
<i class="icon-base ti tabler-mail icon-lg"></i><span class="fw-medium mx-2">Email:</span>
<span>john.doe@example.com</span>
</li>
</ul>
<p class="card-text text-uppercase text-body-secondary small mb-0">Teams</p>
<ul class="list-unstyled mb-0 mt-3 pt-1">
<li class="d-flex flex-wrap mb-4"><span class="fw-medium me-2">Backend Developer</span><span>(126 Members)</span></li>
<li class="d-flex flex-wrap"><span class="fw-medium me-2">React Developer</span><span>(98 Members)</span></li>
</ul>
</div>
</div>
<!--/ About User -->
<!-- Profile Overview -->
<div class="card mb-6">
<div class="card-body">
<p class="card-text text-uppercase text-body-secondary small">Overview</p>
<ul class="list-unstyled mb-0">
<li class="d-flex align-items-center mb-4"><i class="icon-base ti tabler-check icon-lg"></i><span class="fw-medium mx-2">Task Compiled:</span> <span>13.5k</span></li>
<li class="d-flex align-items-center mb-4"><i class="icon-base ti tabler-layout-grid icon-lg"></i><span class="fw-medium mx-2">Projects Compiled:</span> <span>146</span></li>
<li class="d-flex align-items-center"><i class="icon-base ti tabler-users icon-lg"></i><span class="fw-medium mx-2">Connections:</span> <span>897</span></li>
</ul>
</div>
</div>
<!--/ Profile Overview -->
</div>
<div class="col-xl-8 col-lg-7 col-md-7">
<!-- Activity Timeline -->
<div class="card card-action mb-6">
<div class="card-header align-items-center">
<h5 class="card-action-title mb-0"><i class="icon-base ti tabler-chart-bar-popular icon-lg me-4"></i>Activity Timeline</h5>
<div class="card-action-element">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle hide-arrow p-0 text-body-secondary" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share timeline</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Suggest edits</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Report bug</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body pt-3">
<ul class="timeline mb-0">
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-primary"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">12 Invoices have been paid</h6>
<small class="text-body-secondary">12 min ago</small>
</div>
<p class="mb-2">Invoices have been paid to the company</p>
<div class="d-flex align-items-center mb-2">
<div class="badge bg-lighter rounded d-flex align-items-center">
<img src="{% static '/img/icons/misc/pdf.png' %}" alt="img" width="15" class="me-2" />
<span class="h6 mb-0 text-body">invoices.pdf</span>
</div>
</div>
</div>
</li>
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-success"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Client Meeting</h6>
<small class="text-body-secondary">45 min ago</small>
</div>
<p class="mb-2">Project meeting with john @10:15am</p>
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
<div class="d-flex flex-wrap align-items-center mb-50">
<div class="avatar avatar-sm me-2">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
<small>CEO of {% get_theme_variables 'creator_name' %}</small>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-info"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Create a new project for client</h6>
<small class="text-body-secondary">2 Day Ago</small>
</div>
<p class="mb-2">6 team members in a project</p>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
<div class="d-flex flex-wrap align-items-center">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/2.png' %}" alt="Avatar" />
</li>
<li class="avatar">
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<!--/ Activity Timeline -->
<div class="row">
<!-- Connections -->
<div class="col-lg-12 col-xl-6">
<div class="card card-action mb-6">
<div class="card-header align-items-center">
<h5 class="card-action-title mb-0">Connections</h5>
<div class="card-action-element">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 text-body-secondary" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share connections</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Suggest edits</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Report bug</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/avatars/2.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Cecilia Payne</h6>
<small>45 Connections</small>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-label-primary btn-icon"><i class="icon-base ti tabler-user-check icon-22px"></i></button>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/avatars/3.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Curtis Fletcher</h6>
<small>1.32k Connections</small>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-primary btn-icon"><i class="icon-base ti tabler-user-x icon-22px"></i></button>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/avatars/10.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Alice Stone</h6>
<small>125 Connections</small>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-primary btn-icon"><i class="icon-base ti tabler-user-x icon-22px"></i></button>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/avatars/7.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Darrell Barnes</h6>
<small>456 Connections</small>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-label-primary btn-icon"><i class="icon-base ti tabler-user-check icon-22px"></i></button>
</div>
</div>
</li>
<li class="mb-6">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/avatars/12.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Eugenia Moore</h6>
<small>1.2k Connections</small>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-label-primary btn-icon"><i class="icon-base ti tabler-user-check icon-22px"></i></button>
</div>
</div>
</li>
<li class="text-center">
<a href="javascript:;">View all connections</a>
</li>
</ul>
</div>
</div>
</div>
<!--/ Connections -->
<!-- Teams -->
<div class="col-lg-12 col-xl-6">
<div class="card card-action mb-6">
<div class="card-header align-items-center">
<h5 class="card-action-title mb-0">Teams</h5>
<div class="card-action-element">
<div class="dropdown">
<button type="button" class="btn btn-icon btn-text-secondary dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share teams</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Suggest edits</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Report bug</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/react-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">React Developers</h6>
<small>72 Members</small>
</div>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-danger">Developer</span></a>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/support-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Support Team</h6>
<small>122 Members</small>
</div>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-primary">Support</span></a>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/figma-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">UI Designers</h6>
<small>7 Members</small>
</div>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-info">Designer</span></a>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/vue-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Vue.js Developers</h6>
<small>289 Members</small>
</div>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-danger">Developer</span></a>
</div>
</div>
</li>
<li class="mb-6">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="{% static 'img/icons/brands/twitter-label.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-w">
<h6 class="mb-0">Digital Marketing</h6>
<small>24 Members</small>
</div>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-secondary">Marketing</span></a>
</div>
</div>
</li>
<li class="text-center">
<a href="javascript:;">View all teams</a>
</li>
</ul>
</div>
</div>
</div>
<!--/ Teams -->
</div>
<!-- Projects table -->
<div class="card mb-6">
<div class="mb-4">
<table class="table datatable-project">
<thead class="border-top">
<tr>
<th></th>
<th></th>
<th>Project</th>
<th>Leader</th>
<th>Team</th>
<th class="w-px-200">Progress</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div>
<!--/ Projects table -->
</div>
</div>
<!--/ User Profile Content -->
{% endblock %}