23時56分に光る謎のデジタル時計

これは何？

OBS配信などに使えるデジタル時計風HTMLです。ライブ配信っぽさを出しています。

カスタムプロパティを設定することで、以下のように指定時刻に光らせることができます。

時計の種類

使用方法

OBSに設定する場合は以下の通り。

1. ソースの追加（+マーク）→ブラウザを選択
2. URLに使いたいデザインの公開URL（上述）を設定してOKをクリック
3. 余白の調整をする場合、ソースの大きさを上記の推奨値にする

カスタマイズ

ブラウザソースのカスタムCSSでデザインを変更することができます。
利用できるカスタムプロパティは以下。

/* OBSがデフォルトで挿入する部分 */
body{
    background-color: rgba(0, 0, 0, 0.0); /* 4つ目(不透明度)を1.0に近づけると背景色が濃くなります */
    margin: 0px auto;
    overflow: hidden;
}

/* 本アプリの設定 */
:root{
    --enable-flash: 0;                            /* 1:指定時刻に光る機能を有効にする */
    --flash-hh: 23;                               /* 光る機能の指定時刻(XX)) */
    --flash-mm: 56;                               /* 光る機能の指定時刻(YY)) */
    --color-live: #ff0040;                        /* Liveの部分の色 */
    --color-frame: #0ff;                          /* フレームの色 */
    --color-time: #0ff;                           /* 時刻の色 */
    --color-date: #0f8;                           /* 日付の色 */
    --color-flash: #fa0;                          /* 光る演出の色 */
    --color-scanning-line: #0ff;                  /* 走査線の色 */
    --color-shadow1: rgba(0, 255, 255, 0.3);      /* 枠につける影の色1 */
    --color-shadow2: rgba(0, 255, 255, 0.6);      /* 枠につける影の色2 */
    --enable-scanning-line: 1;                    /* 1:走査線を有効にする */
}