Skip to content

Instantly share code, notes, and snippets.

@mkato77

mkato77/Readme.md

Forked from takoyaki-umaaaaaa/Readme.md
Last active January 22, 2024 02:16
Show Gist options
  • Save mkato77/1e638c321a322d92ab19cf6d5ff425df to your computer and use it in GitHub Desktop.
Save mkato77/1e638c321a322d92ab19cf6d5ff425df to your computer and use it in GitHub Desktop.
Download ZIP
デジタル時計。用途：Nortion pageに Widget (iFrame)として取り込む 。しかし動作確認が面倒だな……
Raw
Readme.md

使い方

  1. Gistとして登録する
  2. index.htmlの raw urlを取得する (https://～.githubusercontents.com/～ になっているはず)
  3. githuck.comに行って 2.の urlを貼り付け
  4. 生成された "for development" の urlをコピー
  5. Nortionを開き、"埋め込み"ブロックを作成して、4.の urlを貼り付け
Raw
index.html
<!DOCTYPE html>
<html lang="ja" >
<head>
<meta charset="UTF-8">
<title>Notion埋め込み用 Clock</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script>
(function(d) {
var config = {
kitId: 'bbb6bou',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
<style>
body {
background-color: transparent;
}
h1, h3 {
font-family: "fot-udkakugo-large-pr6n", sans-serif;
font-weight: 600;
font-style: normal;
margin: 0 auto;
margin-block: 0;
text-align: center;
}
h1 {
font-size: 15vw;
line-height: 1em;
}
h3 {
font-size: 7vw;
line-height: 1em;
}
</style>
</head>
<body>
<h1 id="Time"></h1>
<h3 id="Date"></h3>
<script>
let timeArea = document.getElementById('Time');
let dateArea = document.getElementById('Date');
setInterval(function() {
let time = new Date(); // get time now
options = {
hour: '2-digit', minute: '2-digit', second: '2-digit',
hour12: false, timeZone: 'Asia/Tokyo'
};
timeArea.textContent = Intl.DateTimeFormat('ja-JP', options).format(time);
options = {
year: 'numeric', month:'2-digit', day: '2-digit', weekday: 'short',
hour12: false, timeZone: 'Asia/Tokyo'
};
dateArea.textContent = Intl.DateTimeFormat('ja-JP', options).format(time);
}, 1000);
</script>
</body>
</html>
<!--
font-family: 'Cutive Mono', monospace;
font-weight: 400;
color: #878787;
-->
Raw
style.css
body {
background-color: transparent;
}
h1, h3 {
font-family: 'Cutive Mono', monospace;
color: #878787;
font-weight: 400;
margin: 0 auto;
margin-block: 0;
text-align: center;
}
h1 {
font-size: 15vw;
line-height: 1em;
}
h3 {
font-size: 7vw;
line-height: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment