Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update index.html #407

Merged
merged 1 commit into from Feb 21, 2024
Merged

Update index.html #407

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
153 changes: 89 additions & 64 deletions index.html
View file
Open in desktop
@@ -1,80 +1,105 @@
<html>
<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perl Advent Calendar</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container h1 {
color: #333;
}
.container p {
color: #666;
}
</style>

<script type="text/javascript"><!--
/* Count Down - Annual Occasions Script
Visit http://rainbow.arch.scriptmania.com/scripts/
for this script and many more */
var today=new Date();
<script>
const today = new Date();
const month = today.getMonth() + 1; // JavaScript months are 0-11
const day = today.getDate();

//Enter the occasion's MONTH (1-12) and DAY (1-31):
var theoccasion=new Date(today.getFullYear(), 12, 1);
// Redirect directly to the calendar in December and January.
if (month === 12 || month === 1 ) {
const year = month === 1 ? today.getFullYear() - 1 : today.getFullYear();
window.location.href = `/${year}`;
}

//Customize text to show before and on occasion. Follow grammer below:
var beforeOccasionText="left until the next Perl Advent Calendar";
var onOccasiontext="The Calendar should be posted shortly.";
// Based on:
// Count Down - Annual Occasions Script
// Visit http://rainbow.arch.scriptmania.com/scripts/
// for this script and many more

var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec");
// Enter the occasion's MONTH (1-12) and DAY (1-31):
const theOccasion = new Date(today.getFullYear(), 12, 1);

theoccasion.setMonth(theoccasion.getMonth()-1); //change to 0-11 month format
// Customize text to show before and on occasion. Follow grammar below:
const beforeOccasionText = 'left until the next Perl Advent Calendar';
const onOccasionText = 'The Calendar should be posted shortly.';

//show date of occasion
var showdate="("+monthtext[theoccasion.getMonth()]+". "+theoccasion.getDate()+")";
const monthText = ['Jan','Feb','Mar','April','May','June','July','Aug','Sep','Oct','Nov','Dec'];

var one_day=1000*60*60*24;
var calculatediff="";
theOccasion.setMonth(theOccasion.getMonth() - 1); // change to 0-11 month format

calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day));
if (calculatediff<0) { //if already passed
var nextyeartoday=new Date();
nextyeartoday.setFullYear(today.getFullYear()+1);
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff);
}
// show date of occasion
const showDate = `(${monthText[theOccasion.getMonth()]}. ${theOccasion.getDate()})`;

//Display message accordingly
var pluraldayornot=(calculatediff==1)? "day" : "days"
var str;
if (calculatediff>0)
str="There are "+calculatediff+" "+pluraldayornot+" "+
beforeOccasionText+" "+showdate;
else if (calculatediff==0)
str=onOccasiontext;
// --></script>
const oneDay = 1000 * 60 * 60 * 24;
let calculateDiff = Math.ceil((theOccasion.getTime() - today.getTime()) / oneDay);

<style type="text/css"><!--
body { background-color: #fff8ef; font-family: sans-serif }
div { margin-left: auto; margin-right: auto; margin-top: 5%; width: 70% }
#main { font-size: x-large; margin-bottom: 5% }
if (calculateDiff < 0) { // if already passed
const nextYearToday = new Date();
nextYearToday.setFullYear(today.getFullYear() + 1);
calculateDiff = Math.ceil((nextYearToday.getTime() - today.getTime()) / oneDay + calculateDiff);
}

#site-sponsor-js{
float: right;
margin-right: 15%;
position: relative;
top: -50px;
}
// Display message accordingly
const pluralDayOrNot = calculateDiff === 1 ? 'day' : 'days';
let str;
if (calculateDiff > 0) {
str = `There are ${calculateDiff} ${pluralDayOrNot} ${beforeOccasionText} ${showDate}`;
}
else if (calculateDiff === 0) {
str = onOccasionText;
}

#commads{ font-size: 8pt }
#commads ul{ padding: 0px;display: inline; z-index: 24 }
#commads li:after { content: " \00b7\00a0" }
#commads li, #commads a { display: inline }
// -->
</style>
</head>
<body bgcolor="#fff8ef">
<div id="main">
<p>
<script language="javascript">document.write(str)</script>
<noscript>This year's Perl Advent Calendar is still a ways away.</noscript>
</p>

<p>
In the mean time, you might like to check our <a
href="archives.html">archives</a>, or <a href="FAQ-submit.html">help us
create it</a>.
</p>
</div>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelector('.countdown').textContent = str;
})
</script>

<p><a href="contact.html">Contact</a> &middot; <a href="FAQ.html">FAQ</a></p>
</head>
<body>
<div class="container">
<h1>Welcome to the Perl Advent Calendar!</h1>
<p class="countdown">
<noscript>This year's Perl Advent Calendar is still a ways away.</noscript>
</p>
<p>
In the meantime, you might like to check our
<a href="archives.html">archives</a>, or
<a href="FAQ-submit.html">help us create it</a>.
</p>
<p>
<a href="contact.html">Contact</a> &middot;
<a href="FAQ.html">FAQ</a>
</p>
</div>
</body>
</html>