UI/html/user-profile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/announceit-styles.css">
<link rel="stylesheet" href="../css/font-awesome/css/font-awesome.min.css">
<title>User profile</title>
</head>
<body>
<div>
<!-- HEADER FOR SMALL SCREENS -->
<div class="header-small-screens width-100 bg-purple">
<div class="width-100">
<div class="text-50 text-bold expl-to-do text-center header-logo-sm bg-purple-dark padding-2">
<a href="index.html">
<span class="announce-brand">Announce</span><span class="it-brand">IT</span>
</a>
<span class="hand-cursor position-right" id="toggler">
<i class="fa fa-bars menu"></i>
</span>
</div>
<!--Menu-->
<div class="text-50 width-80 hidden-element" id="menu-small-screens">
<ul class="text-center container-vertical">
<li class="margin-top-5"><a href="create-announcement.html">Create announcement</a></li>
<li class="margin-top-5">
<!-- search bar -->
<div class="search-bar-div rounded-corner-30 dark-bordered-1 margin-top-1">
<input
type="text"
placeholder="Search announcement by id, status, or announcement title. Eg:Accepted, or 1, ..."
id="searching-bar"
class="width-100 bg-white text-17 shadows-black text-black rounded-corner-30 text-center padding-left-2 padding-right-2"
>
</div>
</li>
<li class="margin-top-5"><a href="signin.html">Logout</a></li>
</ul>
</div>
</div>
</div>
<!--BIG SCREENS-->
<!-- Heading and navbar -->
<div class="profile-heading heigth-200">
<div class="expl-to-do text-50 text-bold">
<a href="index.html">
<span class="announce-brand">Announce</span><span class="it-brand">IT</span>
</a>
</div>
<!-- search bar -->
<div class="search-bar-div rounded-corner-30 dark-bordered-1 margin-top-1">
<input
type="text"
placeholder="Search announcement by id, status, or announcement title. Eg:Accepted, or 1, ..."
id="searching-bar"
class="width-100 bg-white text-17 shadows-black text-black rounded-corner-30 text-center padding-left-2 padding-right-2"
>
</div>
<!-- nav (contains the menus)-->
<nav>
<ul>
<li>
<a href="create-announcement.html">Create announcement</a>
</li>
<li>
<a href="signin.html">Logout</a>
</li>
</ul>
</nav>
</div>
<div class="width-90">
<div class="container">
<!-- Profile details on a side bar-->
<div
class="container-vertical profile-details bg-white dark-bordered-1 rounded-corner-15 padding-10 margin-bottom-5">
<!-- user-card -->
<div class="bg-dark-transparent padding-2 rounded-corner-15">
<div>
<img
src="../img/default-avatar.png" alt="profile picture" class="default-pp circled-element">
</div>
<div class="text-blue bg-dark padding-2 rounded-corner-15 text-13">
<span>MUGIRASE Emmanuel</span>
<span>emmanuellamugi@gmail.com</span>
</div>
</div>
<div
class="white-bordered-1 margin-5 padding-5 rounded-corner-15 bg-dark-transparent text-15">
<span class="margin-top-10">All announcements posted: </span><span>234</span><br><br>
<span class="margin-top-10">Accepted announcements : </span><span>220</span><br><br>
<span>Declined announcements : </span><span>2</span><br><br>
<span>Active announcements : </span><span>180</span><br><br>
<span>Deactivated announcements : </span><span>40</span><br><br>
</div>
</div>
<!-- Displaying list of all announcements-->
<div
class="list dark-bordered-1 bg-white padding-top-2 rounded-corner-15 padding-bottom-2 shadows-black"
id="announcements-display">
</div>
<!-- Displaying details of announcement-->
<div
class="list dark-bordered-1 margin-left-2 bg-white padding-top-2 rounded-corner-15 padding-bottom-2 hidden-element"
id="announcement-details-display">
<div class="width-100">
<h2 id="announcement-title" class="text-center"></h2>
<div class="bg-dark-transparent padding-2">
<div class="width-80">
<h3>Content</h3>
<span id="announcement-content"/>
</div>
<div class="container announcement-card-footer margin-top-2">
<span class="width-40 text-15">Status : </span>
<span class="width-40 text-15" id="announcement-status"/>
</div>
<div class="container announcement-card-footer margin-top-2">
<span class="width-40 text-15">Posted by : </span>
<span class="width-40 text-15" id="announcement-owner"/>
</div>
<div class="container announcement-card-footer margin-top-2">
<span class="width-40 text-15" id="announcement-startdate"/>
<span class="width-40 text-15" id="announcement-enddate"/>
</div>
</div>
<div class="width-100 container margin-top-2">
<button class="width-20 bg-blue rounded-corner-30 hand-cursor" announcement-update-btn>
Update</button>
<button
class="width-20 bg-green rounded-corner-30 hand-cursor" id="goback-to-list-btn">
Go back to list</button>
<button
class="width-20 bg-red rounded-corner-30 hand-cursor" announcement-delete-btn>
Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-center margin-top-1">
<div class="container centered-element-h">
<span>AnnounceIT</span>
<span class="margin-left-5">ⓒ 2020</span>
</div>
</footer>
<!-- Importing javascripts-->
<script src="../js/display-announcement.js" type="module"></script>
<script src="../js/search-announcement.js" type="module"></script>
<script src="../js/handle-announcement-clicked.js" type="module"></script>
<script type="module" src="../js/responsive-navbar.js"></script>
</body>
</html>