=== Side Panel Information ===
Side Panel Info messages can be displayed from a start date till an end date.
Each info message must be preceded by a line with the start date and optionally 
the end date enclosed by ~ characters.
Format: ~m1.d1-m2.d2~, where m1 and d1 are the start month and day and m2 and d2 
are the end month and day. If d1 is omitted, the first day of m1 is assumed. If 
d2 is omitted, the last day of m2 is assumed. If m2 and d2 are omitted, the last 
day of m1 is assumed.
Examples:
1. ~4~: 1 - 30 April
2. ~2.10-2.14~: 10 - 14 February
3. ~6-7~: 1 June - 31 July
4. ~12.15-12.25~: 15 - 25 December
5. ~8.15-10.15: 15 August - 15 October
6. ~12.15~: 15 December - 31 December

~1~
<h2>Demo Message - January</h2>
<h3>This is an example of a long message:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

~2.1~
<h2>Demo Message - February</h2>
<br>
<h3>Don't forget: February 14 Valentine's Day</h3>
<div style="text-align:center; color:red; font-size:6.0em">❤</div>

~3.3-3~
<h2>Demo Message - March</h2>
<br>
<h3>A wise proverb colored red:</h3>
<br>
<p style="color:red; font-size:1.4em">One fool can ask more questions than seven wise men can answer</p>

~4.8-4.25~
<h2>Demo Message - April</h2>
<br>
<h3>This is an example of a long message:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p style="color:blue; font-size:1.8em">N'oubliez pas de porter votre mask chez nos clients !</p>

~5~
<h2>Demo Message - May</h2>
<h3>A message with various HTML tags:</h3>
<p>Some Text<br>Here we have a longer text which spans several lines of the Side Panel<br>Some Text<br><b>Some Bold Text</b><br>Some Text<br>Some Text<br><u>Some Underlined Text</u><br>Some Text<br>This is a link to <a href="https://www.luxsoft.eu/" target="_blank">LuxSoft</a><br>Some Text<br><s>Strike through</s><br>Some Text<br><br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text</p>

~6~
<h2>Demo Message - June</h2>
<h3>Our wish for all of you:</h3>
<br>
<p>This will be my lucky month!</p>
<div style="text-align:center; color:red; font-size:8.0em">&#128516;</div>

~7-10~
<h2>Demo Message July - October</h2>
<p>This message will be shown during four months</p>

~7~
<h2>Demo Message July</h2>
<br>
<h3>Middle of the year. <u>Time for a little break!</u></h3>
<br><br>
<div style="text-align:center;"><img src="./thumbnails/holidays.jpg" alt="Me on the beach" width="200"></div>
<br>
<p style="text-align:center;">This month you can find me here!</p>

~8~
<h2>Demo Message - August</h2>
<br>
<p>In case of <span style="font-size:1.4em">emergency</span> scroll down to the end of this message!</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center; color:red; font-size:1.4em"><span style="display:inline-block; padding:6px 12px; border:2px solid grey;">Only in case of EMERGENCY!</span></div>
<br><br><br>
<div style="text-align:center;">============</div>

~9~
<h2>Demo Message - September</h2>
<br>
<h3>Month Number 9</h3>
<br>
<div style="text-align:center;"><img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"></div>
<div style="text-align:center;"><img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"></div>
<div style="text-align:center;"><img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"></div>

~10~
<h3>Demo Message - October</h3>
<br>
<h3>Autumn, time for some outdoor activity!</h3>
<br>
<div style="text-align:center;"><img src="./thumbnails/walking.gif" alt="sep"></div>

~11-12~
<h2>Demo November and December </h2>
<script>
const today=new Date();
const cmas=new Date(today.getFullYear(), 11, 25);
const oneDay=1000*60*60*24;
if (today.getMonth() < 11 || today.getDate() <= 25) {
	document.write('<p style="text-align:center; color:purple; font-size:1.2em">' + Math.ceil((cmas.getTime()-today.getTime())/oneDay) + ' days left before Christmas!</p>');
} 
</script>

~11~
<h2>Demo Message - November</h2>
<h3>Example of an embedded mp4 video</h3>
<br>
<div style="text-align:center;">
<video width="220" autoplay controls>
  <source src="thumbnails/bear.mp4" type="video/mp4">
</video>
</div>

~12~
<h2>Demo Message - December</h2>
<h3>A month to think of other people</h3>
<p>Please put your presents under these</p>
<div style="text-align:center;"><img src="./thumbnails/xmas.png" alt="Christmas Tree" width="33"></div>
<div style="text-align:center;"><img src="./thumbnails/xmas.png" alt="Christmas Tree" width="63"></div>
<div style="text-align:center;"><img src="./thumbnails/xmas.png" alt="Christmas Tree" width="93"></div>