diff --git a/examples/desktop/css/browseralert.css b/examples/desktop/css/browseralert.css new file mode 100644 index 0000000..31aea33 --- /dev/null +++ b/examples/desktop/css/browseralert.css @@ -0,0 +1,355 @@ +@font-face { + font-family: 'browsers'; + src: url('font/browsers.eot?56108678'); + src: url('font/browsers.eot?56108678#iefix') format('embedded-opentype'), + url('font/browsers.woff?56108678') format('woff'), + url('font/browsers.ttf?56108678') format('truetype'), + url('font/browsers.svg?56108678#browsers') format('svg'); + font-weight: normal; + font-style: normal; +} +/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ +/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ +/* +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: 'browsers'; + src: url('../font/browsers.svg?56108678#browsers') format('svg'); + } +} +*/ + + [class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "browsers"; + font-style: normal; + font-weight: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + /* opacity: .8; */ + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - magrins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} + +.icon-firefox:before { content: '\e840'; } /* '' */ +.icon-chrome:before { content: '\e841'; } /* '' */ +.icon-opera:before { content: '\e842'; } /* '' */ +.icon-ie:before { content: '\e843'; } /* '' */ + + + + + + + +/* Browser overlay */ + + .browser-overlay { + display: none; + + width: 100%; + height: 100%; + + position: absolute; + top: 0px; + left: 0px; + + background: rgba(0,0,0,.7); + + z-index: 50000; + + -webkit-animation: fade 0.4s ease-in-out; + -moz-animation: fade 0.4s ease-in-out; +} + + .browser-overlay.up { + -webkit-animation: fadeout 0.4s ease-in-out both; + -moz-animation: fadeout 0.4s ease-in-out both; +} + +.browser-overlay .wrapper { + width: 400px; + padding: 40px; + + border-radius: 4px; + position: absolute; + top: 50%; + left: 50%; + margin-left: -240px; + margin-top: -240px; + + box-shadow: rgba(0,0,0,0.4) 0px 0px 200px inset; + + -webkit-animation: bounceInDown 0.6s ease both; + -moz-animation: bounceInDown 0.6s ease both; + background-color: #373731; +} + + .browser-overlay.up .wrapper { + -webkit-animation: bounceInUp 0.6s ease both; + -moz-animation: bounceInUp 0.6s ease both; +} + + .browser-overlay p { + color: #f7f7e2; + font-size: 15px; + margin-bottom: 5px; + + width: auto; +} + + .browser-overlay .wrapper small { + color: #f7f7e2; + color: rgba(247, 247, 226, 0.3); + margin-top: -5px; +} + + .browser-overlay .wrapper small a { + color: #f7f7e2; + color: rgba(247, 247, 226, 0.5); + text-decoration: none; + -webkit-transition: all 0.2s ease; +} + + .browser-overlay .wrapper small a:hover { + color: rgba(247, 247, 226, 0.8); + text-decoration: underline; +} + + .browser-overlay h2 { + color: #f7f7e2; + margin: 0 0px 10px; + font: normal 30px HelveticaNeue-Light, Helvetica, Arial, sans-serif; +} + + .browser-overlay h2 strong { + font-weight: bold; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; +} + + .browser-overlay .device-icon { + float: right; + padding-left: 30px; +} + + + + + + + + + + + + +/* Animations */ + +@-webkit-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes fadeout { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-webkit-keyframes up { + 0% { + -webkit-transform: translateY(0px); + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translateY(-100%); + } +} +@-webkit-keyframes down { + 0% { + -webkit-transform: translateY(-100%); + opacity: 0; + } + 100% { + opacity: 1; + -webkit-transform: translateY(0px); + } +} + +@-webkit-keyframes fadeInSmall { + 0% { + opacity: 0; + -webkit-transform: translateY(-15px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-webkit-keyframes fadeUpSmall { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-15px); + } +} +@-webkit-keyframes bounceInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + } + + 60% { + opacity: 1; + } + + 80% { + -webkit-transform: translateX(10px); + } + + 100% { + -webkit-transform: translateX(0); + } +} +@-webkit-keyframes bounceInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } + + 60% { + opacity: 1; + } + + 100% { + -webkit-transform: translateY(0); + } +} +@-webkit-keyframes bounceInUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0px); + } + + 60% { + opacity: 0; + } + + 100% { + -webkit-transform: translateY(-2000px); + } +} +@-webkit-keyframes posh { + 0% { + -webkit-transform: translateY(-500px) scale(1.9); + opacity: 0; + } + 50% { + -webkit-transform: scale(1); + } + 100% { + -webkit-transform: translateY(0px); + opacity: 1; + } +} + +@-moz-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-moz-keyframes fadeout { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-moz-keyframes fadeInSmall { + 0% { + opacity: 0; + -moz-transform: translateY(-15px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-moz-keyframes bounceInRight { + 0% { + opacity: 0; + -moz-transform: translateX(2000px); + } + + 60% { + opacity: 1; + } + + 80% { + -moz-transform: translateX(10px); + } + + 100% { + -moz-transform: translateX(0); + } +} +@-moz-keyframes bounceInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-2000px); + } + + 60% { + opacity: 1; + } + + 100% { + -moz-transform: translateY(0); + } +} +@-moz-keyframes bounceInUp { + 0% { + opacity: 1; + -moz-transform: translateY(0px); + } + + 60% { + opacity: 0; + } + + 100% { + -moz-transform: translateY(-2000px); + } +} \ No newline at end of file diff --git a/examples/desktop/css/font/browsers.eot b/examples/desktop/css/font/browsers.eot new file mode 100644 index 0000000..a6f11f9 Binary files /dev/null and b/examples/desktop/css/font/browsers.eot differ diff --git a/examples/desktop/css/font/browsers.svg b/examples/desktop/css/font/browsers.svg new file mode 100644 index 0000000..c50521f --- /dev/null +++ b/examples/desktop/css/font/browsers.svg @@ -0,0 +1,47 @@ + + + + +Created by FontForge 20110222 at Tue Apr 30 14:43:35 2013 + By root +Copyright (C) 2012 by original authors @ fontello.com + + + + + + + + + + + + + + diff --git a/examples/desktop/css/font/browsers.ttf b/examples/desktop/css/font/browsers.ttf new file mode 100644 index 0000000..3f0f477 Binary files /dev/null and b/examples/desktop/css/font/browsers.ttf differ diff --git a/examples/desktop/css/font/browsers.woff b/examples/desktop/css/font/browsers.woff new file mode 100644 index 0000000..8a27dc8 Binary files /dev/null and b/examples/desktop/css/font/browsers.woff differ diff --git a/examples/desktop/desktop.js b/examples/desktop/desktop.js index b88b528..ab90412 100644 --- a/examples/desktop/desktop.js +++ b/examples/desktop/desktop.js @@ -75,7 +75,7 @@ setTimeout(function(){win.open();}, delay); } - setTimeout(function() { + function init() { loader.addClass('hide'); loader.on(Ventus.browser.animationEventName(), function() { loader.hide(); @@ -86,6 +86,24 @@ openWithDelay(aboutWin, 400); openWithDelay(playerWin, 600); }); + } + + setTimeout(function() { + var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); + var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor); + var $browserAlert = $('.browser-overlay'); + + if(!isChrome && !isSafari) { + $browserAlert.find('.close-button').click(function() { + $browserAlert.hide(); + + init(); + }); + + $browserAlert.show(); + } else { + init(); + } }, 3000); diff --git a/examples/desktop/index.html b/examples/desktop/index.html index a9db19a..b34c344 100644 --- a/examples/desktop/index.html +++ b/examples/desktop/index.html @@ -13,6 +13,8 @@ + + @@ -31,9 +33,15 @@ - + +
+
+

This experiment works in webkit based browsers only!

+ +

This means we cannot guarantee that everything will be displayed properly on your browser. Sorry.

+ Continue anyway > +
+