he4et/dotfiles
1
0
Fork 0
mirror of https://github.com/He4eT/dotfiles.git synced 2026-05-04 15:37:22 +00:00
Code Issues Projects Releases Packages Wiki Activity
dotfiles/thunderbird/newTab.html
He4eT 3140b55f6d thunderbird: new tab page
2023-10-14 19:29:05 +03:00

211 lines
7.5 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Thunderbird</title>
<meta http-equiv='refresh' content='600'>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
padding: 8vmin;
}
main {
display: grid;
grid-gap: 1vmin;
grid-template-columns: repeat(12, 1fr);
}
.block {
border: 0.5vmin solid #bdbdbd;
height: 5vmin;
width: 5vmin;
}
.block.filled {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<!-- main>div*144.block[data-id=$] -->
<main>
<div class='block' data-id='1'></div>
<div class='block' data-id='2'></div>
<div class='block' data-id='3'></div>
<div class='block' data-id='4'></div>
<div class='block' data-id='5'></div>
<div class='block' data-id='6'></div>
<div class='block' data-id='7'></div>
<div class='block' data-id='8'></div>
<div class='block' data-id='9'></div>
<div class='block' data-id='10'></div>
<div class='block' data-id='11'></div>
<div class='block' data-id='12'></div>
<div class='block' data-id='13'></div>
<div class='block' data-id='14'></div>
<div class='block' data-id='15'></div>
<div class='block' data-id='16'></div>
<div class='block' data-id='17'></div>
<div class='block' data-id='18'></div>
<div class='block' data-id='19'></div>
<div class='block' data-id='20'></div>
<div class='block' data-id='21'></div>
<div class='block' data-id='22'></div>
<div class='block' data-id='23'></div>
<div class='block' data-id='24'></div>
<div class='block' data-id='25'></div>
<div class='block' data-id='26'></div>
<div class='block' data-id='27'></div>
<div class='block' data-id='28'></div>
<div class='block' data-id='29'></div>
<div class='block' data-id='30'></div>
<div class='block' data-id='31'></div>
<div class='block' data-id='32'></div>
<div class='block' data-id='33'></div>
<div class='block' data-id='34'></div>
<div class='block' data-id='35'></div>
<div class='block' data-id='36'></div>
<div class='block' data-id='37'></div>
<div class='block' data-id='38'></div>
<div class='block' data-id='39'></div>
<div class='block' data-id='40'></div>
<div class='block' data-id='41'></div>
<div class='block' data-id='42'></div>
<div class='block' data-id='43'></div>
<div class='block' data-id='44'></div>
<div class='block' data-id='45'></div>
<div class='block' data-id='46'></div>
<div class='block' data-id='47'></div>
<div class='block' data-id='48'></div>
<div class='block' data-id='49'></div>
<div class='block' data-id='50'></div>
<div class='block' data-id='51'></div>
<div class='block' data-id='52'></div>
<div class='block' data-id='53'></div>
<div class='block' data-id='54'></div>
<div class='block' data-id='55'></div>
<div class='block' data-id='56'></div>
<div class='block' data-id='57'></div>
<div class='block' data-id='58'></div>
<div class='block' data-id='59'></div>
<div class='block' data-id='60'></div>
<div class='block' data-id='61'></div>
<div class='block' data-id='62'></div>
<div class='block' data-id='63'></div>
<div class='block' data-id='64'></div>
<div class='block' data-id='65'></div>
<div class='block' data-id='66'></div>
<div class='block' data-id='67'></div>
<div class='block' data-id='68'></div>
<div class='block' data-id='69'></div>
<div class='block' data-id='70'></div>
<div class='block' data-id='71'></div>
<div class='block' data-id='72'></div>
<div class='block' data-id='73'></div>
<div class='block' data-id='74'></div>
<div class='block' data-id='75'></div>
<div class='block' data-id='76'></div>
<div class='block' data-id='77'></div>
<div class='block' data-id='78'></div>
<div class='block' data-id='79'></div>
<div class='block' data-id='80'></div>
<div class='block' data-id='81'></div>
<div class='block' data-id='82'></div>
<div class='block' data-id='83'></div>
<div class='block' data-id='84'></div>
<div class='block' data-id='85'></div>
<div class='block' data-id='86'></div>
<div class='block' data-id='87'></div>
<div class='block' data-id='88'></div>
<div class='block' data-id='89'></div>
<div class='block' data-id='90'></div>
<div class='block' data-id='91'></div>
<div class='block' data-id='92'></div>
<div class='block' data-id='93'></div>
<div class='block' data-id='94'></div>
<div class='block' data-id='95'></div>
<div class='block' data-id='96'></div>
<div class='block' data-id='97'></div>
<div class='block' data-id='98'></div>
<div class='block' data-id='99'></div>
<div class='block' data-id='100'></div>
<div class='block' data-id='101'></div>
<div class='block' data-id='102'></div>
<div class='block' data-id='103'></div>
<div class='block' data-id='104'></div>
<div class='block' data-id='105'></div>
<div class='block' data-id='106'></div>
<div class='block' data-id='107'></div>
<div class='block' data-id='108'></div>
<div class='block' data-id='109'></div>
<div class='block' data-id='110'></div>
<div class='block' data-id='111'></div>
<div class='block' data-id='112'></div>
<div class='block' data-id='113'></div>
<div class='block' data-id='114'></div>
<div class='block' data-id='115'></div>
<div class='block' data-id='116'></div>
<div class='block' data-id='117'></div>
<div class='block' data-id='118'></div>
<div class='block' data-id='119'></div>
<div class='block' data-id='120'></div>
<div class='block' data-id='121'></div>
<div class='block' data-id='122'></div>
<div class='block' data-id='123'></div>
<div class='block' data-id='124'></div>
<div class='block' data-id='125'></div>
<div class='block' data-id='126'></div>
<div class='block' data-id='127'></div>
<div class='block' data-id='128'></div>
<div class='block' data-id='129'></div>
<div class='block' data-id='130'></div>
<div class='block' data-id='131'></div>
<div class='block' data-id='132'></div>
<div class='block' data-id='133'></div>
<div class='block' data-id='134'></div>
<div class='block' data-id='135'></div>
<div class='block' data-id='136'></div>
<div class='block' data-id='137'></div>
<div class='block' data-id='138'></div>
<div class='block' data-id='139'></div>
<div class='block' data-id='140'></div>
<div class='block' data-id='141'></div>
<div class='block' data-id='142'></div>
<div class='block' data-id='143'></div>
<div class='block' data-id='144'></div>
</main>
<script>
const getCurrentBlockId = () => {
const now = Date.now()
const midnight = new Date(now).setHours(0, 0, 0, 0)
const minutesSinceMidnight = (now - midnight) / 1000 / 60
return Math.floor(minutesSinceMidnight / 10)
}
const fillBlocks = (blocks, currentBlockId) => {
blocks.forEach((block) => {
const blockId = Number(block.dataset.id)
if (blockId <= currentBlockId) {
block.classList.add('filled')
}
})
}
const blocks = document.querySelectorAll('.block')
const currentBlockId = getCurrentBlockId()
fillBlocks(blocks, currentBlockId)
</script>
</body>
</html>
<!-- vim: ts=2 sts=2 sw=2 et -->
Reference in a new issue View git blame Copy permalink