-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* added 5 templates
- Loading branch information
Showing
20 changed files
with
1,225 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<title>aurora</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<link href="https://fonts.googleapis.com/css2?family=Jura:[email protected]&display=swap" rel="stylesheet"> | ||
<link rel="stylesheet" href="styles/styles.css"> | ||
</head> | ||
<script type="module" src="js/script.js"></script> | ||
<body> | ||
<div class="body"> | ||
<div class="small"> | ||
<img id="image" src="https://picsum.photos/300/300" alt="Like this site? Visit " class="dp" > | ||
<div class="socials"> | ||
<!-- All social icons courtesy of font awesome --> | ||
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> | ||
<a id="instagram"> | ||
<div class="social"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="35" height="35"> | ||
<path fill="#ffffff" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/> | ||
</svg> | ||
</div> | ||
</a> | ||
<a id="twitter"> | ||
<div class="social"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="35" height="35"> | ||
<path fill="#ffffff" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/> | ||
</svg> | ||
</div> | ||
</a> | ||
<a id="github"> | ||
<div class="social"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="35" height="35"> | ||
<path fill="#ffffff" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/> | ||
</svg> | ||
</div> | ||
</a> | ||
<a id="linkedin"> | ||
<div class="social"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="35" height="35"> | ||
<path fill="#ffffff" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/> | ||
</svg> | ||
</div> | ||
</a> | ||
<a id="phone"> | ||
<div class="social"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30" height="30"> | ||
<path fill="#ffffff" d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/> | ||
</svg> | ||
</div> | ||
</a> | ||
</div> | ||
<div class="info"> | ||
<h1 data-display="true" id="name"></h1> | ||
</div> | ||
<div style="width: 100%; display: flex; justify-content: center; color: grey; margin-block-end: 0.3em;"> | ||
<h3 data-display="true" id="username"></h3> | ||
</div> | ||
<div style="width: 50%; display: flex; justify-content: center;"> | ||
<h3 data-display="true" id="pronouns"></h3> | ||
<h3 data-display="true" style="margin-left: 5px;" id="age"></h3> | ||
</div> | ||
</div> | ||
<div class="large"> | ||
<p data-display="true" id="bio"></p> | ||
<h4 data-display="true" id="email"></h4> | ||
</div> | ||
</div> | ||
<div data-display="true" style="display: none;" id="dob"></div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
function calculateAge(dateString) { | ||
const birthDate = new Date(dateString); | ||
const today = new Date(); | ||
let age = today.getFullYear() - birthDate.getFullYear(); | ||
const monthDiff = today.getMonth() - birthDate.getMonth(); | ||
|
||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { | ||
age--; | ||
} | ||
|
||
return age; | ||
} | ||
|
||
const elementUpdates = [ | ||
{ id: 'name', transform: content => `Hi, I'm ${content}` }, | ||
{ id: 'username', transform: content => `@${content} on zitefy` }, | ||
{ id: 'pronouns', transform: content => `[${content}]` }, | ||
{ id: 'dob', transform: content => { | ||
const age = calculateAge(content); | ||
const ageElement = document.getElementById('age'); | ||
if (ageElement) { | ||
ageElement.innerHTML = `[${age} y/o]`; | ||
} | ||
return content; | ||
}}, | ||
{ id: 'email', transform: content => `ping me at ${content}` } | ||
]; | ||
|
||
function updateElements() { | ||
elementUpdates.forEach(({ id, transform }) => { | ||
const element = document.getElementById(id); | ||
if (element) { | ||
const content = element.innerHTML.trim(); | ||
if (content !== '') { | ||
element.innerHTML = transform(content); | ||
} | ||
} | ||
}); | ||
} | ||
|
||
document.addEventListener('DOMContentLoaded', updateElements); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"name": "aurora", | ||
"author": "athulas", | ||
"time": "2024-07-28T15:34:32.458960", | ||
"author_link": "https://github.com/athul2037", | ||
"accepts_contributions": true, | ||
"category": "plain" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,122 @@ | ||
body { | ||
background: rgb(21,61,25); | ||
background: linear-gradient(0deg, rgba(21,61,25,1) 0%, rgba(0,0,0,1) 37%, rgba(21,61,25,1) 62%, rgba(0,0,0,1) 100%); | ||
font-family: "Jura", sans-serif; | ||
font-optical-sizing: auto; | ||
font-style: normal; | ||
margin: 0px; | ||
overflow: hidden; | ||
color: aliceblue; | ||
} | ||
|
||
h3 { | ||
margin-block: 0; | ||
} | ||
|
||
.body { | ||
height: 100vh; | ||
width: 100vw; | ||
display: flex; | ||
overflow-y: hidden; | ||
} | ||
|
||
.small { | ||
flex: 4; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.small .socials { | ||
width: 100%; | ||
height: 10vh; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.socials .social { | ||
padding: 10px; | ||
border-radius: 50px; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
margin-left: 10px; | ||
margin-right: 10px; | ||
} | ||
|
||
.small .info { | ||
width: 100%; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.small .info h1 { | ||
margin-block: 0.2em; | ||
} | ||
|
||
.dp { | ||
height: 15vw; | ||
width: 15vw; | ||
border-radius: 200px; | ||
} | ||
|
||
.large { | ||
flex: 8; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
padding: 10vh 10vw 10vh 10vh; | ||
overflow-y: auto; | ||
} | ||
|
||
.social:hover { | ||
background-color: aliceblue; | ||
} | ||
|
||
.social:hover svg path { | ||
fill: #2C2121; | ||
} | ||
|
||
/* mobile screens */ | ||
@media only screen and (max-width: 640px) { | ||
body { | ||
overflow: auto; | ||
} | ||
|
||
.body { | ||
flex-direction: column; | ||
height: auto; | ||
min-height: 100vh; | ||
overflow-y: visible; | ||
} | ||
|
||
.small { | ||
padding: 40px; | ||
} | ||
|
||
.dp { | ||
height: 40vw; | ||
width: 40vw; | ||
} | ||
|
||
.large { | ||
padding: 0 10vw 2vh 10vw; | ||
text-align: center; | ||
overflow-y: visible; | ||
} | ||
} | ||
|
||
/* big phones & tablets */ | ||
@media only screen and (max-width: 768px) {} | ||
|
||
/* tablets & 13 inch laptops */ | ||
@media only screen and (max-width: 1024px) {} | ||
|
||
/* laptops */ | ||
@media only screen and (max-width: 1280px) {} | ||
|
||
/* <17" displays */ | ||
@media only screen and (max-width: 1536px) {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<title>aurora</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<link href="https://fonts.googleapis.com/css2?family=Jura:[email protected]&display=swap" rel="stylesheet"> | ||
<link rel="stylesheet" href="styles/styles.css"> | ||
</head> | ||
<script type="module" src="js/script.js"></script> | ||
<body> | ||
<div class="body"> | ||
<div class="small"> | ||
<img id="image" src="https://picsum.photos/300/300" alt="Like this site? Visit " class="dp" > | ||
<div class="socials"> | ||
<!-- All social icons courtesy of font awesome --> | ||
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> | ||
<a id="instagram"> | ||
<div class="social"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="35" height="35"> | ||
<path fill="#ffffff" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/> | ||
</svg> | ||
</div> | ||
</a> | ||
<a id="twitter"> | ||
<div class="social"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="35" height="35"> | ||
<path fill="#ffffff" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/> | ||
</svg> | ||
</div> | ||
</a> | ||
<a id="github"> | ||
<div class="social"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="35" height="35"> | ||
<path fill="#ffffff" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/> | ||
</svg> | ||
</div> | ||
</a> | ||
<a id="linkedin"> | ||
<div class="social"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="35" height="35"> | ||
<path fill="#ffffff" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/> | ||
</svg> | ||
</div> | ||
</a> | ||
<a id="phone"> | ||
<div class="social"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30" height="30"> | ||
<path fill="#ffffff" d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/> | ||
</svg> | ||
</div> | ||
</a> | ||
</div> | ||
<div class="info"> | ||
<h1 data-display="true" id="name"></h1> | ||
</div> | ||
<div style="width: 100%; display: flex; justify-content: center; color: grey; margin-block-end: 0.3em;"> | ||
<h3 data-display="true" id="username"></h3> | ||
</div> | ||
<div style="width: 50%; display: flex; justify-content: center;"> | ||
<h3 data-display="true" id="pronouns"></h3> | ||
<h3 data-display="true" style="margin-left: 5px;" id="age"></h3> | ||
</div> | ||
</div> | ||
<div class="large"> | ||
<p data-display="true" id="bio"></p> | ||
<h4 data-display="true" id="email"></h4> | ||
</div> | ||
</div> | ||
<div data-display="true" style="display: none;" id="dob"></div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
function calculateAge(dateString) { | ||
const birthDate = new Date(dateString); | ||
const today = new Date(); | ||
let age = today.getFullYear() - birthDate.getFullYear(); | ||
const monthDiff = today.getMonth() - birthDate.getMonth(); | ||
|
||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { | ||
age--; | ||
} | ||
|
||
return age; | ||
} | ||
|
||
const elementUpdates = [ | ||
{ id: 'name', transform: content => `Hi, I'm ${content}` }, | ||
{ id: 'username', transform: content => `@${content} on zitefy` }, | ||
{ id: 'pronouns', transform: content => `[${content}]` }, | ||
{ id: 'dob', transform: content => { | ||
const age = calculateAge(content); | ||
const ageElement = document.getElementById('age'); | ||
if (ageElement) { | ||
ageElement.innerHTML = `[${age} y/o]`; | ||
} | ||
return content; | ||
}}, | ||
{ id: 'email', transform: content => `ping me at ${content}` } | ||
]; | ||
|
||
function updateElements() { | ||
elementUpdates.forEach(({ id, transform }) => { | ||
const element = document.getElementById(id); | ||
if (element) { | ||
const content = element.innerHTML.trim(); | ||
if (content !== '') { | ||
element.innerHTML = transform(content); | ||
} | ||
} | ||
}); | ||
} | ||
|
||
document.addEventListener('DOMContentLoaded', updateElements); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"name": "cappuccino", | ||
"author": "athulas", | ||
"time": "2024-07-28T15:54:48.458960", | ||
"author_link": "https://github.com/athul2037", | ||
"accepts_contributions": true, | ||
"category": "plain" | ||
} |
Oops, something went wrong.