Skip to content

Commit

Permalink
Merge pull request #135 from Christian-03/main
Browse files Browse the repository at this point in the history 
Implement Documentation Screen for Authenticated Users UI #101
  • Loading branch information
@rhedwan
rhedwan authored Aug 6, 2022
2 parents 6b0d38d + 53e126e commit dd70b62
Show file tree
Hide file tree
Showing 7 changed files with 268 additions and 0 deletions.
110 changes: 110 additions & 0 deletions FrontEnd/Pages/AuthLibrary.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<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">
<title>AuthLibrary</title>
<!-- CSS -->
<link href="CSS/AuthLibrary.css" rel="stylesheet" type="text/css">
<!-- Lato Font -->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<div class="header">
<h1>Browse Authentication Libraries</h1>
<div class="search">
<form action="">
<input name="Languages" type="search" placeholder="Search">
<img id="searchicon" src="images/akar.png">
</form>
</div>
</div>
<div class="container">
<main>
<a href="passport.html"><section>
<div class="design"></div>
<div class="passport">
<div class="details">
<div class="image"><img src="images/Group.png" alt="passport"><h1>Passport</h1></div>
<div><p>Simple, unobtrusive authentication for Node.js</p></div>
</div>
<div class="comment">
<div class="download"><p><img src="images/dashicons_admin-comments.png">56</p></div>
<div class="download"><p><img src="images/arcticons_downloads.png">2.3k</p></div>
</div>
</div>
</section></a>
<a href="passport.html"><section>
<div class="design"></div>
<div class="passport2">
<div class="details">
<div class="image"><img src="images/image 18.png" alt="passport"><h1>JSON Web Tokens</h1></div>
<div><p>An open, industry standard RFC 7519 method for representing claims securely between two parties</p></div>
</div>
<div class="comment">
<div class="download"><p><img src="images/dashicons_admin-comments.png">56</p></div>
<div class="download"><p><img src="images/arcticons_downloads.png">2.3k</p></div>
</div>
</div>
</section></a>
</main>
<main>
<a href="passport.html"><section>
<div class="design"></div>
<div class="passport">
<div class="details">
<div class="image"><img src="images/Group.png" alt="passport"><h1>Passport</h1></div>
<div><p>Simple, unobtrusive authentication for Node.js</p></div>
</div>
<div class="comment">
<div class="download"><p><img src="images/dashicons_admin-comments.png">56</p></div>
<div class="download"><p><img src="images/arcticons_downloads.png">2.3k</p></div>
</div>
</div>
</section></a>
<a href="passport.html"><section>
<div class="design"></div>
<div class="passport2">
<div class="details">
<div class="image"><img src="images/image 18.png" alt="passport"><h1>JSON Web Tokens</h1></div>
<div><p>An open, industry standard RFC 7519 method for representing claims securely between two parties</p></div>
</div>
<div class="comment">
<div class="download"><p><img src="images/dashicons_admin-comments.png">56</p></div>
<div class="download"><p><img src="images/arcticons_downloads.png">2.3k</p></div>
</div>
</div>
</section></a>
</main>
<main>
<a href="passport.html"><section>
<div class="design"></div>
<div class="passport">
<div class="details">
<div class="image"><img src="images/Group.png" alt="passport"><h1>Passport</h1></div>
<div><p>Simple, unobtrusive authentication for Node.js</p></div>
</div>
<div class="comment">
<div class="download"><p><img src="images/dashicons_admin-comments.png">56</p></div>
<div class="download"><p><img src="images/arcticons_downloads.png">2.3k</p></div>
</div>
</div>
</section></a>
<a href="passport.html"><section>
<div class="design"></div>
<div class="passport2">
<div class="details">
<div class="image"><img src="images/image 18.png" alt="passport"><h1>JSON Web Tokens</h1></div>
<div><p>An open, industry standard RFC 7519 method for representing claims securely between two parties</p></div>
</div>
<div class="comment">
<div class="download"><p><img src="images/dashicons_admin-comments.png">56</p></div>
<div class="download"><p><img src="images/arcticons_downloads.png">2.3k</p></div>
</div>
</div>
</section></a>
</main>
</div>
</body>
</html>
158 changes: 158 additions & 0 deletions FrontEnd/Pages/CSS/AuthLibrary.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #04172A;
margin: 2em;
}
.header{
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
justify-content: center;
margin: 8em 0;
}
.header h1{
font-family: 'Lato';
font-size: 40px;
font-weight: 700;
line-height: 60px;
letter-spacing: 0em;
text-align: left;
color: #FFFF;
}
.header .search form{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.header .search input {
width: 466px;
height: 50px;
border: 1px solid #052a4fbf;
background-color: #04172a;
border-radius: 8px;
font-family: "Lato";
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
text-indent: 1em;
}
#searchicon {
position: relative;
top: 0px;
right: 32px;
border: 2px solid #d3d4cf;
}
.header .search form button {
border: 0;
}

.container{
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
}
main{
display: flex;
flex-direction: row;
gap: 50px;

}
section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 41px;
width: 396px;
height: 262px;
background: rgba(2, 48, 106, 0.4);
border: 1px solid #02306A;
border-radius: 8px;
flex: none;
order: 0;
flex-grow: 0;
color: #FDFEF8;
}
.container a{
text-decoration: none;
}
section .design{
position: relative;
top: 0px;
left: 0px;
width: 396px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 16px;
background: rgba(215, 251, 230, 0.31);
backdrop-filter: blur(111px);
}
section div h1{
font-family: 'Lato';
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 150%;
color: #FDFEF8;
}
section .image{
display: flex;
flex-direction: row;
gap: 8px;
}
section .passport{
display: flex;
flex-direction: column;
margin: 2em;
gap: 40px;
}
section .passport2{
display: flex;
flex-direction: column;
margin: 2em;
margin-right: 0em;
gap: 24px;
}
.details{
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: flex-start; */
padding: 0px;
gap: 8px;
}
.details p{
font-family: 'Lato';
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
}
.comment{
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 40px;
}
.comment p{
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-family: 'Lato';
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
}
Binary file added FrontEnd/Pages/images/Group.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added FrontEnd/Pages/images/akar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added FrontEnd/Pages/images/arcticons_downloads.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added FrontEnd/Pages/images/dashicons_admin-comments.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added FrontEnd/Pages/images/image 18.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit dd70b62

Please sign in to comment.