Skip to content

Commit

Permalink
feat: User Profile cards (#5)
Browse files Browse the repository at this point in the history 
* feat: user profile card

* lint
  • Loading branch information
@Deadreyo
Deadreyo committed Mar 21, 2023
1 parent 5ae3704 commit 64372f4
Show file tree
Hide file tree
Showing 8 changed files with 355 additions and 32 deletions.
Binary file added public/favicon.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 public/avatar.png → public/placeholder/avatar.png
View file
File renamed without changes
Binary file added public/placeholder/backstage.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/placeholder/xstate.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
336 changes: 336 additions & 0 deletions public/templates/UserProfile.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,336 @@
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;

}
</style>

<div style="display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 48px 32px 32px;
gap: 31px;
position: relative;
width: 1200px;
height: 627px;
background: #FFFFFF;
border-radius: 16px;"
>
<div style="
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 16px;
width: 1136px;
height: 134px;
">
<div style="
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 16px;
width: 1136px;
height: 134px;
">
<img src="http://localhost:3006/placeholder/avatar.png" width="1px" height="1px" style="
box-sizing: border-box;
width: 132px;
height: 132px;
border: 2px solid #F8F9FA;
border-radius: 500px;
"/>

<h1 style="
width: 926px;
height: 134px;
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-size: 96px;
line-height: 140%;
letter-spacing: -0.02em;
color: #11181C;
">
{{name}}
</h1>
<div style="
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
width: 46px;
height: 46px;
">
<div style="
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 16px;
width: 46px;
height: 46px;
">
<img src="http://localhost:3006/favicon.png" width="1px" height="1px" style="
width: 46px;
height: 46px;
border-radius: 4px;
"/>
</div>
</div>
</div>
</div>

<div style="
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 8px;
width: 1136px;
height: 73px;
">
<div style="
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 16px;
width: 1136px;
height: 48px;
">
<div style="
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
width: 1136px;
height: 48px;
">
<div style="
display: flex;
flex-direction: row;
align-items: center;
padding: 8px;
gap: 12px;
width: 150px;
height: 48px;
background: #F8F9FA;
border: 1px solid #DFE3E6;
border-radius: 8px;
">
<div style="
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 6px;
width: 134px;
height: 32px;
">
<img src="http://localhost:3006/placeholder/xstate.png" width="1px" height="1px" style="
width: 32px;
height: 32px;
border-radius: 4px;
"/>
<div style="
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 2px;
width: 96px;
height: 32px;
">
<h2 style="
width: 96px;
height: 32px;
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 100%;
color: #11181C;
">
xstate
</h2>
</div>
</div>
</div>
<div style="
display: flex;
flex-direction: row;
align-items: center;
padding: 8px;
gap: 12px;
width: 215px;
height: 48px;
background: #F8F9FA;
border: 1px solid #DFE3E6;
border-radius: 8px;
">
<div style="
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 6px;
width: 199px;
height: 32px;
">
<img src="http://localhost:3006/placeholder/backstage.png" width="1px" height="1px" style="
width: 32px;
height: 32px;
border-radius: 4px;
"/>
<div style="
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 2px;
width: 161px;
height: 32px;
">
<h2 style="
width: 161px;
height: 32px;
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 100%;
color: #11181C;
">
backstage
</h2>
</div>
</div>
</div>
<h2 style="
width: 39px;
height: 37px;
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 115%;
letter-spacing: -0.02em;
color: #687076;
">
+7
</h2>
</div>

</div>

<div style="
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
width: 1136px;
height: 17px;
">
<div style="
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
gap: 8px;
width: 1136px;
height: 17px;
">
<div style="
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
gap: 8px;
width: 1136px;
height: 10.5px;
">
<div style="
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 4px;
width: 1136px;
height: 10.5px;
border-radius: 20px;
">
<div style="
display: flex;
width: 513px;
height: 10.5px;
background: #3A5CCC;
">
</div>
<div style="
display: flex;
width: 513px;
height: 10.5px;
background: #FFB224;
">
</div>
<div style="
display: flex;
width: 30px;
height: 10.5px;
background: #E93D82;
">
</div>
<div style="
display: flex;
width: 30px;
height: 10.5px;
background: #AD7F58;
">
</div>
<div style="
display: flex;
width: 19px;
height: 10.5px;
background: #E54D2E;
">
</div>
<div style="
display: flex;
width: 11px;
height: 10.5px;
background: #C1C8CD;
">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
28 changes: 0 additions & 28 deletions src/HTMLTemplate.ts
View file

This file was deleted.

11 changes: 11 additions & 0 deletions src/Templates/ProfileCardTemplate.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { readFile } from "fs/promises";

export default async function ProfileCardTemplate (name: string) {
const file = await readFile("public/templates/UserProfile.html");

let string = file.toString("utf-8");

string = string.replace("{{name}}", name);

return string;
}

0 comments on commit 64372f4

Please sign in to comment.