Merge pull request #8 from CodeURJC-DAW-2022-23/feat/profile

feat: profile page
CodeURJC-DAW-2022-23 · Feb 14, 2023 · cde5b9d · cde5b9d
2 parents 03d23ca + 69d9be0
commit cde5b9d
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 7 deletions.
diff --git a/front/src/public/images/profile_picture.jpg b/front/src/public/images/profile_picture.jpg
diff --git a/front/src/public/profile.html b/front/src/public/profile.html
@@ -2,16 +2,60 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/x-icon" href="images/favicon.ico">
-  <link href="styles/bootstrap/bootstrap.min.css" rel="stylesheet">
-  <title>Title</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="styles/profile.css" rel="stylesheet">
+    <link href="styles/styles.css" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
+    <link href="styles/bootstrap/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"
+        type='text/css'>
+    <title>Profile</title>
 </head>
 
 <body>
-
+    <div class="container-fluid p-0">
+        <div class="row m-0">
+            <div class=" col-3 text-black p-4">
+                <div class="pb-3">
+                    <img src="images/profile_picture.jpg" alt="profilePic" class="rounded-circle .img-fluid">
+                </div>
+                <div class="row text-inherit m-0 d-flex align-items-center">
+                    <div class="col fs-2 ps-0">
+                        Gledrian
+                    </div>
+                    <div class="col-2 btn-setting">
+                        <div class="dropdown">
+                            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
+                                <i class="fa fa-regular fa-gear"></i></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="row fs-5">
+                    <div class="col">
+                        4 following
+                    </div>
+                    <div class="col">
+                        0 Followers
+                    </div>
+                </div>
+                <hr>
+                <div class="bio m-0">
+                    (づ｡◕‿‿◕｡)づ
+                    <br>
+                    -Spits facts daily
+                    <br>
+                    -Best opinions all around
+                    <br>
+                    -Don't hate pls
+                    @gledrian.dev_
+                </div>
+            </div>
+            <div class="col-9 p-4">
+            </div>
+        </div>
+    </div>
 </body>
 
 </html>
diff --git a/front/src/public/scripts/js/profile.js b/front/src/public/scripts/js/profile.js
@@ -0,0 +1,7 @@
+const loadFile = function (event, id) {
+    var image = document.getElementById(id);
+    image.style.height = '100px';
+    image.style.width = '100px';
+    image.src = URL.createObjectURL(event.target.files[0]);
+  };
+
diff --git a/front/src/public/styles/profile.css b/front/src/public/styles/profile.css
@@ -0,0 +1,30 @@
+.btn-setting .btn-primary {
+  border: none;
+  background-color: black;
+}
+.btn-setting .btn-primary:hover {
+  background-color: black;
+}
+
+.row {
+  height: inherit;
+  width: 100%;
+}
+
+.container-fluid {
+  height: 100vh;
+}
+
+.prof-name {
+  margin-left: 15%;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.bio {
+  height: 100%;
+}