474 lines
17 KiB
HTML
474 lines
17 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}Settings Page{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
|
|
<script src="{% static 'js/demo/sidebar-scrollspy.demo.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript:;">Extra</a></li>
|
|
<li class="breadcrumb-item active">Settings Page</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">Settings Page <small>header small text goes here...</small></h1>
|
|
<!-- END page-header -->
|
|
<hr class="mb-4" />
|
|
<!-- BEGIN row -->
|
|
|
|
<div class="row">
|
|
<!-- BEGIN col-3 -->
|
|
<div style="width: 230px">
|
|
<!-- BEGIN #sidebar-bootstrap -->
|
|
<nav class="navbar navbar-sticky d-none d-xl-block my-n4 py-4 h-100 text-end">
|
|
<nav class="nav" id="bsSpyTarget">
|
|
<a class="nav-link active" href="#general" data-toggle="scroll-to">General</a>
|
|
<a class="nav-link" href="#notifications" data-toggle="scroll-to">Notifications</a>
|
|
<a class="nav-link" href="#privacyAndSecurity" data-toggle="scroll-to">Privacy and security</a>
|
|
<a class="nav-link" href="#payment" data-toggle="scroll-to">Payment</a>
|
|
<a class="nav-link" href="#shipping" data-toggle="scroll-to">Shipping</a>
|
|
<a class="nav-link" href="#mediaAndFiles" data-toggle="scroll-to">Media and Files</a>
|
|
<a class="nav-link" href="#languages" data-toggle="scroll-to">Languages</a>
|
|
<a class="nav-link" href="#system" data-toggle="scroll-to">System</a>
|
|
<a class="nav-link" href="#resetSettings" data-toggle="scroll-to">Reset settings</a>
|
|
</nav>
|
|
</nav>
|
|
<!-- END #sidebar-bootstrap -->
|
|
</div>
|
|
<!-- END col-3 -->
|
|
<!-- BEGIN col-9 -->
|
|
<div class="col-xl-8" id="bsSpyContent">
|
|
<!-- BEGIN #general -->
|
|
<div id="general" class="mb-4 pb-3">
|
|
<h4 class="d-flex align-items-center mb-2">
|
|
<iconify-icon class="fs-24px me-2 text-body text-opacity-75 my-n1" icon="solar:user-bold-duotone"></iconify-icon> General
|
|
</h4>
|
|
<p>View and update your general account information and settings.</p>
|
|
<div class="card">
|
|
<div class="list-group list-group-flush fw-bold">
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Name</div>
|
|
<div class="text-body text-opacity-60">Sean Ngu</div>
|
|
</div>
|
|
<div class="w-100px">
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Username</div>
|
|
<div class="text-body text-opacity-60">@seantheme</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Phone</div>
|
|
<div class="text-body text-opacity-60">+1-202-555-0183</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Email address</div>
|
|
<div class="text-body text-opacity-60">support@seantheme.com</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary disabled w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Password</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #general -->
|
|
|
|
<!-- BEGIN #notifications -->
|
|
<div id="notifications" class="mb-4 pb-3">
|
|
<h4 class="d-flex align-items-center mb-2 mt-3">
|
|
<iconify-icon class="fs-24px me-2 text-body text-opacity-75 my-n1" icon="solar:bell-bold-duotone"></iconify-icon>
|
|
Notifications
|
|
</h4>
|
|
<p>Enable or disable what notifications you want to receive.</p>
|
|
<div class="card">
|
|
<div class="list-group list-group-flush fw-bold">
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Comments</div>
|
|
<div class="text-body text-opacity-60 d-flex align-items-center">
|
|
<i class="fa fa-circle fs-6px mt-1px fa-fw text-success me-2"></i> Enabled (Push, SMS)
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Tags</div>
|
|
<div class="text-body text-opacity-60 d-flex align-items-center">
|
|
<i class="fa fa-circle fs-6px mt-1px fa-fw text-body text-opacity-25 me-2"></i> Disabled
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Reminders</div>
|
|
<div class="text-body text-opacity-60 d-flex align-items-center">
|
|
<i class="fa fa-circle fs-6px mt-1px fa-fw text-success me-2"></i> Enabled (Push, Email, SMS)
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>New orders</div>
|
|
<div class="text-body text-opacity-60 d-flex align-items-center">
|
|
<i class="fa fa-circle fs-6px mt-1px fa-fw text-success me-2"></i> Enabled (Push, Email, SMS)
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #notifications -->
|
|
|
|
<!-- BEGIN #privacyAndSecurity -->
|
|
<div id="privacyAndSecurity" class="mb-4 pb-3">
|
|
<h4 class="d-flex align-items-center mb-2 mt-3">
|
|
<iconify-icon class="fs-24px me-2 text-body text-opacity-75 my-n1" icon="solar:lock-password-bold-duotone"></iconify-icon>
|
|
Privacy and security
|
|
</h4>
|
|
<p>Limit the account visibility and the security settings for your website.</p>
|
|
<div class="card">
|
|
<div class="list-group list-group-flush fw-bold">
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Who can see your future posts?</div>
|
|
<div class="text-body text-opacity-60 d-flex align-items-center">
|
|
Friends only
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Photo tagging</div>
|
|
<div class="text-body text-opacity-60 d-flex align-items-center">
|
|
<i class="fa fa-circle fs-6px mt-1px fa-fw text-success me-2"></i> Enabled
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Location information</div>
|
|
<div class="text-body text-opacity-60 d-flex align-items-center">
|
|
<i class="fa fa-circle fs-6px mt-1px fa-fw text-body text-opacity-25 me-2"></i> Disabled
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Firewall</div>
|
|
<div class="text-body text-opacity-60 d-block d-xl-flex align-items-center">
|
|
<div class="d-flex align-items-center"><i class="fa fa-circle fs-6px mt-1px fa-fw text-body text-opacity-25 me-2"></i> Disabled</div>
|
|
<span class="bg-warning bg-opacity-10 text-warning ms-xl-3 mt-1 d-inline-block mt-xl-0 px-1 rounded-sm">
|
|
<i class="fa fa-exclamation-circle text-warning fs-12px me-1"></i>
|
|
<span class="text-warning">Please enable the firewall for your website</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #privacyAndSecurity -->
|
|
|
|
<!-- BEGIN #payment -->
|
|
<div id="payment" class="mb-4 pb-3">
|
|
<h4 class="d-flex align-items-center mb-2 mt-3">
|
|
<iconify-icon class="fs-24px me-2 text-body text-opacity-75 my-n1" icon="solar:bag-4-bold-duotone"></iconify-icon>
|
|
Payment
|
|
</h4>
|
|
<p>Manage your website payment provider</p>
|
|
<div class="card">
|
|
<div class="list-group list-group-flush fw-bold">
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Allowed payment method</div>
|
|
<div class="text-body text-opacity-60">
|
|
Paypal, Credit Card, Apple Pay, Amazon Pay, Google Wallet, Alipay, Wechatpay
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #payment -->
|
|
|
|
<!-- BEGIN #shipping -->
|
|
<div id="shipping" class="mb-4 pb-3">
|
|
<h4 class="d-flex align-items-center mb-2 mt-3">
|
|
<iconify-icon class="fs-24px me-2 text-body text-opacity-75 my-n1" icon="solar:box-bold-duotone"></iconify-icon>
|
|
Shipping
|
|
</h4>
|
|
<p>Allowed shipping area and zone setting</p>
|
|
<div class="card">
|
|
<div class="list-group list-group-flush fw-bold">
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Allowed shipping method</div>
|
|
<div class="text-body text-opacity-60">
|
|
Local, Domestic
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #shipping -->
|
|
|
|
<!-- BEGIN #mediaAndFiles -->
|
|
<div id="mediaAndFiles" class="mb-4 pb-3">
|
|
<h4 class="d-flex align-items-center mb-2 mt-3">
|
|
<iconify-icon class="fs-24px me-2 text-body text-opacity-75 my-n1" icon="solar:camera-bold-duotone"></iconify-icon>
|
|
Media and Files
|
|
</h4>
|
|
<p>Allowed files and media format upload setting</p>
|
|
<div class="card">
|
|
<div class="list-group list-group-flush fw-bold">
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Allowed files and media format</div>
|
|
<div class="text-body text-opacity-60">
|
|
.png, .jpg, .gif, .mp4
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Media and files cdn</div>
|
|
<div class="text-body text-opacity-60 d-flex align-items-center">
|
|
<i class="fa fa-circle fs-6px mt-1px fa-fw text-body text-opacity-25 me-2"></i> Disabled
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #mediaAndFiles -->
|
|
|
|
<!-- BEGIN #languages -->
|
|
<div id="languages" class="mb-4 pb-3">
|
|
<h4 class="d-flex align-items-center mb-2 mt-3">
|
|
<iconify-icon class="fs-24px me-2 text-body text-opacity-75 my-n1" icon="solar:globus-bold-duotone"></iconify-icon>
|
|
Languages
|
|
</h4>
|
|
<p>Language font support and auto translation enabled</p>
|
|
<div class="card">
|
|
<div class="list-group list-group-flush fw-bold">
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Language enabled</div>
|
|
<div class="text-body text-opacity-60">
|
|
English (default), Chinese, France, Portuguese, Japense
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Auto translation</div>
|
|
<div class="text-body text-opacity-60 d-flex align-items-center">
|
|
<i class="fa fa-circle fs-6px mt-1px fa-fw text-success me-2"></i> Enabled
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Edit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #languages -->
|
|
|
|
<!-- BEGIN #system -->
|
|
<div id="system" class="mb-4 pb-3">
|
|
<h4 class="d-flex align-items-center mb-2 mt-3">
|
|
<iconify-icon class="fs-24px me-2 text-body text-opacity-75 my-n1" icon="solar:ssd-round-bold-duotone"></iconify-icon>
|
|
System
|
|
</h4>
|
|
<p>System storage, bandwidth and database setting</p>
|
|
<div class="card">
|
|
<div class="list-group list-group-flush fw-bold">
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Web storage</div>
|
|
<div class="text-body text-opacity-60">
|
|
40.8gb / 100gb
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px">Manage</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Monthly bandwidth</div>
|
|
<div class="text-body text-opacity-60">
|
|
Unlimited
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Database</div>
|
|
<div class="text-body text-opacity-60">
|
|
MySQL version 8.0.19
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-secondary w-100px disabled">Update</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Platform</div>
|
|
<div class="text-body text-opacity-60">
|
|
PHP 7.4.4, NGINX 1.17.0
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#modalEdit" data-bs-toggle="modal" class="btn btn-success w-100px">Update</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #system -->
|
|
|
|
<!-- BEGIN #resetSettings -->
|
|
<div id="resetSettings" class="mb-4 pb-3">
|
|
<h4 class="d-flex align-items-center mb-2 mt-3">
|
|
<iconify-icon class="fs-24px me-2 text-body text-opacity-75 my-n1" icon="solar:restart-bold-duotone"></iconify-icon>
|
|
Reset settings
|
|
</h4>
|
|
<p>Reset all website setting to factory default setting.</p>
|
|
<div class="card">
|
|
<div class="list-group list-group-flush fw-bold">
|
|
<div class="list-group-item d-flex align-items-center">
|
|
<div class="flex-fill">
|
|
<div>Reset Settings</div>
|
|
<div class="text-body text-opacity-60">
|
|
This action will clear and reset all the current website setting.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="#" class="btn btn-secondary w-100px">Reset</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #resetSettings -->
|
|
</div>
|
|
<!-- END col-9-->
|
|
</div>
|
|
<!-- END row -->
|
|
{% endblock %}
|
|
|
|
|
|
{% block outter_content %}
|
|
<div class="modal fade" id="modalEdit">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Edit name</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Name</label>
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<input class="form-control" placeholder="First" value="Sean">
|
|
</div>
|
|
<div class="col-4">
|
|
<input class="form-control" placeholder="Middle" value="">
|
|
</div>
|
|
<div class="col-4">
|
|
<input class="form-control" placeholder="Last" value="Ngu">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert bg-body">
|
|
<b>Please note:</b> If you change your name, you can't change it again for 60 days. Don't add any unusual capitalization, punctuation, characters or random words. <a href="#" class="alert-link">Learn more.</a>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Other Names</label>
|
|
<div>
|
|
<a href="#" class="btn btn-secondary">
|
|
<i class="fa fa-plus fa-fw"></i> Add other names </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-theme">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |