created basic website
This commit is contained in:
parent
eb762fd49f
commit
43750baeef
130
src/content/links.json
Normal file
130
src/content/links.json
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
{
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"name": "Chess.org",
|
||||||
|
"href": "https://www.chess.com/member/brulijam",
|
||||||
|
"icon": "https://simpleicons.org/icons/chessdotcom.svg",
|
||||||
|
"group": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Credit Card",
|
||||||
|
"href": "mastercard.html",
|
||||||
|
"icon": "https://simpleicons.org/icons/mastercard.svg",
|
||||||
|
"group": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Discord",
|
||||||
|
"href": "https://discordapp.com/users/144893706514726913",
|
||||||
|
"icon": "https://simpleicons.org/icons/discord.svg",
|
||||||
|
"group": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Folding@home",
|
||||||
|
"href": "https://stats.foldingathome.org/donor/id/72929244",
|
||||||
|
"icon": "",
|
||||||
|
"group": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Github",
|
||||||
|
"href": "https://github.com/Brulijam",
|
||||||
|
"icon": "https://simpleicons.org/icons/github.svg",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Gitea",
|
||||||
|
"href": "https://git.brulijam.com/brulijam",
|
||||||
|
"icon": "https://simpleicons.org/icons/gitea.svg",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Instagram",
|
||||||
|
"href": "https://instagram.com/julian.brammer",
|
||||||
|
"icon": "https://simpleicons.org/icons/instagram.svg",
|
||||||
|
"group": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Lichess",
|
||||||
|
"href": "https://lichess.org/@/brulijam",
|
||||||
|
"icon": "https://simpleicons.org/icons/lichess.svg",
|
||||||
|
"group": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Mastodon",
|
||||||
|
"href": "https://mstdn.brulijam.dev/@brulijam",
|
||||||
|
"icon": "https://simpleicons.org/icons/mastodon.svg",
|
||||||
|
"group": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Matrix",
|
||||||
|
"href": "https://brulijam.dev/mtrx/#/@brulijam:brulijam.dev?web-instance[element.io]=chat.brulijam.dev&client=element.io",
|
||||||
|
"icon": "https://simpleicons.org/icons/matrix.svg",
|
||||||
|
"group": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Obsidian",
|
||||||
|
"href": "https://md.brulijam.com",
|
||||||
|
"icon": "https://simpleicons.org/icons/obsidian.svg",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Osu!",
|
||||||
|
"href": "https://osu.ppy.sh/users/3490953",
|
||||||
|
"icon": "https://simpleicons.org/icons/osu.svg",
|
||||||
|
"group": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "PayPal",
|
||||||
|
"href": "https://www.paypal.com/paypalme/julianbrammer/",
|
||||||
|
"icon": "https://simpleicons.org/icons/paypal.svg",
|
||||||
|
"group": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Screeps",
|
||||||
|
"href": "https://screeps.com/a/#!/profile/Brulijam",
|
||||||
|
"icon": "",
|
||||||
|
"group": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Signal",
|
||||||
|
"href": "https://signal.me/#eu/Bt1D65df5FOnAZVB0u9WHJG5wAz2WLnS_ALOiTAUmXHbs66TAjdHZ4YJi_wbyJnq",
|
||||||
|
"icon": "https://simpleicons.org/icons/signal.svg",
|
||||||
|
"group": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Snapchat",
|
||||||
|
"href": "https://www.snapchat.com/add/julian.brammer",
|
||||||
|
"icon": "https://simpleicons.org/icons/snapchat.svg",
|
||||||
|
"group": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Soundcloud",
|
||||||
|
"href": "https://soundcloud.com/brulijam",
|
||||||
|
"icon": "https://simpleicons.org/icons/soundcloud.svg",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Spotify",
|
||||||
|
"href": "https://open.spotify.com/user/giibu0t7te5mchiu2ugisudnv",
|
||||||
|
"icon": "https://simpleicons.org/icons/spotify.svg",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Steam",
|
||||||
|
"href": "https://steamcommunity.com/id/Brulijam/",
|
||||||
|
"icon": "https://simpleicons.org/icons/steam.svg",
|
||||||
|
"group": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Telegram",
|
||||||
|
"href": "https://t.me/julian_brammer",
|
||||||
|
"icon": "https://simpleicons.org/icons/telegram.svg",
|
||||||
|
"group": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Youtube",
|
||||||
|
"href": "https://youtube.com/@brulijam",
|
||||||
|
"icon": "https://simpleicons.org/icons/youtube.svg",
|
||||||
|
"group": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
src/content/video.mp4
Normal file
BIN
src/content/video.mp4
Normal file
Binary file not shown.
158
src/css/main.css
Normal file
158
src/css/main.css
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
:root {
|
||||||
|
--bg-color: rgb(16, 16, 16);
|
||||||
|
--primary: rgb(240, 240, 240);
|
||||||
|
|
||||||
|
--secondary-color: rgb(0, 138, 216);
|
||||||
|
|
||||||
|
--font-weight: 400;
|
||||||
|
--font-family: "Lucida Console";
|
||||||
|
|
||||||
|
--link-font-weight: 1000;
|
||||||
|
--link-border-radius: 10px;
|
||||||
|
|
||||||
|
--page-max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* General */
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--primary);
|
||||||
|
font-family: var(--font-family), monospace;
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
overflow-x: hidden;
|
||||||
|
margin: 20px;
|
||||||
|
|
||||||
|
& a {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
& a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& h1, p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: var(--page-max-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header*/
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
width: max-content;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
& .names {
|
||||||
|
/*margin: 0 auto;*/
|
||||||
|
width: min-content;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
& h1, p {
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& img {
|
||||||
|
border-radius: 50%;
|
||||||
|
max-width: 300px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
.linkGroup {
|
||||||
|
margin: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
/* if wide */
|
||||||
|
@media only screen and (min-width: 480px) {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .link {
|
||||||
|
height: fit-content;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
transition: top ease 100ms;
|
||||||
|
|
||||||
|
/* if slim */
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-right: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* if wide */
|
||||||
|
@media only screen and (min-width: 480px) {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.linkButton {
|
||||||
|
font-weight: var(--link-font-weight);
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: var(--link-border-radius);
|
||||||
|
|
||||||
|
/* if slim */
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
filter: drop-shadow(0px 0px 5px var(--secondary-color)) brightness(1.05);
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links:hover .link:not(:hover) a {
|
||||||
|
filter: brightness(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Timers */
|
||||||
|
.timer p {
|
||||||
|
/* if slim */
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer p span {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
& a {
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
65
src/index.html
Normal file
65
src/index.html
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Brulijam</title>
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
<script src="js/timer.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header>
|
||||||
|
<img src="https://brulijam.dev/assets/img/1_1713277032.jpga" alt="<profile picture>"></img>
|
||||||
|
<div class="names">
|
||||||
|
<h1>Julian Brammer</h1>
|
||||||
|
<p>@brulijam</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<br>
|
||||||
|
<section class="description">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
||||||
|
dolore magna aliquyam erat, sed diam
|
||||||
|
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
||||||
|
takimata sanctus est Lorem ipsum dolor sit
|
||||||
|
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||||
|
labore et dolore magna aliquyam erat, sed
|
||||||
|
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
||||||
|
takimata sanctus est Lorem ipsum dolor sit
|
||||||
|
amet.</p>
|
||||||
|
</section>
|
||||||
|
<br>
|
||||||
|
<script src="js/links.js"></script>
|
||||||
|
<section class="links">
|
||||||
|
<noscript>
|
||||||
|
<p>javascript is not available. You can still see a list of my links <a href="content/links.json">here</a>.</p>
|
||||||
|
</noscript>
|
||||||
|
</section>
|
||||||
|
<br>
|
||||||
|
<section class="timer">
|
||||||
|
<p class="js-required">alive for <span id="timer-alive-since-s"></span><span id="timer-alive-since-ms"></span> seconds.</p>
|
||||||
|
<p class="js-required">next birthday in <span id="timer-until-birthday-s"></span><span id="timer-until-birthday-ms"></span> seconds.</p>
|
||||||
|
<p class="js-required">employed at <a href="https://subshell.com/">subshell</a> for <span id="timer-employed-since-s"></span><span
|
||||||
|
id="timer-employed-since-ms"></span>
|
||||||
|
seconds.
|
||||||
|
</p>
|
||||||
|
<noscript>
|
||||||
|
<p>alive since <span>1999-07-20T00:00:00</span>.</p>
|
||||||
|
<p>working at <a href="https://subshell.com/">subshell</a> since <span>2024-05-02T09:00:00</span>.</p>
|
||||||
|
<style>
|
||||||
|
.js-required {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</noscript>
|
||||||
|
</section>
|
||||||
|
<br>
|
||||||
|
<footer>
|
||||||
|
<a href="https://git.brulijam.dev/brulijam/introduction-website" target="_blank">source code</a>
|
||||||
|
<a href="content/links.json" target="_blank">links.json</a>
|
||||||
|
<a href="https://status.brulijam.dev/status/brulijam">status</a>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
45
src/js/links.js
Normal file
45
src/js/links.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
function createLinkDiv(link) {
|
||||||
|
const linkDiv = document.createElement('div');
|
||||||
|
linkDiv.className = 'link';
|
||||||
|
|
||||||
|
const anchor = document.createElement('a');
|
||||||
|
anchor.className = 'linkButton';
|
||||||
|
anchor.href = link.href;
|
||||||
|
anchor.target = '_blank';
|
||||||
|
anchor.innerHTML = link.icon ? `<img class="icon" src="${link.icon}" alt="${link.name} icon">${link.name}` : link.name;
|
||||||
|
|
||||||
|
linkDiv.appendChild(anchor);
|
||||||
|
return linkDiv;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createGroups(linksData) {
|
||||||
|
const container = document.querySelector('.links');
|
||||||
|
|
||||||
|
const groups = [...new Set(linksData.map(link => link.group))].sort((a, b) => a - b);
|
||||||
|
|
||||||
|
groups.forEach((group, index) => {
|
||||||
|
const groupContainer = document.createElement('div');
|
||||||
|
groupContainer.className = 'linkGroup';
|
||||||
|
|
||||||
|
linksData
|
||||||
|
.filter(link => link.group === group)
|
||||||
|
.forEach(link => {
|
||||||
|
const linkElement = createLinkDiv(link);
|
||||||
|
groupContainer.appendChild(linkElement);
|
||||||
|
});
|
||||||
|
|
||||||
|
container.appendChild(groupContainer);
|
||||||
|
|
||||||
|
if (index < groups.length - 1) {
|
||||||
|
const br = document.createElement('br');
|
||||||
|
container.appendChild(br);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch('content/links.json')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
createGroups(data.links);
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error:', error));
|
||||||
22
src/js/main.js
Normal file
22
src/js/main.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
const secondaryColors = [
|
||||||
|
// "rgb(240, 240, 240)",
|
||||||
|
// "rgb(136, 139, 141)",
|
||||||
|
"rgb(224, 231, 34)",
|
||||||
|
"rgb(255, 173, 0)",
|
||||||
|
"rgb(244,54,76)",
|
||||||
|
// "rgb(219, 62, 177)",
|
||||||
|
"rgb(250, 150, 250)",
|
||||||
|
"rgb(250, 150, 150)",
|
||||||
|
"rgb(242, 172, 185)",
|
||||||
|
"rgb(0, 138, 216)",
|
||||||
|
"rgb(0, 178, 169)",
|
||||||
|
"rgb(88, 188, 64)",
|
||||||
|
"rgb(173, 223, 179)"
|
||||||
|
];
|
||||||
|
|
||||||
|
function setRandomSecondaryColor() {
|
||||||
|
const randomColor = secondaryColors[Math.floor(Math.random() * secondaryColors.length)];
|
||||||
|
document.documentElement.style.setProperty('--secondary-color', randomColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
setRandomSecondaryColor();
|
||||||
55
src/js/timer.js
Normal file
55
src/js/timer.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
const birthdate = new Date("1999-07-20T00:00:00");
|
||||||
|
const employedSince = new Date("2024-05-02T09:00:00");
|
||||||
|
|
||||||
|
window.onload = startTimer;
|
||||||
|
|
||||||
|
function startTimer() {
|
||||||
|
calculateTime();
|
||||||
|
setInterval(calculateTime, 42);
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateTime() {
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
// timer-alive-since
|
||||||
|
const aliveSinceMs = now - birthdate;
|
||||||
|
let aliveSinceTenthOfASecond = Math.floor((aliveSinceMs % 1000) / 10);
|
||||||
|
aliveSinceTenthOfASecond = aliveSinceTenthOfASecond.toString().padStart(2, "0");
|
||||||
|
const aliveSinceS = Math.floor(aliveSinceMs / 1000);
|
||||||
|
|
||||||
|
// timer-until-birthday
|
||||||
|
const nextBirthday = new Date(now.getFullYear(), birthdate.getMonth(), birthdate.getDate(),
|
||||||
|
birthdate.getHours(), birthdate.getMinutes(), birthdate.getSeconds());
|
||||||
|
if (nextBirthday < now) {
|
||||||
|
nextBirthday.setFullYear(now.getFullYear() + 1);
|
||||||
|
}
|
||||||
|
const nextBirthdayMs = nextBirthday - now;
|
||||||
|
let nextBirthdayTenthOfASecond = Math.floor((nextBirthdayMs % 1000) / 10);
|
||||||
|
nextBirthdayTenthOfASecond = nextBirthdayTenthOfASecond.toString().padStart(2, "0");
|
||||||
|
const nextBirthdayS = Math.floor(nextBirthdayMs / 1000);
|
||||||
|
|
||||||
|
// timer-employed-since
|
||||||
|
const employedSinceMs = now - employedSince;
|
||||||
|
let employedSinceTenthOfASecond = Math.floor((employedSinceMs % 1000) / 10);
|
||||||
|
employedSinceTenthOfASecond = employedSinceTenthOfASecond.toString().padStart(2, "0");
|
||||||
|
const employedSinceS = Math.floor(employedSinceMs / 1000);
|
||||||
|
|
||||||
|
// Update Document
|
||||||
|
updateDocument("timer-alive-since-s", `${formatNumber(aliveSinceS)}`)
|
||||||
|
updateDocument("timer-alive-since-ms", `.${formatNumber(aliveSinceTenthOfASecond)}`)
|
||||||
|
updateDocument("timer-until-birthday-s", `${formatNumber(nextBirthdayS)}`)
|
||||||
|
updateDocument("timer-until-birthday-ms", `.${formatNumber(nextBirthdayTenthOfASecond)}`)
|
||||||
|
updateDocument("timer-employed-since-s", `${formatNumber(employedSinceS)}`)
|
||||||
|
updateDocument("timer-employed-since-ms", `.${formatNumber(employedSinceTenthOfASecond)}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateDocument(id, value) {
|
||||||
|
const element = document.getElementById(id);
|
||||||
|
if (element) {
|
||||||
|
element.innerHTML = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatNumber(number) {
|
||||||
|
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||||
|
}
|
||||||
27
src/mastercard.html
Normal file
27
src/mastercard.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Brulijam</title>
|
||||||
|
<meta name="author" content="Brulijam">
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<video autoplay loop width="100%">
|
||||||
|
<source src="content/video.mp4" type="video/mp4">
|
||||||
|
Sorry, your browser doesn't support embedded videos.
|
||||||
|
</video>
|
||||||
|
<script>
|
||||||
|
function redirect() {
|
||||||
|
window.location.href = "content/video.mp4";
|
||||||
|
}
|
||||||
|
|
||||||
|
function onload() {
|
||||||
|
redirect();
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = onload();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
src/timers.html
Normal file
15
src/timers.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
<meta http-equiv="Content-Type" content="application/json;">
|
||||||
|
<script src="js/timer.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="js/timer.js"></script>
|
||||||
|
<pre>
|
||||||
|
<span id="timer-alive-since-s"></span>
|
||||||
|
<span id="timer-until-birthday-s"></span>
|
||||||
|
<span id="timer-employed-since-s"></span>
|
||||||
|
</pre>
|
||||||
|
</body>
|
||||||
Loading…
Reference in New Issue
Block a user