🚀
(ﾉ☉ヮ⚆)ﾉ ⌒*:･ﾟ✧
This commit is contained in:
Tressley Cahill
parent
089fb3a411
commit
a86180f92a
57
css/animations.css
Normal file
57
css/animations.css
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
@-webkit-keyframes fade {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes flicker {
|
||||||
|
0% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
|
||||||
|
10% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
|
||||||
|
20% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
|
||||||
|
30% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
|
||||||
|
40% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
|
||||||
|
50% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
|
||||||
|
60% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
|
||||||
|
70% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
|
||||||
|
80% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
|
||||||
|
90% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
|
||||||
|
100% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flicker {
|
||||||
|
0% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
|
||||||
|
10% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
|
||||||
|
20% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
|
||||||
|
30% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
|
||||||
|
40% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
|
||||||
|
50% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
|
||||||
|
60% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
|
||||||
|
70% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
|
||||||
|
80% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
|
||||||
|
90% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
|
||||||
|
100% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes slime {
|
||||||
|
0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
|
||||||
|
30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
|
||||||
|
40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
|
||||||
|
50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
|
||||||
|
65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
|
||||||
|
75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
|
||||||
|
100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slime {
|
||||||
|
0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
|
||||||
|
30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
|
||||||
|
40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
|
||||||
|
50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
|
||||||
|
65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
|
||||||
|
75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
|
||||||
|
100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
|
||||||
|
}
|
||||||
10
css/main.css
Normal file
10
css/main.css
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/* Josh Comeau's Custom CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/ */
|
||||||
|
@import url('reset.css');
|
||||||
|
/* Google Fonts */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');
|
||||||
|
/* Variables */
|
||||||
|
@import url('vars.css');
|
||||||
|
/* Animations */
|
||||||
|
@import url('animations.css');
|
||||||
|
/* Main Styles */
|
||||||
|
@import url('styles.css');
|
||||||
23
css/reset.css
Normal file
23
css/reset.css
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
*, *::before, *::after { box-sizing: border-box; }
|
||||||
|
|
||||||
|
* { margin: 0; }
|
||||||
|
|
||||||
|
html, body { height: 100%; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
img, picture, video, canvas, svg {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, textarea, select { font: inherit; }
|
||||||
|
|
||||||
|
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
|
||||||
|
|
||||||
|
#root, #__next { isolation: isolate; }
|
||||||
|
|
||||||
|
[hidden] { display: none; }
|
||||||
205
css/styles.css
Normal file
205
css/styles.css
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
body {
|
||||||
|
background-color: var(--primary-background-color);
|
||||||
|
color: var(--primary-font-color);
|
||||||
|
font-family: var(--font-monospace);
|
||||||
|
font-size: var(--font-size-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-animation: fade 0.75s ease-in;
|
||||||
|
animation: fade 0.75s ease-in;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: var(--space-l);
|
||||||
|
row-gap: var(--space-l);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
-webkit-animation: flicker 2s linear infinite both;
|
||||||
|
animation: flicker 2s linear infinite both;
|
||||||
|
}
|
||||||
|
|
||||||
|
header svg { width: 8rem; }
|
||||||
|
|
||||||
|
#dock {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
list-style-type: none;
|
||||||
|
min-width: 40rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dock li a {
|
||||||
|
display: block;
|
||||||
|
fill: var(--primary-link-color);
|
||||||
|
min-width: 1.5rem;
|
||||||
|
-webkit-transition: fill 0.25s ease-in-out, margin-top 0.125s cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
||||||
|
-o-transition: fill 0.25s ease-in-out, margin-top 0.125s cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
||||||
|
transition: fill 0.25s ease-in-out, margin-top 0.125s cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
||||||
|
}
|
||||||
|
|
||||||
|
#dock a:focus,
|
||||||
|
#dock a:hover {
|
||||||
|
-webkit-animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
|
||||||
|
animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
|
||||||
|
fill: var(--primary-link-hover-color);
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dock li:nth-child(1) a:focus,
|
||||||
|
#dock li:nth-child(1) a:hover { fill: hsl(5, 81%, 56%); } /* Gmail */
|
||||||
|
#dock li:nth-child(2) a:focus,
|
||||||
|
#dock li:nth-child(2) a:hover { fill: hsl(217, 89%, 61%); } /* Google Calendar */
|
||||||
|
#dock li:nth-child(3) a:focus,
|
||||||
|
#dock li:nth-child(3) a:hover { fill: hsl(44, 100%, 50%); } /* Google Keep */
|
||||||
|
#dock li:nth-child(4) a:focus,
|
||||||
|
#dock li:nth-child(4) a:hover { fill: var(--primary-link-hover-color); } /* Notion */
|
||||||
|
#dock li:nth-child(5) a:focus,
|
||||||
|
#dock li:nth-child(5) a:hover { fill: hsl(102, 53%, 52%); } /* Github */
|
||||||
|
#dock li:nth-child(6) a:focus,
|
||||||
|
#dock li:nth-child(6) a:hover { fill: hsl(14, 89%, 53%); } /* Figma */
|
||||||
|
|
||||||
|
#search {
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search input {
|
||||||
|
background-color: var(--primary-background-color);
|
||||||
|
background-position: right 1.25rem center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 1.5rem 1.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: var(--primary-font-color);
|
||||||
|
font-family: var(--font-sans-serif);
|
||||||
|
line-height: 1.5;
|
||||||
|
outline: 0.25rem solid transparent;
|
||||||
|
padding: var(--space-m);
|
||||||
|
width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
#search input {
|
||||||
|
background-image: var(--svg-search-gray);
|
||||||
|
border: 0.125rem solid hsl(var(--color-white-hsl) / 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
#search input:hover { border-color: hsl(var(--color-white-hsl) / 0.5); }
|
||||||
|
|
||||||
|
#search input:focus {
|
||||||
|
background-color: hsl(var(--color-white-hsl) / 0.05);
|
||||||
|
background-image: var(--svg-search-light-gray);
|
||||||
|
outline-color: var(--color-orange);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
#search input {
|
||||||
|
background-image: var(--svg-search-light-gray);
|
||||||
|
border: 0.125rem solid hsl(var(--color-black-hsl) / 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
#search input:hover { border-color: hsl(var(--color-black-hsl) / 0.5); }
|
||||||
|
|
||||||
|
#search input:focus {
|
||||||
|
background-color: var(--color-white);
|
||||||
|
background-image: var(--svg-search-gray);
|
||||||
|
outline-color: var(--color-orange);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#search input:active,
|
||||||
|
#search input:focus { border-color: transparent; }
|
||||||
|
|
||||||
|
#search input::-webkit-input-placeholder { text-align: center; }
|
||||||
|
#search input::-moz-placeholder { text-align: center; }
|
||||||
|
#search input:-ms-input-placeholder { text-align: center; }
|
||||||
|
#search input::-ms-input-placeholder { text-align: center; }
|
||||||
|
#search input::placeholder { text-align: center; }
|
||||||
|
|
||||||
|
#bookmarks {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bookmarks ul {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bookmarks li {
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: var(--space-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
#bookmarks li:last-child { margin-bottom: 0; }
|
||||||
|
|
||||||
|
#bookmarks li .favicon {
|
||||||
|
width: 1rem;
|
||||||
|
margin-right: var(--space-s);
|
||||||
|
}
|
||||||
|
|
||||||
|
#bookmarks a {
|
||||||
|
color: var(--primary-link-color);
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: color 0.25s ease-in-out;
|
||||||
|
-o-transition: color 0.25s ease-in-out;
|
||||||
|
transition: color 0.25s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bookmarks a:focus,
|
||||||
|
#bookmarks a:hover { color: var(--primary-link-hover-color); }
|
||||||
51
css/vars.css
Normal file
51
css/vars.css
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
:root {
|
||||||
|
/* HSL(a) for better control over colors
|
||||||
|
https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/
|
||||||
|
https://css-tricks.com/color-alpha-anywhere/
|
||||||
|
*/
|
||||||
|
--color-black-hsl: 0 0% 11%; /* #1C1C1C */
|
||||||
|
--color-black: hsl(var(--color-black-hsl));
|
||||||
|
--color-orange-hsl: 30 100% 50%; /* #FD7E00 */
|
||||||
|
--color-orange: hsl(var(--color-orange-hsl));
|
||||||
|
--color-white-hsl: 0 0% 95%; /* #F1F1F1 */
|
||||||
|
--color-white: hsl(var(--color-white-hsl));
|
||||||
|
|
||||||
|
/* Font-families */
|
||||||
|
--font-monospace: "Inconsolata", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||||
|
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||||
|
|
||||||
|
/* Font-sizing */
|
||||||
|
--font-size-body: 1rem; /* 16px */
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--space-xs: 0.25rem; /* 4px */
|
||||||
|
--space-s: 0.5rem; /* 8px */
|
||||||
|
--space-m: 1rem;
|
||||||
|
--space-l: 2rem; /* 32px */
|
||||||
|
--space-xl: 4rem; /* 64px */
|
||||||
|
|
||||||
|
/* SVGs */
|
||||||
|
--svg-search-gray: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzUyNTI1MiIgZD0iTTMyLDI5LjU4bC05LjQ3LTkuNDdjMS42LTIuMTEsMi41Ni00LjcyLDIuNTYtNy41NkMyNS4wOSw1LjYzLDE5LjQ2LDAsMTIuNTQsMFMwLDUuNjMsMCwxMi41NHM1LjYzLDEyLjU0LDEyLjU0LDEyLjU0YzIuODQsMCw1LjQ2LS45Niw3LjU2LTIuNTZsOS40Nyw5LjQ3LDIuNDItMi40MlpNMy40MiwxMi41NEMzLjQyLDcuNTEsNy41MSwzLjQyLDEyLjU0LDMuNDJzOS4xMiw0LjA4LDkuMTIsOS4xMi00LjA4LDkuMTItOS4xMiw5LjEyUzMuNDIsMTcuNTgsMy40MiwxMi41NFoiLz48L3N2Zz4=');
|
||||||
|
--svg-search-light-gray: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzg3ODc4NyIgZD0iTTMyLDI5LjU4bC05LjQ3LTkuNDdjMS42LTIuMTEsMi41Ni00LjcyLDIuNTYtNy41NkMyNS4wOSw1LjYzLDE5LjQ2LDAsMTIuNTQsMFMwLDUuNjMsMCwxMi41NHM1LjYzLDEyLjU0LDEyLjU0LDEyLjU0YzIuODQsMCw1LjQ2LS45Niw3LjU2LTIuNTZsOS40Nyw5LjQ3LDIuNDItMi40MlpNMy40MiwxMi41NEMzLjQyLDcuNTEsNy41MSwzLjQyLDEyLjU0LDMuNDJzOS4xMiw0LjA4LDkuMTIsOS4xMi00LjA4LDkuMTItOS4xMiw5LjEyUzMuNDIsMTcuNTgsMy40MiwxMi41NFoiLz48L3N2Zz4=');
|
||||||
|
--svg-search-orange: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI0ZEN0UwMCIgZD0iTTMyLDI5LjU4bC05LjQ3LTkuNDdjMS42LTIuMTEsMi41Ni00LjcyLDIuNTYtNy41NkMyNS4wOSw1LjYzLDE5LjQ2LDAsMTIuNTQsMFMwLDUuNjMsMCwxMi41NHM1LjYzLDEyLjU0LDEyLjU0LDEyLjU0YzIuODQsMCw1LjQ2LS45Niw3LjU2LTIuNTZsOS40Nyw5LjQ3LDIuNDItMi40MlpNMy40MiwxMi41NEMzLjQyLDcuNTEsNy41MSwzLjQyLDEyLjU0LDMuNDJzOS4xMiw0LjA4LDkuMTIsOS4xMi00LjA4LDkuMTItOS4xMiw5LjEyUzMuNDIsMTcuNTgsMy40MiwxMi41NFoiLz48L3N2Zz4=');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--primary-background-color: var(--color-black);
|
||||||
|
--primary-font-color: var(--color-white);
|
||||||
|
--primary-link-color: hsl(var(--color-white-hsl) / 0.5);
|
||||||
|
--primary-link-hover-color: var(--color-white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light Mode */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
--primary-background-color: var(--color-white);
|
||||||
|
--primary-font-color: hsl(var(--color-black-hsl) / 0.75);
|
||||||
|
--primary-link-color: hsl(var(--color-black-hsl) / 0.75);
|
||||||
|
--primary-link-hover-color: var(--color-orange);
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
favicon-16x16.png
Normal file
BIN
favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
favicon-32x32.png
Normal file
BIN
favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
115
index.html
Normal file
115
index.html
Normal file
File diff suppressed because one or more lines are too long
11
js/main.js
Normal file
11
js/main.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
function dateTime () {
|
||||||
|
const date = new Date()
|
||||||
|
let today = date.toDateString()
|
||||||
|
let time = date.toLocaleTimeString()
|
||||||
|
document.getElementsByName('q')[0].placeholder = today + ' ' + time
|
||||||
|
setTimeout(dateTime, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function traichu () {
|
||||||
|
dateTime()
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user