333 lines
21 KiB
PHP
333 lines
21 KiB
PHP
@extends('user.layout.main')
|
|
@section('content')
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>Profile</h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<!-- Profil -->
|
|
<div class="card-body profile-card py-2 d-flex flex-column align-items-center text-center"
|
|
style="border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; background: linear-gradient(45deg, #f3f3f3, #e0e0e0);">
|
|
<i class="bi bi-arrow-right" style="position: absolute; top: 10px; right: 10px; font-size: 24px;"></i>
|
|
<img src="assets/img/avatar/ok.jpg" alt="Profile" class="rounded-circle"
|
|
style="width: 150px; height: 150px;">
|
|
<h2 class="mt-3">Nurul Prima Annisa</h2>
|
|
<h5 class="mb-0">@npannisa</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<!-- Tab Menu -->
|
|
<div class="card">
|
|
<div class="card-body pt-3">
|
|
<ul class="nav nav-tabs nav-tabs-bordered">
|
|
<li class="nav-item">
|
|
<button class="nav-link active" data-bs-toggle="tab"
|
|
data-bs-target="#profile-overview">Overview</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Edit
|
|
Profile</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab"
|
|
data-bs-target="#profile-settings">Settings</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab"
|
|
data-bs-target="#profile-change-password">Change Password</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content pt-2">
|
|
|
|
<div class="tab-pane fade show active profile-overview" id="profile-overview">
|
|
<h5 class="card-title">About</h5>
|
|
<p class="big fst-italic">"Saya adalah seorang Frontend Developer dengan lebih dari 3
|
|
pengalaman dalam dunia pengembangan web.
|
|
Saya memiliki dedikasi yang kuat untuk menciptakan pengalaman pengguna yang luar
|
|
biasa melalui desain web yang menarik dan fungsional.
|
|
Pekerjaan saya melibatkan mengubah desain grafis dan konsep menjadi kode HTML, CSS,
|
|
dan JavaScript yang dapat diakses oleh pengguna di berbagai perangkat.
|
|
Saya memiliki pemahaman mendalam tentang HTML5, CSS3, dan JavaScript serta kerangka
|
|
kerja laravel frontend seperti React, Vue.js, atau Angular.
|
|
Kemampuan saya dalam memahami desain dan mengimplementasikannya secara responsif
|
|
memungkinkan saya untuk menciptakan situs web yang dapat diakses
|
|
dengan baik di perangkat seluler, tablet, dan desktop.
|
|
Selain itu, saya terbiasa bekerja sama dengan tim pengembang backend untuk
|
|
memastikan integrasi yang mulus antara frontend dan backend.
|
|
Saya juga senang mempelajari teknologi-teknologi baru dan mengikuti tren terkini
|
|
dalam desain web dan pengembangan frontend.
|
|
Kemampuan komunikasi dan kolaborasi saya yang baik memungkinkan saya untuk bekerja
|
|
sama dengan desainer UX/UI, manajer produk, dan tim lainnya
|
|
dalam proyek-proyek pengembangan web. Saya juga percaya bahwa tes dan pemeliharaan
|
|
adalah bagian integral dari pengembangan web, sehingga saya
|
|
selalu berusaha untuk memastikan kualitas dan keamanan kode saya.
|
|
Saya sangat antusias dalam menciptakan pengalaman pengguna yang menarik dan berfokus
|
|
pada performa yang baik. Saya siap untuk menghadapi
|
|
tantangan baru dalam dunia pengembangan web dan berkontribusi dalam menciptakan
|
|
produk-produk yang menginspirasi dan memenuhi kebutuhan pengguna."
|
|
</p>
|
|
|
|
<h5 class="card-title">Profile Details</h5>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label ">Full Name</div>
|
|
<div class="col-lg-9 col-md-8">Nurul Prima Annisa</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Company</div>
|
|
<div class="col-lg-9 col-md-8">Ya apa yak</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Job</div>
|
|
<div class="col-lg-9 col-md-8">Frontend Web </div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Country</div>
|
|
<div class="col-lg-9 col-md-8">Indonesia</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Address</div>
|
|
<div class="col-lg-9 col-md-8">Depok city broww</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Phone</div>
|
|
<div class="col-lg-9 col-md-8">(+62) 486-3538 29071</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Email</div>
|
|
<div class="col-lg-9 col-md-8">npannisa23@gmail.com</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane fade profile-edit pt-3" id="profile-edit">
|
|
|
|
<!-- Profile Edit Form -->
|
|
<form>
|
|
<div class="row mb-3">
|
|
<label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Profile
|
|
Image</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<img id="profileImagePreview" src="assets/img/avatar/ok.jpg" alt="Profile"
|
|
style="max-width: 100%; max-height: 150px;">
|
|
<div class="d-flex justify-content-between align-items-center mt-2">
|
|
<label for="profileImageInput" class="btn btn-primary btn-sm"
|
|
title="Upload new profile image">
|
|
<i class="bi bi-upload"></i> Upload
|
|
<input type="file" id="profileImageInput" accept="image/*"
|
|
style="display: none;">
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="fullName" class="col-md-4 col-lg-3 col-form-label">Full Name</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="fullName" type="text" class="form-control" id="fullName"
|
|
value="Nurul Prima Annisa">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="about" class="col-md-4 col-lg-3 col-form-label">About</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<textarea name="about" class="form-control" id="about" style="height: 100px">
|
|
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="company" class="col-md-4 col-lg-3 col-form-label">Company</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="company" type="text" class="form-control" id="company"
|
|
value="Abbauf Mulia Konsultan Teknologi">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Job" class="col-md-4 col-lg-3 col-form-label">Job</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="job" type="text" class="form-control" id="Job"
|
|
value="Frontend Web">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Country" class="col-md-4 col-lg-3 col-form-label">Country</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="country" type="text" class="form-control" id="Country"
|
|
value="Indonesia">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Address" class="col-md-4 col-lg-3 col-form-label">Address</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="address" type="text" class="form-control" id="Address"
|
|
value="Depok city broww">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Phone" class="col-md-4 col-lg-3 col-form-label">Phone</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="phone" type="text" class="form-control" id="Phone"
|
|
value="(+62) 486-3538 29071">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Email" class="col-md-4 col-lg-3 col-form-label">Email</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="email" type="email" class="form-control" id="Email"
|
|
value="npannisa23@gmail.com">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- <div class="row mb-3">
|
|
<label for="Twitter" class="col-md-4 col-lg-3 col-form-label">Twitter Profile</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="twitter" type="text" class="form-control" id="Twitter"
|
|
value="https://twitter.com/#">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Facebook" class="col-md-4 col-lg-3 col-form-label">Facebook
|
|
Profile</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="facebook" type="text" class="form-control" id="Facebook"
|
|
value="https://facebook.com/#">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Instagram" class="col-md-4 col-lg-3 col-form-label">Instagram
|
|
Profile</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="instagram" type="text" class="form-control" id="Instagram"
|
|
value="https://instagram.com/npannisa_?utm_source=qr&igshid=MzNlNGNkZWQ4Mg%3D%3D#">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Linkedin" class="col-md-4 col-lg-3 col-form-label">Linkedin
|
|
Profile</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="linkedin" type="text" class="form-control" id="Linkedin"
|
|
value="https://github.com/npannisa#">
|
|
</div>
|
|
</div> --}}
|
|
|
|
<div class="text-center">
|
|
<a href="profile" type="submit" class="btn btn-primary">Save Changes</a>
|
|
</div>
|
|
</form><!-- End Profile Edit Form -->
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane fade pt-3" id="profile-settings">
|
|
|
|
<!-- Settings Form -->
|
|
<form>
|
|
|
|
<div class="row mb-3">
|
|
<label for="fullName" class="col-md-4 col-lg-3 col-form-label">Email
|
|
Notifications</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="changesMade"
|
|
checked>
|
|
<label class="form-check-label" for="changesMade">
|
|
Changes made to your account
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="newProducts"
|
|
checked>
|
|
<label class="form-check-label" for="newProducts">
|
|
Information on new products and services
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="proOffers">
|
|
<label class="form-check-label" for="proOffers">
|
|
Marketing and promo offers
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="securityNotify"
|
|
checked disabled>
|
|
<label class="form-check-label" for="securityNotify">
|
|
Security alerts
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary">Save Changes</button>
|
|
</div>
|
|
</form><!-- End settings Form -->
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane fade pt-3" id="profile-change-password">
|
|
<!-- Change Password Form -->
|
|
<form>
|
|
|
|
<div class="row mb-3">
|
|
<label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Current
|
|
Password</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="password" type="password" class="form-control"
|
|
id="currentPassword">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="newPassword" class="col-md-4 col-lg-3 col-form-label">New
|
|
Password</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="newpassword" type="password" class="form-control"
|
|
id="newPassword">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="renewPassword" class="col-md-4 col-lg-3 col-form-label">Re-enter
|
|
New
|
|
Password</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="renewpassword" type="password" class="form-control"
|
|
id="renewPassword">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary">Change Password</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|