Added new time utility
This commit is contained in:
parent
f2aef2012b
commit
26e91acd9c
|
|
@ -1,2 +1,3 @@
|
|||
$primary-colour-light: rgb(127, 127, 127);
|
||||
$bg-colour-light: rgb(187, 187, 187);
|
||||
$bg-colour-light: rgb(187, 187, 187);
|
||||
$accent-colour-light: rgb(24, 96, 231);
|
||||
$filter-accent-colour-light: invert(34%) sepia(96%) saturate(4970%) hue-rotate(216deg) brightness(95%) contrast(91%);
|
||||
|
|
@ -3,17 +3,16 @@
|
|||
|
||||
body {
|
||||
font-family: 'Ubuntu', sans-serif !important;
|
||||
background-color: colours.$bg-colour-light;
|
||||
background-color: colours.$bg-colour-light;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
min-height: 80vh;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,14 @@
|
|||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.grid {
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
8
|
||||
9
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '../assets/styles/colours';
|
||||
.card {
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
|
|
@ -58,8 +59,8 @@ export default {
|
|||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3 !important;
|
||||
border-color: #0070f3;
|
||||
color: colours.$accent-colour-light !important;
|
||||
border-color: colours.$accent-colour-light;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,44 @@
|
|||
<template>
|
||||
<nav>
|
||||
<div v-for="link in links" :key="link">
|
||||
<NuxtLink :to="link.to" class="nav-button">
|
||||
<img :src="link.img.name" :alt="link.img.alt" />
|
||||
</NuxtLink>
|
||||
<div class="nav-button">
|
||||
<NuxtLink :to="link.to">
|
||||
<img :src="link.img.name" :alt="link.img.alt" />
|
||||
<p>{{ link.name }}</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '../assets/styles/colours';
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
margin: 0 auto;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav :hover {
|
||||
filter: colours.$filter-accent-colour-light;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
padding: .25rem;
|
||||
margin: .25rem;
|
||||
margin: 0 1rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
spaces.
|
||||
</p>
|
||||
<strong>It's official! There is going to be another season!</strong>
|
||||
<div class="grid">
|
||||
<div class="grid-3">
|
||||
<LinkCard
|
||||
title="Watch"
|
||||
to="https://www.netflix.com/title/81210762"
|
||||
|
|
|
|||
|
|
@ -16,27 +16,23 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navLinks: [
|
||||
{
|
||||
img: {
|
||||
name: '/icons/arrow-left.svg',
|
||||
alt: 'Back to Utilities',
|
||||
},
|
||||
to: '/utilities',
|
||||
},
|
||||
{
|
||||
img: {
|
||||
name: '/icons/home.svg',
|
||||
alt: 'Home',
|
||||
},
|
||||
to: '/',
|
||||
},
|
||||
],
|
||||
};
|
||||
<script setup>
|
||||
const navLinks = [
|
||||
{
|
||||
img: {
|
||||
name: '/icons/arrow-left.svg',
|
||||
alt: 'Back to Utilities',
|
||||
},
|
||||
to: '/utilities',
|
||||
name: "Utilities",
|
||||
},
|
||||
};
|
||||
{
|
||||
img: {
|
||||
name: '/icons/home.svg',
|
||||
alt: 'Go Home',
|
||||
},
|
||||
to: '/',
|
||||
name: "Home",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,24 +2,22 @@
|
|||
<NavBar :links="navLinks" />
|
||||
<div class="container">
|
||||
<h1 class="title">Utilities for the Discord Server</h1>
|
||||
<LinkCard title="Birthdays" to="/utilities/birthdays" />
|
||||
<div class="grid-2">
|
||||
<LinkCard title="Birthdays" to="/utilities/birthdays" />
|
||||
<LinkCard title="Time" to="/utilities/time" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navLinks: [
|
||||
{
|
||||
img: {
|
||||
name: '/icons/home.svg',
|
||||
alt: 'Home',
|
||||
},
|
||||
to: '/',
|
||||
},
|
||||
],
|
||||
};
|
||||
<script setup>
|
||||
const navLinks = [
|
||||
{
|
||||
img: {
|
||||
name: '/icons/home.svg',
|
||||
alt: 'Go Home',
|
||||
},
|
||||
to: '/',
|
||||
name: "Home",
|
||||
},
|
||||
};
|
||||
];
|
||||
</script>
|
||||
|
|
|
|||
144
pages/utilities/time.vue
Normal file
144
pages/utilities/time.vue
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<NavBar :links="navLinks" />
|
||||
<div class="container">
|
||||
<h1 class="title">Time Utilities</h1>
|
||||
<p>
|
||||
Your current timezone:
|
||||
{{ Intl.DateTimeFormat().resolvedOptions().timeZone }}
|
||||
</p>
|
||||
<p>The current time in Unix Epoch: <code>{{ Math.floor(crntTime / 1000) }}</code> <br /> or <code>{{crntTime}}</code> in Unix millis</p>
|
||||
|
||||
<p>
|
||||
To format the time for Discord, you can use: <br />
|
||||
<code>
|
||||
{{ `<t:${Math.floor(crntTime / 1000)}:f>` }}
|
||||
</code>
|
||||
<span>
|
||||
to get
|
||||
<code
|
||||
>{{
|
||||
Intl.DateTimeFormat(Intl.Locale, {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
}).format(crntTime)
|
||||
}}
|
||||
{{
|
||||
Intl.DateTimeFormat(Intl.Locale, {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(crntTime)
|
||||
}}</code
|
||||
></span
|
||||
>
|
||||
<br />
|
||||
<code>
|
||||
{{ `<t:${Math.floor(crntTime / 1000)}:F>` }}
|
||||
</code>
|
||||
<span>
|
||||
to get
|
||||
<code
|
||||
>{{
|
||||
Intl.DateTimeFormat(Intl.Locale, {
|
||||
weekday: 'long',
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
}).format(crntTime)
|
||||
}}
|
||||
{{
|
||||
Intl.DateTimeFormat(Intl.Locale, {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(crntTime)
|
||||
}}</code
|
||||
></span
|
||||
>
|
||||
<br />
|
||||
<code>
|
||||
{{ `<t:${Math.floor(crntTime / 1000)}:t>` }}
|
||||
</code>
|
||||
<span>
|
||||
to get
|
||||
<code>
|
||||
{{
|
||||
Intl.DateTimeFormat(Intl.Locale, {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(crntTime)
|
||||
}}</code
|
||||
></span
|
||||
>
|
||||
<br />
|
||||
<code>
|
||||
{{ `<t:${Math.floor(crntTime / 1000)}:T>` }}
|
||||
</code>
|
||||
<span>
|
||||
to get
|
||||
<code>
|
||||
{{
|
||||
Intl.DateTimeFormat(Intl.Locale, {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
}).format(crntTime)
|
||||
}}</code
|
||||
></span
|
||||
>
|
||||
<br />
|
||||
<code>
|
||||
{{ `<t:${Math.floor(crntTime / 1000)}:d>` }}
|
||||
</code>
|
||||
<span>
|
||||
to get
|
||||
<code>
|
||||
{{
|
||||
Intl.DateTimeFormat(Intl.Locale, {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
}).format(crntTime)
|
||||
}}</code
|
||||
></span
|
||||
>
|
||||
<br />
|
||||
<code>
|
||||
{{ `<t:${Math.floor(crntTime / 1000)}:D>` }}
|
||||
</code>
|
||||
<span>
|
||||
to get
|
||||
<code>
|
||||
{{
|
||||
Intl.DateTimeFormat(Intl.Locale, {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
}).format(crntTime)
|
||||
}}</code
|
||||
></span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const crntTime = Date.now();
|
||||
const navLinks = [
|
||||
{
|
||||
img: {
|
||||
name: '/icons/arrow-left.svg',
|
||||
alt: 'Back to Utilities',
|
||||
},
|
||||
to: '/utilities',
|
||||
name: 'Utilities',
|
||||
},
|
||||
{
|
||||
img: {
|
||||
name: '/icons/home.svg',
|
||||
alt: 'Go Home',
|
||||
},
|
||||
to: '/',
|
||||
name: 'Home',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
Loading…
Reference in a new issue