286 lines
18 KiB
PHP
286 lines
18 KiB
PHP
@extends('layouts.marketplace', ['title' => 'Marketplace Account - Settings'])
|
|
|
|
@section('content')
|
|
<!-- Account settings content -->
|
|
<div class="col-lg-9 pt-2 pt-xl-3">
|
|
<!-- Page title -->
|
|
<h1 class="h2 pb-1 pb-sm-2 pb-md-3">Settings</h1>
|
|
<!-- Nav tabs -->
|
|
<div class="overflow-auto mb-3">
|
|
<ul class="nav nav-pills flex-nowrap gap-2 text-nowrap pb-3" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button aria-controls="profile" aria-selected="true" class="nav-link active" data-bs-target="#profile"
|
|
data-bs-toggle="pill" id="profile-tab" role="tab" type="button">
|
|
Profile
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button aria-controls="security" aria-selected="false" class="nav-link" data-bs-target="#security"
|
|
data-bs-toggle="pill" id="security-tab" role="tab" type="button">
|
|
Security
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button aria-controls="payment" aria-selected="false" class="nav-link" data-bs-target="#payment"
|
|
data-bs-toggle="pill" id="payment-tab" role="tab" type="button">
|
|
Payment methods
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button aria-controls="notifications" aria-selected="false" class="nav-link"
|
|
data-bs-target="#notifications" data-bs-toggle="pill" id="notifications-tab" role="tab"
|
|
type="button">
|
|
Notifications
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Tabs content -->
|
|
<div class="tab-content">
|
|
<!-- Profile tab -->
|
|
<div aria-labelledby="profile-tab" class="tab-pane fade show active" id="profile" role="tabpanel">
|
|
<!-- Avatar -->
|
|
<div class="d-flex align-items-start align-items-sm-center pb-3 mb-3">
|
|
<div class="ratio ratio-1x1 hover-effect-opacity border rounded-circle overflow-hidden"
|
|
style="width: 112px">
|
|
<img alt="Avatar" src="/img/account/avatar-lg.png" />
|
|
<div
|
|
class="hover-effect-target position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 opacity-0">
|
|
<button aria-label="Remove" class="btn btn-icon btn-sm btn-light position-relative z-2"
|
|
type="button">
|
|
<i class="ci-trash fs-base"></i>
|
|
</button>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 z-1"></span>
|
|
</div>
|
|
</div>
|
|
<div class="ps-3 ps-sm-4">
|
|
<p class="fs-sm" style="max-width: 400px">Your profile picture will appear on your
|
|
profile and listings. PNG or JPG no bigger than 500px wide and tall.</p>
|
|
<button class="btn btn-sm btn-secondary animate-rotate rounded-pill" type="button">
|
|
<i class="ci-refresh-ccw animate-target fs-sm ms-n1 me-2"></i>
|
|
Update picture
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Settings form -->
|
|
<form class="needs-validation" novalidate="">
|
|
<div class="row row-cols-1 row-cols-sm-2 g-4 mb-4">
|
|
<div class="col position-relative">
|
|
<label class="form-label fs-base" for="fn">First name *</label>
|
|
<input class="form-control form-control-lg rounded-pill" id="fn" required=""
|
|
type="text" value="Coderthemes" />
|
|
<div class="invalid-tooltip bg-transparent p-0">Enter your first name!</div>
|
|
</div>
|
|
<div class="col position-relative">
|
|
<label class="form-label fs-base" for="ln">Last name *</label>
|
|
<input class="form-control form-control-lg rounded-pill" id="ln" required=""
|
|
type="text" value="Studio" />
|
|
<div class="invalid-tooltip bg-transparent p-0">Enter your last name!</div>
|
|
</div>
|
|
<div class="col position-relative">
|
|
<label class="form-label d-flex align-items-center fs-base" for="email">Email
|
|
address * <span class="badge text-danger bg-danger-subtle ms-2">Verify
|
|
email</span></label>
|
|
<input class="form-control form-control-lg rounded-pill" id="email" required=""
|
|
type="email" value="contact@coderthemes" />
|
|
<div class="invalid-tooltip bg-transparent p-0">Enter a valid email address!</div>
|
|
</div>
|
|
<div class="col">
|
|
<label class="form-label fs-base" for="display-name">Display name</label>
|
|
<input class="form-control form-control-lg form-icon-end rounded-pill" id="display-name"
|
|
type="text" value="Coderthemes" />
|
|
</div>
|
|
</div>
|
|
<div class="pb-2 mb-3 mb-sm-4">
|
|
<label class="form-label fs-base" for="description">Description</label>
|
|
<textarea class="form-control form-control-lg rounded-5" id="description" rows="6">Digital products & bespoke development</textarea>
|
|
</div>
|
|
<div class="pb-2 mb-4">
|
|
<div class="form-check fs-lg m-0">
|
|
<input class="form-check-input" id="allow-contact" type="checkbox" />
|
|
<label class="form-check-label fs-base" for="allow-contact">Allow other users to
|
|
contact you with work inquiries.</label>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-3">
|
|
<button class="btn btn-lg btn-primary rounded-pill" type="submit">Save changes</button>
|
|
<button class="btn btn-lg btn-secondary rounded-pill" type="reset">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Security tab -->
|
|
<div aria-labelledby="security-tab" class="tab-pane fade" id="security" role="tabpanel">
|
|
<!-- Change password form -->
|
|
<form class="needs-validation" novalidate="">
|
|
<div class="row row-cols-1 row-cols-sm-2 g-4 mb-4">
|
|
<div class="col">
|
|
<label class="form-label fs-base" for="current-password">Current password</label>
|
|
<div class="password-toggle">
|
|
<input class="form-control form-control-lg rounded-pill" id="current-password"
|
|
required="" type="password" />
|
|
<div class="invalid-tooltip bg-transparent p-0">Incorrect password. Please try
|
|
again.</div>
|
|
<label aria-label="Show/hide password" class="password-toggle-button">
|
|
<input class="btn-check" type="checkbox" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-sm-2 g-4 mb-4">
|
|
<div class="col">
|
|
<label class="form-label fs-base" for="new-password">New password <span
|
|
class="fs-sm fw-normal text-body-secondary">(Min 8 chars)</span></label>
|
|
<div class="password-toggle">
|
|
<input class="form-control form-control-lg rounded-pill" id="new-password" minlength="8"
|
|
required="" type="password" />
|
|
<div class="invalid-tooltip bg-transparent p-0">Please ensure password is at least
|
|
8 characters long.</div>
|
|
<label aria-label="Show/hide password" class="password-toggle-button">
|
|
<input class="btn-check" type="checkbox" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<label class="form-label fs-base" for="confirm-new-password">Confirm new
|
|
password</label>
|
|
<div class="password-toggle">
|
|
<input class="form-control form-control-lg rounded-pill" id="confirm-new-password"
|
|
minlength="8" required="" type="password" />
|
|
<div class="invalid-tooltip bg-transparent p-0">Passwords do not match.</div>
|
|
<label aria-label="Show/hide password" class="password-toggle-button">
|
|
<input class="btn-check" type="checkbox" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-3">
|
|
<button class="btn btn-lg btn-primary rounded-pill" type="submit">Update
|
|
password</button>
|
|
<button class="btn btn-lg btn-secondary rounded-pill" type="reset">Cancel</button>
|
|
</div>
|
|
</form>
|
|
<!-- Delete account -->
|
|
<h2 class="h6 pt-5 mt-xl-2 pb-1 mb-2">Delete account</h2>
|
|
<p class="fs-sm">When you delete your account, your public profile will be deactivated
|
|
immediately. If you change your mind before the 14 days are up, sign in with your email and
|
|
password, and we'll send a link to reactivate account.</p>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" id="confirm-deletion" type="checkbox" />
|
|
<label class="form-check-label" for="confirm-deletion">Yes, I want to delete my
|
|
account</label>
|
|
</div>
|
|
<a class="fs-sm fw-medium text-danger" href="#!">Delete account</a>
|
|
</div>
|
|
<!-- Payment methods tab -->
|
|
<div aria-labelledby="payment-tab" class="tab-pane fade" id="payment" role="tabpanel">
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 g-md-4 g-lg-3 g-xl-4">
|
|
<div class="col">
|
|
<div class="card h-100 rounded-4">
|
|
<div class="card-body pb-3">
|
|
<div class="d-flex align-items-start justify-content-between mb-4">
|
|
<img alt="Mastercard" class="m-n3" src="/img/payment-methods/mastercard.svg"
|
|
width="100" />
|
|
<span class="badge text-bg-info rounded-pill">Primary</span>
|
|
</div>
|
|
<div class="h6 mb-1">**** **** **** 8341</div>
|
|
<div class="text-danger fs-xs">Expired 05/24</div>
|
|
</div>
|
|
<div class="card-footer d-flex gap-2 bg-transparent border-0 pt-0 pb-4">
|
|
<button class="btn btn-sm btn-outline-secondary rounded-pill me-1"
|
|
type="button">Edit</button>
|
|
<button class="btn btn-sm btn-outline-secondary rounded-pill"
|
|
type="button">Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card h-100 rounded-4">
|
|
<div class="card-body pb-3">
|
|
<div class="d-flex align-items-start justify-content-between mb-4">
|
|
<img alt="Visa" class="d-none-dark m-n3"
|
|
src="/img/payment-methods/visa-light-mode.svg" width="100" />
|
|
<img alt="Visa" class="d-none d-block-dark m-n3"
|
|
src="/img/payment-methods/visa-dark-mode.svg" width="100" />
|
|
<div class="nav animate-underline">
|
|
<a class="nav-link animate-target fs-xs p-0" href="#!">Set as
|
|
primary</a>
|
|
</div>
|
|
</div>
|
|
<div class="h6 mb-1">**** **** **** 1276</div>
|
|
<div class="text-body fs-xs">Expiration 01/27</div>
|
|
</div>
|
|
<div class="card-footer d-flex gap-2 bg-transparent border-0 pt-0 pb-4">
|
|
<button class="btn btn-sm btn-outline-secondary rounded-pill me-1"
|
|
type="button">Edit</button>
|
|
<button class="btn btn-sm btn-outline-secondary rounded-pill"
|
|
type="button">Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card border-0 h-100">
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 border border-dashed border-secondary border-opacity-25 rounded-4 d-none-dark"></span>
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 border border-dashed border-light border-opacity-25 rounded-4 d-none d-block-dark"></span>
|
|
<div
|
|
class="card-body position-relative z-2 nav align-items-center justify-content-center py-5">
|
|
<a class="nav-link animate-underline stretched-link min-w-0 fs-base px-0"
|
|
data-bs-toggle="modal" href="#addPaymentModal">
|
|
<i class="ci-plus fs-lg ms-n2 me-2"></i>
|
|
<span class="animate-target text-truncate">Add payment method</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Notifications tab -->
|
|
<div aria-labelledby="notifications-tab" class="tab-pane fade" id="notifications" role="tabpanel">
|
|
<div class="vstack gap-4 pt-sm-1">
|
|
<div class="form-check form-switch mb-0">
|
|
<input checked="" class="form-check-input" id="product-sold" type="checkbox" />
|
|
<label class="form-check-label ps-2" for="product-sold">
|
|
<span class="d-block h6 mb-2">Product sold notifications</span>
|
|
<span class="fs-sm">Send an email when someone purchased one of my product.</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-switch mb-0">
|
|
<input checked="" class="form-check-input" id="product-update" type="checkbox" />
|
|
<label class="form-check-label ps-2" for="product-update">
|
|
<span class="d-block h6 mb-2">Product update notifications</span>
|
|
<span class="fs-sm">Send an email when a product I've purchased is updated.</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-switch mb-0">
|
|
<input class="form-check-input" id="surveys" type="checkbox" />
|
|
<label class="form-check-label ps-2" for="surveys">
|
|
<span class="d-block h6 mb-2">Surveys and tests</span>
|
|
<span class="fs-sm">Receive invitations to participate in surveys, consultations, and
|
|
tool testing.</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-switch mb-0">
|
|
<input checked="" class="form-check-input" id="product-review" type="checkbox" />
|
|
<label class="form-check-label ps-2" for="product-review">
|
|
<span class="d-block h6 mb-2">Product review notifications</span>
|
|
<span class="fs-sm">Company news and cooperation offers.</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-switch mb-0">
|
|
<input class="form-check-input" id="daily-summary" type="checkbox" />
|
|
<label class="form-check-label ps-2" for="daily-summary">
|
|
<span class="d-block h6 mb-2">Daily summary emails</span>
|
|
<span class="fs-sm">Send an email when someone leaves a review with his/her
|
|
rating.</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
@endsection
|