├── .github
    └── FUNDING.yml
├── README.md
├── assets
    ├── bunny.jpg
    ├── cat.jpg
    ├── clock.jpg
    ├── demo.gif
    ├── kirby.jpg
    ├── notion.jpg
    ├── pomodoro.jpg
    ├── rimuru.jpg
    ├── settings.jpg
    ├── time.jpg
    ├── weather.jpg
    └── widgets.gif
├── bunny
    ├── bunny.gif
    ├── index.html
    ├── script.js
    └── style.css
├── cat
    ├── cat-animate.gif
    ├── cat-idle.gif
    ├── cat.gif
    ├── index.html
    ├── script.js
    └── style.css
├── clock
    ├── index.html
    ├── script.js
    └── style.css
├── kirby
    ├── index.html
    ├── kirby-asleep.gif
    ├── kirby-awake.gif
    ├── kirby.gif
    ├── script.js
    └── style.css
├── pomodoro
    ├── alarm.mp3
    ├── index.html
    ├── script.js
    └── style.css
├── rimuru
    ├── index.html
    ├── rimuru.gif
    ├── script.js
    └── style.css
├── time
    ├── index.html
    ├── script.js
    └── style.css
└── weather
    ├── index.html
    ├── script.js
    └── style.css


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | custom: ["https://www.paypal.me/anthonytedja"]
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # notion
 2 | 
 3 | [![Demo Gif](assets/notion.jpg)](https://github.com/anthonytedja/notion)
 4 | 
 5 | > notion hosts widgets for Notion pages.
 6 | 
 7 | ## Setup & Usage
 8 | 
 9 | Embed widget links are given by `anthonytedja.github.io/notion/<widget-name>/`
10 | 
11 | ![Setup Demo](assets/settings.jpg)
12 | 
13 | > **_IMPORTANT:_**  Use system settings for appearance on desktop to match the theme style.
14 | 
15 | [![Demo Gif](assets/demo.gif)](https://github.com/anthonytedja/notion)
16 | 
17 | - Click on the widget image in the preview section below to take you to the widget site.
18 | - Copy the URL and paste the link into Notion and choose "Create embed"
19 | - Resize the widget to how you want and you're all set up!
20 | 
21 | [![Demo Gif](assets/widgets.gif)](https://github.com/anthonytedja/notion)
22 | 
23 | ## Preview
24 | 
25 | `Pomodoro` : [Pomodoro](https://todoist.com/productivity-methods/pomodoro-technique) is a productivity technique where a 25 minute work session is followed by a 5 minute break for each pomodoro period. Click on the timer to start the countdown, or double / triple click to switch the timer modes from work to break. A notification will be played when the timer hits 0 so you don't need to keep your eyes on the widget.
26 | 
27 | [![Pomodoro](assets/pomodoro.jpg)](https://anthonytedja.github.io/notion/pomodoro/)
28 | 
29 | `Weather` : Powered by [weatherwidget.io](https://weatherwidget.io/), get real time weather updates in the Toronto Area.
30 | 
31 | [![Weather](assets/weather.jpg)](https://anthonytedja.github.io/notion/weather/)
32 | 
33 | `Clock` : Analog display of local time.
34 | 
35 | [![Clock](assets/clock.jpg)](https://anthonytedja.github.io/notion/clock/)
36 | 
37 | `Time` : Display local time in English text, a fork from [Text Clock](https://github.com/searleb/text-clock-chrome).
38 | 
39 | [![Time](assets/time.jpg)](https://anthonytedja.github.io/notion/time/)
40 | 
41 | `Cat` : Poke the sleepy cat to see it roll over and yawn!
42 | 
43 | [![Cat](assets/cat.jpg)](https://anthonytedja.github.io/notion/cat/)
44 | 
45 | `Kirby` : Poke Kirby to wake it up from its sleep!
46 | 
47 | [![Kirby](assets/kirby.jpg)](https://anthonytedja.github.io/notion/kirby/)
48 | 
49 | `Rimuru` : Poke Rimuru the Slime to see it jump! Pixel Artist: [pixelcatto](https://www.deviantart.com/pixelcatto/art/Rimuru-Tempest-animation-784802109).
50 | 
51 | [![Rimuru](assets/rimuru.jpg)](https://anthonytedja.github.io/notion/rimuru/)
52 | 
53 | `Bunny` : Poke the chubby bunny to see it try and catch its breath!
54 | 
55 | [![Bunny](assets/bunny.jpg)](https://anthonytedja.github.io/notion/bunny/)
56 | 
57 | ## Features
58 | 
59 | - Supported for Mobile App and Desktop Page
60 | - ~V2: JS Local Storage to save theme settings~
61 | - V3: JS Media Queries to automatically match theme settings
62 | 
63 | ## Built With
64 | 
65 | - CodePen
66 | - Visual Studio Code
67 | 


--------------------------------------------------------------------------------
/assets/bunny.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/bunny.jpg


--------------------------------------------------------------------------------
/assets/cat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/cat.jpg


--------------------------------------------------------------------------------
/assets/clock.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/clock.jpg


--------------------------------------------------------------------------------
/assets/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/demo.gif


--------------------------------------------------------------------------------
/assets/kirby.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/kirby.jpg


--------------------------------------------------------------------------------
/assets/notion.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/notion.jpg


--------------------------------------------------------------------------------
/assets/pomodoro.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/pomodoro.jpg


--------------------------------------------------------------------------------
/assets/rimuru.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/rimuru.jpg


--------------------------------------------------------------------------------
/assets/settings.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/settings.jpg


--------------------------------------------------------------------------------
/assets/time.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/time.jpg


--------------------------------------------------------------------------------
/assets/weather.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/weather.jpg


--------------------------------------------------------------------------------
/assets/widgets.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/assets/widgets.gif


--------------------------------------------------------------------------------
/bunny/bunny.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/bunny/bunny.gif


--------------------------------------------------------------------------------
/bunny/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   	<meta charset="UTF-8">
 5 |   	<title>Bunny</title>
 6 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 7 |   	<link rel="stylesheet" href="style.css">
 8 | 	<!-- Global site tag (gtag.js) - Google Analytics -->
 9 | 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-QX1JKFKCRG"></script>
10 | 	<script>
11 | 	window.dataLayer = window.dataLayer || [];
12 | 	function gtag(){dataLayer.push(arguments);}
13 | 	gtag('js', new Date());
14 | 
15 | 	gtag('config', 'G-QX1JKFKCRG');
16 | 	</script>
17 | </head>
18 | <body>
19 | 	<div class="container">
20 | 		<img src="bunny.gif" id="image" />
21 | 	</div>
22 | 	<a id="logo" href="https://github.com/anthonytedja" onclick="event.stopPropagation()"><i class="fa fa-github fa-lg"></i></a>
23 |   	<script src="script.js"></script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/bunny/script.js:
--------------------------------------------------------------------------------
 1 | const touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
 2 | document.getElementById('image').addEventListener(touchEvent, function(e) {
 3 | 	if (!e) var e = window.event;
 4 | 	e.cancelBubble = true;
 5 | 	if (e.stopPropagation) e.stopPropagation();
 6 | 	console.log('animate');
 7 | 	image = document.getElementById('image');
 8 | 	image.src = 'bunny.gif';
 9 | });
10 | 
11 | var image = (new Image().src = 'bunny.gif');
12 | 
13 | /* FOR JS LOCAL STORAGE SETTINGS
14 | window.addEventListener(touchEvent, mode);
15 | 
16 | function mode() {
17 | 	const currentTheme = localStorage.getItem('bunny-data-theme');
18 | 	console.log(currentTheme);
19 | 	if (currentTheme == 'dark') {
20 | 		light();
21 | 	} else {
22 | 		dark();
23 | 	}
24 | }
25 | 
26 | function light() {
27 | 	localStorage.setItem('bunny-data-theme', 'light');
28 | 	document.documentElement.setAttribute('bunny-data-theme', 'light');
29 | }
30 | 
31 | function dark() {
32 | 	localStorage.setItem('bunny-data-theme', 'dark');
33 | 	document.documentElement.setAttribute('bunny-data-theme', 'dark');
34 | }
35 | 
36 | let currentTheme = localStorage.getItem('bunny-data-theme');
37 | 
38 | if (currentTheme == 'light') {
39 | 	light();
40 | } else {
41 | 	dark();
42 | }
43 | */
44 | 
45 | // DYNAMIC THEME SETTINGS BASED ON OS PREFERENCE
46 | 
47 | function light() {
48 | 	document.documentElement.setAttribute('bunny-data-theme', 'light');
49 | }
50 | 
51 | function dark() {
52 | 	document.documentElement.setAttribute('bunny-data-theme', 'dark');
53 | }
54 | 
55 | if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
56 | 	dark();
57 | } else {
58 | 	light();
59 | }
60 | 
61 | window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
62 | 	if (event.matches) {
63 | 		dark();
64 | 	} else {
65 | 		light();
66 | 	}
67 | });
68 | 


--------------------------------------------------------------------------------
/bunny/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--main-bg-color: #fff;
 3 | 	--main-text-color: #f58f70;
 4 | }
 5 | 
 6 | [bunny-data-theme="dark"] {
 7 | 	--main-bg-color: #191919;
 8 | 	--main-text-color: #f58f70;
 9 | }
10 | 
11 | * {
12 | 	box-sizing: border-box;
13 | 	transition: all ease 0.2s;
14 | 	color: var(--main-text-color);
15 | }
16 | 
17 | body {
18 | 	margin: 40px auto 20px;
19 | 	display: flex;
20 | 	flex-direction: column;
21 | 	justify-content: space-between;
22 | 	align-items: center;
23 | 	background-color: var(--main-bg-color);
24 | 	position: relative;
25 | 	transition: all ease 0.2s;
26 | 	overflow: hidden;
27 | }
28 | 
29 | img {
30 | 	max-width: 100%;
31 | 	max-height: 100%;
32 | }
33 | 
34 | .container {
35 | 	max-height: 16em;
36 | 	max-width: 16em;
37 | 	display: flex;
38 | 	justify-content: center;
39 | 	align-items: center;
40 | 	background-color: var(--main-bg-color);
41 | 	background-position: center center;
42 | 	background-size: cover;
43 | 	transition: all ease 0.2s;
44 | 	user-select: none;
45 | 	border-radius: 50%;
46 | 	/* border: 4px solid var(--main-text-color); */
47 | }
48 | 
49 | .container:hover {
50 | 	cursor: pointer;
51 | }
52 | 
53 | .container:active {
54 | 	transform: scale(1.1);
55 | }
56 | 
57 | #logo {
58 | 	display: flex;
59 | 	justify-content: center;
60 | 	align-items: center;
61 | 	text-decoration: none;
62 | 	font-size: 40px;
63 | 	position: absolute;
64 | 	margin-top: 358px;
65 | }
66 | 
67 | #logo:hover {
68 | 	opacity: 0.3;
69 | 	transform: scale(1.1);
70 | }
71 | 
72 | @media screen and (max-width:750px) {
73 | 	#logo {
74 | 		display: none;
75 | 	}
76 | }


--------------------------------------------------------------------------------
/cat/cat-animate.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/cat/cat-animate.gif


--------------------------------------------------------------------------------
/cat/cat-idle.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/cat/cat-idle.gif


--------------------------------------------------------------------------------
/cat/cat.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/cat/cat.gif


--------------------------------------------------------------------------------
/cat/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   	<meta charset="UTF-8">
 5 |   	<title>Cat</title>
 6 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 7 |   	<link rel="stylesheet" href="style.css">
 8 | 	<!-- Global site tag (gtag.js) - Google Analytics -->
 9 | 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-GP5BBLEH9E"></script>
10 | 	<script>
11 | 	window.dataLayer = window.dataLayer || [];
12 | 	function gtag(){dataLayer.push(arguments);}
13 | 	gtag('js', new Date());
14 | 
15 | 	gtag('config', 'G-GP5BBLEH9E');
16 | 	</script>
17 | </head>
18 | <body>
19 | 	<div class="container">
20 | 		<img src="cat.gif" id="image" />
21 | 	</div>
22 | 	<a id="logo" href="https://github.com/anthonytedja" onclick="event.stopPropagation()"><i class="fa fa-github fa-lg"></i></a>
23 |   	<script src="script.js"></script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/cat/script.js:
--------------------------------------------------------------------------------
 1 | const touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
 2 | document.getElementById('image').addEventListener(touchEvent, animate);
 3 | 
 4 | function animate() {
 5 | 	if (!e) var e = window.event;
 6 | 	e.cancelBubble = true;
 7 | 	if (e.stopPropagation) e.stopPropagation();
 8 | 
 9 | 	if (animate.isRunning) return;
10 | 	animate.isRunning = true;
11 | 
12 | 	console.log('animate');
13 | 	image = document.getElementById('image');
14 | 	image.src = 'cat-animate.gif';
15 | 
16 | 	setTimeout(() => {
17 | 		image.src = 'cat.gif';
18 | 		animate.isRunning = false;
19 | 	}, 3675);
20 | }
21 | 
22 | var image = (new Image().src = 'cat.gif');
23 | 
24 | /* FOR JS LOCAL STORAGE SETTINGS
25 | window.addEventListener(touchEvent, mode);
26 | 
27 | function mode() {
28 | 	const currentTheme = localStorage.getItem('cat-data-theme');
29 | 	console.log(currentTheme);
30 | 	if (currentTheme == 'dark') {
31 | 		light();
32 | 	} else {
33 | 		dark();
34 | 	}
35 | }
36 | 
37 | function light() {
38 | 	localStorage.setItem('cat-data-theme', 'light');
39 | 	document.documentElement.setAttribute('cat-data-theme', 'light');
40 | }
41 | 
42 | function dark() {
43 | 	localStorage.setItem('cat-data-theme', 'dark');
44 | 	document.documentElement.setAttribute('cat-data-theme', 'dark');
45 | }
46 | 
47 | let currentTheme = localStorage.getItem('cat-data-theme');
48 | 
49 | if (currentTheme == 'light') {
50 | 	light();
51 | } else {
52 | 	dark();
53 | }
54 | */
55 | 
56 | // DYNAMIC THEME SETTINGS BASED ON OS PREFERENCE
57 | 
58 | function light() {
59 | 	document.documentElement.setAttribute('cat-data-theme', 'light');
60 | }
61 | 
62 | function dark() {
63 | 	document.documentElement.setAttribute('cat-data-theme', 'dark');
64 | }
65 | 
66 | if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
67 | 	dark();
68 | } else {
69 | 	light();
70 | }
71 | 
72 | window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
73 | 	if (event.matches) {
74 | 		dark();
75 | 	} else {
76 | 		light();
77 | 	}
78 | });
79 | 


--------------------------------------------------------------------------------
/cat/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--main-bg-color: #fff;
 3 | 	--main-text-color: #f58f70;
 4 | }
 5 | 
 6 | [cat-data-theme="dark"] {
 7 | 	--main-bg-color: #191919;
 8 | 	--main-text-color: #f58f70;
 9 | }
10 | 
11 | * {
12 | 	box-sizing: border-box;
13 | 	transition: all ease 0.2s;
14 | 	color: var(--main-text-color);
15 | }
16 | 
17 | body {
18 | 	margin: 40px auto 20px;
19 | 	display: flex;
20 | 	flex-direction: column;
21 | 	justify-content: space-between;
22 | 	align-items: center;
23 | 	background-color: var(--main-bg-color);
24 | 	position: relative;
25 | 	transition: all ease 0.2s;
26 | 	overflow: hidden;
27 | }
28 | 
29 | img {
30 | 	max-width: 100%;
31 | 	max-height: 100%;
32 | }
33 | 
34 | .container {
35 | 	max-height: 16em;
36 | 	max-width: 16em;
37 | 	display: flex;
38 | 	justify-content: center;
39 | 	align-items: center;
40 | 	background-color: var(--main-bg-color);
41 | 	background-position: center center;
42 | 	background-size: cover;
43 | 	transition: all ease 0.2s;
44 | 	user-select: none;
45 | 	border-radius: 50%;
46 | 	/* border: 4px solid var(--main-text-color); */
47 | }
48 | 
49 | .container:hover {
50 | 	cursor: pointer;
51 | }
52 | 
53 | .container:active {
54 | 	transform: scale(0.95);
55 | }
56 | 
57 | #logo {
58 | 	display: flex;
59 | 	justify-content: center;
60 | 	align-items: center;
61 | 	text-decoration: none;
62 | 	font-size: 40px;
63 | 	position: absolute;
64 | 	margin-top: 358px;
65 | }
66 | 
67 | #logo:hover {
68 | 	opacity: 0.3;
69 | 	transform: scale(1.1);
70 | }
71 | 
72 | @media screen and (max-width:750px) {
73 | 	#logo {
74 | 		display: none;
75 | 	}
76 | }


--------------------------------------------------------------------------------
/clock/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   	<meta charset="UTF-8">
 5 |   	<title>Clock</title>
 6 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 7 |   	<link rel="stylesheet" href="style.css">
 8 | 	<!-- Global site tag (gtag.js) - Google Analytics -->
 9 | 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-2XZSPNNWJ4"></script>
10 | 	<script>
11 | 	window.dataLayer = window.dataLayer || [];
12 | 	function gtag(){dataLayer.push(arguments);}
13 | 	gtag('js', new Date());
14 | 
15 | 	gtag('config', 'G-2XZSPNNWJ4');
16 | 	</script>
17 | </head>
18 | <body>
19 | 	<div class="clock">
20 | 		<div class="hour"></div>
21 | 		<div class="min"></div>
22 | 		<div class="sec"></div>
23 | 	</div>
24 | 	<a id="logo" href="https://github.com/anthonytedja" onclick="event.stopPropagation()"><i class="fa fa-github fa-lg"></i></a>
25 |   	<script src="script.js"></script>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/clock/script.js:
--------------------------------------------------------------------------------
 1 | const deg = 6;
 2 | const hour = document.querySelector('.hour');
 3 | const min = document.querySelector('.min');
 4 | const sec = document.querySelector('.sec');
 5 | 
 6 | const setClock = () => {
 7 | 	let day = new Date();
 8 | 	let hh = day.getHours() * 30;
 9 | 	let mm = day.getMinutes() * deg;
10 | 	let ss = day.getSeconds() * deg;
11 | 
12 | 	hour.style.transform = `rotateZ(${hh + mm / 12}deg)`;
13 | 	min.style.transform = `rotateZ(${mm}deg)`;
14 | 	sec.style.transform = `rotateZ(${ss}deg)`;
15 | };
16 | 
17 | setClock();
18 | setInterval(setClock, 1000);
19 | 
20 | /* FOR JS LOCAL STORAGE SETTINGS
21 | let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
22 | 
23 | window.addEventListener(touchEvent, mode);
24 | 
25 | function mode() {
26 | 	const currentTheme = localStorage.getItem('clock-data-theme');
27 | 	console.log(currentTheme);
28 | 	if (currentTheme == 'dark') {
29 | 		light();
30 | 	} else {
31 | 		dark();
32 | 	}
33 | }
34 | 
35 | function light() {
36 | 	localStorage.setItem('clock-data-theme', 'light');
37 | 	document.documentElement.setAttribute('clock-data-theme', 'light');
38 | }
39 | 
40 | function dark() {
41 | 	localStorage.setItem('clock-data-theme', 'dark');
42 | 	document.documentElement.setAttribute('clock-data-theme', 'dark');
43 | }
44 | 
45 | let currentTheme = localStorage.getItem('clock-data-theme');
46 | 
47 | if (currentTheme == 'light') {
48 | 	light();
49 | } else {
50 | 	dark();
51 | }
52 | */
53 | 
54 | // DYNAMIC THEME SETTINGS BASED ON OS PREFERENCE
55 | 
56 | function light() {
57 | 	document.documentElement.setAttribute('clock-data-theme', 'light');
58 | }
59 | 
60 | function dark() {
61 | 	document.documentElement.setAttribute('clock-data-theme', 'dark');
62 | }
63 | 
64 | if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
65 | 	dark();
66 | } else {
67 | 	light();
68 | }
69 | 
70 | window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
71 | 	if (event.matches) {
72 | 		dark();
73 | 	} else {
74 | 		light();
75 | 	}
76 | });
77 | 


--------------------------------------------------------------------------------
/clock/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--main-bg-color: #fff;
  3 | 	--main-text-color: #f58f70;
  4 | 	--main-sec-color: #37352f;
  5 | 	--main-border-color: #37352f;
  6 | }
  7 | 
  8 | [clock-data-theme="dark"] {
  9 | 	--main-bg-color: #191919;
 10 | 	--main-text-color: #f58f70;
 11 | 	--main-sec-color: #fff;
 12 | 	--main-border-color: #fff;
 13 | }
 14 | 
 15 | * {
 16 | 	box-sizing: border-box;
 17 | 	transition: all ease 0.2s;
 18 | 	color: var(--main-text-color);
 19 | }
 20 | 
 21 | body {
 22 | 	margin: 40px auto 20px;
 23 | 	display: flex;
 24 | 	flex-direction: column;
 25 | 	justify-content: space-between;
 26 | 	align-items: center;
 27 | 	font-size: 16px;
 28 | 	background-color: var(--main-bg-color);
 29 | 	position: relative;
 30 | 	transition: all ease 0.2s;
 31 | 	overflow: hidden;
 32 | }
 33 | 
 34 | .clock {
 35 | 	min-height: 16em;
 36 | 	min-width: 16em;
 37 | 	display: flex;
 38 | 	justify-content: center;
 39 | 	align-items: center;
 40 | 	background-color: var(--main-bg-color);
 41 | 	background-position: center center;
 42 | 	background-size: cover;
 43 | 	border-radius: 100%;
 44 | 	border: 4px solid var(--main-border-color);
 45 | 	/* box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
 46 | 		inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
 47 | 		inset 0 15px 15px rgba(0, 0, 0, 0.3); */
 48 | 	transition: all ease 0.2s;
 49 | }
 50 | 
 51 | .clock:before {
 52 | 	content: "";
 53 | 	height: 0.75rem;
 54 | 	width: 0.75rem;
 55 | 	background-color: var(--main-text-color);
 56 | 	border: 2px solid var(--main-bg-color);
 57 | 	position: absolute;
 58 | 	border-radius: 50%;
 59 | 	z-index: 1000;
 60 | 	transition: all ease 0.2s;
 61 | }
 62 | 
 63 | .hour,
 64 | .min,
 65 | .sec {
 66 | 	position: absolute;
 67 | 	display: flex;
 68 | 	justify-content: center;
 69 | 	border-radius: 50%;
 70 | }
 71 | 
 72 | .hour {
 73 | 	height: 10em;
 74 | 	width: 10em;
 75 | }
 76 | 
 77 | .hour:before {
 78 | 	content: "";
 79 | 	position: absolute;
 80 | 	height: 50%;
 81 | 	width: 6px;
 82 | 	background-color: var(--main-text-color);
 83 | 	border-radius: 6px;
 84 | }
 85 | 
 86 | .min {
 87 | 	height: 12em;
 88 | 	width: 12em;
 89 | }
 90 | 
 91 | .min:before {
 92 | 	content: "";
 93 | 	height: 50%;
 94 | 	width: 4px;
 95 | 	background-color: var(--main-text-color);
 96 | 	border-radius: 4px;
 97 | }
 98 | 
 99 | .sec {
100 | 	height: 13em;
101 | 	width: 13em;
102 | }
103 | 
104 | .sec:before {
105 | 	content: "";
106 | 	height: 60%;
107 | 	width: 2px;
108 | 	background-color: var(--main-sec-color);
109 | 	border-radius: 2px;
110 | }
111 | 
112 | #logo {
113 | 	display: flex;
114 | 	justify-content: center;
115 | 	align-items: center;
116 | 	text-decoration: none;
117 | 	font-size: 40px;
118 | 	position: absolute;
119 | 	margin-top: 358px;
120 | }
121 | 
122 | #logo:hover {
123 | 	opacity: 0.3;
124 | 	transform: scale(1.1);
125 | }
126 | 
127 | @media screen and (max-width:750px) {
128 | 	#logo {
129 | 		display: none;
130 | 	}
131 | }


--------------------------------------------------------------------------------
/kirby/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   	<meta charset="UTF-8">
 5 |   	<title>Kirby</title>
 6 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 7 |   	<link rel="stylesheet" href="style.css">
 8 | 	<!-- Global site tag (gtag.js) - Google Analytics -->
 9 | 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-3CN2E0WYJ5"></script>
10 | 	<script>
11 | 	window.dataLayer = window.dataLayer || [];
12 | 	function gtag(){dataLayer.push(arguments);}
13 | 	gtag('js', new Date());
14 | 
15 | 	gtag('config', 'G-3CN2E0WYJ5');
16 | 	</script>
17 | </head>
18 | <body>
19 | 	<div class="container">
20 | 		<img src="kirby-asleep.gif" id="image" />
21 | 	</div>
22 | 	<a id="logo" href="https://github.com/anthonytedja" onclick="event.stopPropagation()"><i class="fa fa-github fa-lg"></i></a>
23 |   	<script src="script.js"></script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/kirby/kirby-asleep.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/kirby/kirby-asleep.gif


--------------------------------------------------------------------------------
/kirby/kirby-awake.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/kirby/kirby-awake.gif


--------------------------------------------------------------------------------
/kirby/kirby.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/kirby/kirby.gif


--------------------------------------------------------------------------------
/kirby/script.js:
--------------------------------------------------------------------------------
 1 | const touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
 2 | document.getElementById('image').addEventListener(touchEvent, animate);
 3 | 
 4 | function animate() {
 5 | 	if (!e) var e = window.event;
 6 | 	e.cancelBubble = true;
 7 | 	if (e.stopPropagation) e.stopPropagation();
 8 | 
 9 | 	if (animate.isRunning) return;
10 | 	animate.isRunning = true;
11 | 
12 | 	console.log('animate');
13 | 	image = document.getElementById('image');
14 | 	image.src = 'kirby-awake.gif';
15 | 
16 | 	setTimeout(() => {
17 | 		image.src = 'kirby-asleep.gif';
18 | 		animate.isRunning = false;
19 | 	}, 3675);
20 | }
21 | 
22 | var image = (new Image().src = 'kirby.gif');
23 | 
24 | /* FOR JS LOCAL STORAGE SETTINGS
25 | window.addEventListener(touchEvent, mode);
26 | 
27 | function mode() {
28 | 	const currentTheme = localStorage.getItem('kirby-data-theme');
29 | 	console.log(currentTheme);
30 | 	if (currentTheme == 'dark') {
31 | 		light();
32 | 	} else {
33 | 		dark();
34 | 	}
35 | }
36 | 
37 | function light() {
38 | 	localStorage.setItem('kirby-data-theme', 'light');
39 | 	document.documentElement.setAttribute('kirby-data-theme', 'light');
40 | }
41 | 
42 | function dark() {
43 | 	localStorage.setItem('kirby-data-theme', 'dark');
44 | 	document.documentElement.setAttribute('kirby-data-theme', 'dark');
45 | }
46 | 
47 | let currentTheme = localStorage.getItem('kirby-data-theme');
48 | 
49 | if (currentTheme == 'light') {
50 | 	light();
51 | } else {
52 | 	dark();
53 | }
54 | */
55 | 
56 | // DYNAMIC THEME SETTINGS BASED ON OS PREFERENCE
57 | 
58 | function light() {
59 | 	document.documentElement.setAttribute('kirby-data-theme', 'light');
60 | }
61 | 
62 | function dark() {
63 | 	document.documentElement.setAttribute('kirby-data-theme', 'dark');
64 | }
65 | 
66 | if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
67 | 	dark();
68 | } else {
69 | 	light();
70 | }
71 | 
72 | window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
73 | 	if (event.matches) {
74 | 		dark();
75 | 	} else {
76 | 		light();
77 | 	}
78 | });
79 | 


--------------------------------------------------------------------------------
/kirby/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--main-bg-color: #fff;
 3 | 	--main-text-color: #f58f70;
 4 | }
 5 | 
 6 | [kirby-data-theme="dark"] {
 7 | 	--main-bg-color: #191919;
 8 | 	--main-text-color: #f58f70;
 9 | }
10 | 
11 | * {
12 | 	box-sizing: border-box;
13 | 	transition: all ease 0.2s;
14 | 	color: var(--main-text-color);
15 | }
16 | 
17 | body {
18 | 	margin: 40px auto 20px;
19 | 	display: flex;
20 | 	flex-direction: column;
21 | 	justify-content: space-between;
22 | 	align-items: center;
23 | 	background-color: var(--main-bg-color);
24 | 	position: relative;
25 | 	transition: all ease 0.2s;
26 | 	overflow: hidden;
27 | }
28 | 
29 | img {
30 | 	max-width: 100%;
31 | 	max-height: 100%;
32 | }
33 | 
34 | .container {
35 | 	max-height: 16em;
36 | 	max-width: 16em;
37 | 	display: flex;
38 | 	justify-content: center;
39 | 	align-items: center;
40 | 	background-color: var(--main-bg-color);
41 | 	background-position: center center;
42 | 	background-size: cover;
43 | 	transition: all ease 0.2s;
44 | 	user-select: none;
45 | 	border-radius: 50%;
46 | 	/* border: 4px solid var(--main-text-color); */
47 | }
48 | 
49 | .container:hover {
50 | 	cursor: pointer;
51 | }
52 | 
53 | .container:active {
54 | 	transform: scale(0.95);
55 | }
56 | 
57 | #logo {
58 | 	display: flex;
59 | 	justify-content: center;
60 | 	align-items: center;
61 | 	text-decoration: none;
62 | 	font-size: 40px;
63 | 	position: absolute;
64 | 	margin-top: 358px;
65 | }
66 | 
67 | #logo:hover {
68 | 	opacity: 0.3;
69 | 	transform: scale(1.1);
70 | }
71 | 
72 | @media screen and (max-width:750px) {
73 | 	#logo {
74 | 		display: none;
75 | 	}
76 | }


--------------------------------------------------------------------------------
/pomodoro/alarm.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/pomodoro/alarm.mp3


--------------------------------------------------------------------------------
/pomodoro/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   	<meta charset="UTF-8">
 5 |   	<title>Pomodoro Timer</title>
 6 |   	<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 8 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 9 | 	<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald'><link rel="stylesheet" href="style.css">
10 | 	<!-- Global site tag (gtag.js) - Google Analytics -->
11 | 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-8BHWQ6Z3KD"></script>
12 | 	<script>
13 | 	window.dataLayer = window.dataLayer || [];
14 | 	function gtag(){dataLayer.push(arguments);}
15 | 	gtag('js', new Date());
16 | 
17 | 	gtag('config', 'G-8BHWQ6Z3KD');
18 | 	</script>
19 | </head>
20 | <body>
21 | 	<div class="countdown" id="countdown">
22 | 		<div class="countdown__fill" id="ticker"></div>
23 | 		<div class="countdown__digit" id="seconds"></div>
24 | 	</div>
25 | 	<a id="logo" href="https://github.com/anthonytedja" onclick="event.stopPropagation()"><i class="fa fa-github fa-lg"></i></a>
26 |   	<script  src="script.js"></script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/pomodoro/script.js:
--------------------------------------------------------------------------------
  1 | const touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
  2 | const alarm = new Audio('alarm.mp3');
  3 | 
  4 | function Timer(duration, element) {
  5 | 	var self = this;
  6 | 	this.duration = duration;
  7 | 	this.element = element;
  8 | 	this.running = false;
  9 | 
 10 | 	this.els = {
 11 | 		ticker: document.getElementById('ticker'),
 12 | 		seconds: document.getElementById('seconds')
 13 | 	};
 14 | 
 15 | 	var clickTimer = null;
 16 | 
 17 | 	this.element.addEventListener(touchEvent, function(e) {
 18 | 		if (!e) var e = window.event;
 19 | 		e.cancelBubble = true;
 20 | 		if (e.stopPropagation) e.stopPropagation();
 21 | 		console.log(e.detail);
 22 | 
 23 | 		if (clickTimer == null) {
 24 | 			if (self.running) {
 25 | 				self.reset();
 26 | 			} else {
 27 | 				self.start();
 28 | 			}
 29 | 			clickTimer = setTimeout(function() {
 30 | 				clickTimer = null;
 31 | 			}, 400);
 32 | 		} else {
 33 | 			clearTimeout(clickTimer);
 34 | 			clickTimer = null;
 35 | 			e.preventDefault();
 36 | 			timermode();
 37 | 		}
 38 | 	});
 39 | }
 40 | 
 41 | Timer.prototype.start = function() {
 42 | 	var self = this;
 43 | 	var start = null;
 44 | 	this.running = true;
 45 | 	var remainingSeconds = this.duration / 1000;
 46 | 	this.els.seconds.textContent = fmtMSS(remainingSeconds);
 47 | 
 48 | 	function draw(now) {
 49 | 		if (!start) start = now;
 50 | 		var diff = now - start;
 51 | 		var newSeconds = Math.ceil((self.duration - diff) / 1000);
 52 | 
 53 | 		if (diff <= self.duration) {
 54 | 			self.els.ticker.style.height = 100 - diff / self.duration * 100 + '%';
 55 | 
 56 | 			if (newSeconds != remainingSeconds) {
 57 | 				self.els.seconds.textContent = fmtMSS(newSeconds);
 58 | 				remainingSeconds = newSeconds;
 59 | 			}
 60 | 
 61 | 			self.frameReq = window.requestAnimationFrame(draw);
 62 | 		} else {
 63 | 			alarm.play();
 64 | 			alarm.loop = true;
 65 | 			this.running = false;
 66 | 			self.els.seconds.textContent = 0;
 67 | 			self.els.ticker.style.height = '0%';
 68 | 			self.element.classList.add('countdown--ended');
 69 | 		}
 70 | 	}
 71 | 
 72 | 	self.frameReq = window.requestAnimationFrame(draw);
 73 | };
 74 | 
 75 | Timer.prototype.reset = function() {
 76 | 	alarm.pause();
 77 | 	alarm.currentTime = 0;
 78 | 	this.running = false;
 79 | 	window.cancelAnimationFrame(this.frameReq);
 80 | 	this.els.seconds.textContent = fmtMSS(this.duration / 1000);
 81 | 	this.els.ticker.style.height = null;
 82 | 	this.element.classList.remove('countdown--ended');
 83 | };
 84 | 
 85 | Timer.prototype.setDuration = function(duration) {
 86 | 	this.duration = duration;
 87 | 	this.els.seconds.textContent = this.duration / 1000;
 88 | };
 89 | 
 90 | var timer = new Timer(1500000, document.getElementById('countdown'));
 91 | timer.reset();
 92 | 
 93 | function fmtMSS(s) {
 94 | 	return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s;
 95 | }
 96 | 
 97 | function timermode() {
 98 | 	const timertype = document.documentElement.getAttribute('pomodoro-timer-mode');
 99 | 	console.log(timertype);
100 | 	if (timertype == 'break') {
101 | 		workmode();
102 | 	} else {
103 | 		breakmode();
104 | 	}
105 | }
106 | 
107 | function workmode() {
108 | 	document.documentElement.setAttribute('pomodoro-timer-mode', 'work');
109 | 	document.querySelector(':root').style.setProperty('--main-text-color', '#f58f70');
110 | 	timer.duration = 1500000;
111 | 	timer.reset();
112 | }
113 | 
114 | function breakmode() {
115 | 	document.documentElement.setAttribute('pomodoro-timer-mode', 'break');
116 | 	document.querySelector(':root').style.setProperty('--main-text-color', '#8cc8ff');
117 | 	timer.duration = 300000;
118 | 	timer.reset();
119 | }
120 | 
121 | /* FOR JS LOCAL STORAGE SETTINGS
122 | window.addEventListener(touchEvent, mode);
123 | 
124 | function mode() {
125 | 	const currentTheme = localStorage.getItem('pomodoro-timer-data-theme');
126 | 	console.log(currentTheme);
127 | 	if (currentTheme == 'dark') {
128 | 		light();
129 | 	} else {
130 | 		dark();
131 | 	}
132 | }
133 | 
134 | function light() {
135 | 	localStorage.setItem('pomodoro-timer-data-theme', 'light');
136 | 	document.documentElement.setAttribute('pomodoro-timer-data-theme', 'light');
137 | }
138 | 
139 | function dark() {
140 | 	localStorage.setItem('pomodoro-timer-data-theme', 'dark');
141 | 	document.documentElement.setAttribute('pomodoro-timer-data-theme', 'dark');
142 | }
143 | 
144 | let currentTheme = localStorage.getItem('pomodoro-timer-data-theme');
145 | 
146 | if (currentTheme == 'light') {
147 | 	light();
148 | } else {
149 | 	dark();
150 | }
151 | */
152 | 
153 | // DYNAMIC THEME SETTINGS BASED ON OS PREFERENCE
154 | 
155 | function light() {
156 | 	document.documentElement.setAttribute('pomodoro-timer-data-theme', 'light');
157 | }
158 | 
159 | function dark() {
160 | 	document.documentElement.setAttribute('pomodoro-timer-data-theme', 'dark');
161 | }
162 | 
163 | if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
164 | 	dark();
165 | } else {
166 | 	light();
167 | }
168 | 
169 | window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
170 | 	if (event.matches) {
171 | 		dark();
172 | 	} else {
173 | 		light();
174 | 	}
175 | });
176 | 


--------------------------------------------------------------------------------
/pomodoro/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--main-bg-color: #fff;
  3 | 	--main-text-color: #f58f70;
  4 | 	--main-fill-color: #e2e2e2;
  5 | 	--main-border-color: #37352f;
  6 | }
  7 | 
  8 | [pomodoro-timer-data-theme="dark"] {
  9 | 	--main-bg-color: #191919;
 10 | 	--main-text-color: #f58f70;
 11 | 	--main-fill-color: #252525;
 12 | 	--main-border-color: #fff;
 13 | }
 14 | 
 15 | * {
 16 | 	touch-action: none;
 17 | 	color: var(--main-text-color);
 18 | 	box-sizing: border-box;
 19 | 	transition: all ease 0.2s;
 20 | }
 21 | 
 22 | body {
 23 | 	margin: 40px auto 20px;
 24 | 	background: var(--main-bg-color);
 25 | 	font-family: 'Oswald', sans-serif;
 26 | 	display: flex;
 27 | 	justify-content: center;
 28 | 	align-items: center;
 29 | 	overflow: hidden;
 30 | 	position: relative;
 31 | }
 32 | 
 33 | .countdown {
 34 | 	display: block;
 35 | 	position: relative;
 36 | 	display: flex;
 37 | 	justify-content: center;
 38 | 	align-items: center;
 39 | 	min-height: 16em;
 40 | 	min-width: 16em;
 41 | 	overflow: hidden;
 42 | 	cursor: pointer;
 43 | 	transition: width, height, border-radius, font-size;
 44 | 	border-radius: 50%;
 45 | 	border: 4px solid var(--main-border-color);
 46 | 	/*box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
 47 | 		inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
 48 | 		inset 0 15px 15px rgba(0, 0, 0, 0.3);*/
 49 | }
 50 | 
 51 | .countdown--ended {
 52 | 	-webkit-animation: buzz 0.5s;
 53 | 	animation: buzz 0.5s;
 54 | 	animation-iteration-count: infinite;
 55 | }
 56 | 
 57 | .countdown:active {
 58 | 	transform: scale(1.02);
 59 | }
 60 | 
 61 | .countdown__fill {
 62 | 	pointer-events: none;
 63 | 	display: block;
 64 | 	width: 100%;
 65 | 	height: 100%;
 66 | 	position: absolute;
 67 | 	left: 0;
 68 | 	bottom: 0;
 69 | 	background: var(--main-fill-color);
 70 | 	opacity: 0.5;
 71 | }
 72 | 
 73 | .countdown__digit {
 74 | 	width: 100%;
 75 | 	text-align: center;
 76 | 	pointer-events: none;
 77 | 	-webkit-user-select: none;
 78 | 	-moz-user-select: none;
 79 | 	-ms-user-select: none;
 80 | 	user-select: none;
 81 | 	z-index: 1;
 82 | 	font-size: 5em;
 83 | }
 84 | 
 85 | @-webkit-keyframes buzz {
 86 | 	0% {
 87 | 		transform: rotate(0);
 88 | 	}
 89 | 
 90 | 	10%, 30%, 50%, 70%, 90% {
 91 | 		transform: rotate(6deg);
 92 | 	}
 93 | 
 94 | 	20%, 40%, 60%, 80% {
 95 | 		transform: rotate(-6deg);
 96 | 	}
 97 | 
 98 | 	100% {
 99 | 		transform: rotate(0);
100 | 	}
101 | }
102 | 
103 | @keyframes buzz {
104 | 	0% {
105 | 		transform: rotate(0);
106 | 	}
107 | 
108 | 	10%, 30%, 50%, 70%, 90% {
109 | 		transform: rotate(6deg);
110 | 	}
111 | 
112 | 	20%, 40%, 60%, 80% {
113 | 		transform: rotate(-6deg);
114 | 	}
115 | 
116 | 	100% {
117 | 		transform: rotate(0);
118 | 	}
119 | }
120 | 
121 | #logo {
122 | 	display: flex;
123 | 	justify-content: center;
124 | 	align-items: center;
125 | 	text-decoration: none;
126 | 	font-size: 40px;
127 | 	position: absolute;
128 | 	margin-top: 500px;
129 | }
130 | 
131 | #logo:hover {
132 | 	opacity: 0.3;
133 | 	transform: scale(1.1);
134 | }
135 | 
136 | @media screen and (max-width:750px) {
137 | 	#logo {
138 | 		display: none;
139 | 	}
140 | }


--------------------------------------------------------------------------------
/rimuru/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   	<meta charset="UTF-8">
 5 |   	<title>Rimuru</title>
 6 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 7 |   	<link rel="stylesheet" href="style.css">
 8 | 	<!-- Global site tag (gtag.js) - Google Analytics -->
 9 | 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-EMEVLSRYW0"></script>
10 | 	<script>
11 | 	window.dataLayer = window.dataLayer || [];
12 | 	function gtag(){dataLayer.push(arguments);}
13 | 	gtag('js', new Date());
14 | 
15 | 	gtag('config', 'G-EMEVLSRYW0');
16 | 	</script>
17 | </head>
18 | <body>
19 | 	<div class="container">
20 | 		<img src="rimuru.gif" id="image" />
21 | 	</div>
22 | 	<a id="logo" href="https://github.com/anthonytedja" onclick="event.stopPropagation()"><i class="fa fa-github fa-lg"></i></a>
23 |   	<script src="script.js"></script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/rimuru/rimuru.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anthonytedja/notion/0840b7e92402f26fda57e6eaa9ab4b59377fd0a0/rimuru/rimuru.gif


--------------------------------------------------------------------------------
/rimuru/script.js:
--------------------------------------------------------------------------------
 1 | const touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
 2 | document.getElementById('image').addEventListener(touchEvent, function(e) {
 3 | 	if (!e) var e = window.event;
 4 | 	e.cancelBubble = true;
 5 | 	if (e.stopPropagation) e.stopPropagation();
 6 | 	console.log('animate');
 7 | 	image = document.getElementById('image');
 8 | 	image.src = 'rimuru.gif';
 9 | });
10 | 
11 | var image = (new Image().src = 'rimuru.gif');
12 | 
13 | /* FOR JS LOCAL STORAGE SETTINGS
14 | window.addEventListener(touchEvent, mode);
15 | 
16 | function mode() {
17 | 	const currentTheme = localStorage.getItem('rimuru-data-theme');
18 | 	console.log(currentTheme);
19 | 	if (currentTheme == 'dark') {
20 | 		light();
21 | 	} else {
22 | 		dark();
23 | 	}
24 | }
25 | 
26 | function light() {
27 | 	localStorage.setItem('rimuru-data-theme', 'light');
28 | 	document.documentElement.setAttribute('rimuru-data-theme', 'light');
29 | }
30 | 
31 | function dark() {
32 | 	localStorage.setItem('rimuru-data-theme', 'dark');
33 | 	document.documentElement.setAttribute('rimuru-data-theme', 'dark');
34 | }
35 | 
36 | let currentTheme = localStorage.getItem('rimuru-data-theme');
37 | 
38 | if (currentTheme == 'light') {
39 | 	light();
40 | } else {
41 | 	dark();
42 | }
43 | */
44 | 
45 | // DYNAMIC THEME SETTINGS BASED ON OS PREFERENCE
46 | 
47 | function light() {
48 | 	document.documentElement.setAttribute('rimuru-data-theme', 'light');
49 | }
50 | 
51 | function dark() {
52 | 	document.documentElement.setAttribute('rimuru-data-theme', 'dark');
53 | }
54 | 
55 | if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
56 | 	dark();
57 | } else {
58 | 	light();
59 | }
60 | 
61 | window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
62 | 	if (event.matches) {
63 | 		dark();
64 | 	} else {
65 | 		light();
66 | 	}
67 | });
68 | 


--------------------------------------------------------------------------------
/rimuru/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--main-bg-color: #fff;
 3 | 	--main-text-color: #f58f70;
 4 | }
 5 | 
 6 | [rimuru-data-theme="dark"] {
 7 | 	--main-bg-color: #191919;
 8 | 	--main-text-color: #f58f70;
 9 | }
10 | 
11 | * {
12 | 	box-sizing: border-box;
13 | 	transition: all ease 0.2s;
14 | 	color: var(--main-text-color);
15 | }
16 | 
17 | body {
18 | 	margin: 40px auto 20px;
19 | 	display: flex;
20 | 	flex-direction: column;
21 | 	justify-content: space-between;
22 | 	align-items: center;
23 | 	background-color: var(--main-bg-color);
24 | 	position: relative;
25 | 	transition: all ease 0.2s;
26 | 	overflow: hidden;
27 | }
28 | 
29 | img {
30 | 	max-width: 100%;
31 | 	max-height: 100%;
32 | }
33 | 
34 | .container {
35 | 	max-height: 16em;
36 | 	max-width: 16em;
37 | 	display: flex;
38 | 	justify-content: center;
39 | 	align-items: center;
40 | 	background-color: var(--main-bg-color);
41 | 	background-position: center center;
42 | 	background-size: cover;
43 | 	transition: all ease 0.2s;
44 | 	user-select: none;
45 | 	border-radius: 50%;
46 | 	/* border: 4px solid var(--main-border-color); */
47 | }
48 | 
49 | .container:hover {
50 | 	cursor: pointer;
51 | }
52 | 
53 | .container:active {
54 | 	transform: scale(1.1);
55 | }
56 | 
57 | #logo {
58 | 	display: flex;
59 | 	justify-content: center;
60 | 	align-items: center;
61 | 	text-decoration: none;
62 | 	font-size: 40px;
63 | 	position: absolute;
64 | 	margin-top: 358px;
65 | }
66 | 
67 | #logo:hover {
68 | 	opacity: 0.3;
69 | 	transform: scale(1.1);
70 | }
71 | 
72 | @media screen and (max-width:750px) {
73 | 	#logo {
74 | 		display: none;
75 | 	}
76 | }


--------------------------------------------------------------------------------
/time/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   	<meta charset="UTF-8">
 5 |   	<title>Time</title>
 6 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 7 |   	<link rel="stylesheet" href="style.css">
 8 | 	<!-- Global site tag (gtag.js) - Google Analytics -->
 9 | 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-N4K5Z7LQ9N"></script>
10 | 	<script>
11 | 	window.dataLayer = window.dataLayer || [];
12 | 	function gtag(){dataLayer.push(arguments);}
13 | 	gtag('js', new Date());
14 | 
15 | 	gtag('config', 'G-N4K5Z7LQ9N');
16 | 	</script>
17 | </head>
18 | <body>
19 | 	<div id="text-clock" class="noselect">
20 | 		<!-- line 1 -->
21 | 		<p id="line-1">
22 | 			<span id="it" class="active">IT</span>L<span id="is" class="active">IS</span>AS<span id="tgif">GTFI</span>
23 | 		</p>
24 | 		<!-- line 2 -->
25 | 		<p id="line-2">
26 | 			AC<span id="quarter" class="desc">QUARTER</span>BS
27 | 		</p>
28 | 		<!-- line 3 -->
29 | 		<p>
30 | 			<span id="twenty" class="desc">TWENTY</span><span id="five" class="desc">FIVE</span>X
31 | 		</p>
32 | 		<!-- line 4 -->
33 | 		<p>
34 | 			<span id="half" class="desc">HALF</span>B<span id="ten" class="desc">TEN</span>F<span id="to" class="desc">TO</span>
35 | 		</p>
36 | 		<!-- line 5 -->
37 | 		<p>
38 | 			<span id="past" class="desc">PAST</span>ERU<span id="nine" class="hr">NINE</span>
39 | 		</p>
40 | 		<!-- line 6 -->
41 | 		<p>
42 | 			<span id="one" class="hr">ONE</span><span id="six" class="hr">SIX</span><span id="three" class="hr">THREE</span>
43 | 		</p>
44 | 		<!-- line 7 -->
45 | 		<p id="line-7">
46 | 			<span id="four" class="hr">FOUR</span><span id="five-hr" class="hr">FIVE</span><span id="two" class="hr">TWO</span>
47 | 		</p>
48 | 		<!-- line 8 -->
49 | 		<p id="line-8">
50 | 			<span id="eight" class="hr">EIGHT</span><span id="eleven" class="hr">ELEVEN</span>
51 | 		</p>
52 | 		<!-- line 9 -->
53 | 		<p id="line-9">
54 | 			<span id="seven" class="hr">SEVEN</span><span id="twelve" class="hr">TWELVE</span>
55 | 		</p>
56 | 		<!-- line 10 -->
57 | 		<p id="line-10">
58 | 			<span id="ten-hr" class="hr">TEN</span>SE<span id="oclock" class="desc">OCLOCK</span>
59 | 		</p>
60 | 		<!-- line 11 -->
61 | 		<p id="line-11">
62 | 			<span id="midnight" class="hr">MIDNIGHT</span>
63 | 		</p>
64 | 	</div>
65 | 	<a id="logo" href="https://github.com/anthonytedja" onclick="event.stopPropagation()"><i class="fa fa-github fa-lg"></i></a>
66 |   	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="script.js"></script>
67 | </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/time/script.js:
--------------------------------------------------------------------------------
  1 | function textClock() {
  2 | 	var newDate = new Date(),
  3 | 		day = newDate.getDay(),
  4 | 		hours = newDate.getHours(),
  5 | 		minutes = newDate.getMinutes().toString(),
  6 | 		seconds = newDate.getSeconds().toString();
  7 | 
  8 | 	if (hours > 12 && hours !== 0 && hours !== 23) {
  9 | 		hours = hours - 12;
 10 | 	}
 11 | 	if (minutes < 10) {
 12 | 		minutes = 0 + minutes;
 13 | 	}
 14 | 	if (seconds < 10) {
 15 | 		seconds = 0 + seconds;
 16 | 	}
 17 | 
 18 | 	var minsSecs = minutes + seconds;
 19 | 	if (minsSecs > 3230) {
 20 | 		hours++;
 21 | 	}
 22 | 
 23 | 	if (day == 5) {
 24 | 		$('#tgif').html('TGIF');
 25 | 	}
 26 | 
 27 | 	hoursObj = {
 28 | 		1: '#one',
 29 | 		2: '#two',
 30 | 		3: '#three',
 31 | 		4: '#four',
 32 | 		5: '#five-hr',
 33 | 		6: '#six',
 34 | 		7: '#seven',
 35 | 		8: '#eight',
 36 | 		9: '#nine',
 37 | 		10: '#ten-hr',
 38 | 		11: '#eleven',
 39 | 		12: '#twelve',
 40 | 		13: '#one',
 41 | 		23: '#eleven',
 42 | 		24: '#midnight',
 43 | 		0: '#midnight'
 44 | 	};
 45 | 
 46 | 	updateHour(hoursObj[hours]);
 47 | 
 48 | 	if ((minsSecs >= 5730 && minsSecs < 6000) || (minsSecs >= 0 && minsSecs < 230)) {
 49 | 		if (hours !== 24 && hours !== 0) {
 50 | 			updateDesc('#oclock');
 51 | 		}
 52 | 	} else if (minsSecs >= 230 && minsSecs < 730) {
 53 | 		updateDesc('#five, #past');
 54 | 	} else if (minsSecs >= 730 && minsSecs < 1230) {
 55 | 		updateDesc('#ten, #past');
 56 | 	} else if (minsSecs >= 1230 && minsSecs < 1730) {
 57 | 		updateDesc('#quarter, #past');
 58 | 	} else if (minsSecs >= 1730 && minsSecs < 2230) {
 59 | 		updateDesc('#twenty, #past');
 60 | 	} else if (minsSecs >= 2230 && minsSecs < 2730) {
 61 | 		updateDesc('#twenty, #five, #past');
 62 | 	} else if (minsSecs >= 2730 && minsSecs < 3230) {
 63 | 		updateDesc('#half, #past');
 64 | 	} else if (minsSecs >= 3230 && minsSecs < 3730) {
 65 | 		updateDesc('#twenty, #five, #to');
 66 | 	} else if (minsSecs >= 3730 && minsSecs < 4230) {
 67 | 		updateDesc('#twenty, #to');
 68 | 	} else if (minsSecs >= 4230 && minsSecs < 4730) {
 69 | 		updateDesc('#quarter, #to');
 70 | 	} else if (minsSecs >= 4730 && minsSecs < 5230) {
 71 | 		updateDesc('#ten, #to');
 72 | 	} else if (minsSecs >= 5230 && minsSecs < 5730) {
 73 | 		updateDesc('#five, #to');
 74 | 	} else {
 75 | 		updateDesc();
 76 | 	}
 77 | }
 78 | 
 79 | function updateDesc(classes) {
 80 | 	$('.desc').removeClass('active');
 81 | 	$(classes).addClass('active');
 82 | }
 83 | 
 84 | function updateHour(classes) {
 85 | 	$('.hr').removeClass('active');
 86 | 	$(classes).addClass('active');
 87 | }
 88 | 
 89 | setInterval(function() {
 90 | 	textClock();
 91 | }, 1000);
 92 | 
 93 | textClock();
 94 | 
 95 | /* FOR JS LOCAL STORAGE SETTINGS
 96 | let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
 97 | 
 98 | window.addEventListener(touchEvent, mode);
 99 | 
100 | function mode() {
101 | 	const currentTheme = localStorage.getItem('time-data-theme');
102 | 	console.log(currentTheme);
103 | 	if (currentTheme === 'dark') {
104 | 		light();
105 | 	} else {
106 | 		dark();
107 | 	}
108 | }
109 | 
110 | function light() {
111 | 	localStorage.setItem('time-data-theme', 'light');
112 | 	document.documentElement.setAttribute('time-data-theme', 'light');
113 | }
114 | 
115 | function dark() {
116 | 	localStorage.setItem('time-data-theme', 'dark');
117 | 	document.documentElement.setAttribute('time-data-theme', 'dark');
118 | }
119 | 
120 | let currentTheme = localStorage.getItem('time-data-theme');
121 | 
122 | if (currentTheme == 'light') {
123 | 	light();
124 | } else {
125 | 	dark();
126 | }
127 | */
128 | 
129 | // DYNAMIC THEME SETTINGS BASED ON OS PREFERENCE
130 | 
131 | function light() {
132 | 	document.documentElement.setAttribute('time-data-theme', 'light');
133 | }
134 | 
135 | function dark() {
136 | 	document.documentElement.setAttribute('time-data-theme', 'dark');
137 | }
138 | 
139 | if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
140 | 	dark();
141 | } else {
142 | 	light();
143 | }
144 | 
145 | window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
146 | 	if (event.matches) {
147 | 		dark();
148 | 	} else {
149 | 		light();
150 | 	}
151 | });
152 | 


--------------------------------------------------------------------------------
/time/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--main-bg-color: #fff;
  3 | 	--main-text-color: #d9d9d9;
  4 | 	--main-time-color: #f58f70;
  5 | }
  6 | 
  7 | [time-data-theme="dark"] {
  8 | 	--main-bg-color: #191919;
  9 | 	--main-text-color: #333;
 10 | 	--main-time-color: #f58f70;
 11 | }
 12 | 
 13 | * {
 14 | 	transition: all ease 0.2s;
 15 | 	color: var(--main-time-color);
 16 | }
 17 | 
 18 | .noselect {
 19 | 	-webkit-touch-callout: none;
 20 | 	/* iOS Safari */
 21 | 	-webkit-user-select: none;
 22 | 	/* Safari */
 23 | 	-khtml-user-select: none;
 24 | 	/* Konqueror HTML */
 25 | 	-moz-user-select: none;
 26 | 	/* Old versions of Firefox */
 27 | 	-ms-user-select: none;
 28 | 	/* Internet Explorer/Edge */
 29 | 	user-select: none;
 30 | 	/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
 31 | }
 32 | 
 33 | body {
 34 | 	margin: 40px auto 20px;
 35 | 	background: var(--main-bg-color);
 36 | 	color: var(--main-text-color);
 37 | 	font-family: Helvetica, Arial;
 38 | 	text-align: justify;
 39 | 	overflow: hidden;
 40 | 	display: flex;
 41 | 	justify-content: center;
 42 | 	align-items: center;
 43 | 	overflow: hidden;
 44 | 	position: relative;
 45 | }
 46 | 
 47 | p, span {
 48 | 	color: var(--main-text-color);
 49 | 	transition: color 0.4s ease-out;
 50 | 	-ms-transition: color 0.4s ease-out;
 51 | 	-moz-transition: color 0.4s ease-out;
 52 | 	-webkit-transition: color 0.4s ease-out;
 53 | 	letter-spacing: 12.1px;
 54 | 	font-size: 17px;
 55 | }
 56 | 
 57 | #midnight {
 58 | 	color: var(--main-text-color);
 59 | 	letter-spacing: 23px;
 60 | }
 61 | 
 62 | #it, #is, span.active {
 63 | 	color: var(--main-time-color) !important;
 64 | 	font-weight: 750;
 65 | 	transition: color 0.4s ease-out;
 66 | 	-ms-transition: color 0.4s ease-out;
 67 | 	-moz-transition: color 0.4s ease-out;
 68 | 	-webkit-transition: color 0.4s ease-out;
 69 | }
 70 | 
 71 | #text-clock {
 72 | 	width: 250px;
 73 | 	position: relative;
 74 | 	text-transform: uppercase;
 75 | }
 76 | 
 77 | #line-1, #line-1 span {
 78 | 	letter-spacing: 13.9px;
 79 | }
 80 | 
 81 | #line-2, #line-2 span {
 82 | 	letter-spacing: 11.3px;
 83 | }
 84 | 
 85 | #line-7, #line-7 span {
 86 | 	letter-spacing: 11.8px;
 87 | }
 88 | 
 89 | #line-8, #line-8 span {
 90 | 	letter-spacing: 12.3px;
 91 | }
 92 | 
 93 | #line-9, #line-9 span {
 94 | 	letter-spacing: 11.6px;
 95 | }
 96 | 
 97 | #line-10, #line-10 span {
 98 | 	letter-spacing: 11.6px;
 99 | }
100 | 
101 | #logo {
102 | 	display: flex;
103 | 	justify-content: center;
104 | 	align-items: center;
105 | 	text-decoration: none;
106 | 	font-size: 40px;
107 | 	position: absolute;
108 | 	margin-top: 650px;
109 | }
110 | 
111 | #logo:hover {
112 | 	opacity: 0.3;
113 | 	transform: scale(1.1);
114 | }
115 | 
116 | @media screen and (max-width:750px) {
117 | 	#logo {
118 | 		display: none;
119 | 	}
120 | }


--------------------------------------------------------------------------------
/weather/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 |   	<title>Weather</title>
 6 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 7 |   	<link rel="stylesheet" href="style.css">
 8 | 	<!-- Global site tag (gtag.js) - Google Analytics -->
 9 | 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-39WWGPP5QV"></script>
10 | 	<script>
11 | 	window.dataLayer = window.dataLayer || [];
12 | 	function gtag(){dataLayer.push(arguments);}
13 | 	gtag('js', new Date());
14 | 
15 | 	gtag('config', 'G-39WWGPP5QV');
16 | 	</script>
17 | </head>
18 | <body>
19 | 	<a id="weather" class="weatherwidget-io inactiveLink" href="https://forecast7.com/en/43d65n79d38/toronto/" data-label_1="TORONTO" data-icons="Climacons Animated" data-mode="Current"></a>
20 | 	<a id="logo" href="https://github.com/anthonytedja" onclick="event.stopPropagation()"><i class="fa fa-github fa-lg"></i></a>
21 | 	<script  src="script.js"></script>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/weather/script.js:
--------------------------------------------------------------------------------
 1 | function script(d, s, id) {
 2 | 	var js,
 3 | 		fjs = d.getElementsByTagName(s)[0];
 4 | 	js = d.createElement(s);
 5 | 	js.id = id;
 6 | 	js.src = 'https://weatherwidget.io/js/widget.min.js';
 7 | 	fjs.parentNode.insertBefore(js, fjs);
 8 | }
 9 | 
10 | /* FOR JS LOCAL STORAGE SETTINGS
11 | let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
12 | 
13 | window.addEventListener(touchEvent, mode);
14 | 
15 | function mode() {
16 | 	const currentTheme = document.getElementById('weather').getAttribute('data-theme');
17 | 	console.log(currentTheme);
18 | 	if (currentTheme == 'gray') {
19 | 		light();
20 | 	} else {
21 | 		dark();
22 | 	}
23 | }
24 | 
25 | function light() {
26 | 	localStorage.setItem('data-theme', 'pure');
27 | 	document.documentElement.setAttribute('data-theme', 'pure');
28 | 	document.getElementById('weather').setAttribute('data-theme', 'pure');
29 | 	document.getElementById('weather').removeAttribute('data-basecolor');
30 | 	document.getElementById('weather').setAttribute('data-textcolor', '#37352f');
31 | 	document.getElementById('weather').removeAttribute('data-cloudfill');
32 | 	script(document, 'script', 'weatherwidget-io-js');
33 | }
34 | 
35 | function dark() {
36 | 	localStorage.setItem('data-theme', 'gray');
37 | 	document.documentElement.setAttribute('data-theme', 'gray');
38 | 	document.getElementById('weather').setAttribute('data-theme', 'gray');
39 | 	document.getElementById('weather').setAttribute('data-basecolor', '#191919');
40 | 	document.getElementById('weather').removeAttribute('data-textcolor');
41 | 	document.getElementById('weather').setAttribute('data-cloudfill', '#191919');
42 | 	script(document, 'script', 'weatherwidget-io-js');
43 | }
44 | 
45 | let currentTheme = localStorage.getItem('data-theme');
46 | 
47 | if (currentTheme == 'pure') {
48 | 	light();
49 | } else {
50 | 	dark();
51 | }
52 | */
53 | 
54 | // DYNAMIC THEME SETTINGS BASED ON OS PREFERENCE
55 | 
56 | function light() {
57 | 	document.documentElement.setAttribute('data-theme', 'pure');
58 | 	document.getElementById('weather').setAttribute('data-theme', 'pure');
59 | 	document.getElementById('weather').removeAttribute('data-basecolor');
60 | 	document.getElementById('weather').setAttribute('data-textcolor', '#37352f');
61 | 	document.getElementById('weather').removeAttribute('data-cloudfill');
62 | 	document.getElementById('weather').setAttribute('data-suncolor', '#F58f70');
63 | 	script(document, 'script', 'weatherwidget-io-js');
64 | }
65 | 
66 | function dark() {
67 | 	document.documentElement.setAttribute('data-theme', 'gray');
68 | 	document.getElementById('weather').setAttribute('data-theme', 'gray');
69 | 	document.getElementById('weather').setAttribute('data-basecolor', '#191919');
70 | 	document.getElementById('weather').removeAttribute('data-textcolor');
71 | 	document.getElementById('weather').setAttribute('data-cloudfill', '#191919');
72 | 	document.getElementById('weather').setAttribute('data-suncolor', '#F58f70');
73 | 	script(document, 'script', 'weatherwidget-io-js');
74 | }
75 | 
76 | if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
77 | 	dark();
78 | } else {
79 | 	light();
80 | }
81 | 
82 | window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
83 | 	if (event.matches) {
84 | 		dark();
85 | 	} else {
86 | 		light();
87 | 	}
88 | });
89 | 


--------------------------------------------------------------------------------
/weather/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --main-bg-color: #fff;
 3 | }
 4 | 
 5 | [data-theme="gray"] {
 6 |     --main-bg-color: #191919;
 7 | }
 8 | 
 9 | * {
10 |     transition: all ease 0.2s;
11 |     color: #f58f70;
12 | }
13 | 
14 | body {
15 |     margin: 0;
16 |     background-color: var(--main-bg-color);
17 |     overflow: hidden;
18 | }
19 | 
20 | .inactiveLink {
21 |     pointer-events: none;
22 |     cursor: default;
23 | }
24 | 
25 | #logo {
26 |     display: flex;
27 |     justify-content: center;
28 |     align-items: center;
29 |     text-decoration: none;
30 |     font-size: 40px;
31 |     position: relative;
32 |     margin-top: 100px;
33 |     text-align: center;
34 | }
35 | 
36 | #logo:hover {
37 |     opacity: 0.3;
38 |     transform: scale(1.1);
39 | }
40 | 
41 | @media screen and (max-width:750px) {
42 |     #logo {
43 |         display: none;
44 |     }
45 | }


--------------------------------------------------------------------------------