|
|
@@ -1,59 +1,347 @@
|
|
|
{% extends "base.html" %}
|
|
|
|
|
|
{% block content %}
|
|
|
-<div class="mx-auto text-center">
|
|
|
-<h1>Your Hometab</h1>
|
|
|
-<p>Current Bookmark created:(It shows a number to count all the users total create how many bookmarks)</p>
|
|
|
-<hr style="border: 5px dashed black;"/>
|
|
|
+<style>
|
|
|
+body{
|
|
|
+ color: #1a202c;
|
|
|
+ text-align: left;
|
|
|
+ background-color: #e2e8f0;
|
|
|
+ padding-top: 100px;
|
|
|
+
|
|
|
+}
|
|
|
+.main-body {
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+}
|
|
|
+.card {
|
|
|
+ box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
|
|
|
+}
|
|
|
+
|
|
|
+.card {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-width: 0;
|
|
|
+ word-wrap: break-word;
|
|
|
+ background-color: #fff;
|
|
|
+ background-clip: border-box;
|
|
|
+ border: 0 solid rgba(0,0,0,.125);
|
|
|
+ border-radius: .25rem;
|
|
|
+}
|
|
|
+
|
|
|
+.card-body {
|
|
|
+ flex: 1 1 auto;
|
|
|
+ min-height: 1px;
|
|
|
+ padding: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.gutters-sm {
|
|
|
+ margin-right: -8px;
|
|
|
+ margin-left: -8px;
|
|
|
+}
|
|
|
+
|
|
|
+.gutters-sm>.col, .gutters-sm>[class*=col-] {
|
|
|
+ padding-right: 8px;
|
|
|
+ padding-left: 8px;
|
|
|
+}
|
|
|
+.mb-3, .my-3 {
|
|
|
+ margin-bottom: 1rem!important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-gray-300 {
|
|
|
+ background-color: #e2e8f0;
|
|
|
+}
|
|
|
+.h-100 {
|
|
|
+ height: 100%!important;
|
|
|
+}
|
|
|
+.shadow-none {
|
|
|
+ box-shadow: none!important;
|
|
|
+}
|
|
|
+.input-UploadProfile-Browse {
|
|
|
+ width: 80px;
|
|
|
+ color:transparent;
|
|
|
+}
|
|
|
+ul {
|
|
|
+ list-style-type: none;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
|
|
|
+.href_link_button
|
|
|
+{
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+.list li {
|
|
|
+ display:inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ list-style-position: outside;
|
|
|
+ list-style-type: disc;
|
|
|
+ margin-right: 1em;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ list-style-type: none;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+.bull {
|
|
|
+ display:list-item
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<div class="mx-auto text-center">
|
|
|
<!------ Profile Information ---------->
|
|
|
-<p>Profile Information</p>
|
|
|
-<div class="card">
|
|
|
- {% if user.profile_image %}
|
|
|
- <img src="static/uploads/{{ user.profile_image }}" style="width:100%">
|
|
|
- {% else %}
|
|
|
- <img src="static/uploads/defaultprofileimg/defaultprofileimg.png" style="width:100%">
|
|
|
- {% endif %}
|
|
|
- <h1>{{ user.username }}</h1>
|
|
|
- <p>{{ user.email }}</p>
|
|
|
+<div class="container">
|
|
|
+ <div class="main-body">
|
|
|
+ <p>Profile</p>
|
|
|
+ <div class="row gutters-sm">
|
|
|
+ <div class="col-md-4 mb-3">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="d-flex flex-column align-items-center text-center">
|
|
|
+ {% if user.profile_image %}
|
|
|
+ <img src="static/uploads/{{ user.profile_image }}" style="width:150px">
|
|
|
+ {% else %}
|
|
|
+ <img src="static/uploads/defaultprofileimg/defaultprofileimg.png" style="width:150px">
|
|
|
+ {% endif %}
|
|
|
+ <div class="mt-3">
|
|
|
+ <h4>{{ user.username }}</h4>
|
|
|
+ <p class="text-secondary mb-1">{{ user.email }}</p>
|
|
|
+ <hr>
|
|
|
+ <!------ Upload Profile Image ---------->
|
|
|
+ <div class="mt-3">
|
|
|
+ <p><b>Upload Profile Image</b></p>
|
|
|
+ <form action="" method="POST" enctype="multipart/form-data">
|
|
|
+ <input
|
|
|
+ class="input-UploadProfile-Browse"
|
|
|
+ type="file"
|
|
|
+ id="profile_image"
|
|
|
+ name="profile_image"
|
|
|
+ accept="image/png, image/jpeg"
|
|
|
+ onchange="form.submit()"
|
|
|
+ value="Upload"
|
|
|
+ src="http://example.com/path/to/image.png"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <p>**Accept Only <b>PNG's</b>, <b>JPEG's</b>**</p>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-8">
|
|
|
+ <div class="card mb-3">
|
|
|
+ <form method="POST">
|
|
|
+ <div class="card-body">
|
|
|
+ <p><b>Change Username or Password</b></p><br>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-sm-3">
|
|
|
+ <h6 class="mb-0"><label for="username">Username</label></h6><br>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-9 text-secondary">
|
|
|
+ <input type="text" id="username" name="username"><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <hr style="border: 1px solid rgb(177, 176, 176);"/>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-sm-3">
|
|
|
+ <h6 class="mb-0"><label for="password">Password</label></h6><br>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-9 text-secondary">
|
|
|
+ <input type="text" id="password" name="password"><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <hr>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-sm-3">
|
|
|
+ <h6 class="mb-0"><label for="password_confirm">Password(Confirm)</label></h6><br>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-9 text-secondary">
|
|
|
+ <input type="text" id="password_confirm" name="password_confirm">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <hr>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-sm-12">
|
|
|
+ <input type="submit" value="Submit" class="btn btn-info"></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-<hr style="border: 5px dashed black;"/>
|
|
|
-
|
|
|
-<!------ Change Username and Password ---------->
|
|
|
-<p>Change Username and Password</p>
|
|
|
-<form method="POST">
|
|
|
- <label for="username">Username</label><br>
|
|
|
- <input type="text" id="username" name="username"><br>
|
|
|
- <label for="password">Password</label><br>
|
|
|
- <input type="text" id="password" name="password"><br>
|
|
|
- <label for="password_confirm">Password(Confirm)</label><br>
|
|
|
- <input type="text" id="password_confirm" name="password_confirm">
|
|
|
- <br>
|
|
|
- <input type="submit" value="Submit">
|
|
|
-</form>
|
|
|
-<hr style="border: 5px dashed black;"/>
|
|
|
-
|
|
|
-<!------ Upload Profile Image ---------->
|
|
|
-<p>Upload Profile Image</p>
|
|
|
-<form action="" method="POST" enctype="multipart/form-data">
|
|
|
- <input type="file" id="profile_image" name="profile_image" accept="image/png, image/jpeg">
|
|
|
- <input type="submit" value="Upload">
|
|
|
-</form>
|
|
|
-<hr style="border: 5px dashed black;"/>
|
|
|
|
|
|
<!------ List of bookmarks you have created ---------->
|
|
|
-<p>List of bookmarks you have created</p>
|
|
|
-
|
|
|
<form action="/" method="POST">
|
|
|
-<input type="submit" value="Download"><p>(a button for downloading their bookmarks for backup)</p>
|
|
|
+<input type="submit" value="Download"><!------ a button for downloading their bookmarks for backup)---------->
|
|
|
</form>
|
|
|
<!------ The edit button of the page is edit_bookmark.html ---------->
|
|
|
-<p>(Each bookmark will have an edit button for creators to manage their bookmarks (the edit button will redirect to the edit page where the user can change it to public or private, modify the link, description)</p>
|
|
|
-<div class="card">
|
|
|
- <p>Automatic Icon Usage (using links from external icon sites)</p>
|
|
|
- <p>(Website Link)</p>
|
|
|
- <p>(Description)</p>
|
|
|
- <button type="submit">Edit</button>
|
|
|
+<!------ (Each bookmark will have an edit button for creators to manage their bookmarks (the edit button will redirect to the edit page where the user can change it to public or private, modify the link, description)</p>---------->
|
|
|
+<!-- work section -->
|
|
|
+<div class="container">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-12 col-sm-12">
|
|
|
+ <div class="section-title">
|
|
|
+ <h1 class="heading bold">List of bookmarks you have created</h1>
|
|
|
+ <hr>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-4 col-md-4 col-sm-4">
|
|
|
+ <div class="inner_box">
|
|
|
+ <h3>(Group1)</h3>
|
|
|
+ <hr>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-4 col-md-4 col-sm-4">
|
|
|
+ <div class="inner_box">
|
|
|
+ <h3>(Group2)</h3>
|
|
|
+ <hr>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-4 col-md-4 col-sm-4">
|
|
|
+ <div class="inner_box">
|
|
|
+ <h3>(Group3)</h3>
|
|
|
+ <hr>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-4 col-md-4 col-sm-4">
|
|
|
+ <div class="inner_box">
|
|
|
+ <h3>(Group4)</h3>
|
|
|
+ <hr>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-4 col-md-4 col-sm-4">
|
|
|
+ <div class="inner_box">
|
|
|
+ <h3>(Group5)</h3>
|
|
|
+ <hr>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-4 col-md-4 col-sm-4">
|
|
|
+ <div class="inner_box">
|
|
|
+ <h3>(Group6)</h3>
|
|
|
+ <hr>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="list">
|
|
|
+ <li><span class="bull">(ICON) (NAME)</span></li>
|
|
|
+ <li class="href_link_button">
|
|
|
+ <a href="http://127.0.0.1:5000/">
|
|
|
+ <img src="static/logo/link_logo.png"width="25" height="25">
|
|
|
+ </a>
|
|
|
+ <button type="submit">Edit</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="clearfix"></div>
|
|
|
+ </div>
|
|
|
+ <div class="clearfix"></div>
|
|
|
</div>
|
|
|
+<div class="clearfix"></div>
|
|
|
{% endblock %}
|
|
|
</div>
|
eddy
