Init commit

7 files changed, 597 insertions, 0 deletions

diff --git a/app/static/css/blure.css b/app/static/css/blure.css
new file mode 100644
index 0000000..acc1aab
--- /dev/null
+++ b/app/static/css/blure.css
@@ -0,0 +1,127 @@
+body {
+  background-color: #182028 !important;
+}
+
+#root {
+  font-family: "Inconsolata";
+  font-size: 18px;
+  margin: auto;
+  max-width: 800px;
+  padding: 0 1em;
+  text-align: justify;
+  color: #eee;
+}
+#root img {
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+
+a {
+  color: #846;
+  text-decoration: none;
+}
+
+a:hover {
+  box-shadow: inset 0 0px 0 white, inset 0 -1px 0 #456;
+}
+
+.profile-description {
+  padding: 0.5rem;
+  white-space: pre;
+}
+
+.btn {
+  background: #283038;
+  color: #f6c;
+  border: 0px;
+  border-radius: 2px;
+  padding: 0.2em 0.4em;
+  font-size: 1em;
+  font-family: "Inconsolata";
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 800;
+}
+
+.progress-bg {
+  background: none;
+  filter: blur(3px);
+  -moz-filter: blur(3px);
+  -webkit-filter: blur(3px);
+  position: absolute;
+  width: 100px;
+  height: 100px;
+}
+
+.progress-svg {
+  animation: progress-rotate 2s linear infinite;
+  height: 100px;
+  width: 100px;
+  position: relative;
+}
+
+.progress-path {
+  stroke-dasharray: 0, calc(20 * 7);
+  stroke-linecap: round;
+  stroke: #888a;
+  -moz-transition: stroke-dasharray 0.3s ease;
+  -webkit-transition: stroke-dasharray 0.3s ease;
+  transition: stroke-dasharray 0.3s ease;
+}
+
+@keyframes progress-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.progress-wrapper {
+  display: inline-block;
+}
+
+#push-url {
+  position: relative;
+  display: inline;
+}
+
+#push-url-input {
+  min-width: 40%;
+  color: white;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-bottom-color: rgba(252, 49, 113, 0.2);
+}
+
+#push-url-input:focus {
+  outline: none;
+}
+
+#push-url-input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+#push-url-span {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 100%;
+  height: 1px;
+  opacity: 0;
+  background-color: #fc2f70;
+  transform-origin: center;
+  transform: translate(-50%, 0) scaleX(0);
+  transition: all 0.3s ease;
+}
+
+#push-url-input:focus ~ span {
+  transform: translate(-50%, 0) scaleX(1);
+  opacity: 1;
+}
+
+.progress-status {
+  width: 100%;
+  text-align: center;
+  font-size: 0.9em;
+}
+
+/*# sourceMappingURL=blure.css.map */
diff --git a/app/static/css/eternal.css b/app/static/css/eternal.css
new file mode 100644
index 0000000..e2c5895
--- /dev/null
+++ b/app/static/css/eternal.css
@@ -0,0 +1,81 @@
+.eternal-progress-bg {
+  background: none;
+  filter: blur(3px);
+  -moz-filter: blur(3px);
+  -webkit-filter: blur(3px);
+  position: absolute;
+  width: 100px;
+  height: 100px;
+}
+
+.eternal-progress-svg {
+  animation: progress-rotate 2s linear infinite;
+  height: 100px;
+  width: 100px;
+  position: relative;
+}
+
+.eternal-progress-path {
+  stroke-dasharray: 0, calc(20 * 7);
+  stroke-linecap: round;
+  stroke: #888a;
+  -moz-transition: stroke-dasharray 0.3s ease;
+  -webkit-transition: stroke-dasharray 0.3s ease;
+  transition: stroke-dasharray 0.3s ease;
+}
+
+@keyframes progress-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.eternal-progress-wrapper {
+  display: inline-block;
+}
+
+.eternal-progress-status {
+  width: 100%;
+  text-align: center;
+  font-size: 0.9em;
+}
+
+.eternal-url {
+  position: relative;
+  display: inline;
+}
+
+.eternal-url-input {
+  min-width: 40%;
+  color: white;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-bottom-color: rgba(252, 49, 113, 0.2);
+}
+
+.eternal-url-input:focus {
+  outline: none;
+}
+
+.eternal-url-input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.eternal-url-input ~ span {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 100%;
+  height: 1px;
+  opacity: 0;
+  background-color: #fc2f70;
+  transform-origin: center;
+  transform: translate(-50%, 0) scaleX(0);
+  transition: all 0.3s ease;
+}
+
+.eternal-url-input:focus ~ span {
+  transform: translate(-50%, 0) scaleX(1);
+  opacity: 1;
+}
+
+/*# sourceMappingURL=eternal.css.map */
diff --git a/app/static/js/eternalload.js b/app/static/js/eternalload.js
new file mode 100644
index 0000000..fe23c98
--- /dev/null
+++ b/app/static/js/eternalload.js
@@ -0,0 +1,120 @@
+const progress_width = 100;
+const progress_radius = 20;
+const progress_len = progress_radius * 2 * Math.PI;
+
+const PREVIEW_TEMPLATE = `
+<div class="eternal-progress-wrapper">
+    <div class="eternal-progress-bg"></div>
+    <svg class="eternal-progress-svg">
+        <circle class="eternal-progress-path"
+                cx="${progress_width / 2}"
+                cy="${progress_width / 2}"
+                r="${progress_radius}"
+                fill="none"
+                stroke-width="5"
+                stroke-miterlimit="10" />
+    </svg>
+    <pre class="eternal-progress-status"></pre>
+</div>
+`
+
+const REMOTE_LOAD_TEMPLATE = `
+<form method='POST' autocomplete="off">
+  <input class="eternal-url-input" type="text" placeholder="Remote image">
+  <span class="eternal-url-span"></span>
+</form>
+`.trim();
+
+function append_template_for_file (node, file, fileno) {
+    const imageurl = URL.createObjectURL(file);
+    node.insertAdjacentHTML('beforeend', PREVIEW_TEMPLATE);
+    let newnode = node.lastChild.previousSibling;
+    console.log(newnode);
+    let style = newnode.querySelector('.eternal-progress-bg').style;
+    style.background = 'url(' + imageurl + ')';
+    style.backgroundSize = 'cover';
+    style.backgroundPosition = 'center';
+    style.backgroundRepeat = 'no-repeat';
+    newnode.setAttribute('id', 'progress-files-' + fileno.toString());
+
+    return newnode;
+}
+
+class EternalLoad {
+    constructor (node) {
+        this.root = document.createElement('div');
+        this.root.setAttribute('id', 'eternal-root');
+        this.local = {};
+        this.remote = {};
+    }
+
+    attach (target) {
+        if (this.local.btn)
+            this.root.appendChild(this.local.btn);
+        target.appendChild(this.root);
+
+        return this;
+    }
+
+    use_local (url) {
+        this.local.btn = document.createElement('button');
+        this.local.btn.setAttribute('class', 'btn');
+        this.local.btn.textContent = 'local file';
+        
+        this.local.total = 0;
+        this.local.processed = 0;
+        this.local.page_hard_lock = 1;
+
+        this.local.btn.addEventListener('click', (e) => {
+            let input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'image/*';
+            input.multiple = true;
+            input.addEventListener('change', (input_event) => {
+                Array.prototype.forEach.call(input_event.target.files, file => {
+                    let data = new FormData();
+                    data.append('im', file);
+
+                    let fileno = this.local.total;
+                    this.local.total += 1;
+                    let wrapper = append_template_for_file (this.root, file, fileno);
+                    let progress = wrapper.querySelector('.eternal-progress-path');
+                    let status = wrapper.querySelector('.eternal-progress-status');
+
+                    let req = new XMLHttpRequest();
+                    req.addEventListener('load', (e) => {
+                        let bg = wrapper.querySelector('.eternal-progress-bg');
+                        bg.style.filter = 'none';
+                        progress.style.stroke = '#0000';
+                        
+                        this.local.processed += 1;
+                        if (this.local.processed == this.local.total && !this.local.page_hard_lock)
+                            location.reload();
+                    });
+                    req.upload.addEventListener('progress', (e) => {
+                        let complete = 0;
+                        if (e.lengthComputable)
+                            complete = e.loaded / e.total;
+                        status.innerHTML = `${(e.loaded / 1000000).toFixed(2)}/${(e.total / 1000000).toFixed(2)}M`;
+                        progress.style.strokeDasharray = `${(complete * Math.PI * 2 * progress_radius)},${progress_len}`;
+
+                    });
+
+                    req.open('POST', url);
+                    req.send(data);
+                });
+                this.local.page_hard_lock = 0;
+            });
+
+            input.click();
+        });
+
+        return this;
+    }
+
+    use_remote (url) {
+        return this;
+    }
+}
+
+export default EternalLoad;
diff --git a/app/static/js/load.js b/app/static/js/load.js
new file mode 100644
index 0000000..574841b
--- /dev/null
+++ b/app/static/js/load.js
@@ -0,0 +1,6 @@
+import EternalLoad from './eternalload.js'
+
+let load = new EternalLoad()
+                .use_local('/c/push')
+                .use_remote('/c/push_url')
+                .attach(document.querySelector('#template-goes-here'));
diff --git a/app/static/js/push.js b/app/static/js/push.js
new file mode 100644
index 0000000..e6916c8
--- /dev/null
+++ b/app/static/js/push.js
@@ -0,0 +1,74 @@
+const progress_radius = 20;
+const progress_len = progress_radius * 2 * Math.PI;
+
+window.addEventListener('DOMContentLoaded', function() {
+    let pusher = document.getElementById('push-image-btn');
+
+    let total = 0;
+    let processed = 0;
+    let page_hard_lock = 1;
+
+    pusher.addEventListener('click', function(e) {
+        let input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.multiple = true;
+        input.addEventListener('change', (input_event) => {
+            console.log(input_event.target.files);
+            Array.prototype.forEach.call(input_event.target.files, file => {
+                let data = new FormData();
+                data.append('im', file);
+
+                let fileno = total;
+                total += 1;
+                let wrapper = append_template_for_file (file, fileno);
+                let progress = wrapper.querySelector('.progress-path');
+                let status = wrapper.querySelector('.progress-status');
+
+                let req = new XMLHttpRequest();
+                req.addEventListener('load', (e) => {
+                    let bg = wrapper.querySelector('.progress-bg');
+                    bg.style.filter = 'none';
+                    progress.style.stroke = '#0000';
+                    
+                    processed += 1;
+                    if (processed == total && !page_hard_lock) {
+                        location.reload();
+                    }
+                });
+                req.upload.addEventListener('progress', (e) => {
+                    let complete = 0;
+                    if (e.lengthComputable) {
+                        complete = e.loaded / e.total;
+                    }
+                    status.innerHTML = (e.loaded / 1000000).toFixed(2) + '/' + (e.total / 1000000).toFixed(2) + 'M';
+                    progress.style.strokeDasharray = (complete * Math.PI * 2 * progress_radius).toString () + ',' + progress_len.toString();
+
+                });
+
+                req.open('POST', '/c/push');
+                req.send(data);
+            });
+            page_hard_lock = 0;
+        });
+
+        input.click();
+    });
+});
+
+function append_template_for_file (file, fileno) {
+    let imageurl = URL.createObjectURL(file);
+    let tmpl = document.querySelector('#progress-template');
+    let root = document.querySelector('#template-goes-here');
+    let newnode = document.importNode(tmpl.content, true);
+    let style = newnode.querySelector('.progress-bg').style;
+    style.background = 'url(' + imageurl + ')';
+    style.backgroundSize = 'cover';
+    style.backgroundPosition = 'center';
+    style.backgroundRepeat = 'no-repeat';
+    root.appendChild(newnode);
+    let appended = root.lastChild.previousSibling;
+    appended.setAttribute('id', 'progress-files-' + fileno.toString());
+
+    return appended;
+}
diff --git a/app/static/sass/blure.sass b/app/static/sass/blure.sass
new file mode 100644
index 0000000..e472fb7
--- /dev/null
+++ b/app/static/sass/blure.sass
@@ -0,0 +1,119 @@
+$sidenav-width: 200px
+$primary-fg: #fff
+$primary-bg: #182028
+$pink: #f6c
+
+$preview-size: 100px
+$progress-radius: 20
+
+$monospace: 'Inconsolata'
+
+body
+    background-color: $primary-bg !important
+
+#root
+    font-family: $monospace
+    font-size: 18px
+    margin: auto
+    max-width: 800px
+    padding: 0 1em
+    text-align: justify
+    color: #eee
+
+    img
+        width: 100%
+        margin-bottom: .5rem
+
+a
+    color: #846
+    text-decoration: none
+
+a:hover
+    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 #456
+    //border-bottom: 1px solid black
+
+.profile-description
+    padding: .5rem
+    white-space: pre
+
+.btn
+    background: #283038
+    color: $pink
+    border: 0px
+    border-radius: 2px
+    padding: .2em .4em
+    font-size: 1em
+    font-family: $monospace
+    cursor: pointer
+    text-transform: uppercase
+    letter-spacing: .05em
+    font-weight: 800
+
+.progress-bg
+    background: none
+    filter: blur(3px)
+    -moz-filter: blur(3px)
+    -webkit-filter: blur(3px)
+    position: absolute
+    width: $preview-size
+    height: $preview-size
+
+.progress-svg
+    animation: progress-rotate 2s linear infinite
+    height: $preview-size
+    width: $preview-size
+    position: relative
+
+
+.progress-path
+    stroke-dasharray: 0, calc(#{$progress-radius} * 7)
+    stroke-linecap: round
+    stroke: #888a
+    -moz-transition: stroke-dasharray 0.3s ease
+    -webkit-transition: stroke-dasharray 0.3s ease
+    transition: stroke-dasharray 0.3s ease
+
+@keyframes progress-rotate
+    100%
+        transform: rotate(360deg)
+
+.progress-wrapper
+    display: inline-block
+
+#push-url
+    position: relative
+    display: inline
+
+#push-url-input
+    min-width: 40%
+    color: white
+    background-color: transparent
+    border: 1px solid transparent
+    border-bottom-color: hsla(341, 97%, 59%, 0.2)
+
+#push-url-input:focus
+    outline: none
+
+#push-url-input::placeholder
+    color: hsla(0, 0%, 100%, 0.3)
+
+#push-url-span
+    position: absolute
+    bottom: 0
+    left: 50%
+    width: 100%
+    height: 1px
+    opacity: 0
+    background-color: #fc2f70
+    transform-origin: center
+    transform: translate(-50%, 0) scaleX(0)
+    transition: all 0.3s ease
+
+#push-url-input:focus ~ span
+    transform: translate(-50%, 0) scaleX(1)
+    opacity: 1
+
+.progress-status
+    width: 100%
+    text-align: center
+    font-size: 0.9em
\ No newline at end of file
diff --git a/app/static/sass/eternal.sass b/app/static/sass/eternal.sass
new file mode 100644
index 0000000..e6e1b56
--- /dev/null
+++ b/app/static/sass/eternal.sass
@@ -0,0 +1,70 @@
+$preview-size: 100px
+$progress-radius: 20
+
+.eternal-progress-bg
+    background: none
+    filter: blur(3px)
+    -moz-filter: blur(3px)
+    -webkit-filter: blur(3px)
+    position: absolute
+    width: $preview-size
+    height: $preview-size
+
+.eternal-progress-svg
+    animation: progress-rotate 2s linear infinite
+    height: $preview-size
+    width: $preview-size
+    position: relative
+
+.eternal-progress-path
+    stroke-dasharray: 0, calc(#{$progress-radius} * 7)
+    stroke-linecap: round
+    stroke: #888a
+    -moz-transition: stroke-dasharray 0.3s ease
+    -webkit-transition: stroke-dasharray 0.3s ease
+    transition: stroke-dasharray 0.3s ease
+
+@keyframes progress-rotate
+    100%
+        transform: rotate(360deg)
+
+.eternal-progress-wrapper
+    display: inline-block
+
+.eternal-progress-status
+    width: 100%
+    text-align: center
+    font-size: 0.9em
+
+.eternal-url
+    position: relative
+    display: inline
+
+.eternal-url-input
+    min-width: 40%
+    color: white
+    background-color: transparent
+    border: 1px solid transparent
+    border-bottom-color: hsla(341, 97%, 59%, 0.2)
+
+.eternal-url-input:focus
+    outline: none
+
+.eternal-url-input::placeholder
+    color: hsla(0, 0%, 100%, 0.3)
+
+.eternal-url-input ~ span
+    position: absolute
+    bottom: 0
+    left: 50%
+    width: 100%
+    height: 1px
+    opacity: 0
+    background-color: #fc2f70
+    transform-origin: center
+    transform: translate(-50%, 0) scaleX(0)
+    transition: all 0.3s ease
+
+.eternal-url-input:focus ~ span
+    transform: translate(-50%, 0) scaleX(1)
+    opacity: 1