# HG changeset patch # User Edwin Razafimahatratra # Date 1355243944 -3600 # Node ID 01415303372e892bc32591f9429348f73f085e5e # Parent f2123b4487e921b60df0d5969d582ece00aa99d6 écran choix diff -r f2123b4487e9 -r 01415303372e web/choix_1.html --- a/web/choix_1.html Tue Dec 11 13:13:44 2012 +0100 +++ b/web/choix_1.html Tue Dec 11 17:39:04 2012 +0100 @@ -23,12 +23,12 @@ this comment corrects the white-space (display: inline); -->

@@ -42,26 +42,23 @@ - + + - + - + \ No newline at end of file diff -r f2123b4487e9 -r 01415303372e web/choix_2.html --- a/web/choix_2.html Tue Dec 11 13:13:44 2012 +0100 +++ b/web/choix_2.html Tue Dec 11 17:39:04 2012 +0100 @@ -23,12 +23,12 @@ this comment corrects the white-space (display: inline); -->

Corps

Charité

Patrie

@@ -42,26 +42,23 @@ - + + - + - + \ No newline at end of file diff -r f2123b4487e9 -r 01415303372e web/choix_3.html --- a/web/choix_3.html Tue Dec 11 13:13:44 2012 +0100 +++ b/web/choix_3.html Tue Dec 11 17:39:04 2012 +0100 @@ -23,12 +23,12 @@ this comment corrects the white-space (display: inline); -->

@@ -42,26 +42,25 @@ - + + - + - + \ No newline at end of file diff -r f2123b4487e9 -r 01415303372e web/index.html --- a/web/index.html Tue Dec 11 13:13:44 2012 +0100 +++ b/web/index.html Tue Dec 11 17:39:04 2012 +0100 @@ -38,7 +38,7 @@

COMPOSEZ VOTRE FILM

@@ -110,7 +110,7 @@ incMosaic.addImageUrl("static/res/img/accueil-05.jpg"); // Start mosaic effect - incMosaic.start("mosaic", 9, 5); + incMosaic.start("mosaic", 1, 9, 5, true, false, null); }); diff -r f2123b4487e9 -r 01415303372e web/prologue.html --- a/web/prologue.html Tue Dec 11 13:13:44 2012 +0100 +++ b/web/prologue.html Tue Dec 11 17:39:04 2012 +0100 @@ -33,6 +33,15 @@ - + + + + \ No newline at end of file diff -r f2123b4487e9 -r 01415303372e web/static/res/css/style_1024.css --- a/web/static/res/css/style_1024.css Tue Dec 11 13:13:44 2012 +0100 +++ b/web/static/res/css/style_1024.css Tue Dec 11 17:39:04 2012 +0100 @@ -223,25 +223,16 @@ .floatR { float: right; } -.big_txt { - font-family: "Arial Black", sans-serif; - font-size: 51px; - text-align: center; - margin: 109px 0; -} -.big_txt:first-child { - margin-top: 62px; -} + .big_link { font-family: "Arial Black", sans-serif; font-size: 21px; text-align: center; padding: 14px 0 16px 0; margin: 0; + } -.pointer { - cursor: pointer; -} + /*----------------------------------------------*/ /* site takes all the space of the browser */ /*----------------------------------------------*/ @@ -261,6 +252,7 @@ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + height: 100%; } footer { position: absolute; @@ -278,6 +270,9 @@ width: 100%; height: 100%; } +#content.full_hightScreen { + height: 100%; +} /*----------------------------------------------*/ /* elements takes the full height of "content_top" */ /*----------------------------------------------*/ @@ -305,6 +300,12 @@ width: 100%; padding: 0; } +.fullScreen_vcentering #video, +.fullScreen_vcentering video { + max-width: 100%; + height: auto; +} + /*----------------------------------------------*/ /* 4- Main HP */ /*----------------------------------------------*/ @@ -704,4 +705,72 @@ position: absolute; top:50%; right: 0; -} \ No newline at end of file +} +/*----------------------------------------------*/ +/* 6- Page choice */ +/*----------------------------------------------*/ +.big_txt p{ + font-family: "Arial Black", sans-serif; + font-size: 51px; + text-align: center; + text-transform: uppercase; +} +.inter_choice .big_txt p{ + margin: 109px 0; +} +.choix .big_txt p{ + margin: 25px 0; +} +.inter_choice .big_txt p:first-child, +.choice .big_txt p:first-child, { + margin-top: 62px; +} +.choix .big_txt p:last-child { + margin-bottom: 52px; +} +.box_transparance { + opacity :1; +} +.pointer { + cursor: pointer; +} +.choix { + position: relative; + z-index: 6; +} +.mosaic_choice { + position: absolute; + z-index: 5; + left: 0; + bottom: 50%; + background: red; +} +.blue a, +.blue a:link, +.blue a:visited, +.blue a:active { + color: #010cfe; +} +.blue a:hover, +.blue a:focus { + color: #ffffff; +} +.white a, +.white a:link, +.white a:visited, +.white a:active { + color: #ffffff; +} +.red a, +.red a:link, +.red a:visited, +.red a:active { + color: #fe0000; +} +.white a:hover, +.white a:focus, +.red a:hover, +.red a:focus { + color: #000000; +} + diff -r f2123b4487e9 -r 01415303372e web/static/res/img/choix1fond1.jpg Binary file web/static/res/img/choix1fond1.jpg has changed diff -r f2123b4487e9 -r 01415303372e web/static/res/img/choix1fond2.jpg Binary file web/static/res/img/choix1fond2.jpg has changed diff -r f2123b4487e9 -r 01415303372e web/static/res/img/choix1fond3.jpg Binary file web/static/res/img/choix1fond3.jpg has changed diff -r f2123b4487e9 -r 01415303372e web/static/res/img/choix2fond1.jpg Binary file web/static/res/img/choix2fond1.jpg has changed diff -r f2123b4487e9 -r 01415303372e web/static/res/img/choix2fond2.jpg Binary file web/static/res/img/choix2fond2.jpg has changed diff -r f2123b4487e9 -r 01415303372e web/static/res/img/choix2fond3.jpg Binary file web/static/res/img/choix2fond3.jpg has changed diff -r f2123b4487e9 -r 01415303372e web/static/res/img/choix3fond1.jpg Binary file web/static/res/img/choix3fond1.jpg has changed diff -r f2123b4487e9 -r 01415303372e web/static/res/img/choix3fond2.jpg Binary file web/static/res/img/choix3fond2.jpg has changed diff -r f2123b4487e9 -r 01415303372e web/static/res/img/choix3fond3.jpg Binary file web/static/res/img/choix3fond3.jpg has changed diff -r f2123b4487e9 -r 01415303372e web/static/res/js/incchoice.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/static/res/js/incchoice.js Tue Dec 11 17:39:04 2012 +0100 @@ -0,0 +1,50 @@ +var effectSpeed = 8; + +function IncChoice() +{ + this.currentWorldIndex = -1; + this.lastWorldIndex = -1; + + this.setMosaicEffect = function(images1, images2, nextUrl) + { + // Choose 2 image for the effect + var image1 = images1[incMosaic.randomInt(0, images1.length)]; + var image2 = images2[incMosaic.randomInt(0, images2.length)]; + incMosaic.addImageUrl("static/res/img/" + image1); + incMosaic.addImageUrl("static/res/img/" + image2); + + // Start mosaic effect + incMosaic.start("mosaic", effectSpeed, 9, 5, false, true, function() { location.href = nextUrl;}); + }; + + this.selectWord = function(word) + { + if (this.currentWorldIndex == this.lastWorldIndex) { + // Don't set the word 2 times + return; + } + + // Start the mosaic effect + incMosaic.goEffect(); + + // Fade the text + $('.big_txt').animate({opacity: 0}, 20000 * 1 / effectSpeed); + + // Save the word + this.setCookie("niv1_world" + this.currentWorldIndex, word); + this.lastWorldIndex = this.currentWorldIndex; + //++this.currentWorldIndex; + }; + + this.setCookie = function(name, value) + { + $.removeCookie(name); + $.cookie(name, value, { expires: 7, path: '/' }); + }; + + this.getCookie = function(name) { + return $.cookie(name); + }; +} + +var incChoice = new IncChoice(); \ No newline at end of file diff -r f2123b4487e9 -r 01415303372e web/static/res/js/incmosaic.js --- a/web/static/res/js/incmosaic.js Tue Dec 11 13:13:44 2012 +0100 +++ b/web/static/res/js/incmosaic.js Tue Dec 11 17:39:04 2012 +0100 @@ -19,6 +19,9 @@ this.imageHeight; // Effect + this.waitStartEffectTime = 3000; + this.waitStartEffectGo; + this.effectSpeed; this.squareCountX; this.squareCountY; this.srcSquareWidth; @@ -27,6 +30,8 @@ this.squareHeight; this.effects = []; this.squareEffects = []; + this.loop; + this.endEffecFunc; // Time this.startTime; @@ -40,15 +45,25 @@ this.imageUrls.push(url); }; - this.start = function(canvasId, squareCountX, squareCountY) + this.start = function(canvasId, effectSpeed, squareCountX, squareCountY, loop, waitStartEffectGo, endEffecFunc) { // Canvas ID this.canvasId = canvasId; + // Speed + this.effectSpeed = 1 / effectSpeed; + // Set square count this.squareCountX = squareCountX; this.squareCountY = (squareCountY === undefined) ? squareCountX: squareCountY; + // End effect behavior + this.loop = loop; + this.endEffecFunc = endEffecFunc; + + // Does the effect wait for go + this.waitStartEffectGo = waitStartEffectGo; + // Init the canvas objects this.init(); @@ -56,13 +71,13 @@ this.registerEffects(); // Set a new effect transition between 2 images - this.SetNewEffect(); + this.setNewEffect(); // Main loop this.loopCallback(); }; - this.SetNewEffect = function() + this.setNewEffect = function() { // Set a random pair images this.setRandomPairImages(); @@ -72,7 +87,12 @@ // Time this.startTime = new Date().getTime(); - } + }; + + this.goEffect = function() + { + this.waitStartEffectGo = false; + }; this.init = function() { @@ -165,7 +185,8 @@ // Get time var time = new Date().getTime(); - if (time < this.startTime + 3000) { + var timeToWait = (this.startTime + this.waitStartEffectTime)*this.effectSpeed; + if (time < timeToWait || this.waitStartEffectGo) { // Draw the first image this.ctx.drawImage(this.pairImages[0], 0, 0, this.srcSquareWidth*this.squareCountX, this.srcSquareHeight*this.squareCountY, 0, 0, this.squareWidth*this.squareCountX, this.squareHeight*this.squareCountY); return; @@ -188,8 +209,13 @@ } if (!effectsContinue) { - console.log("Effect finished !!!!!"); - this.SetNewEffect(); + if (this.loop) { + // The effect loop + this.setNewEffect(); + } else if (this.endEffecFunc != undefined && this.endEffecFunc != null) { + // Call the end callback + this.endEffecFunc(); + } } }; @@ -220,63 +246,41 @@ { var count = 7; var color = 64; + var speed = this.effectSpeed; // Create semi random effects - var range1 = 3000; - var range2 = 5000; - - var i, time1, time2, effectParam1, effect1, effectParam2, effect2, fullEffect1; - for (i = 0; i < count; ++i) { - time1 = this.randomInt(range1, range2); - time2 = this.randomInt(range1, range2); - c1 = this.randomInt(0, color); + var range1 = 3000 * speed; + var range2 = 5000 * speed; + this.registerEffectsTime(count, color, range1, range2); - effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1)); - effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut); - - effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2)); - effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5); - - fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); - this.effects.push(fullEffect1); - } + // Create semi random effects + range1 = 7000 * speed; + range2 = 15000 * speed; + this.registerEffectsTime(count, color, range1, range2); // Create semi random effects - range1 = 7000; - range2 = 15000; - for (i = 0; i < count; ++i) { - time1 = this.randomInt(range1, range2); - time2 = this.randomInt(range1, range2); - c1 = this.randomInt(0, color); + range1 = 17000 * speed; + range2 = 23000 * speed; + this.registerEffectsTime(count, color, range1, range2); + }; - effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1)); - effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut); + this.registerEffectsTime = function(count, color, range1, range2) + { + for (var i = 0; i < count; ++i) { + var time1 = this.randomInt(range1, range2); + var time2 = this.randomInt(range1, range2); + var c1 = this.randomInt(0, color); + + var effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1)); + var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut); - effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2)); - effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5); + var effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2)); + var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5); - fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); + var fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); this.effects.push(fullEffect1); } - - // Create semi random effects - range1 = 17000; - range2 = 23000; - for (i = 0; i < count; ++i) { - time1 = this.randomInt(range1, range2); - time2 = this.randomInt(range1, range2); - c1 = this.randomInt(0, color); - - effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1)); - effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut); - - effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2)); - effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5); - - fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); - this.effects.push(fullEffect1); - } - }; + }; // -------------------------------------------------------------------------------------------------------------------- // Tools diff -r f2123b4487e9 -r 01415303372e web/static/res/js/incresize.js --- a/web/static/res/js/incresize.js Tue Dec 11 13:13:44 2012 +0100 +++ b/web/static/res/js/incresize.js Tue Dec 11 17:39:04 2012 +0100 @@ -22,7 +22,9 @@ if (bottomId != null) { this.bottom = $('#' + bottomId); } - this.footer = $('#' + footerId); + if (footerId != null) { + this.footer = $('#' + footerId); + } this.minTopBottomHeight = minTopBottomHeight; this.ratio = ratio; this.preMiddleSizeFunc = preMiddleSizeFunc; @@ -39,10 +41,13 @@ var self = incResize; // Compute maximun middle element height - var heightForTopMiddleBotom = $(self.content).height() - $(self.footer).height() - 70; + var heightForTopMiddleBotom = $(self.content).height() - 70; + if (self.footer !== undefined) { + heightForTopMiddleBotom -= $(self.footer).height() + } var maxMiddleHeight = heightForTopMiddleBotom - self.minTopBottomHeight * 2; - // Get the middle element parent width nad test if it is not to big (to let place for top and bottom without adding scroll bars) + // Get the middle element parent width and test if it is not to big (to let place for top and bottom without adding scroll bars) var middleRatio = 1 / self.ratio; var newMiddleWidth = $(self.middleContainer).width(); var newMiddleHeight = newMiddleWidth * middleRatio; @@ -80,7 +85,7 @@ // Change top and bottom heights if (this.top != undefined && this.bottom != undefined) { // Get the full height and compute heigth for top and bottom - var remainingHeight = $(self.content).height() - $(self.footer).height() - newMiddleHeight - 70; + var remainingHeight = heightForTopMiddleBotom - newMiddleHeight; var newOtherHeight = remainingHeight / 2.0; if (newOtherHeight < self.minTopBottomHeight) { newOtherHeight = self.minTopBottomHeight; @@ -88,7 +93,7 @@ $(self.top).css({"height" : +newOtherHeight+'px', "lineHeight" : +newOtherHeight+'px'}); $(self.bottom).css({"height" : +newOtherHeight+'px', "lineHeight" : +newOtherHeight+'px'}); } - } + }; } var incResize = new IncResize(); diff -r f2123b4487e9 -r 01415303372e web/static/res/js/jquery.cookie.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/static/res/js/jquery.cookie.js Tue Dec 11 17:39:04 2012 +0100 @@ -0,0 +1,72 @@ +/*! + * jQuery Cookie Plugin v1.3 + * https://github.com/carhartl/jquery-cookie + * + * Copyright 2011, Klaus Hartl + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://www.opensource.org/licenses/mit-license.php + * http://www.opensource.org/licenses/GPL-2.0 + */ +(function ($, document, undefined) { + + var pluses = /\+/g; + + function raw(s) { + return s; + } + + function decoded(s) { + return decodeURIComponent(s.replace(pluses, ' ')); + } + + var config = $.cookie = function (key, value, options) { + + // write + if (value !== undefined) { + options = $.extend({}, config.defaults, options); + + if (value === null) { + options.expires = -1; + } + + if (typeof options.expires === 'number') { + var days = options.expires, t = options.expires = new Date(); + t.setDate(t.getDate() + days); + } + + value = config.json ? JSON.stringify(value) : String(value); + + return (document.cookie = [ + encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value), + options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE + options.path ? '; path=' + options.path : '', + options.domain ? '; domain=' + options.domain : '', + options.secure ? '; secure' : '' + ].join('')); + } + + // read + var decode = config.raw ? raw : decoded; + var cookies = document.cookie.split('; '); + for (var i = 0, l = cookies.length; i < l; i++) { + var parts = cookies[i].split('='); + if (decode(parts.shift()) === key) { + var cookie = decode(parts.join('=')); + return config.json ? JSON.parse(cookie) : cookie; + } + } + + return null; + }; + + config.defaults = {}; + + $.removeCookie = function (key, options) { + if ($.cookie(key) !== null) { + $.cookie(key, null, options); + return true; + } + return false; + }; + +})(jQuery, document);