-
Notifications
You must be signed in to change notification settings - Fork 0
/
profile-setting.html
134 lines (125 loc) · 7.91 KB
/
profile-setting.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/profile-setting.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$(".fa-search").click(function() {
$(".icon").toggleClass("active");
$("input[type='search']").toggleClass("active");
})
})
</script>
<title>StarLigHTs: Profile Setting</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo.webp" width="30" height="30" class="d-inline-block align-top" alt=""> StarLigHTs
</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog Post</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">Tentang Kami</a>
</li>
</ul>
<div class="searchbar">
<form class="form-horizontal my-2 my-md-0 search-form" [formGroup]="searchForm" role="form" (keyup.enter)="onSubmit()">
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="icon" type="submit">
<i class="fas fa-search"></i>
</div>
</form>
</div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="img/profile.svg" width="40" height="40" class="rounded-circle" style="object-fit: cover;">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="register.html">Sign Up</a>
<a class="dropdown-item" href="profile.html">Profile</a>
<a class="dropdown-item" href="login.html">Log In</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- HALAMAN PENGDITAN PROFIL -->
<div class="container">
<img src="img/amri.webp" alt="" class="img-fluid rounded-circle">
<div class="media-body">
<h2>Amri Reza</h2>
<small>( amri )</small>
<p class="text-secondary">[email protected]</p>
</div>
<form method="POST" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="0qYqMFZ4Fd3Y5nQSS51b0xv6MfsZt36cxxH9VQD4frN3qoYR3YG9BzgL0EIGbnKS">
<fieldset class="form-group">
<legend class="border-bottom mb-4">Profile Info</legend>
<div id="div_id_username" class="form-group"> <label for="id_username" class=" requiredField">
Nama pengguna<span class="asteriskField">*</span> </label>
<div class=""> <input type="text" name="username" value="amri" maxlength="150" class="textinput textInput form-control" required id="id_username"> <small id="hint_id_username" class="form-text text-muted">Wajib. 150 karakter atau sedikit. Hanya
huruf, angka, dan
@/./+/-/_.</small> </div>
</div>
<div id="div_id_first_name" class="form-group"> <label for="id_first_name" class=" requiredField">
First name<span class="asteriskField">*</span> </label>
<div class=""> <input type="text" name="first_name" value="Amri" class="textinput textInput form-control" required id="id_first_name"> </div>
</div>
<div id="div_id_last_name" class="form-group"> <label for="id_last_name" class=" requiredField">
Last name<span class="asteriskField">*</span> </label>
<div class=""> <input type="text" name="last_name" value="Reza" class="textinput textInput form-control" required id="id_last_name"> </div>
</div>
<div id="div_id_email" class="form-group"> <label for="id_email" class=" requiredField">
Email<span class="asteriskField">*</span> </label>
<div class=""> <input type="email" name="email" value="[email protected]" class="emailinput form-control" required id="id_email"> </div>
</div>
<div id="div_id_image" class="form-group"> <label for="id_image" class=" requiredField">
Image<span class="asteriskField">*</span> </label>
<div class="">
Saat ini: <a href="/media/img/profile_pics/PP2.webp">img/profile_pics/PP2.webp</a><br> Ubah:
<input type="file" name="image" accept="image/*" class="clearablefileinput form-control-file" id="id_image"> </div>
</div>
<div id="div_id_bio" class="form-group"> <label for="id_bio" class="">
Bio
</label>
<div class=""> <textarea name="bio" cols="40" rows="10" maxlength="200" class="textarea form-control" id="id_bio"></textarea> </div>
</div>
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Update</button>
</div>
</form>
</div>
<!-- HALAMAN PENGDITAN PROFIL AKHIR -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js " integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj " crossorigin="anonymous "></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js " integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN " crossorigin="anonymous "></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js " integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s " crossorigin="anonymous "></script>
<script src="js/dark-mode-switch.min.js "></script>
</body>
</html>