diff --git a/app/static/css/rangeslider.scss b/app/static/css/rangeslider.scss deleted file mode 100644 index 365faea..0000000 --- a/app/static/css/rangeslider.scss +++ /dev/null @@ -1,100 +0,0 @@ -@import "compass/css3"; - -$rangeslider: ".rangeslider"; -$rangeslider--horizontal: ".rangeslider--horizontal"; -$rangeslider--vertical: ".rangeslider--vertical"; -$rangeslider--disabled: ".rangeslider--disabled"; -$rangeslider--active: ".rangeslider--active"; -$rangeslider__fill: ".rangeslider__fill"; -$rangeslider__handle: ".rangeslider__handle"; - -#{$rangeslider}, -#{$rangeslider__fill} { - display: block; - @include box-shadow(inset 0px 1px 3px rgba(0,0,0,0.3)); - @include border-radius(10px); -} - -#{$rangeslider} { - background: #e6e6e6; - position: relative; -} - -#{$rangeslider--horizontal} { - height: 20px; - width: 100%; -} - -#{$rangeslider--vertical} { - width: 20px; - min-height: 150px; - max-height: 100%; -} - -#{$rangeslider--disabled} { - @include opacity(.4); -} - -#{$rangeslider__fill} { - background: #00ff00; - position: absolute; - - #{$rangeslider--horizontal} & { - top: 0; - height: 100%; - } - - #{$rangeslider--vertical} & { - bottom: 0; - width: 100%; - } -} - -#{$rangeslider__handle} { - background: white; - border: 1px solid #ccc; - cursor: pointer; - display: inline-block; - width: 40px; - height: 40px; - position: absolute; - @include background-image(linear-gradient(rgba(white, 0), rgba(black, .10))); - @include box-shadow(0 0 8px rgba(black, .3)); - @include border-radius(50%); - - &:after { - content: ""; - display: block; - width: 18px; - height: 18px; - margin: auto; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - @include background-image(linear-gradient(rgba(black, .13), rgba(white, 0))); - @include border-radius(50%); - } - - &:active, - #{$rangeslider--active} & { - @include background-image(linear-gradient(rgba(black, .10), rgba(black, .12))); - } - - #{$rangeslider--horizontal} & { - top: -10px; - touch-action: pan-y; - -ms-touch-action: pan-y; - } - - #{$rangeslider--vertical} & { - left: -10px; - touch-action: pan-x; - -ms-touch-action: pan-x; - } -} - -input[type="range"]:focus + #{$rangeslider} #{$rangeslider__handle} { - @include box-shadow(0 0 8px rgba(#ff00ff, .9)); -} diff --git a/app/static/css/simple-slideshow-styles.css b/app/static/css/simple-slideshow-styles.css new file mode 100644 index 0000000..ba4f664 --- /dev/null +++ b/app/static/css/simple-slideshow-styles.css @@ -0,0 +1,138 @@ +.bss-slides{ + position: relative; + display: block; +} +.bss-slides:focus{ + outline: 0; +} +.bss-slides figure{ + position: absolute; + top: 0; + width: 100%; +} +.bss-slides figure:first-child{ + position: relative; +} +.bss-slides figure img{ + opacity: 0; + -webkit-transition: opacity 1.2s; + transition: opacity 1.2s; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} +.bss-slides .bss-show{ + z-index: 2; +} +.bss-slides .bss-show img{ + opacity: 1; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + position: relative; +} + +.bss-slides figcaption{ + position: absolute; + font-family: sans-serif; + font-size: .8em; + bottom: .75em; + right: .35em; + padding: .25em; + color: #fff; + background: #000; + background: rgba(0,0,0, .25); + border-radius: 2px; + opacity: 0; + -webkit-transition: opacity 1.2s; + transition: opacity 1.2s; +} +.bss-slides .bss-show figcaption{ + z-index: 3; + opacity: 1; +} +.bss-slides figcaption a{ + color: #fff; +} +.bss-next, .bss-prev{ + visibility: hidden; + color: #fff; + position: absolute; + background: #000; + background: rgba(0,0,0, .6); + top: 50%; + z-index: 4; + font-size: 2em; + margin-top: -1.2em; + opacity: .3; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.bss-next:hover, .bss-prev:hover{ + cursor: pointer; + opacity: 1; +} +.bss-next{ + right: -1px; + padding: 10px 5px 15px 10px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} +.bss-prev{ + left: 0; + padding: 10px 10px 15px 5px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} +.bss-fullscreen{ + display: block; + width: 32px; + height: 32px; + background: rgba(0,0,0,.4) url(/static/images/arrows-alt_ffffff_64.png); + -webkit-background-size: contain; + background-size: contain; + position: absolute; + top: 5px; + left: 5px; + cursor: pointer; + opacity: .3; +} +.bss-fullscreen:hover{ + opacity: .8; +} +:-webkit-full-screen .bss-fullscreen{ + background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png); + -webkit-background-size: contain; + background-size: contain; +} +:-moz-full-screen .bss-fullscreen{ + background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png); + background-size: contain; +} +:-ms-fullscreen .bss-fullscreen{ + background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png); + background-size: contain; +} +:full-screen .bss-fullscreen{ + background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png); + -webkit-background-size: contain; + background-size: contain; +} +:-webkit-full-screen .bss-fullscreen{ + background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png); + -webkit-background-size: contain; + background-size: contain; +} +:-moz-full-screen .bss-fullscreen{ + background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png); + background-size: contain; +} +:-ms-fullscreen .bss-fullscreen{ + background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png); + background-size: contain; +} +:fullscreen .bss-fullscreen{ + background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png); + -webkit-background-size: contain; + background-size: contain; +} diff --git a/app/static/css/style.css b/app/static/css/style.css index a021b04..fb22edf 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -7,14 +7,14 @@ body { background-size: cover; -o-background-size: cover; font-size: 12pt; - font-weight: bold; + /* font-weight: bold; */ } header { background: url('/static/images/texture-diagonal.png' repeat, url('static/images/header-layer.jpg') no repeat 50% -25px, #493874 url('/static/images/bg-linear.jpg') repeat-x 50%, -25px; background-position: 50%, 0; clear: both; - position: relative; + position: fixed; } h1 { diff --git a/app/static/css/style.css.old b/app/static/css/style.css.old deleted file mode 100644 index 4b9a01b..0000000 --- a/app/static/css/style.css.old +++ /dev/null @@ -1,121 +0,0 @@ -body { - background: url('/static/images/bg.jpg') no-repeat center center fixed; - background: #000000; - background-color: #f8f8f8; - padding-top: 0px; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - -o-background-size: cover; - color: gray; -} - - -body { - color: gray; - font-size: 12pt; - font-weight: bold; -} - -h1 { - color: white; -} - - -.fluidMedia { - position: relative; - padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */ - padding-top: 30px; - height: 0; - overflow: hidden; -} - -.fluidMedia iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.login-form { - max-width: 350px; - margin-top: 25%; -} - -.login-panel { - margin-top: 25%; -} - -.form { - max-width: 500px; -} - -.padding-left-32 { - padding-left: 32px; -} - -.padding-left-16 { - padding-left: 16px; -} - -.container-fluid { - position: relative; - max-width: 1170px; - min-width: 480px; -} - -.roundavatar { -border-radius: 50%; --moz-border-radius: 50%; --webkit-border-radius: 50%; -} - -.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { - color: #fff; - border-color: #070; - background-color: #2b7845; -} - -.btn-outline { - color: inherit; - background-color: transparent; -} - -.btn-primary.btn-outline { - color: #428bca; -} - -.btn-success.btn-outline { - color: #5cb85c; -} - -.btn-info.btn-outline { - color: #5bc0de; -} - -.btn-warning.btn-outline { - color: #f0ad4e; -} - -.btn-danger.btn-outline { - color: #d9534f; -} - -.btn-primary.btn-outline:hover, -.btn-success.btn-outline:hover, -.btn-info.btn-outline:hover, -.btn-warning.btn-outline:hover, -.btn-danger.btn-outline:hover { - color: #fff; -} - -.btn-primary.btn-outline:focus, -.btn-success.btn-outline:focus, -.btn-info.btn-outline:focus, -.btn-warning.btn-outline:focus, -.btn-danger.btn-outline:focus { - background-color: #fff; - border-color: #070; -} - diff --git a/app/static/images/1.jpg b/app/static/images/1.jpg deleted file mode 100644 index 22c13f2..0000000 Binary files a/app/static/images/1.jpg and /dev/null differ diff --git a/app/static/images/2.jpg b/app/static/images/2.jpg deleted file mode 100644 index 31fd6e3..0000000 Binary files a/app/static/images/2.jpg and /dev/null differ diff --git a/app/static/images/3.jpg b/app/static/images/3.jpg deleted file mode 100644 index 9ca84aa..0000000 Binary files a/app/static/images/3.jpg and /dev/null differ diff --git a/app/static/images/4.jpg b/app/static/images/4.jpg deleted file mode 100644 index 9ff7c77..0000000 Binary files a/app/static/images/4.jpg and /dev/null differ diff --git a/app/static/images/5.jpg b/app/static/images/5.jpg deleted file mode 100644 index 4a2f54c..0000000 Binary files a/app/static/images/5.jpg and /dev/null differ diff --git a/app/static/images/6.jpg b/app/static/images/6.jpg deleted file mode 100644 index c2d9768..0000000 Binary files a/app/static/images/6.jpg and /dev/null differ diff --git a/app/static/images/Hosting2.png b/app/static/images/Hosting2.png deleted file mode 100644 index c6d68f9..0000000 Binary files a/app/static/images/Hosting2.png and /dev/null differ diff --git a/app/static/images/robot.png b/app/static/images/robot.png deleted file mode 100644 index eebf640..0000000 Binary files a/app/static/images/robot.png and /dev/null differ diff --git a/app/static/js/better-simple-slideshow.js b/app/static/js/better-simple-slideshow.js new file mode 100644 index 0000000..7fdfb9d --- /dev/null +++ b/app/static/js/better-simple-slideshow.js @@ -0,0 +1,163 @@ +var makeBSS = function (el, options) { + var $slideshows = document.querySelectorAll(el), // a collection of all of the slideshow + $slideshow = {}, + Slideshow = { + init: function (el, options) { + + options = options || {}; // if options object not passed in, then set to empty object + options.auto = options.auto || false; // if options.auto object not passed in, then set to false + this.opts = { + selector: (typeof options.selector === "undefined") ? "figure" : options.selector, + auto: (typeof options.auto === "undefined") ? false : options.auto, + speed: (typeof options.auto.speed === "undefined") ? 1500 : options.auto.speed, + pauseOnHover: (typeof options.auto.pauseOnHover === "undefined") ? false : options.auto.pauseOnHover, + fullScreen: (typeof options.fullScreen === "undefined") ? false : options.fullScreen, + swipe: (typeof options.swipe === "undefined") ? false : options.swipe + }; + + this.counter = 0; // to keep track of current slide + this.el = el; // current slideshow container + this.$items = el.querySelectorAll(this.opts.selector); // a collection of all of the slides, caching for performance + this.numItems = this.$items.length; // total number of slides + this.$items[0].classList.add('bss-show'); // add show class to first figure + this.injectControls(el); + this.addEventListeners(el); + if (this.opts.auto) { + this.autoCycle(this.el, this.opts.speed, this.opts.pauseOnHover); + } + if (this.opts.fullScreen) { + this.addFullScreen(this.el); + } + if (this.opts.swipe) { + this.addSwipe(this.el); + } + }, + showCurrent: function (i) { + // increment or decrement this.counter depending on whether i === 1 or i === -1 + if (i > 0) { + this.counter = (this.counter + 1 === this.numItems) ? 0 : this.counter + 1; + } else { + this.counter = (this.counter - 1 < 0) ? this.numItems - 1 : this.counter - 1; + } + + // remove .show from whichever element currently has it + // http://stackoverflow.com/a/16053538/2006057 + [].forEach.call(this.$items, function (el) { + el.classList.remove('bss-show'); + }); + + // add .show to the one item that's supposed to have it + this.$items[this.counter].classList.add('bss-show'); + }, + injectControls: function (el) { + // build and inject prev/next controls + // first create all the new elements + var spanPrev = document.createElement("span"), + spanNext = document.createElement("span"), + docFrag = document.createDocumentFragment(); + + // add classes + spanPrev.classList.add('bss-prev'); + spanNext.classList.add('bss-next'); + + // add contents + spanPrev.innerHTML = '«'; + spanNext.innerHTML = '»'; + + // append elements to fragment, then append fragment to DOM + docFrag.appendChild(spanPrev); + docFrag.appendChild(spanNext); + el.appendChild(docFrag); + }, + addEventListeners: function (el) { + var that = this; + el.querySelector('.bss-next').addEventListener('click', function () { + that.showCurrent(1); // increment & show + }, false); + + el.querySelector('.bss-prev').addEventListener('click', function () { + that.showCurrent(-1); // decrement & show + }, false); + + el.onkeydown = function (e) { + e = e || window.event; + if (e.keyCode === 37) { + that.showCurrent(-1); // decrement & show + } else if (e.keyCode === 39) { + that.showCurrent(1); // increment & show + } + }; + }, + autoCycle: function (el, speed, pauseOnHover) { + var that = this, + interval = window.setInterval(function () { + that.showCurrent(1); // increment & show + }, speed); + + if (pauseOnHover) { + el.addEventListener('mouseover', function () { + interval = clearInterval(interval); + }, false); + el.addEventListener('mouseout', function () { + interval = window.setInterval(function () { + that.showCurrent(1); // increment & show + }, speed); + }, false); + } // end pauseonhover + + }, + addFullScreen: function(el){ + var that = this, + fsControl = document.createElement("span"); + + fsControl.classList.add('bss-fullscreen'); + el.appendChild(fsControl); + el.querySelector('.bss-fullscreen').addEventListener('click', function () { + that.toggleFullScreen(el); + }, false); + }, + addSwipe: function(el){ + var that = this, + ht = new Hammer(el); + ht.on('swiperight', function(e) { + that.showCurrent(-1); // decrement & show + }); + ht.on('swipeleft', function(e) { + that.showCurrent(1); // increment & show + }); + }, + toggleFullScreen: function(el){ + // https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode + if (!document.fullscreenElement && // alternative standard method + !document.mozFullScreenElement && !document.webkitFullscreenElement && + !document.msFullscreenElement ) { // current working methods + if (document.documentElement.requestFullscreen) { + el.requestFullscreen(); + } else if (document.documentElement.msRequestFullscreen) { + el.msRequestFullscreen(); + } else if (document.documentElement.mozRequestFullScreen) { + el.mozRequestFullScreen(); + } else if (document.documentElement.webkitRequestFullscreen) { + el.webkitRequestFullscreen(el.ALLOW_KEYBOARD_INPUT); + } + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } + } + } // end toggleFullScreen + + }; // end Slideshow object ..... + + // make instances of Slideshow as needed + [].forEach.call($slideshows, function (el) { + $slideshow = Object.create(Slideshow); + $slideshow.init(el, options); + }); +}; diff --git a/app/static/js/clouds.js b/app/static/js/clouds.js new file mode 100644 index 0000000..f7de3d1 --- /dev/null +++ b/app/static/js/clouds.js @@ -0,0 +1,49 @@ +var canvas; +var ctx; + +var background; +var width = 300; +var height = 200; + +var cloud; +var cloud_x; + +function init() { + canvas = document.getElementById("clouds"); + width = canvas.width; + height = canvas.height; + ctx = canvas.getContext("2d"); + + // init background + background = new Image(); + background.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/forest.png'; + + // init cloud + cloud = new Image(); + cloud.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png'; + cloud.onload = function(){ + cloud_x = -cloud.width; + }; + + return setInterval(main_loop, 10); +} + +function update(){ + cloud_x += 0.3; + if (cloud_x > width ) { + cloud_x = -cloud.width; + } +} + +function draw() { + ctx.drawImage(background,0,0); + ctx.drawImage(cloud, cloud_x, 0); +} + +function main_loop() { + draw(); + update(); +} + +init(); + diff --git a/app/templates/base.html b/app/templates/base.html index b94ee69..c13f017 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -4,7 +4,7 @@ {% import "bootstrap/fixes.html" as fixes %} {% import "bootstrap/utils.html" as util %} -{% block title %}Panel{% endblock %} +{% block title %}Cloud Builder - Datapoint.bg{% endblock %} {% block html_attribs %} lang="en"{% endblock %} @@ -30,6 +30,7 @@ {% endblock %} {% block content %} + {% block outside_container %}{% endblock %}
{% for message in get_flashed_messages() %}
@@ -39,6 +40,7 @@ {% endfor %} {% block page_content %}{% endblock %} +
{% endblock %} {% block footer %} diff --git a/app/templates/vmanager/index.html b/app/templates/vmanager/index.html index b3512ea..0b9a1c9 100644 --- a/app/templates/vmanager/index.html +++ b/app/templates/vmanager/index.html @@ -1,17 +1,22 @@ {% extends "base.html" %} +{% block styles %} +{{ super() }} + +{% endblock %} + {% block head %} {{ super() }} + +{% endblock %} +{% block scripts %} + +{% endblock %} + +{% block outside_container %} {% endblock %} {% block page_content %} -
-
+
-
- -
Caption goes here
+ +
+
+
-
- -
@@ -88,8 +112,5 @@
-
-
- {% endblock %}