Site upload
This commit is contained in:
Archie Baer
parent
5e3d968056
commit
904b82f32b
|
|
@ -0,0 +1,44 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>WebDNS</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
|
||||
<script src="zodiac.min.js"></script>
|
||||
<script src="signup.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="zodiac"></canvas>
|
||||
<script>
|
||||
new Zodiac('zodiac', // HTMLCanvasElement or id
|
||||
{ //// OPTIONS
|
||||
directionX: 0, // -1:left;0:random;1:right
|
||||
directionY: -1, // -1:up;0:random;1:down
|
||||
velocityX: [.1, .2], // [minX,maxX]
|
||||
velocityY: [.5, 1], // [minY,maxY]
|
||||
bounceX: true, // bounce at left and right edge
|
||||
bounceY: false, // bounce at top and bottom edge
|
||||
parallax: .5, // float [0-1...]; 0: no paralax
|
||||
pivot: 0, // float [0-1...]; pivot level for parallax;
|
||||
density: 10000, // px^2 per node
|
||||
dotRadius: [2, 5], // px value or [minR,maxR]
|
||||
backgroundColor: 'rgb(9,9,9)', // default transparent; use alpha value for motion blur and ghosting
|
||||
dotColor: 'rgba(99,99,99,.3)',
|
||||
linkColor: 'rgb(99,99,99)',
|
||||
linkDistance: 50,
|
||||
linkWidth: 2
|
||||
});
|
||||
</script>
|
||||
<div id="container">
|
||||
<main>
|
||||
<p>WebDNS</p>
|
||||
<p>Coming soon...</p>
|
||||
<p>Stay in the know:</p>
|
||||
<p>Email: <input id="emailAddr" /></p>
|
||||
<p><button class="fa mail-button" id="mailbtn" onclick="signup();"></button></p>
|
||||
</main>
|
||||
<footer>
|
||||
<p><a href="https://rootprojects.org">Root</a> + <a href="https://point0.tech">Point0</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
var sent = false;
|
||||
|
||||
function signup() {
|
||||
if (sent) return;
|
||||
var email = emailAddr.value;
|
||||
if (!validateEmail(email)) return;
|
||||
mailbtn.classList.add("fa-clock");
|
||||
mailbtn.classList.remove("mail-button");
|
||||
mailbtn.blur();
|
||||
console.log("Sending request...");
|
||||
sent = true;
|
||||
var req = new XMLHttpRequest();
|
||||
req.onload = function () {
|
||||
console.log(this.status + ": " + this.responseText);
|
||||
mailbtn.classList.remove("fa-clock");
|
||||
mailbtn.classList.add("fa-" + (this.status === 200 ? "check" : "times"));
|
||||
};
|
||||
req.open("POST", "https://whserver.dforms.point0.tech/589550963468140574");
|
||||
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
req.send("email=" + encodeURIComponent(email));
|
||||
}
|
||||
|
||||
function validateEmail(email) {
|
||||
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return re.test(String(email).toLowerCase());
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
body {
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#zodiac {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
animation: fadeIn 1s forwards ease;
|
||||
}
|
||||
|
||||
main {
|
||||
background: white;
|
||||
padding: 50px;
|
||||
text-align: center;
|
||||
border-radius: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
main p:nth-child(1) {
|
||||
font-size: 50px;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
border-bottom: solid #99AAB5;
|
||||
background: none;
|
||||
}
|
||||
|
||||
button {
|
||||
border: solid #99AAB5 3px;
|
||||
border-radius: 10px;
|
||||
font-style: italic;
|
||||
padding: 10px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
button:active, input:focus, footer a:hover {
|
||||
border-color: lightgrey;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: grey;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: inherit;
|
||||
border-bottom: solid grey 1px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mail-button::before {
|
||||
content: "\f0e0";
|
||||
}
|
||||
|
||||
.mail-button:hover::before {
|
||||
content: "\f2b6";
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/*!
|
||||
* Zodiac
|
||||
*
|
||||
* @author Stefan Keim (indus)
|
||||
* @version 0.1.1
|
||||
* @description canvas based particle background
|
||||
*
|
||||
* Inspired by https://github.com/jnicol/particleground
|
||||
*/
|
||||
"use static";var Zodiac=function(){function n(n,t){function l(n){e.x=n.pageX-window.innerWidth/2;e.y=n.pageY-window.innerHeight/2}function a(n){e.x=Math.min(Math.max(-n.gamma,-30),30)*(window.innerWidth/30);e.y=Math.min(Math.max(-n.beta,-30),30)*(window.innerHeight/30)}var h=this,n,o,s;if(t===void 0&&(t={}),this.options={directionX:-1,directionY:-1,velocityX:[.1,.2],velocityY:[.5,1],bounceX:!0,bounceY:!1,parallax:.2,pivot:0,density:6e3,dotRadius:[1,5],linkColor:"rgba(99,99,99,.8)",linkDistance:50,linkWidth:2},n=typeof n=="string"||n instanceof String?document.getElementById(n):n,n.tagName!="CANVAS")throw"no canvas";for(o in t)this.options[o]=t[o];t=this.options;var i=this._ctx=n.getContext("2d",{alpha:!t.backgroundColor}),e={x:0,y:0},r,u,f,c=function(){var l,n,o,s,v,a;for(t.backgroundColor?(i.fillStyle=t.backgroundColor,i.fillRect(0,0,u,f),i.fillStyle=t.dotColor):i.clearRect(0,0,u,f),i.beginPath(),l=0;l<r.length;l++)for(n=r[l],n.x+=n.vx,n.y+=n.vy,t.parallax&&(v=n.z*t.parallax,n.dx+=(e.x*v-n.dx)/10,n.dy+=(e.y*v-n.dy)/10),o=n.x+n.dx,s=n.y+n.dy,(o<0||o>u)&&(t.bounceX?n.vx=-n.vx:n.x=(o+u)%u-n.dx),(s<0||s>f)&&(t.bounceY?n.vy=-n.vy:n.y=(s+f)%f-n.dy),i.moveTo(o+n.r,s),i.arc(o,s,n.r,0,Math.PI*2),a=l-1;a>=0;a--){var h=r[a],w=h.x-n.x,b=h.y-n.y,nt=Math.sqrt(w*w+b*b);if(nt<t.linkDistance){var o=n.x+n.dx,s=n.y+n.dy,y=h.x+h.dx,p=h.y+h.dy,k=Math.atan2(p-s,y-o),d=Math.cos(k),g=Math.sin(k);o+=n.r*d;s+=n.r*g;y-=h.r*d;p-=h.r*g;i.moveTo(o,s);i.lineTo(y,p)}}i.stroke();t.dotColor&&i.fill();requestAnimationFrame(c)};s=this._refresh=function(){var e,s,v;r=h._=h._||[];e=[].concat(t.dotRadius);(e.length==1||e[0]==e[1])&&(e=e[0]);u=n.width=n.offsetWidth;f=n.height=n.offsetHeight;var c=t.velocityX,l=t.velocityY,o=Math.random,a=Math.ceil(u*f/t.density);for(s=r.length-1;s>=0;s--)(r[s].x>u||r[s].y>f)&&r.splice(s,1);for(a<r.length&&r.splice(a);a>r.length;)v=o(),r.push({z:(v-t.pivot)/4,r:e[1]?v*(e[1]-e[0])+e[0]:e,x:Math.ceil(o()*u),y:Math.ceil(o()*f),vx:(t.directionX||(o()>.5?1:-1))*(o()*(c[1]-c[0])+c[0]),vy:(t.directionY||(o()>.5?1:-1))*(o()*(l[1]-l[0])+l[0]),dx:0,dy:0});i.strokeStyle=t.linkColor;i.lineWidth=t.linkWidth;i.fillStyle=t.dotColor};window.addEventListener("resize",s,!1);document.addEventListener("mousemove",l,!1);window.addEventListener("deviceorientation",a,!1);s();c()}return n}();(function(){for(var i=0,t=["ms","moz","webkit","o"],n=0;n<t.length&&!window.requestAnimationFrame;++n)window.requestAnimationFrame=window[t[n]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[t[n]+"CancelAnimationFrame"]||window[t[n]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(n){var t=(new Date).getTime(),r=Math.max(0,16-(t-i)),u=window.setTimeout(function(){n(t+r)},r);return i=t+r,u});window.cancelAnimationFrame||(window.cancelAnimationFrame=function(n){clearTimeout(n)})})();
|
||||
//# sourceMappingURL=zodiac.min.js.map
|
||||
Loading…
Reference in New Issue