diff --git a/Gemfile b/Gemfile index 38cd3222..be005a7f 100644 --- a/Gemfile +++ b/Gemfile @@ -7,6 +7,7 @@ gem 'sass-rails' #, '~> 4.0.3' gem 'uglifier' #, '>= 1.3.0' gem 'coffee-rails' #, '~> 4.0.0' gem 'jquery-rails' +gem 'jquery-ui-rails' gem 'turbolinks' gem 'jbuilder' #, '~> 2.0' gem 'sdoc', group: :doc #, '~> 0.4.0' diff --git a/Gemfile.lock b/Gemfile.lock index 5e1009bc..6e924806 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -218,6 +218,8 @@ GEM rails-dom-testing (>= 1, < 3) railties (>= 4.2.0) thor (>= 0.14, < 2.0) + jquery-ui-rails (6.0.1) + railties (>= 3.2.16) launchy (2.5.0) addressable (~> 2.7) listen (3.7.0) @@ -464,6 +466,7 @@ DEPENDENCIES hub jbuilder jquery-rails + jquery-ui-rails launchy net-ssh (>= 4.0.0) parallel_tests diff --git a/app/assets/images/icp-coin.svg b/app/assets/images/icp-coin.svg new file mode 100755 index 00000000..47c98f04 --- /dev/null +++ b/app/assets/images/icp-coin.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index b31ff36a..97ba4fea 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -11,6 +11,7 @@ // about supported directives. // //= require jquery +//= require jquery-ui //= require jquery_ujs //= require turbolinks // require react diff --git a/app/assets/javascripts/eyecandy.js b/app/assets/javascripts/eyecandy.js index cfd47807..17ebd62a 100644 --- a/app/assets/javascripts/eyecandy.js +++ b/app/assets/javascripts/eyecandy.js @@ -5,6 +5,7 @@ vertical: true, speed: 100, // In pixels per second color: "#00ffff", + zindex: 0, container: $(this).parent(), bumpEdge: function () {} }, options); @@ -22,24 +23,28 @@ move = { right: function () { + $el.css("z-index", Math.round(settings.zindex)); $el.animate({left: (containerWidth - elWidth)}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { settings.bumpEdge(); move.left(); }}); }, left: function () { + $el.css("z-index", Math.round(settings.zindex)); $el.animate({left: 0}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { settings.bumpEdge(); move.right(); }}); }, down: function () { + $el.css("z-index", Math.round(settings.zindex)); $el.animate({top: (containerHeight - elHeight)}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { settings.bumpEdge(); move.up(); }}); }, up: function () { + $el.css("z-index", Math.round(settings.zindex)); $el.animate({top: 0}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { settings.bumpEdge(); move.down(); @@ -66,6 +71,12 @@ $(document).ready( function() { + $(".eyecandy").bind('my-event', function(event) { + alert(event); + }); + + $("#mySecondDiv").trigger('my-event', [1, 2]); + $('.eyecandy').on( "click", function() { $(this).toggleClass("clicked"); // $(this).marqueeify({ @@ -78,19 +89,29 @@ $(document).ready( function() { // }); } ); - $('.eyecandy').marqueeify({ +$('.eyecandy').marqueeify({ speed: 300, - self: this, bumpEdge: function () { // svg bgcolor // var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)"; var newColor = Math.floor(Math.random()*16777215).toString(16); // console.log($(this)[0].self); - console.log($(this)[0].color); - console.log($(this)[0].self); + // console.log($(this)[0].color); + // console.log($(this)[0].self); // .css("background-color", "#" + newColor); //.css("background-color", "#00ffff"); $(this)[0].speed = Math.random()*420; + $(this)[0].zindex = Math.random()*20; + // .parent.css("display", "none"); + // console.log(this); + // delete this; } }); + + // $( ".eyecandy" ).draggable({ + // addClasses: true + // }); + $("#home-headline").draggable({ + addClasses: true + }); }); diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index 342a3dfe..39b67b71 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -72,6 +72,8 @@ header margin-top: 6em flex: 1 1 auto text-align: center + z-index: 10 + cursor: pointer h1 font-size: 10vmin color: #111 @@ -79,13 +81,20 @@ header padding: 5vmin margin: 0 border: 3px solid black + background-color: #33cc3399 #main-menu flex: 1 1 auto font-size: 5vmin display: flex flex-direction: column + z-index: 10 + background: #00ff33 + background: #00000066 + border-radius: 100px 100px 0 0 + padding: 2em a + display:inline background: green margin: 4px 0 4px padding: 8px @@ -108,11 +117,17 @@ header position: absolute top: 0 // background-color: hotpink + border-radius: 300px + transition: background-color 0.2s, box-shadow 0.2s img - width: 64px + width: 4rem + cursor: pointer + &:hover + background-color: gold + box-shadow: 1px 1px 8px 4px gold &.clicked - // box-shadow: 1px 1px 4px 4px hotpink - border-radius: 300px + background-color: #00ffff + box-shadow: 0px 0px 8px 4px #00ffff li diff --git a/app/views/visitors/index.html.haml b/app/views/visitors/index.html.haml index 4bd4e107..c8454dc8 100644 --- a/app/views/visitors/index.html.haml +++ b/app/views/visitors/index.html.haml @@ -11,102 +11,9 @@ -# = link_to 'About', page_path('about') -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 - -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 - -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 - -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 -.eyecandy - = image_tag "ICYPEES-glass.png", width: 32 -.eyecandy - = image_tag "ICYPEES-coin.png", width: 32 +- 10.times do |i| + .eyecandy + = image_tag "ICYPEES-glass.png" +- 20.times do |i| + .eyecandy + = image_tag "ICYPEES-coin.png"