From 758afd5feefbf3a76f5c6abe8bff8c08f39dd7cc Mon Sep 17 00:00:00 2001 From: adam Date: Thu, 28 Jan 2021 19:05:24 +0200 Subject: restructuring stuff --- arrow.svg | 62 -------------------- arrows.js | 37 ------------ bottom.svg | 62 -------------------- css/style.css | 181 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 57 ------------------ index.php | 57 ++++++++++++++++++ js/arrows.js | 37 ++++++++++++ register.php | 1 + style.css | 181 --------------------------------------------------------- svg/arrow.svg | 62 ++++++++++++++++++++ svg/bottom.svg | 62 ++++++++++++++++++++ 11 files changed, 400 insertions(+), 399 deletions(-) delete mode 100644 arrow.svg delete mode 100644 arrows.js delete mode 100644 bottom.svg create mode 100644 css/style.css delete mode 100644 index.html create mode 100644 index.php create mode 100644 js/arrows.js delete mode 100644 style.css create mode 100644 svg/arrow.svg create mode 100644 svg/bottom.svg diff --git a/arrow.svg b/arrow.svg deleted file mode 100644 index 040182d..0000000 --- a/arrow.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - image/svg+xml - - - - - - - - - diff --git a/arrows.js b/arrows.js deleted file mode 100644 index ec7352c..0000000 --- a/arrows.js +++ /dev/null @@ -1,37 +0,0 @@ - -arrows = []; - -const minSpeed = 3; -const maxSpeed = 8; -const delay = 1500; -const lifetime = 20000; - -function make_arrow() { - const svg = document.getElementById("protoarrow").cloneNode(); - svg.style.left = Math.random() * 100 + '%'; - svg.style.display = 'block'; - document.getElementById('arrows').append(svg); - const ob = { - y: -800, - svg: svg, - speed: Math.random() * (maxSpeed - minSpeed) + minSpeed - }; - arrows.push(ob); - setTimeout(make_arrow, delay); - setTimeout(() => { - svg.remove(); - arrows.remove(ob); - }, lifetime); -} - -function update() { - for (const arrow of arrows) { - arrow.y += arrow.speed; - arrow.svg.style.bottom = arrow.y + 'px'; - } - - window.requestAnimationFrame(update); -} - -make_arrow(); -update(); diff --git a/bottom.svg b/bottom.svg deleted file mode 100644 index 772081e..0000000 --- a/bottom.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - image/svg+xml - - - - - - - - - - diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..e6c5e93 --- /dev/null +++ b/css/style.css @@ -0,0 +1,181 @@ +html, body { + margin: 0; + height: 100%; +} + +body { + background: #f0f0f0; + color: black; + font-family: sans-serif; + overflow: hidden; +} + +#page { + display: flex; + flex: 1 0 0; + align-items: stretch; +} + +#page > * { + flex: 1 0 0; +} + +#header { + background: white; + margin: 0; + padding: 1rem; + font-size: 2em; +} + +.logo { + font-family: monospace; + margin: 0; +} + +#hero { + flex: 1.5 0 0; + position: relative; + font-size: 3.5rem; +} + +.vcenter { + display: flex; + flex-direction: column; + justify-content: center; +} + +#hero .bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -5; +} + +#hero > * > p { + color: #676d75; + margin: 0rem; + padding: 0.5rem; + white-space: nowrap; + text-align: center; +} + +#hero .big { + font-size: 1.2em; +} + +.blue { + color: #231179; + font-weight: bold; +} + + +form { + background: white; + margin: 4.5rem; + padding-top: 0; + box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2); + border-radius: 0.5rem; + border-radius: 0.5rem; + border: 1px solid #b9b9b9; +} + +.vert { + justify-content: center; + display: flex; + flex-direction: column; +} + +.vert2 { + display: flex; + flex-direction: column; +} + +.overlay { + display: grid; +} + +.overlay > * { + grid-row: 1; + grid-column: 1; +} + +form > .content { + margin: 2rem; + margin-top: 1rem; + margin-bottom: 1.7rem; + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; +} + +form > h2 { + color: #4d4d4d; + margin: 0; + text-align: center; + padding: 1rem; + background: #f0f0f0; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + +form p { + margin: 1rem 0px 0.3rem 0px; +} + +input { + min-width: 300px; + border: 1px solid #bbb; + padding: 0.5rem; + font-size: inherit; + font-family: inherit; + border-radius: 0.3rem; + background: #fdfdfd; + transition: background 0.15s, border-color 0.35s; +} + +input[type=submit] { + cursor: pointer; + margin-top: 2rem; + width: 100%; + display: block; + padding: 0.7rem; + font-size: 1.1em; + box-shadow: 0 0.2rem 0.6rem #eee; + background: #231179; + color: white; +} + +input:focus, +input:hover { + background: white; +} + +input:focus { + border-color: black; +} + +input[type=submit]:hover { + background: #5b4d9d; +} + +.bgbottom { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: -100; +} + + +#arrows { + position: relative; +} + +#arrows > img { + position: absolute; + bottom: 0; + z-index: -200; +} diff --git a/index.html b/index.html deleted file mode 100644 index ba6733f..0000000 --- a/index.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - shady file upload - - - - -
-
- - -
-
-
- -
- -
-

file upload service

-

that just about works

-

most of the time

-
-
- -
-
-

Get started

-
-

Username

- -

Email address

- -

Password

- -

Repeat Password

- - -

Already have an account? Sign in -

-
-
- - -
-
- - -
- - - - - diff --git a/index.php b/index.php new file mode 100644 index 0000000..2d1ddfb --- /dev/null +++ b/index.php @@ -0,0 +1,57 @@ + + + + + shady file upload + + + + +
+
+ + +
+
+
+ +
+ +
+

file upload service

+

that just about works

+

most of the time

+
+
+ +
+
+

Get started

+
+

Username

+ +

Email address

+ +

Password

+ +

Repeat Password

+ + +

Already have an account? Sign in +

+
+
+ + +
+
+ + +
+ + + + + diff --git a/js/arrows.js b/js/arrows.js new file mode 100644 index 0000000..a23af87 --- /dev/null +++ b/js/arrows.js @@ -0,0 +1,37 @@ + +arrows = []; + +const minSpeed = 3; +const maxSpeed = 8; +const delay = 1500; +const lifetime = 25000; + +function make_arrow() { + const svg = document.getElementById("protoarrow").cloneNode(); + svg.style.left = Math.random() * 100 + '%'; + svg.style.display = 'block'; + document.getElementById('arrows').append(svg); + const ob = { + y: -800, + svg: svg, + speed: Math.random() * (maxSpeed - minSpeed) + minSpeed + }; + arrows.push(ob); + setTimeout(make_arrow, delay); + setTimeout(() => { + svg.remove(); + arrows.remove(ob); + }, lifetime); +} + +function update() { + for (const arrow of arrows) { + arrow.y += arrow.speed; + arrow.svg.style.bottom = arrow.y + 'px'; + } + + window.requestAnimationFrame(update); +} + +make_arrow(); +update(); diff --git a/register.php b/register.php index 7d6c03e..0c00ad4 100644 --- a/register.php +++ b/register.php @@ -1,6 +1,7 @@ * { - flex: 1 0 0; -} - -#header { - background: white; - margin: 0; - padding: 1rem; - font-size: 2em; -} - -.logo { - font-family: monospace; - margin: 0; -} - -#hero { - flex: 1.5 0 0; - position: relative; - font-size: 3.5rem; -} - -.vcenter { - display: flex; - flex-direction: column; - justify-content: center; -} - -#hero .bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -5; -} - -#hero > * > p { - color: #676d75; - margin: 0rem; - padding: 0.5rem; - white-space: nowrap; - text-align: center; -} - -#hero .big { - font-size: 1.2em; -} - -.blue { - color: #231179; - font-weight: bold; -} - - -form { - background: white; - margin: 4.5rem; - padding-top: 0; - box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2); - border-radius: 0.5rem; - border-radius: 0.5rem; - border: 1px solid #b9b9b9; -} - -.vert { - justify-content: center; - display: flex; - flex-direction: column; -} - -.vert2 { - display: flex; - flex-direction: column; -} - -.overlay { - display: grid; -} - -.overlay > * { - grid-row: 1; - grid-column: 1; -} - -form > .content { - margin: 2rem; - margin-top: 1rem; - margin-bottom: 1.7rem; - padding: 0; - display: flex; - flex-direction: column; - justify-content: center; -} - -form > h2 { - color: #4d4d4d; - margin: 0; - text-align: center; - padding: 1rem; - background: #f0f0f0; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -form p { - margin: 1rem 0px 0.3rem 0px; -} - -input { - min-width: 300px; - border: 1px solid #bbb; - padding: 0.5rem; - font-size: inherit; - font-family: inherit; - border-radius: 0.3rem; - background: #fdfdfd; - transition: background 0.15s, border-color 0.35s; -} - -input[type=submit] { - cursor: pointer; - margin-top: 2rem; - width: 100%; - display: block; - padding: 0.7rem; - font-size: 1.1em; - box-shadow: 0 0.2rem 0.6rem #eee; - background: #231179; - color: white; -} - -input:focus, -input:hover { - background: white; -} - -input:focus { - border-color: black; -} - -input[type=submit]:hover { - background: #5b4d9d; -} - -.bgbottom { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - z-index: -100; -} - - -#arrows { - position: relative; -} - -#arrows > img { - position: absolute; - bottom: 0; - z-index: -200; -} diff --git a/svg/arrow.svg b/svg/arrow.svg new file mode 100644 index 0000000..040182d --- /dev/null +++ b/svg/arrow.svg @@ -0,0 +1,62 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/svg/bottom.svg b/svg/bottom.svg new file mode 100644 index 0000000..772081e --- /dev/null +++ b/svg/bottom.svg @@ -0,0 +1,62 @@ + + + + + + + + image/svg+xml + + + + + + + + + + -- cgit v1.2.3