256 lines
7.6 KiB
HTML
256 lines
7.6 KiB
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 sw = 0;
|
|
|
|
function setup() {
|
|
canvas = createCanvas(window.innerWidth, window.innerHeight);
|
|
//"Hot coal" by Surukai is licensed under CC BY-NC-SA 2.0 https://www.flickr.com/photos/39113645@N08/4872013756
|
|
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);
|
|
}
|
|
fill(255);
|
|
|
|
|
|
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(window.innerHeight/4, window.innerHeight+50);
|
|
this.initialangle = random(0, 2 * PI);
|
|
this.size = random(2, 5);
|
|
this.radius = sqrt(random(pow(width / 2, 2)));
|
|
this.r = random(0,255);
|
|
this.g = random(0,this.r);
|
|
this.b = 0;
|
|
|
|
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 < 0) {
|
|
let index = snowflakes.indexOf(this);
|
|
snowflakes.splice(index, 1);
|
|
}
|
|
};
|
|
this.display = function() {
|
|
fill(this.r,this.g,this.b);
|
|
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>St. Wendel, Saarland, Germany</b>.<br><br>
|
|
<b>We'd love to hear from you!</b>
|
|
<h3><a href="https://coalmedia.eu/cloud/index.php/call/iw744jq5">Invitation to the chat</a></h3><br>
|
|
</p>
|
|
<p>
|
|
There's a <a href="http://coal.ddns.net:3000/ember/coalmedia.eu">git-repository</a> for this website.<br>
|
|
Progress:
|
|
<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>
|