- Gistとして登録する
- index.htmlの raw urlを取得する (https://～.githubusercontents.com/～ になっているはず)
- githuck.comに行って 2.の urlを貼り付け
- 生成された "for development" の urlをコピー
- Nortionを開き、"埋め込み"ブロックを作成して、4.の urlを貼り付け
Last active
January 22, 2024 02:01
-
-
Save takoyaki-umaaaaaa/bbee7f52c3e49fbcfbbac21ce45beba3 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"> | |
| <style> | |
| 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; | |
| } | |
| </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> |
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