- Gistとして登録する
- index.htmlの raw urlを取得する (https://～.githubusercontents.com/～ になっているはず)
- githuck.comに行って 2.の urlを貼り付け
- 生成された "for development" の urlをコピー
- Nortionを開き、"埋め込み"ブロックを作成して、4.の urlを貼り付け
-
-
Save mkato77/1e638c321a322d92ab19cf6d5ff425df to your computer and use it in GitHub Desktop.
デジタル時計。用途：Nortion pageに Widget (iFrame)として取り込む 。しかし動作確認が面倒だな……
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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; | |
| --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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