updates account design

server/static/css/main.css

@@ -1,3 +1,9 @@
+
+body *
+{
+    font-family: "Trebuchet MS", Helvetica, sans-serif;
+}
+
 .logins {
     height: 100px;
     width: 500px;
@@ -67,49 +73,17 @@
     text-align: left;
   }
 }
- /* The sidebar menu */
- .sidenav {
-    height: 100%; /* Full-height: remove this if you want "auto" height */
-    width: 160px; /* Set the width of the sidebar */
-    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
-    z-index: 1; /* Stay on top */
-    top: 0; /* Stay at the top */
-    left: 0;
-    background-color: #111; /* Black */
-    overflow-x: hidden; /* Disable horizontal scroll */
-    padding-top: 20px;
-  }
 
-  /* The navigation menu links */
-  .sidenav a {
-    padding: 6px 8px 6px 16px;
-    text-decoration: none;
-    font-size: 25px;
-    color: #818181;
-    display: block;
-  }
-  
-  /* When you mouse over the navigation links, change their color */
-  .sidenav a:hover {
-    color: #f1f1f1;
-  }
-  
-  /* Style page content */
-  .main {
-    margin-left: 160px; /* Same as the width of the sidebar */
+/* Style page content */
+.main {
     padding: 30px 10px;
-  }
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
   
-  /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
-  @media screen and (max-height: 450px) {
-    .sidenav {padding-top: 15px;}
-    .sidenav a {font-size: 18px;}
-  } 
-
-
-  /* slider */
-
-   /* The switch - the box around the slider */
+/* The switch - the box around the slider */
 .switch {
     position: relative;
     display: inline-block;
@@ -171,3 +145,63 @@
   .slider.round:before {
     border-radius: 50%;
   }
+
+.container {
+    display: inline-flex;
+    justify-content: center;
+    align-items:center;
+    flex-direction: row;
+    padding: 0px 2rem 0px 2rem;
+}
+
+.container .button {
+   padding: 1rem 1.5rem 1rem 1.5rem;
+   font-size: 2rem;
+   margin: 4rem;
+   color: black;
+   text-decoration: none;
+}
+
+.container .button.logout {
+    background-color: #ddd;
+}
+
+.container .button.delete {
+    background-color: #b51409;
+}
+
+.sub.container {
+    width: 20rem;
+    justify-content: left;
+}
+
+.profile {
+    display: inline-flex;
+    justify-content: center;
+    align-items:center;
+    flex-direction: row;
+}
+
+.profile .picture {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+    margin-right: 2rem;
+}	
+
+.profile .name {
+    font-size: 3rem;
+    color: #333;
+}
+
+.sub.container .name {
+    margin-right: 1rem;
+}
+
+
+.sub.container .data {
+    background: #ddd;
+    padding: 5px;
+    border-radius: 5px; 
+    margin-right: 1rem;
+}

server/template/account.html

@@ -1,8 +1,17 @@
 {% extends "sidebar.html" %}
 {% block body%}
-<p>Hello, {{ username }}! You're logged in! Email: {{email}}</p>
-<div><p>Google Profile Picture:</p>
-<img src={{ profile_img }} alt="Google profile pic"></img></div>
-<a class="button" href="/logout">Logout</a>
-<a class="button" href="/test">test API</a>
+<div class="container profile">
+    <img class="picture" src={{ profile_img }} alt="Profile Picture"></img> 
+    <p class="name"> {{ username }} </p>
+</div>
+<div class="sub container">
+    <p class=name>E-mail </p><p class=data> {{email}}</p>
+</div>
+<div class="sub container">
+    <p class=data>0</p><p class=name> Devices </p>
+</div>
+<div class=container>
+<a class="button logout" href="/logout">Logout</a>
+<a class="button delete" href="/delete_account">Delete Account</a>
+</div>
 {% endblock %}