coalmedia.eu/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Coal Community . Under Construction</title>
  <meta charset="UTF-8">
  <meta name="author" content="Victor Giers">
  <meta name="title" content="Coal Media Community">
  <meta name="type" content="website" />
  <meta name="description" content="Convenient open European place for collaboration on the web">
  <meta name="url" content="https://coalmedia.eu/">
  <meta name="image" content="https://coalmedia.eu/coal.png">
  <meta name="date" content="" scheme="2019-06-01">

  <meta property="og:title" content="Coal Media Community">
  <meta property="og:description" content="Convenient open European place for collaboration on the web">
  <meta property="og:image" content="https://coalmedia.eu/style/coal.png">
  <meta property="og:url" content="https://coalmedia.eu/">
  <meta name="twitter:card" content="https://coalmedia.eu/style/coal.png">

  <script src="libraries/p5.min.js"></script>

  <link rel="shortcut icon" type="image/png" href="style/coal.png"/>
  <style>
  body {
    margin: 0;
    overflow: hidden;
  }
  #overlay {
    position: absolute;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 30px;
    padding-top: 180px;

    color: rgb(255,255,255);
    font-family: Verdana;
  }
  a {
    color: rgb(255,255,255);
    text-decoration: underline;
  }
  a:hover {
    text-decoration: none;
  }
  </style>
  <script>

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {

    window.location.replace("https://coalmedia.eu/mobile.html");
    window.location.href = "https://coalmedia.eu/mobile.html";
    throw new Error("Website is not made for mobile! Go to https://coalmedia.eu/mobile.html");
  }


  let releaseDate = "2019-11-01"
  let head = "";
  let sub = "";
  let deltatime = "";
  let headstring = "This website is currently under construction.";
  var substring = "Approximate wait time: ";
  let bgimg;
  var runtime = 0;
  let mspertick = 12;
  let snowflakes = []; // array to hold snowflake objects
  let startSmall = false;
  let flakeR = 255;
  let flakeG = 255;
  let flakeB = 255;
  let sw = 0;

  function setup() {
    canvas = createCanvas(window.innerWidth, window.innerHeight);
    bgimg = loadImage("potemkin.jpg");
    if(hochkant()) startSmall = true;
    imageMode(CENTER);
    noStroke();
  }

  let headlettercount = 0;
  let sublettercount = 0;
  let textLoaded = false;
  function tick(){

    var dateFuture = new Date(releaseDate);
    var dateNow = new Date();

    var seconds = Math.floor((dateFuture - (dateNow))/1000);
    var minutes = Math.floor(seconds/60);
    var hours = Math.floor(minutes/60);
    var days = Math.floor(hours/24);

    hours = hours-(days*24);
    minutes = minutes-(days*24*60)-(hours*60);
    seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);
    if(millis() > 1000){
      if(headlettercount < headstring.length + 70){
        head += headstring.charAt(headlettercount);
        headlettercount += 1;
      } else if (sublettercount < substring.length) {
        sub += substring.charAt(sublettercount);
        sublettercount += 1;
      } else {
        deltatime = days + " Days, " + nf(hours,2,0) + ":" + nf(minutes,2,0) + ":" + nf(seconds,2,0);
        textLoaded = true;
      }
    }
  }

  function hochkant(){
    if(window.innerWidth < window.innerHeight){
      return true;
    } else {
      return false;
    }
  }
  function draw() {

    background(255);
    if(hochkant()){
      image(bgimg, window.innerWidth/2, window.innerHeight/2,window.innerHeight/bgimg.height*bgimg.width,window.innerHeight);
    } else {
      image(bgimg, window.innerWidth/2, window.innerHeight/2,window.innerWidth,window.innerWidth/bgimg.width*bgimg.height);
    }
    stroke(255);
    strokeWeight(sw);
    fill(flakeR, flakeG, flakeB);


    while(millis() > runtime){
      runtime += mspertick;
      tick();
    }

    //don't look here i just don't care rn
    textSize(30);
    textStyle(BOLD);

    if(hochkant()){
      textAlign(CENTER);
      head = "This website is currently\nunder construction.";
      text(head,window.innerWidth/2,90);
    } else {
      if(textLoaded || startSmall){
        head = "This website is currently under construction.";
      }
      textAlign(LEFT);
      if(window.innerHeight/2-((window.innerWidth/bgimg.width*bgimg.height)/2) > 0){
        text(head,30,50+(window.innerHeight/2-((window.innerWidth/bgimg.width*bgimg.height)/2)));
      } else {
        text(head,30,50);
      }
    }

    textSize(20);
    textStyle(NORMAL);

    if(hochkant()){
      sub = "Approximate wait time: \n";
      text(sub + deltatime,window.innerWidth/2,160);

    } else {
      if(textLoaded || startSmall){
        sub = "Approximate wait time: ";
      }
      if(window.innerHeight/2-((window.innerWidth/bgimg.width*bgimg.height)/2) > 0){
        text(sub + deltatime,30,80+(window.innerHeight/2-((window.innerWidth/bgimg.width*bgimg.height)/2)));
      } else {
        text(sub + deltatime,30,80);
      }
    }

    //snowflakes
    let t = frameCount / 60;
    snowflakes.push(new snowflake());
    for (let flake of snowflakes) {
      flake.update(t);
      flake.display();
    }
  }
  function mouseClicked(){
    /*
    flakeR = random(0,255);
    flakeG = random(0,255);
    flakeB = random(0,255);
    sw = 1;
    */
  }

  function snowflake() {
    this.posX = 0;
    this.posY = random(-50, 0);
    this.initialangle = random(0, 2 * PI);
    this.size = random(2, 5);
    this.radius = sqrt(random(pow(width / 2, 2)));

    this.update = function(time) {
      let w = 0.4;
      let angle = w * time + this.initialangle;
      this.posX = width / 2 + this.radius * sin(angle);
      this.posY += pow(this.size, 0.5);
      if (this.posY > height) {
        let index = snowflakes.indexOf(this);
        snowflakes.splice(index, 1);
      }
    };
    this.display = function() {
      ellipse(this.posX, this.posY, this.size);
    };
  }
  window.onresize = function() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    resizeCanvas(w,h);
    width = w;
    height = h;
  };
  </script>
</head>
<body>
  <div id="overlay">
    <h3>Coal Media Community</h3>
    <p>
      This place is going to be a hub for <b>collaborative work</b> in the fields of <b>media art</b> and <b>design</b> regarding <b>knowledge</b> and <b>social interaction</b> on the <b>internet</b>.<br>
      The community is based on <b>European standards</b>, <b>the whole world is invited</b> to collaborate.<br>
      It is registered and hosted at <a href="https://www.manitu.de/" target="_blank"><b>Manitu</b></a>, a web host service based in <b>Saarland, Germany</b>.<br><br>
      <b>We'd love you to get in contact with us!</b><br><br>
      <h3><a href="https://discord.gg/nGDYYKE">Discord invitation</a></h3>
    </p>
    <p>
      There's a <a href="http://coal.ddns.net:3000/ember/coalmedia.eu">git</a> for this website.<br>
      Following links are not functioning properly yet and only here for construction purpose.
      <ul>
        <li><a href="chat">Chat</a></li>
        <li><a href="cloud">Cloud</a></li>
        <li><a href="git">Git</a></li>
      </ul>
    </p>
    <h3>Impressum</h3>
    <p>
      <a href="impressum/Victor Giers.vcf">Download vCard</a><br>
      Victor Giers<br>
      Badmauer 14<br>
      73525 Schwäbisch Gmünd<br>
      +49 160 977 0 7979<br>
      <a href="mailto:mail@giers.io">mail@giers.io</a><br>
      <a href="https://giers.io/">https://giers.io/</a>
    </p>
  </div>
</body>
</html>