Browse Source

Initial commit

master
TooMuchRAM 3 years ago
commit
1b5439cdd5
  1. 2
      .gitignore
  2. 15
      .idea/deployment.xml
  3. 6
      .idea/inspectionProfiles/Project_Default.xml
  4. 6
      .idea/misc.xml
  5. 8
      .idea/modules.xml
  6. 8
      .idea/romereis-countdown.iml
  7. BIN
      bg.jpg
  8. 13
      index.html
  9. 128
      script.ts
  10. 27
      style.css

2
.gitignore

@ -0,0 +1,2 @@
# Project exclude paths
/script.js

15
.idea/deployment.xml

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="PublishConfigData" autoUpload="On explicit save action" serverName="Hetzner - Romereis-1" autoUploadExternalChanges="true">
<serverData>
<paths name="Hetzner - Romereis-1">
<serverdata>
<mappings>
<mapping deploy="/var/www/countdown" local="$PROJECT_DIR$" web="/countdown" />
</mappings>
</serverdata>
</paths>
</serverData>
<option name="myAutoUpload" value="ON_EXPLICIT_SAVE" />
</component>
</project>

6
.idea/inspectionProfiles/Project_Default.xml

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="TsLint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

6
.idea/misc.xml

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>

8
.idea/modules.xml

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/romereis-countdown.iml" filepath="$PROJECT_DIR$/.idea/romereis-countdown.iml" />
</modules>
</component>
</project>

8
.idea/romereis-countdown.iml

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

BIN
bg.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

13
index.html

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Romereis 2020 Countdown">
<title>Romereis Countdown</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="countdown"></p>
</body>
</html>

128
script.ts

@ -0,0 +1,128 @@
interface TimeRemaining {
weeks: number;
days: number;
hours: number;
minutes: number;
seconds: number;
}
class CountdownBuilder {
timeRemaining: TimeRemaining;
constructor(public timeremaining: TimeRemaining) {
this.timeRemaining = timeremaining
}
build(): string {
let html = "";
if (this.timeRemaining.weeks <= 9 && this.timeRemaining.weeks > 0) {
html += "0";
}
if (this.timeRemaining.weeks > 0) {
html += this.timeRemaining.weeks.toString();
html += "<span>w</span> ";
}
if (this.timeRemaining.days <= 9) {
html += "0";
}
html += this.timeRemaining.days.toString();
html += "<span>d</span> ";
if (this.timeRemaining.hours <= 9) {
html += "0";
}
html += this.timeRemaining.hours.toString();
html += "<span>u</span> ";
if (this.timeRemaining.minutes <= 9) {
html += "0";
}
html += this.timeRemaining.minutes.toString();
html += "<span>m</span> ";
if (this.timeRemaining.seconds <= 9) {
html += "0";
}
html += this.timeRemaining.seconds.toString();
html += "<span>s</span> ";
return html
}
}
function setStyleOptions(weeks: number) {
if (weeks < 1) {
document.querySelector("body").style.backgroundImage = "url('bg.jpg')";
document.querySelector("p").style.color = "black";
let spans = document.querySelectorAll("span");
for (let i = 0; i < spans.length; i++) {
spans[i].style.color = "#222222";
}
}
}
function calculateTimeRemaining(distance: number) {
// Time calculations for days, hours, minutes and seconds
let weeks = Math.floor((distance / (1000 * 60 * 60 * 24))/7);
let days = Math.floor((distance / (1000 * 60 * 60 * 24))%7);
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
return {
weeks: weeks,
days: days,
hours: hours,
minutes: minutes,
seconds: seconds
};
}
function setNewTime() {
// Get today's date and time
let now = new Date().getTime();
// Find the distance between now and the count down date
let distance = countDownDate - now;
let timeRemaining = calculateTimeRemaining(distance);
if (distance < 0) {
clearInterval(x);
return;
}
document.getElementById("countdown").innerHTML = new CountdownBuilder(timeRemaining).build();
setStyleOptions(timeRemaining.weeks);
}
// Set the date we're counting down to
let countDownDate = new Date("Mar 7, 2020 07:20:00").getTime();
//intervals are numbers apparently
let x: number;
window.onload = function () {
if(!isMobile()) {
setNewTime();
// Update the count down every 1 second
x = setInterval(setNewTime, 1000);
} else {
document.getElementById("countdown").innerHTML = "Zie app";
}
};
function isMobile(): boolean {
let match = window.matchMedia;
if(match) {
let mq = match("(pointer:coarse)");
return mq.matches;
}
return false;
}

27
style.css

@ -0,0 +1,27 @@
@import url('https://fonts.googleapis.com/css?family=B612+Mono&display=swap');
body {
margin: auto;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
background-color: black;
font-family: 'B612 Mono', monospace;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
#countdown {
text-align: center;
font-size: 90px;
margin-top: 0px;
color: white;
text-shadow: 0px 0px 15px #000000;
margin-bottom: 0px;
}
#countdown span {
color: #878787;
font-size: 70px;
}
Loading…
Cancel
Save