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