-
Notifications
You must be signed in to change notification settings - Fork 0
/
Calendar.html
45 lines (41 loc) · 4.34 KB
/
Calendar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=0, initial-scale=1.0">
<title>Calendar</title>
<link rel="stylesheet" href="./Styles/CSS/Calendar.css">
<link rel="stylesheet" href="./Styles/CSS/Fonts.css">
</head>
<body>
<main>
<script>
const colorSets = ["shade", "studio-purple", "ut-orange", "forest-green", "corn-flower", "oxblood"];
document.querySelector('body').className = colorSets[Math.floor(Math.random() * 6)];
document.querySelector('main').style.backgroundImage = 'url("./Images/' + Math.ceil(Math.random() * 10) + '.jpg")';
document.querySelector('script').remove();
</script>
<section class="calendar">
<section class="calendar-head">
<div class="selected-day"></div>
<div class="selected-date-full"></div>
<div class="today" title="Go to Today">0
<svg width="100%" height="100%" viewBox="0 0 165 148" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,0.0417462,0.00848426)">
<path d="M1.28,73.963C2.605,75.319 4.949,79.776 8.273,79.95C11.597,80.123 12.471,79.798 13.886,78.824C15.302,77.85 22.03,72.705 22,72.71C21.97,72.714 35,61.682 35,61.682L53.031,46.571L66.569,35.421L81.98,22.935L90.85,29.958L102.513,39.47L121.36,55.239L135.431,67.06L147.261,76.688L148.483,77.566L150.021,78.568C150.021,78.568 152.465,80.226 153.824,79.945C155.183,79.664 154.769,80.195 157.902,78.958C161.034,77.722 162.889,73.757 163.035,73.466C163.18,73.174 165.67,68.872 162.266,65.274C158.862,61.677 145.888,50.958 145.888,50.958L92.499,6.215C92.499,6.215 85.057,0.946 85.022,0.953C84.987,0.96 83.512,0.081 82.073,0.061C80.634,0.04 79.447,0.095 77.155,1.958C74.864,3.822 67.912,9.142 67.893,9.118C67.874,9.095 56.11,18.95 56.075,18.907C56.039,18.865 42.77,30.125 42.527,29.958C42.203,29.735 41.855,28.274 42.001,22.661C42.256,12.844 40.118,12.356 39.855,11.82C39.592,11.284 37.902,9.972 33.45,9.967C28.999,9.962 26.889,10.272 26.007,10.861C25.124,11.45 23.834,13.268 23.563,15.466C23.293,17.664 22.827,24.94 23,29.305C23.174,33.67 23,40.202 23,40.202L22.989,46.786L12.769,55.409C12.769,55.409 2.467,64.421 2.498,64.451C2.53,64.482 0.794,65.995 0.512,67.155C0.23,68.314 -0.319,69.785 0.326,71.809C0.971,73.833 0.732,73.401 1.28,73.963Z"/>
</g>
<g transform="matrix(1,0,0,1,0.0417462,0.00848426)">
<path d="M23.645,94.444C23.645,94.444 26.308,89.873 32.306,90.089C38.304,90.306 40.932,93.447 41.381,94.508C41.83,95.569 41.988,106.58 41.973,106.964C41.957,107.347 41.864,119.93 42,119.924C42.136,119.917 42.184,126.922 42.135,126.958C42.085,126.995 62.627,126.958 62.627,126.958L122,126.958L122,115.063C122,115.063 122.116,98.722 122.404,98.589C122.693,98.456 121.795,93.657 125.463,91.815C129.131,89.974 131.678,90.12 134.16,90.379C136.642,90.638 139.044,92.588 139.223,93.006C139.402,93.423 141.023,95.593 140.8,100.269C140.577,104.946 140.986,114.816 140.986,114.816C140.986,114.816 140.979,140.779 140.269,141.683C139.559,142.586 141.181,145.327 132.924,146.179C124.667,147.031 119.017,146.756 119.017,146.756C119.017,146.756 102.929,146.971 102.577,146.905C102.226,146.839 87.774,146.927 87,146.931C86.226,146.935 62.752,146.876 62.752,146.876C62.752,146.876 35.74,146.61 35.354,146.453C34.968,146.296 28.509,146.501 27.076,145.568C25.642,144.636 25.617,144.708 24.48,143.187C23.343,141.665 23.307,137.48 23.293,136.587C23.279,135.693 23.013,122.408 23.013,122.408L23.035,108.625C23.035,108.625 23.059,99.799 23.258,97.835C23.284,97.581 23.386,96.173 23.461,95.689C23.685,94.237 23.658,94.375 23.645,94.444"/>
</g>
</svg>
</div>
</section>
<section class="calendar-body"></section>
</section>
</main>
<aside style="position: fixed; z-index: 100000000; bottom: .75rem; right: .75rem; width: 6.5rem;">
<img src="./Images/Logo.svg" alt="Mola">
</aside>
<script src="./JS/Calendar.min.js"></script>
</body>
</html>