antadis/chocolatdemariage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Prepare integration

Browse Source
This commit is contained in:
Michael RICOIS 2017-06-22 09:39:42 +02:00
parent d447331164
commit 9373cb2b32
19 changed files with 3904 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

525
www/modules/antadissimulator/views/js/doublecube-bicolor.js Normal file
View File

@ -0,0 +1,525 @@
var
_factor = 1,
_max_amount = 460,
_unit = 360/_max_amount ,
_flag = false,
_angle = {'x': 0, 'y': 0};
_anglelast = {'x': 0, 'y': 0};
;
var _custom =
{
'face_custom' :
{
'image' : null,
'text' : '',
'is_initials' : false
},
'faces_dc_exclu' :
{
},
'faces_chocos_exclu' :
{
}
}
var face_exclu =
{
'index' : 0,
'image' : null,
'color' : '',
'color_text' : '',
'text' : '',
'font' : '',
'is_initials' : false,
'is_custom' : false
}
var rotateR =
[
null,
[-90,0],
[90,0],
[0,180],
[0,0],
[0,100],
[0,-20],
[-90,0],
[90,0],
[0,180],
[0,0],
[0,20],
[0,-100]
]
// Start when DOM is ready
$(function() {
updateFaces();
initDrag();
});
function updateFaces()
{
log('updateFaces');
// reset faces
$('.container-db').find('.noms-holder').remove();
$('.container-db').find('.date-holder').remove();
$('.chocos-holder').find('.noms-holder').remove();
$('.chocos-holder').find('.date-holder').remove();
$('.container-pochette').find('.noms-holder').remove();
$('.container-pochette').find('.date-holder').remove();
$('.face-custom-txt').removeClass('face-custom-txt');
$('.face-custom-img').removeClass('face-custom-img');
$(".container-db").empty()
$(".chocos-holder").empty()
$(".container-pochette").empty()
var chocos_style = "";
//thematique
if(_simu.custom == "thematique")
{
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-pochette").html($('#temp-base .pochettes').contents().clone());
$(".container-db .db-cube1 .back").addClass('face-custom-txt');
$(".container-db .db-cube1 .back").addClass('face-custom-img');
checkfaceCustom();
//DOUBLECUBE
// 4 8 5
if(_simu.modele == "ivoire" || _simu.modele == "tendance" || _simu.modele == "champetre" || _simu.modele == "uv")
{
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube1 .left")
}
// 4 8 7
if(_simu.modele == "oriental")
{
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .top")
}
// 4 8 12
else if(_simu.modele == "chocolate" || _simu.modele == "cinema" || _simu.modele == "oriental" || _simu.modele == "fleurs" || _simu.modele == "vintage" || _simu.modele == "voyage" || _simu.modele == "gourmandise")
{
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .right")
}
$('.container-db.'+_simu.modele+' .db-cube1 .top').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_1.png)'})
$('.container-db.'+_simu.modele+' .db-cube1 .bottom').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_2.png)'})
$('.container-db.'+_simu.modele+' .db-cube1 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_3.png)'})
$('.container-db.'+_simu.modele+' .db-cube1 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_4.png)'})
$('.container-db.'+_simu.modele+' .db-cube1 .left').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_5.png)'})
$('.container-db.'+_simu.modele+' .db-cube1 .right').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_6.png)'})
$('.container-db.'+_simu.modele+' .db-cube2 .top').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_7.png)'})
$('.container-db.'+_simu.modele+' .db-cube2 .bottom').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_8.png)'})
$('.container-db.'+_simu.modele+' .db-cube2 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_9.png)'})
$('.container-db.'+_simu.modele+' .db-cube2 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_10.png)'})
$('.container-db.'+_simu.modele+' .db-cube2 .left').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_11.png)'})
$('.container-db.'+_simu.modele+' .db-cube2 .right').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/db/face_12.png)'})
//CHOCOS
// faces chocos identiques
if(_simu.modele == "chocolate" || _simu.modele == "cinema" || _simu.modele == "oriental" || _simu.modele == "champetre")
{
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .front")
$('#custom_elmts .date-holder-line').clone().appendTo(".chocos-holder .back")
$('.chocos-holder.'+_simu.modele+' .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_13.png)'})
$('.chocos-holder.'+_simu.modele+' .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_14.png)'})
//pochette
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .front")
$('#custom_elmts .date-holder-line').clone().appendTo(".container-pochette .back")
$('.container-pochette.'+_simu.modele+' .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_13.png)'})
$('.container-pochette.'+_simu.modele+' .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_14.png)'})
}
// faces chocos différentes
else
{
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front")
$('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front")
$('.chocos-holder.'+_simu.modele+' .choco1 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_13.png)'})
$('.chocos-holder.'+_simu.modele+' .choco1 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_14.png)'})
$('.chocos-holder.'+_simu.modele+' .choco2 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_15.png)'})
$('.chocos-holder.'+_simu.modele+' .choco2 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_16.png)'})
$('.chocos-holder.'+_simu.modele+' .choco3 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_17.png)'})
$('.chocos-holder.'+_simu.modele+' .choco3 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_18.png)'})
$('.chocos-holder.'+_simu.modele+' .choco4 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_19.png)'})
$('.chocos-holder.'+_simu.modele+' .choco4 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_20.png)'})
$('.chocos-holder.'+_simu.modele+' .choco5 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_21.png)'})
$('.chocos-holder.'+_simu.modele+' .choco5 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_22.png)'})
//pochette
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .pochette1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .pochette4 .front")
$('#custom_elmts .date-holder').clone().appendTo(".container-pochette .pochette2 .front")
$('.container-pochette.'+_simu.modele+' .pochette1 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_13.png)'})
$('.container-pochette.'+_simu.modele+' .pochette1 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_14.png)'})
$('.container-pochette.'+_simu.modele+' .pochette2 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_15.png)'})
$('.container-pochette.'+_simu.modele+' .pochette2 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_16.png)'})
$('.container-pochette.'+_simu.modele+' .pochette3 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_17.png)'})
$('.container-pochette.'+_simu.modele+' .pochette3 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_18.png)'})
$('.container-pochette.'+_simu.modele+' .pochette4 .front').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_19.png)'})
$('.container-pochette.'+_simu.modele+' .pochette4 .back').css({'background-image':'url(img/simulation/thematique/'+_simu.modele+'/chocos/face_20.png)'})
}
if(_simu.modele == "fleurs" || _simu.modele == "tendance" || _simu.modele == "uv" || _simu.modele == "voyage" || _simu.modele == "vintage" || _simu.modele == "gourmandise")
{
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco5 .front")
}
}
//bicolore
else if(_simu.custom == "bicolore")
{
$('#custom-freeface').hide()
if(_simu.modele == "damier")
{
if(_simu.offre == "doublecube") $('#custom-freeface').show()
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-pochette").html($('#temp-base .pochettes').contents().clone());
$('.container-db .cubeface').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.chocos-holder .flipper .front').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.chocos-holder .flipper .back').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.container-pochette .pochette .front').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.container-pochette .pochette .back').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$(".color_1").addClass(_simu.color_1_id)
$(".color_2").addClass(_simu.color_2_id)
$('.switch').removeClass('switch');
$(".container-db .db-cube1 .back .color_2").addClass('face-custom-img');
$(".container-db .db-cube1 .back .color_1").addClass('face-custom-txt');
// dc
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front .color_2")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom .color_1")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube1 .left .color_1")
$(".container-db .db-cube1 .left").addClass('switch')
$(".container-db .db-cube1 .right").addClass('switch')
$(".container-db .db-cube1 .top").addClass('switch')
$(".container-db .db-cube1 .back").addClass('switch')
$(".container-db .db-cube2 .bottom").addClass('switch')
$(".container-db .db-cube2 .left").addClass('switch')
$(".container-db .db-cube2 .right").addClass('switch')
log("color_1_id : "+_simu.color_1_id);
$('.container-db .db-cube1 .top .color_1.'+_simu.color_1_id).css({'background-image' : 'url(img/simulation/bicolore/damier/db/'+_simu.color_1_id+'/face_1.png)'})
$('.container-db .db-cube1 .right .color_1.'+_simu.color_1_id).css({'background-image' : 'url(img/simulation/bicolore/damier/db/'+_simu.color_1_id+'/face_6.png)'})
$('.container-db .db-cube2 .top .color_2.'+_simu.color_2_id).css({'background-image' : 'url(img/simulation/bicolore/damier/db/'+_simu.color_2_id+'/face_7.png)'})
$('.container-db .db-cube2 .bottom .color_2.'+_simu.color_2_id).css({'background-image' : 'url(img/simulation/bicolore/damier/db/'+_simu.color_2_id+'/face_8.png)'})
$('.container-db .db-cube2 .back .color_2.'+_simu.color_2_id).css({'background-image' : 'url(img/simulation/bicolore/damier/db/'+_simu.color_2_id+'/face_9.png)'})
$('.container-db .db-cube2 .front .color_2.'+_simu.color_2_id).css({'background-image' : 'url(img/simulation/bicolore/damier/db/'+_simu.color_2_id+'/face_10.png)'})
$('.container-db .db-cube2 .left .color_1.'+_simu.color_1_id).css({'background-image' : 'url(img/simulation/bicolore/damier/db/'+_simu.color_1_id+'/face_11.png)'})
$('.container-db .db-cube2 .right .color_1.'+_simu.color_1_id).css({'background-image' : 'url(img/simulation/bicolore/damier/db/'+_simu.color_1_id+'/face_12.png)'})
var color = (_simu.color_1_id == "blanc" || _simu.color_1_id == "ivoire") ? 'noir' : _simu.color_2_id;
log(color);
$('.chocos-holder.'+_simu.modele+' .choco1 .back .color_2').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+color+'/face_14.png)'})
$('.chocos-holder.'+_simu.modele+' .choco2 .back .color_1').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+_simu.color_1_id+'/face_16.png)'})
$('.chocos-holder.'+_simu.modele+' .choco3 .front .color_2').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+_simu.color_2_id+'/face_17.png)'})
$('.chocos-holder.'+_simu.modele+' .choco3 .back .color_2').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+color+'/face_18.png)'})
$('.chocos-holder.'+_simu.modele+' .choco4 .back .color_1').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+_simu.color_1_id+'/face_20.png)'})
$('.chocos-holder.'+_simu.modele+' .choco5 .front .color_2').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+_simu.color_2_id+'/face_21.png)'})
$('.chocos-holder.'+_simu.modele+' .choco5 .back .color_2').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+color+'/face_22.png)'})
$('.container-pochette.'+_simu.modele+' .pochette1 .back .color_2').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+color+'/face_14.png)'})
$('.container-pochette.'+_simu.modele+' .pochette2 .back .color_1').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+_simu.color_1_id+'/face_16.png)'})
$('.container-pochette.'+_simu.modele+' .pochette3 .front .color_2').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+_simu.color_2_id+'/face_17.png)'})
$('.container-pochette.'+_simu.modele+' .pochette3 .back .color_2').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+color+'/face_18.png)'})
$('.container-pochette.'+_simu.modele+' .pochette4 .back .color_1').css({'background-image':'url(img/simulation/bicolore/damier/chocos/'+_simu.color_1_id+'/face_20.png)'})
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco1 .front .color_2")
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front .color_1")
$('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front .color_1")
$(".chocos-holder .choco2").addClass('switch')
$(".chocos-holder .choco4").addClass('switch')
//pochette
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .pochette1 .front .color_2")
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .pochette4 .front .color_1")
$('#custom_elmts .date-holder').clone().appendTo(".container-pochette .pochette2 .front .color_1")
$(".container-pochette .pochette2").addClass('switch')
$(".container-pochette .pochette4").addClass('switch')
$('.damier .color_1').css({ 'background-color':_simu.color_1})
$('.damier .color_2').css({ 'color':_simu.color_2})
$('.damier .switch .color_1').css({ 'color':_simu.color_1})
$('.damier .switch .color_2').css({'background-color':_simu.color_2})
checkfaceCustom()
}
else if(_simu.modele == "ruban")
{
$(".container-db").html($('#temp-ruban .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-ruban .chocos').contents().clone());
$(".container-pochette").html($('#temp-ruban .pochettes').contents().clone());
$(".container-db .cubeface").addClass('b-'+_simu.color_1_id)
$(".container-db .bande").addClass('b-'+_simu.color_2_id)
$(".container-db .txt").addClass('c-'+_simu.color_1_id)
$('.chocos-holder .front').addClass('b-'+_simu.color_1_id)
$('.chocos-holder .back').addClass('b-'+_simu.color_1_id)
$('.chocos-holder .bande').addClass('b-'+_simu.color_2_id)
$(".chocos-holder .txt").addClass('c-'+_simu.color_1_id)
$('.container-pochette .front').addClass('b-'+_simu.color_1_id)
$('.container-pochette .back').addClass('b-'+_simu.color_1_id)
$('.container-pochette .bande').addClass('b-'+_simu.color_2_id)
$(".container-pochette .txt").addClass('c-'+_simu.color_1_id)
$('.chocos-holder .back').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+_simu.color_2_id+'/face_14.png)'})
$('.container-pochette .back').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+_simu.color_2_id+'/face_14.png)'})
}
else if(_simu.modele == "bayadere")
{
if(_simu.offre == "doublecube") $('#custom-freeface').show()
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-pochette").html($('#temp-base .pochettes').contents().clone());
$('.container-db .cubeface').html($('#temp-bayadere .bayaface').clone())
$('.chocos-holder .flipper .front').html($('#temp-bayadere .bayaface').clone())
$('.chocos-holder .flipper .back').html($('#temp-bayadere .bayaface').clone())
$('.container-pochette .pochette .front').html($('#temp-bayadere .bayaface').clone())
$('.container-pochette .pochette .back').html($('#temp-bayadere .bayaface').clone())
$(".container-db .db-cube1 .back").append('<div class="face-custom-txt face-custom-img"></div>')
$('.bayaface .col1').addClass('b-'+_simu.color_1_id)
$('.bayaface .col2').addClass('b-'+_simu.color_2_id)
$('.bayaface .col3').addClass('b-'+_simu.color_1_id)
$('.bayaface .col4').addClass('b-'+_simu.color_2_id)
// dc
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .front")
$('.container-db .db-cube1 .right').append('<div class="coeur"></div>');
$('.container-db .db-cube2 .left').append('<div class="coeur"></div>');
$('.container-db .db-cube2 .back').append('<div class="oui"></div>');
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .front")
$('#custom_elmts .date-holder-line').clone().appendTo(".chocos-holder .back")
//pochette
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .front")
$('#custom_elmts .date-holder-line').clone().appendTo(".container-pochette .back")
$('.chocos-holder .back .colover').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+_simu.color_2_id+'/face_14.png)'})
$('.container-pochette .back .colover').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+_simu.color_2_id+'/face_14.png)'})
checkfaceCustom()
}
else if(_simu.modele == "liseres")
{
if(_simu.offre == "doublecube") $('#custom-freeface').show()
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-pochette").html($('#temp-base .pochettes').contents().clone());
$('.container-db .cubeface').html($('#temp-liseres .liseface').contents().clone())
$('.chocos-holder .flipper .front').html($('#temp-liseres .lisefacesmall').contents().clone())
$('.chocos-holder .flipper .back').html($('#temp-liseres .lisefacesmall').contents().clone())
$('.container-pochette .pochette .front').html($('#temp-liseres .lisefacesmall').contents().clone())
$('.container-pochette .pochette .back').html($('#temp-liseres .lisefacesmall').contents().clone())
$(".container-db .db-cube1 .back").append('<div class="face-custom-txt face-custom-img"></div>')
var file;
if(_simu.color_1_id == "blanc")
{
if(_simu.color_2_id == "argent" || _simu.color_2_id == "or")
{
file = _simu.color_2_id+'_et_blanc';
color = 'noir'
}
else
{
file = _simu.color_2_id;
color = _simu.color_2_id;
}
}
else
{
file = _simu.color_2_id;
color = _simu.color_2_id;
}
// dc
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .right")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('.container-db .bkgface').addClass('b-'+_simu.color_1_id)
$('.container-db .imgface').addClass(color)
$('.container-db .noms-holder').addClass('c-'+color)
$('.container-db .date-holder').addClass('c-'+color)
$('.container-db .face-custom-txt').addClass('c-'+color)
$('.container-db .db-cube1 .top .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_1.png)'})
$('.container-db .db-cube1 .bottom .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_2.png)'})
$('.container-db .db-cube1 .front .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_4.png)'})
$('.container-db .db-cube1 .left .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_5.png)'})
$('.container-db .db-cube1 .right .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_6.png)'})
$('.container-db .db-cube2 .top .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_7.png)'})
$('.container-db .db-cube2 .bottom .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_8.png)'})
$('.container-db .db-cube2 .back .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_9.png)'})
$('.container-db .db-cube2 .front .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_10.png)'})
$('.container-db .db-cube2 .left .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_11.png)'})
$('.container-db .db-cube2 .right .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_12.png)'})
$('.chocos-holder.'+_simu.modele+' .back .bkgface').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+(_simu.color_1_id == "blanc" || _simu.color_1_id == "ivoire") ? 'noir' : _simu.color_2_id+'/face_14.png)'})
$('.container-pochette.'+_simu.modele+' .back .bkgface').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+(_simu.color_1_id == "blanc" || _simu.color_1_id == "ivoire") ? 'noir' : _simu.color_2_id+'/face_14.png)'})
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .front .txtface")
$('#custom_elmts .date-holder-line').clone().appendTo(".chocos-holder .back .txtface")
$('.chocos-holder .bkgface').addClass('b-'+_simu.color_1_id)
$('.chocos-holder .txtface').addClass('c-'+_simu.color_2_id)
//pochette
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .front .txtface")
$('#custom_elmts .date-holder-line').clone().appendTo(".container-pochette .back .txtface")
$('.container-pochette .bkgface').addClass('b-'+_simu.color_1_id);
$('.container-pochette .txtface').addClass('c-'+_simu.color_2_id);
//$('.chocos-holder .back').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+file+'/face_14.png)'})
//$('.container-pochette .back').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+file+'/face_14.png)'})
checkfaceCustom()
}
}
//exclu
else if(_simu.custom == "exclu")
{
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-pochette").html($('#temp-base .pochettes').contents().clone());
$('.container-db .cubeface').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url(img/simulation/face.jpg)'})
$('.chocos-holder .flipper .front').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url(img/simulation/face.jpg)'})
$('.chocos-holder .flipper .back').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url(img/simulation/face.jpg)'})
$('.container-pochette .pochette .front').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url(img/simulation/face.jpg)'})
$('.container-pochette .pochette .back').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url(img/simulation/face.jpg)'})
if(_simu.offre == "doublecube")
{
setFacesExclu(_custom.faces_dc_exclu,$('.exclu .container-db .cubeface'))
setFacesExclu(_custom.faces_chocos_exclu,$('.exclu .chocos-holder .flipper .front'))
}
else
{
setFacesExclu(_custom.faces_chocos_exclu,$('.exclu .chocos-holder .flipper .front'))
}
$('.exclu .container-db .cubeface').on('click',function(){
_faceSelected = "dc";
$_face_exclu = $(this);
$('.imgface').removeClass('actif')
$(this).find('.imgface').addClass('actif');
_face_exclu_id = parseInt($(this).attr('data-id'));
_face_exclu = _custom.faces_dc_exclu["face_"+_face_exclu_id];
//log('_face_exclu : ' + _face_exclu.text)
});
$('.exclu .chocos-holder .flipper .front').on('click',function(){
_faceSelected = "chocos"
$_face_exclu = $(this);
$('.imgface').removeClass('actif')
$(this).find('.imgface').addClass('actif');
_choco_exclu_id = parseInt($(this).attr('data-id'));
_face_exclu = _custom.faces_chocos_exclu["face_"+_choco_exclu_id];
$('.exclu .container-pochette .pochette').eq(_choco_exclu_id-1).find('.front').html($('.exclu .chocos-holder .flipper').eq(_choco_exclu_id-1).find('.front').contents().clone())
$('.exclu .container-pochette .pochette').eq(_choco_exclu_id-1).find('.back').html($('.exclu .chocos-holder .flipper').eq(_choco_exclu_id-1).find('.front').contents().clone())
});
$('.container-pochette .pochette').on('click',function(){
var index = parseInt($(this).attr('data-id'))-1;
$('.exclu .chocos-holder .flipper').eq(index).find('.front').click()
$('.exclu .container-pochette .pochette').eq(index).find('.front').html($('.exclu .chocos-holder .flipper').eq(index).find('.front').contents().clone())
$('.exclu .container-pochette .pochette').eq(index).find('.back').html($('.exclu .chocos-holder .flipper').eq(index).find('.front').contents().clone())
});
if(_simu.offre == "doublecube")
{
$('.exclu .container-db .cubeface').eq(3).click()
}
else
{
$('.exclu .chocos-holder .flipper').eq(0).find('.front').click()
}
}
if(_simu.offre == "pochette")
{
$('.chocos-holder .flip-container').eq(4).hide();
}
else
{
$('.chocos-holder .flip-container').eq(4).show();
}
onPelliculageChange();
}

246
www/modules/antadissimulator/views/js/doublecube-thematique.js
View File

@ -1,125 +1,3 @@
function updateFaces()
{
// reset faces
$('.container-db').find('.noms-holder').remove();
$('.container-db').find('.date-holder').remove();
$('.chocos-holder').find('.noms-holder').remove();
$('.chocos-holder').find('.date-holder').remove();
$('.face-custom-txt').removeClass('face-custom-txt');
$('.face-custom-img').removeClass('face-custom-img');
$(".container-db").empty()
$(".chocos-holder").empty()
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-db .db-cube1 .back").addClass('face-custom-txt');
$(".container-db .db-cube1 .back").addClass('face-custom-img');
//DOUBLECUBE
// 4 8 5
if(theme == "ivoire" || theme == "tendance" || theme == "champetre" || theme == "uv")
{
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube1 .left")
}
// 4 8 7
if(theme == "oriental")
{
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .top")
}
// 4 8 12
else if(theme == "chocolate" || theme == "cinema" || theme == "oriental" || theme == "fleurs"
|| theme == "vintage" || theme == "voyage" || theme == "gourmandise")
{
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .right")
}
$('.container-db .db-cube1 .top').css({'background-image':'url('+themeImg+'/contenant/01.png)'})
$('.container-db .db-cube1 .bottom').css({'background-image':'url('+themeImg+'/contenant/02.png)'})
$('.container-db .db-cube1 .back').css({'background-image':'url('+themeImg+'/contenant/03.png)'})
$('.container-db .db-cube1 .front').css({'background-image':'url('+themeImg+'/contenant/04.png)'})
$('.container-db .db-cube1 .left').css({'background-image':'url('+themeImg+'/contenant/05.png)'})
$('.container-db .db-cube1 .right').css({'background-image':'url('+themeImg+'/contenant/06.png)'})
$('.container-db .db-cube2 .top').css({'background-image':'url('+themeImg+'/contenant/07.png)'})
$('.container-db .db-cube2 .bottom').css({'background-image':'url('+themeImg+'/contenant/08.png)'})
$('.container-db .db-cube2 .back').css({'background-image':'url('+themeImg+'/contenant/09.png)'})
$('.container-db .db-cube2 .front').css({'background-image':'url('+themeImg+'/contenant/10.png)'})
$('.container-db .db-cube2 .left').css({'background-image':'url('+themeImg+'/contenant/11.png)'})
$('.container-db .db-cube2 .right').css({'background-image':'url('+themeImg+'/contenant/12.png)'})
//CHOCOS
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front")
$('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front")
$('.chocos-holder .choco1 .front').css({'background-image':'url('+themeImg+'/chocos/01.png)'})
$('.chocos-holder .choco1 .back').css({'background-image':'url('+themeImg+'/chocos/02.png)'})
$('.chocos-holder .choco2 .front').css({'background-image':'url('+themeImg+'/chocos/03.png)'})
$('.chocos-holder .choco2 .back').css({'background-image':'url('+themeImg+'/chocos/04.png)'})
$('.chocos-holder .choco3 .front').css({'background-image':'url('+themeImg+'/chocos/05.png)'})
$('.chocos-holder .choco3 .back').css({'background-image':'url('+themeImg+'/chocos/06.png)'})
$('.chocos-holder .choco4 .front').css({'background-image':'url('+themeImg+'/chocos/07.png)'})
$('.chocos-holder .choco4 .back').css({'background-image':'url('+themeImg+'/chocos/08.png)'})
$('.chocos-holder .choco5 .front').css({'background-image':'url('+themeImg+'/chocos/09.png)'})
$('.chocos-holder .choco5 .back').css({'background-image':'url('+themeImg+'/chocos/10.png)'})
$('.chocos-holder .flip-container').eq(4).show();
}
function initDrag()
{
$('#simu-box').on(events.start, function(e) {
if (hasTouchSupport) {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
p0 = { 'x': touch.pageX, 'y': touch.pageY };
} else {
p0 = { 'x': e.clientX, 'y': e.clientY };
}
_flag = true;
$(document).on(events.move, drag);
$('.simu-container').removeClass('animated');
e.preventDefault();
});
$(document).on(events.end, function(e) {
var p1;
if (hasTouchSupport) {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
p1 = { 'x': touch.pageX, 'y': touch.pageY };
} else {
p1 = { 'x': e.clientX, 'y': e.clientY };
}
_flag = false;
$(document).off(events.move, drag);
_angle = {'x': _anglelast.x, 'y': _anglelast.y}
});
}
function drag(e) {
/* distance and angle values since starting to drag */
var p1;
if(hasTouchSupport) {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
p1 = { 'x': touch.pageX - p0.x, 'y': touch.pageY - p0.y }
} else {
p1 = { 'x': e.clientX - p0.x, 'y': e.clientY - p0.y }
}
var angle = {'x': -p1.y*_unit, 'y': p1.x*_unit};
tmp = 'rotateX(' + (_angle.x + angle.x) + 'deg)' + 'rotateY(' + (_angle.y + angle.y) + 'deg) scale(.92)';
$('.simu-container').css({'-webkit-transform' : tmp , 'transform' : tmp});
_anglelast = {'x': (_angle.x + angle.x), 'y': (_angle.y + angle.y)}
};
var
_factor = 1,
_max_amount = 460,
@ -184,3 +62,127 @@ $(function() {
initDrag();
});
function updateFaces()
{
// reset faces
$('.container-db').find('.noms-holder').remove();
$('.container-db').find('.date-holder').remove();
$('.chocos-holder').find('.noms-holder').remove();
$('.chocos-holder').find('.date-holder').remove();
$('.face-custom-txt').removeClass('face-custom-txt');
$('.face-custom-img').removeClass('face-custom-img');
$(".container-db").empty()
$(".chocos-holder").empty()
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-db .db-cube1 .back").addClass('face-custom-txt');
$(".container-db .db-cube1 .back").addClass('face-custom-img');
//DOUBLECUBE
// 4 8 5
if(theme == "ivoire" || theme == "tendance" || theme == "champetre" || theme == "uv")
{
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube1 .left")
}
// 4 8 7
if(theme == "oriental")
{
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .top")
}
// 4 8 12
else if(theme == "chocolate" || theme == "cinema" || theme == "oriental" || theme == "fleurs"
|| theme == "vintage" || theme == "voyage" || theme == "gourmandise")
{
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .right")
}
$('.container-db .db-cube1 .top').css({'background-image':'url('+themeImg+'/box/1-TOP.png)'})
$('.container-db .db-cube1 .bottom').css({'background-image':'url('+themeImg+'/box/1-BOTTOM.png)'})
$('.container-db .db-cube1 .back').css({'background-image':'url('+themeImg+'/box/1-BACK.png)'})
$('.container-db .db-cube1 .front').css({'background-image':'url('+themeImg+'/box/1-FRONT.png)'})
$('.container-db .db-cube1 .left').css({'background-image':'url('+themeImg+'/box/1-LEFT.png)'})
$('.container-db .db-cube1 .right').css({'background-image':'url('+themeImg+'/box/1-RIGHT.png)'})
$('.container-db .db-cube2 .top').css({'background-image':'url('+themeImg+'/box/2-TOP.png)'})
$('.container-db .db-cube2 .bottom').css({'background-image':'url('+themeImg+'/box/2-BOTTOM.png)'})
$('.container-db .db-cube2 .back').css({'background-image':'url('+themeImg+'/box/2-BACK.png)'})
$('.container-db .db-cube2 .front').css({'background-image':'url('+themeImg+'/box/2-FRONT.png)'})
$('.container-db .db-cube2 .left').css({'background-image':'url('+themeImg+'/box/2-LEFT.png)'})
$('.container-db .db-cube2 .right').css({'background-image':'url('+themeImg+'/box/2-RIGHT.png)'})
$('.container-db').addClass(theme);
//CHOCOS
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front")
$('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front")
$('.chocos-holder .choco1 .front').css({'background-image':'url('+themeImg+'/chocos/1F.png)'})
$('.chocos-holder .choco1 .back').css({'background-image':'url('+themeImg+'/chocos/1B.png)'})
$('.chocos-holder .choco2 .front').css({'background-image':'url('+themeImg+'/chocos/2F.png)'})
$('.chocos-holder .choco2 .back').css({'background-image':'url('+themeImg+'/chocos/2B.png)'})
$('.chocos-holder .choco3 .front').css({'background-image':'url('+themeImg+'/chocos/3F.png)'})
$('.chocos-holder .choco3 .back').css({'background-image':'url('+themeImg+'/chocos/3B.png)'})
$('.chocos-holder .choco4 .front').css({'background-image':'url('+themeImg+'/chocos/4F.png)'})
$('.chocos-holder .choco4 .back').css({'background-image':'url('+themeImg+'/chocos/4B.png)'})
$('.chocos-holder .choco5 .front').css({'background-image':'url('+themeImg+'/chocos/5F.png)'})
$('.chocos-holder .choco5 .back').css({'background-image':'url('+themeImg+'/chocos/5B.png)'})
$('.chocos-holder').addClass(theme);
$('.chocos-holder .flip-container').eq(4).show();
}
function initDrag()
{
$('#simu-box').on(events.start, function(e) {
if (hasTouchSupport) {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
p0 = { 'x': touch.pageX, 'y': touch.pageY };
} else {
p0 = { 'x': e.clientX, 'y': e.clientY };
}
_flag = true;
$(document).on(events.move, drag);
$('.simu-container').removeClass('animated');
e.preventDefault();
});
$(document).on(events.end, function(e) {
var p1;
if (hasTouchSupport) {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
p1 = { 'x': touch.pageX, 'y': touch.pageY };
} else {
p1 = { 'x': e.clientX, 'y': e.clientY };
}
_flag = false;
$(document).off(events.move, drag);
_angle = {'x': _anglelast.x, 'y': _anglelast.y}
});
}
function drag(e) {
/* distance and angle values since starting to drag */
var p1;
if(hasTouchSupport) {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
p1 = { 'x': touch.pageX - p0.x, 'y': touch.pageY - p0.y }
} else {
p1 = { 'x': e.clientX - p0.x, 'y': e.clientY - p0.y }
}
var angle = {'x': -p1.y*_unit, 'y': p1.x*_unit};
tmp = 'rotateX(' + (_angle.x + angle.x) + 'deg)' + 'rotateY(' + (_angle.y + angle.y) + 'deg) scale(.92)';
$('.simu-container').css({'-webkit-transform' : tmp , 'transform' : tmp});
_anglelast = {'x': (_angle.x + angle.x), 'y': (_angle.y + angle.y)}
};

234
www/modules/antadissimulator/views/js/pochette-bicolor.js Normal file
View File

@ -0,0 +1,234 @@
var color1 = 'bleuf';
var color2 = 'blanc';
var colorRGB =
{
anis: '#B5DC10',
argent: '#C2C2C2',
blanc: '#FFFFFF',
bleuf: '#10147E',
bordeaux: 'bordeaux',
framboise: '#C42B68',
fuschia: '#F0037F',
grisf: '#766546',
ivoire: '#FFFAD7',
marron: '#3C1503',
noir: '#000000',
or: '#FFC211',
orange: '#E37222',
parme: '#D198CA',
rose: '#F88CC4',
rouge: '#F50003',
taupe: '#CCC6AB',
turquoise: '#7FCDD0',
vert: '#159033',
violet: '#6B1687',
}
var
_factor = 1,
_max_amount = 460,
_unit = 360/_max_amount ,
_flag = false,
_angle = {'x': 0, 'y': 0};
_anglelast = {'x': 0, 'y': 0};
;
var _custom =
{
'face_custom' :
{
'image' : null,
'text' : '',
'is_initials' : false
},
'faces_dc_exclu' :
{
},
'faces_chocos_exclu' :
{
}
}
var face_exclu =
{
'index' : 0,
'image' : null,
'color' : '',
'color_text' : '',
'text' : '',
'font' : '',
'is_initials' : false,
'is_custom' : false
}
var rotateR =
[
null,
[-90,0],
[90,0],
[0,180],
[0,0],
[0,100],
[0,-20],
[-90,0],
[90,0],
[0,180],
[0,0],
[0,20],
[0,-100]
]
//Start when DOM is ready
$(function() {
$('#colorpicker1').simplecolorpicker({picker: true, theme: 'glyphicons'})
.on('change', function() {
color1 = $('#colorpicker1 option:selected').attr('data-id');
$('.color1text').html($('#colorpicker1 option:selected').text());
});
$('#colorpicker1').simplecolorpicker('selectColor', colorRGB[color1]);
$('#colorpicker2').simplecolorpicker({picker: true, theme: 'glyphicons'})
.on('change', function() {
color2 = $('#colorpicker2 option:selected').attr('data-id');
$('.color2text').html($('#colorpicker2 option:selected').text());
});
$('#colorpicker2').simplecolorpicker('selectColor', colorRGB[color2]);
updateFaces();
initDrag();
$('.flip-container').addClass('argent');
$('.pochetteface').not('.front,.back').addClass('argent');
});
function initDrag()
{
$('#simu-box').on(events.start, function(e) {
if (hasTouchSupport) {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
p0 = { 'x': touch.pageX, 'y': touch.pageY };
} else {
p0 = { 'x': e.clientX, 'y': e.clientY };
}
_flag = true;
$(document).on(events.move, drag);
$('.simu-container').removeClass('animated');
e.preventDefault();
});
$(document).on(events.end, function(e) {
var p1;
if (hasTouchSupport) {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
p1 = { 'x': touch.pageX, 'y': touch.pageY };
} else {
p1 = { 'x': e.clientX, 'y': e.clientY };
}
_flag = false;
$(document).off(events.move, drag);
_angle = {'x': _anglelast.x, 'y': _anglelast.y}
});
}
function drag(e) {
/* distance and angle values since starting to drag */
var p1;
if(hasTouchSupport) {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
p1 = { 'x': touch.pageX - p0.x, 'y': touch.pageY - p0.y }
} else {
p1 = { 'x': e.clientX - p0.x, 'y': e.clientY - p0.y }
}
var angle = {'x': -p1.y*_unit, 'y': p1.x*_unit};
tmp = 'rotateX(' + (_angle.x + angle.x) + 'deg)' + 'rotateY(' + (_angle.y + angle.y) + 'deg) scale(.92)';
$('.simu-container').css({'-webkit-transform' : tmp , 'transform' : tmp});
_anglelast = {'x': (_angle.x + angle.x), 'y': (_angle.y + angle.y)}
};
function updateFaces()
{
// reset faces
$('.chocos-holder').find('.noms-holder').remove();
$('.chocos-holder').find('.date-holder').remove();
$('.container-pochette').find('.noms-holder').remove();
$('.container-pochette').find('.date-holder').remove();
$('.face-custom-txt').removeClass('face-custom-txt');
$('.face-custom-img').removeClass('face-custom-img');
$(".chocos-holder").empty()
$(".container-pochette").empty()
$('#custom-freeface').hide()
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-pochette").html($('#temp-base .pochettes').contents().clone());
$('.container-db .cubeface').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.chocos-holder .flipper .front').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.chocos-holder .flipper .back').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.container-pochette .pochette .front').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.container-pochette .pochette .back').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$(".color_1").addClass(color1)
$(".color_2").addClass(color2)
$('.switch').removeClass('switch');
$(".container-db .db-cube1 .back .color_2").addClass('face-custom-img');
$(".container-db .db-cube1 .back .color_1").addClass('face-custom-txt');
var color = (color1 == "blanc" || color1 == "ivoire") ? 'noir' : color2;
$('.chocos-holder .choco1 .back .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color+'/face_14.png)'})
$('.chocos-holder .choco2 .back .color_1').css({'background-image':'url('+themeImg+'/chocos/'+color1+'/face_16.png)'})
$('.chocos-holder .choco3 .front .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color2+'/face_17.png)'})
$('.chocos-holder .choco3 .back .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color+'/face_18.png)'})
$('.chocos-holder .choco4 .back .color_1').css({'background-image':'url('+themeImg+'/chocos/'+color1+'/face_20.png)'})
$('.chocos-holder .choco5 .front .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color2+'/face_21.png)'})
$('.chocos-holder .choco5 .back .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color+'/face_22.png)'})
$('.container-pochette .pochette1 .back .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color+'/face_14.png)'})
$('.container-pochette .pochette2 .back .color_1').css({'background-image':'url('+themeImg+'/chocos/'+color1+'/face_16.png)'})
$('.container-pochette .pochette3 .front .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color2+'/face_17.png)'})
$('.container-pochette .pochette3 .back .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color+'/face_18.png)'})
$('.container-pochette .pochette4 .back .color_1').css({'background-image':'url('+themeImg+'/chocos/'+color1+'/face_20.png)'})
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco1 .front .color_2")
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front .color_1")
$('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front .color_1")
$(".chocos-holder .choco2").addClass('switch')
$(".chocos-holder .choco4").addClass('switch')
//pochette
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .pochette1 .front .color_2")
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .pochette4 .front .color_1")
$('#custom_elmts .date-holder').clone().appendTo(".container-pochette .pochette2 .front .color_1")
$(".container-pochette .pochette2").addClass('switch')
$(".container-pochette .pochette4").addClass('switch')
$('.container-pochette').addClass(theme);
$('.container-pochette .color_1').css({ 'background-color':colorRGB[color1]})
$('.container-pochette .color_2').css({ 'color':colorRGB[color2]})
$('.container-pochette .switch .color_1').css({ 'color':colorRGB[color1]})
$('.container-pochette .switch .color_2').css({'background-color':colorRGB[color2]})
$('.chocos-holder').addClass(theme);
$('.chocos-holder .color_1').css({ 'background-color':colorRGB[color1]})
$('.chocos-holder .color_2').css({ 'color':colorRGB[color2]})
$('.chocos-holder .switch .color_1').css({ 'color':colorRGB[color1]})
$('.chocos-holder .switch .color_2').css({'background-color':colorRGB[color2]})
$('.chocos-holder .flip-container').eq(4).hide();
}

1104
www/modules/antadissimulator/views/js/pochette6-bicolor.js Normal file
View File

File diff suppressed because it is too large Load Diff

27
www/modules/antadissimulator/views/js/sachet-thematique.js
View File

@ -3,12 +3,9 @@ function updateFaces()
// reset faces
$('.chocos-holder').find('.noms-holder').remove();
$('.chocos-holder').find('.date-holder').remove();
$('.container-pochette').find('.noms-holder').remove();
$('.container-pochette').find('.date-holder').remove();
$('.face-custom-txt').removeClass('face-custom-txt');
$('.face-custom-img').removeClass('face-custom-img');
$(".chocos-holder").empty()
$(".container-pochette").empty()
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
//CHOCOS
@ -20,8 +17,8 @@ function updateFaces()
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .front")
$('#custom_elmts .date-holder-line').clone().appendTo(".chocos-holder .back")
$('.chocos-holder .front').css({'background-image':'url('+themeImg+'/chocos/01.png)'})
$('.chocos-holder .back').css({'background-image':'url('+themeImg+'/chocos/02.png)'})
$('.chocos-holder .front').css({'background-image':'url('+themeImg+'/chocos/1F.png)'})
$('.chocos-holder .back').css({'background-image':'url('+themeImg+'/chocos/1B.png)'})
}
// faces chocos différentes
else
@ -31,16 +28,16 @@ function updateFaces()
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front")
$('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front")
$('.chocos-holder .choco1 .front').css({'background-image':'url('+themeImg+'/chocos/01.png)'})
$('.chocos-holder .choco1 .back').css({'background-image':'url('+themeImg+'/chocos/02.png)'})
$('.chocos-holder .choco2 .front').css({'background-image':'url('+themeImg+'/chocos/03.png)'})
$('.chocos-holder .choco2 .back').css({'background-image':'url('+themeImg+'/chocos/04.png)'})
$('.chocos-holder .choco3 .front').css({'background-image':'url('+themeImg+'/chocos/05.png)'})
$('.chocos-holder .choco3 .back').css({'background-image':'url('+themeImg+'/chocos/06.png)'})
$('.chocos-holder .choco4 .front').css({'background-image':'url('+themeImg+'/chocos/07.png)'})
$('.chocos-holder .choco4 .back').css({'background-image':'url('+themeImg+'/chocos/08.png)'})
$('.chocos-holder .choco5 .front').css({'background-image':'url('+themeImg+'/chocos/09.png)'})
$('.chocos-holder .choco5 .back').css({'background-image':'url('+themeImg+'/chocos/10.png)'})
$('.chocos-holder .choco1 .front').css({'background-image':'url('+themeImg+'/chocos/1F.png)'})
$('.chocos-holder .choco1 .back').css({'background-image':'url('+themeImg+'/chocos/1B.png)'})
$('.chocos-holder .choco2 .front').css({'background-image':'url('+themeImg+'/chocos/2F.png)'})
$('.chocos-holder .choco2 .back').css({'background-image':'url('+themeImg+'/chocos/2B.png)'})
$('.chocos-holder .choco3 .front').css({'background-image':'url('+themeImg+'/chocos/3F.png)'})
$('.chocos-holder .choco3 .back').css({'background-image':'url('+themeImg+'/chocos/3B.png)'})
$('.chocos-holder .choco4 .front').css({'background-image':'url('+themeImg+'/chocos/4F.png)'})
$('.chocos-holder .choco4 .back').css({'background-image':'url('+themeImg+'/chocos/4B.png)'})
$('.chocos-holder .choco5 .front').css({'background-image':'url('+themeImg+'/chocos/5F.png)'})
$('.chocos-holder .choco5 .back').css({'background-image':'url('+themeImg+'/chocos/5B.png)'})
}
if(theme == "fleurs" || theme == "tendance" || theme == "uv" || theme == "voyage" || theme == "vintage" || theme == "gourmandise")

289
www/modules/antadissimulator/views/js/vrac-bicolor.js Normal file
View File

@ -0,0 +1,289 @@
var color1 = 'bleuf';
var color2 = 'blanc';
var colorRGB =
{
anis: '#B5DC10',
argent: '#C2C2C2',
blanc: '#FFFFFF',
bleuf: '#10147E',
bordeaux: 'bordeaux',
framboise: '#C42B68',
fuschia: '#F0037F',
grisf: '#766546',
ivoire: '#FFFAD7',
marron: '#3C1503',
noir: '#000000',
or: '#FFC211',
orange: '#E37222',
parme: '#D198CA',
rose: '#F88CC4',
rouge: '#F50003',
taupe: '#CCC6AB',
turquoise: '#7FCDD0',
vert: '#159033',
violet: '#6B1687',
}
//Start when DOM is ready
$(function() {
$('#colorpicker1').simplecolorpicker({picker: true, theme: 'glyphicons'})
.on('change', function() {
color1 = $('#colorpicker1 option:selected').attr('data-id');
$('.color1text').html($('#colorpicker1 option:selected').text());
});
$('#colorpicker1').simplecolorpicker('selectColor', colorRGB[color1]);
$('#colorpicker2').simplecolorpicker({picker: true, theme: 'glyphicons'})
.on('change', function() {
color2 = $('#colorpicker2 option:selected').attr('data-id');
$('.color2text').html($('#colorpicker2 option:selected').text());
});
$('#colorpicker2').simplecolorpicker('selectColor', colorRGB[color2]);
updateFaces();
$('.flip-container').addClass('argent');
});
function updateFaces()
{
// reset faces
$('.container-db').find('.noms-holder').remove();
$('.container-db').find('.date-holder').remove();
$('.chocos-holder').find('.noms-holder').remove();
$('.chocos-holder').find('.date-holder').remove();
$('.container-pochette').find('.noms-holder').remove();
$('.container-pochette').find('.date-holder').remove();
$('.face-custom-txt').removeClass('face-custom-txt');
$('.face-custom-img').removeClass('face-custom-img');
$(".container-db").empty()
$(".chocos-holder").empty()
$(".container-pochette").empty()
$('#custom-freeface').hide()
if(theme == "damier")
{
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-pochette").html($('#temp-base .pochettes').contents().clone());
$('.container-db .cubeface').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.chocos-holder .flipper .front').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.chocos-holder .flipper .back').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.container-pochette .pochette .front').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.container-pochette .pochette .back').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$(".color_1").addClass(color1)
$(".color_2").addClass(color2)
$('.switch').removeClass('switch');
$(".container-db .db-cube1 .back .color_2").addClass('face-custom-img');
$(".container-db .db-cube1 .back .color_1").addClass('face-custom-txt');
// dc
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front .color_2")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom .color_1")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube1 .left .color_1")
$(".container-db .db-cube1 .left").addClass('switch')
$(".container-db .db-cube1 .right").addClass('switch')
$(".container-db .db-cube1 .top").addClass('switch')
$(".container-db .db-cube1 .back").addClass('switch')
$(".container-db .db-cube2 .bottom").addClass('switch')
$(".container-db .db-cube2 .left").addClass('switch')
$(".container-db .db-cube2 .right").addClass('switch')
$('.container-db .db-cube1 .top .color_1.'+color1).css({'background-image' : 'url('+themeImg+'/db/'+color1+'/face_1.png)'})
$('.container-db .db-cube1 .right .color_1.'+color1).css({'background-image' : 'url('+themeImg+'/db/'+color1+'/face_6.png)'})
$('.container-db .db-cube2 .top .color_2.'+color2).css({'background-image' : 'url('+themeImg+'/db/'+color2+'/face_7.png)'})
$('.container-db .db-cube2 .bottom .color_2.'+color2).css({'background-image' : 'url('+themeImg+'/db/'+color2+'/face_8.png)'})
$('.container-db .db-cube2 .back .color_2.'+color2).css({'background-image' : 'url('+themeImg+'/db/'+color2+'/face_9.png)'})
$('.container-db .db-cube2 .front .color_2.'+color2).css({'background-image' : 'url('+themeImg+'/db/'+color2+'/face_10.png)'})
$('.container-db .db-cube2 .left .color_1.'+color1).css({'background-image' : 'url('+themeImg+'/db/'+color1+'/face_11.png)'})
$('.container-db .db-cube2 .right .color_1.'+color1).css({'background-image' : 'url('+themeImg+'/db/'+color1+'/face_12.png)'})
var color = (color1 == "blanc" || color1 == "ivoire") ? 'noir' : color2;
$('.chocos-holder .choco1 .back .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color+'/face_14.png)'})
$('.chocos-holder .choco2 .back .color_1').css({'background-image':'url('+themeImg+'/chocos/'+color1+'/face_16.png)'})
$('.chocos-holder .choco3 .front .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color2+'/face_17.png)'})
$('.chocos-holder .choco3 .back .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color+'/face_18.png)'})
$('.chocos-holder .choco4 .back .color_1').css({'background-image':'url('+themeImg+'/chocos/'+color1+'/face_20.png)'})
$('.chocos-holder .choco5 .front .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color2+'/face_21.png)'})
$('.chocos-holder .choco5 .back .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color+'/face_22.png)'})
$('.container-pochette .pochette1 .back .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color+'/face_14.png)'})
$('.container-pochette .pochette2 .back .color_1').css({'background-image':'url('+themeImg+'/chocos/'+color1+'/face_16.png)'})
$('.container-pochette .pochette3 .front .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color2+'/face_17.png)'})
$('.container-pochette .pochette3 .back .color_2').css({'background-image':'url('+themeImg+'/chocos/'+color+'/face_18.png)'})
$('.container-pochette .pochette4 .back .color_1').css({'background-image':'url('+themeImg+'/chocos/'+color1+'/face_20.png)'})
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco1 .front .color_2")
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front .color_1")
$('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front .color_1")
$(".chocos-holder .choco2").addClass('switch')
$(".chocos-holder .choco4").addClass('switch')
//pochette
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .pochette1 .front .color_2")
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .pochette4 .front .color_1")
$('#custom_elmts .date-holder').clone().appendTo(".container-pochette .pochette2 .front .color_1")
$(".container-pochette .pochette2").addClass('switch')
$(".container-pochette .pochette4").addClass('switch')
$('.chocos-holder').addClass('damier');
$('.chocos-holder .color_1').css({ 'background-color':colorRGB[color1]})
$('.chocos-holder .color_2').css({ 'color':colorRGB[color2]})
$('.chocos-holder .switch .color_1').css({ 'color':colorRGB[color1]})
$('.chocos-holder .switch .color_2').css({'background-color':colorRGB[color2]})
}
else if(theme == "ruban")
{
$(".container-db").html($('#temp-ruban .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-ruban .chocos').contents().clone());
$(".container-pochette").html($('#temp-ruban .pochettes').contents().clone());
$(".container-db .cubeface").addClass('b-'+color1)
$(".container-db .bande").addClass('b-'+color2)
$(".container-db .txt").addClass('c-'+color1)
$('.chocos-holder .front').addClass('b-'+color1)
$('.chocos-holder .back').addClass('b-'+color1)
$('.chocos-holder .bande').addClass('b-'+color2)
$(".chocos-holder .txt").addClass('c-'+color1)
$('.container-pochette .front').addClass('b-'+color1)
$('.container-pochette .back').addClass('b-'+color1)
$('.container-pochette .bande').addClass('b-'+color2)
$(".container-pochette .txt").addClass('c-'+color1)
$('.chocos-holder .back').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+color2+'/face_14.png)'})
$('.container-pochette .back').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+color2+'/face_14.png)'})
}
else if(theme == "bayadere")
{
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-pochette").html($('#temp-base .pochettes').contents().clone());
$('.container-db .cubeface').html($('#temp-bayadere .bayaface').clone())
$('.chocos-holder .flipper .front').html($('#temp-bayadere .bayaface').clone())
$('.chocos-holder .flipper .back').html($('#temp-bayadere .bayaface').clone())
$('.container-pochette .pochette .front').html($('#temp-bayadere .bayaface').clone())
$('.container-pochette .pochette .back').html($('#temp-bayadere .bayaface').clone())
$(".container-db .db-cube1 .back").append('<div class="face-custom-txt face-custom-img"></div>')
$('.bayaface .col1').addClass('b-'+color1)
$('.bayaface .col2').addClass('b-'+color2)
$('.bayaface .col3').addClass('b-'+color1)
$('.bayaface .col4').addClass('b-'+color2)
// dc
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .front")
$('.container-db .db-cube1 .right').append('<div class="coeur"></div>');
$('.container-db .db-cube2 .left').append('<div class="coeur"></div>');
$('.container-db .db-cube2 .back').append('<div class="oui"></div>');
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .front")
$('#custom_elmts .date-holder-line').clone().appendTo(".chocos-holder .back")
//pochette
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .front")
$('#custom_elmts .date-holder-line').clone().appendTo(".container-pochette .back")
$('.chocos-holder .back .colover').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+color2+'/face_14.png)'})
$('.container-pochette .back .colover').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+color2+'/face_14.png)'})
}
else if(theme == "liseres")
{
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$(".container-pochette").html($('#temp-base .pochettes').contents().clone());
$('.container-db .cubeface').html($('#temp-liseres .liseface').contents().clone())
$('.chocos-holder .flipper .front').html($('#temp-liseres .lisefacesmall').contents().clone())
$('.chocos-holder .flipper .back').html($('#temp-liseres .lisefacesmall').contents().clone())
$('.container-pochette .pochette .front').html($('#temp-liseres .lisefacesmall').contents().clone())
$('.container-pochette .pochette .back').html($('#temp-liseres .lisefacesmall').contents().clone())
$(".container-db .db-cube1 .back").append('<div class="face-custom-txt face-custom-img"></div>')
var file;
if(color1 == "blanc")
{
if(color2 == "argent" || color2 == "or")
{
file = color2+'_et_blanc';
color = 'noir'
}
else
{
file = color2;
color = color2;
}
}
else
{
file = color2;
color = color2;
}
// dc
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .right")
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
$('.container-db .bkgface').addClass('b-'+color1)
$('.container-db .imgface').addClass(color)
$('.container-db .noms-holder').addClass('c-'+color)
$('.container-db .date-holder').addClass('c-'+color)
$('.container-db .face-custom-txt').addClass('c-'+color)
$('.container-db .db-cube1 .top .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_1.png)'})
$('.container-db .db-cube1 .bottom .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_2.png)'})
$('.container-db .db-cube1 .front .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_4.png)'})
$('.container-db .db-cube1 .left .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_5.png)'})
$('.container-db .db-cube1 .right .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_6.png)'})
$('.container-db .db-cube2 .top .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_7.png)'})
$('.container-db .db-cube2 .bottom .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_8.png)'})
$('.container-db .db-cube2 .back .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_9.png)'})
$('.container-db .db-cube2 .front .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_10.png)'})
$('.container-db .db-cube2 .left .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_11.png)'})
$('.container-db .db-cube2 .right .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_12.png)'})
$('.chocos-holder .back .bkgface').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+(color1 == "blanc" || color1 == "ivoire") ? 'noir' : color2+'/face_14.png)'})
$('.container-pochette .back .bkgface').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+(color1 == "blanc" || color1 == "ivoire") ? 'noir' : color2+'/face_14.png)'})
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .front .txtface")
$('#custom_elmts .date-holder-line').clone().appendTo(".chocos-holder .back .txtface")
$('.chocos-holder .bkgface').addClass('b-'+color1)
$('.chocos-holder .txtface').addClass('c-'+color2)
//pochette
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .front .txtface")
$('#custom_elmts .date-holder-line').clone().appendTo(".container-pochette .back .txtface")
$('.container-pochette .bkgface').addClass('b-'+color1);
$('.container-pochette .txtface').addClass('c-'+color2);
}
$('.chocos-holder .flip-container').eq(4).show();
}

34
www/modules/antadissimulator/views/js/vrac-exclusif.js Normal file
View File

@ -0,0 +1,34 @@
function updateFaces()
{
// reset faces
$('.chocos-holder').find('.noms-holder').remove();
$('.chocos-holder').find('.date-holder').remove();
$('.face-custom-txt').removeClass('face-custom-txt');
$('.face-custom-img').removeClass('face-custom-img');
$(".chocos-holder").empty()
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
$('.chocos-holder .flipper .front').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url(img/simulation/face.jpg)'})
$('.chocos-holder .flipper .back').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url(img/simulation/face.jpg)'})
setFacesExclu(_custom.faces_chocos_exclu,$('.exclu .chocos-holder .flipper .front'))
$('.exclu .chocos-holder .flipper .front').on('click',function(){
_faceSelected = "chocos"
$_face_exclu = $(this);
$('.imgface').removeClass('actif')
$(this).find('.imgface').addClass('actif');
_choco_exclu_id = parseInt($(this).attr('data-id'));
_face_exclu = _custom.faces_chocos_exclu["face_"+_choco_exclu_id];
$('.exclu .container-pochette .pochette').eq(_choco_exclu_id-1).find('.front').html($('.exclu .chocos-holder .flipper').eq(_choco_exclu_id-1).find('.front').contents().clone())
$('.exclu .container-pochette .pochette').eq(_choco_exclu_id-1).find('.back').html($('.exclu .chocos-holder .flipper').eq(_choco_exclu_id-1).find('.front').contents().clone())
});
}
//Start when DOM is ready
$(function() {
updateFaces();
});

60
www/modules/antadissimulator/views/js/vrac-thematique.js Normal file
View File

@ -0,0 +1,60 @@
function updateFaces()
{
// reset faces
$('.chocos-holder').find('.noms-holder').remove();
$('.chocos-holder').find('.date-holder').remove();
$('.face-custom-txt').removeClass('face-custom-txt');
$('.face-custom-img').removeClass('face-custom-img');
$(".chocos-holder").empty()
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
//CHOCOS
// faces chocos identiques
if(theme == "chocolate" || theme == "cinema" || theme == "oriental" || theme == "champetre")
{
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .front")
$('#custom_elmts .date-holder-line').clone().appendTo(".chocos-holder .back")
$('.chocos-holder .front').css({'background-image':'url('+themeImg+'/chocos/face_13.png)'})
$('.chocos-holder .back').css({'background-image':'url('+themeImg+'/chocos/face_14.png)'})
//pochette
$('#custom_elmts .noms-holder').clone().appendTo(".container-pochette .front")
$('#custom_elmts .date-holder-line').clone().appendTo(".container-pochette .back")
}
// faces chocos différentes
else
{
//chocos
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco1 .front")
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front")
$('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front")
$('.chocos-holder .choco1 .front').css({'background-image':'url('+themeImg+'/chocos/01.png)'})
$('.chocos-holder .choco1 .back').css({'background-image':'url('+themeImg+'/chocos/02.png)'})
$('.chocos-holder .choco2 .front').css({'background-image':'url('+themeImg+'/chocos/03.png)'})
$('.chocos-holder .choco2 .back').css({'background-image':'url('+themeImg+'/chocos/04.png)'})
$('.chocos-holder .choco3 .front').css({'background-image':'url('+themeImg+'/chocos/05.png)'})
$('.chocos-holder .choco3 .back').css({'background-image':'url('+themeImg+'/chocos/06.png)'})
$('.chocos-holder .choco4 .front').css({'background-image':'url('+themeImg+'/chocos/07.png)'})
$('.chocos-holder .choco4 .back').css({'background-image':'url('+themeImg+'/chocos/08.png)'})
$('.chocos-holder .choco5 .front').css({'background-image':'url('+themeImg+'/chocos/09.png)'})
$('.chocos-holder .choco5 .back').css({'background-image':'url('+themeImg+'/chocos/10.png)'})
}
if(theme == "fleurs" || theme == "tendance" || theme == "uv" || theme == "voyage" || theme == "vintage" || theme == "gourmandise")
{
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco5 .front")
}
$('.chocos-holder .flip-container').eq(4).show();
}
//Start when DOM is ready
$(function() {
updateFaces();
});

123
www/modules/antadissimulator/views/templates/hook/displayAdminProductsExtra.tpl
View File

@ -12,7 +12,7 @@
{l s='Theme'}
</label>
<div class="col-lg-3">
<select name="theme" id="theme">
<select name="id_simulator_theme" id="theme">
<option value="">Aucun</option>
{if $themes|@count > 0}
{foreach from=$themes item=theme}
@ -27,6 +27,10 @@
</div>
{/if}
</div>
<div class="panel-footer">
<button type="submit" name="submitAddproduct" class="btn btn-default pull-right"><i class="process-icon-save"></i> Enregistrer</button>
<button type="submit" name="submitAddproductAndStay" class="btn btn-default pull-right"><i class="process-icon-save"></i> Enregistrer et rester</button>
</div>
</div>
{if $simulatorType == 'doublecube'}
@ -38,6 +42,7 @@
<table class="table">
<thead>
<tr>
<th></th>
<th>TOP</th>
<th>BOTTOM</th>
<th>BACK</th>
@ -48,14 +53,22 @@
</thead>
<tbody>
<tr>
{for $i=1 to 6}
<td><img src="{$imgPath}/contenant/{$i|string_format:"%02d"}.png"/></td>
{/for}
<th>Cube-1</th>
<td><img src="{$imgPath}/box/1-TOP.png"/></td>
<td><img src="{$imgPath}/box/1-BOTTOM.png"/></td>
<td><img src="{$imgPath}/box/1-BACK.png"/></td>
<td><img src="{$imgPath}/box/1-FRONT.png"/></td>
<td><img src="{$imgPath}/box/1-LEFT.png"/></td>
<td><img src="{$imgPath}/box/1-RIGHT.png"/></td>
</tr>
<tr>
{for $i=7 to 12}
<td><img src="{$imgPath}/contenant/{$i|string_format:"%02d"}.png"/></td>
{/for}
<th>Cube-2</th>
<td><img src="{$imgPath}/box/2-TOP.png"/></td>
<td><img src="{$imgPath}/box/2-BOTTOM.png"/></td>
<td><img src="{$imgPath}/box/2-BACK.png"/></td>
<td><img src="{$imgPath}/box/2-FRONT.png"/></td>
<td><img src="{$imgPath}/box/2-LEFT.png"/></td>
<td><img src="{$imgPath}/box/2-RIGHT.png"/></td>
</tr>
</tbody>
</table>
@ -72,6 +85,7 @@
<table class="table">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
@ -81,13 +95,15 @@
</thead>
<tbody>
<tr>
{for $i=1 to 10 step 2}
<td><img src="{$imgPath}/chocos/{$i|string_format:"%02d"}.png"/></td>
<th>Front</th>
{for $i=1 to 5}
<td><img src="{$imgPath}/chocos/{$i}F.png"/></td>
{/for}
</tr>
<tr>
{for $i=2 to 10 step 2}
<td><img src="{$imgPath}/chocos/{$i|string_format:"%02d"}.png"/></td>
<th>Back</th>
{for $i=1 to 5}
<td><img src="{$imgPath}/chocos/{$i}B.png"/></td>
{/for}
</tr>
</tbody>
@ -107,21 +123,25 @@
<table class="table">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
{for $i=1 to 4 step 2}
<td><img src="{$imgPath}/chocos/{$i|string_format:"%02d"}.png"/></td>
<th>Front</th>
{for $i=1 to 5}
<td><img src="{$imgPath}/chocos/{$i}F.png"/></td>
{/for}
</tr>
<tr>
{for $i=2 to 4 step 2}
<td><img src="{$imgPath}/chocos/{$i|string_format:"%02d"}.png"/></td>
<th>Back</th>
{for $i=1 to 5}
<td><img src="{$imgPath}/chocos/{$i}B.png"/></td>
{/for}
</tr>
</tbody>
@ -134,9 +154,82 @@
{elseif $simulatorType == 'pochette6'}
TODO
{elseif $simulatorType == 'sachet'}
<div id="product-simulator-chocolat" class="panel product-tab">
<div class="panel-heading">Chocolats</div>
<div class="panel-body">
{if $id_simulator_theme}
<table class="table">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<th>Front</th>
{for $i=1 to 5}
<td><img src="{$imgPath}/chocos/{$i}F.png"/></td>
{/for}
</tr>
<tr>
<th>Back</th>
{for $i=1 to 5}
<td><img src="{$imgPath}/chocos/{$i}B.png"/></td>
{/for}
</tr>
</tbody>
</table>
{else}
<p>Aucun theme</p>
{/if}
</div>
</div>
{elseif $simulatorType == 'vrac'}
<div id="product-simulator-chocolat" class="panel product-tab">
<div class="panel-heading">Chocolats</div>
<div class="panel-body">
{if $id_simulator_theme}
<table class="table">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<th>Front</th>
{for $i=1 to 5}
<td><img src="{$imgPath}/chocos/{$i}F.png"/></td>
{/for}
</tr>
<tr>
<th>Back</th>
{for $i=1 to 5}
<td><img src="{$imgPath}/chocos/{$i}B.png"/></td>
{/for}
</tr>
</tbody>
</table>
{else}
<p>Aucun theme</p>
{/if}
</div>
</div>
{/if}

284
www/modules/antadissimulator/views/templates/hook/productbloc/doublecube-bicolor.tpl Normal file
View File

@ -0,0 +1,284 @@
{addJsDef theme=$themeName}
{addJsDef themeImg=$themeImagePath}
<div id="custom_elmts">
<!--COMMONS-->
<div class="noms-holder">
<div class="nom nom_1"></div>
<div class="nom et">&</div>
<div class="nom nom_2"></div>
</div>
<div class="date-holder">
<div class="date day"></div>
<div class="date month"></div>
<div class="date year"></div>
</div>
<div class="date-holder-line">
<span class="date day"></span>
<span class="date month"></span>
<span class="date year"></span>
</div>
<div class="initiales-holder">
<div class="initiale initiale_1"></div>
<div class="initiale initiale_2"></div>
</div>
<div id="temp-base">
<!--doublecube-->
<div class="doublecube">
<div class="db-cube1 cube panels-backface-invisible">
<figure class="cubeface top" data-id="1"><!--1--></figure>
<figure class="cubeface bottom" data-id="2"><!--2--></figure>
<figure class="cubeface back" data-id="3"><!--3--></figure>
<figure class="cubeface front" data-id="4"><!--4--></figure>
<figure class="cubeface left" data-id="5"><!--5--></figure>
<figure class="cubeface right" data-id="6"><!--6--></figure>
</div>
<div id="join"></div>
<div class="db-cube2 cube panels-backface-invisible">
<figure class="cubeface top" data-id="7"><!--7--></figure>
<figure class="cubeface bottom" data-id="8"><!--8--></figure>
<figure class="cubeface back" data-id="9"><!--9--></figure>
<figure class="cubeface front" data-id="10"><!--10--></figure>
<figure class="cubeface left" data-id="11"><!--11--></figure>
<figure class="cubeface right" data-id="12"><!--12--></figure>
</div>
</div>
<!--chocos-->
<div class="chocos">
<div class="choco1 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="13"></div>
<div class="back"></div>
</div>
</div>
<div class="choco2 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="15"></div>
<div class="back"></div>
</div>
</div>
<div class="choco3 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="17"></div>
<div class="back"></div>
</div>
</div>
<div class="choco4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="19"></div>
<div class="back"></div>
</div>
</div>
<div class="choco5 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="21"></div>
<div class="back"></div>
</div>
</div>
</div>
<!--pochettes-->
<div class="pochettes">
<div class="pochette pochette1 panels-backface-invisible" data-id="1">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette2 panels-backface-invisible" data-id="2">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette3 panels-backface-invisible" data-id="3">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette4 panels-backface-invisible" data-id="4">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
</div>
</div>
<!--BICOLORE-->
<!--RUBAN-->
<div id="temp-ruban">
<!--doublecube-->
<div class="doublecube">
<div class="db-cube1 cube panels-backface-invisible">
<figure class="cubeface front">
<div class="bande">
<div class="txt nom nom_1"></div>
</div>
</figure>
<figure class="cubeface back"><div class="bande"><span class="txt date year"></span></div></figure>
<figure class="cubeface right"><div class="bande"><div class="txt">E</div></div></figure>
<figure class="cubeface left"><div class="bande"></div></figure>
<figure class="cubeface top">&nbsp;</figure>
<figure class="cubeface bottom">&nbsp;</figure>
</div>
<div id="join"></div>
<div class="db-cube2 cube panels-backface-invisible">
<figure class="cubeface front">
<div class="bande">
<div class="txt nom nom_2"></div>
</div>
</figure>
<figure class="cubeface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span></div></figure>
<figure class="cubeface right"><div class="bande"></div></figure>
<figure class="cubeface left"><div class="bande"><div class="txt">T</div></div></figure>
<figure class="cubeface top">&nbsp;</figure>
<figure class="cubeface bottom">&nbsp;</figure>
</div>
</div>
<!--chocos-->
<div class="chocos">
<div class="choco1 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco2 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco3 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco5 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
</div>
<!--pochettes-->
<div class="pochettes">
<div class="pochette pochette1 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette2 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette3 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette4 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
</div>
</div>
<!--BAYADERE-->
<div id="temp-bayadere">
<div class="bayaface">
<div class="colbaya col1"></div>
<div class="colbaya col2"></div>
<div class="colbaya col3"></div>
<div class="colbaya col4"></div>
<div class="colbaya colover"></div>
</div>
</div>
<!--LISERES-->
<div id="temp-liseres">
<div class="liseface">
<div class="bkgface"></div>
<div class="imgface"></div>
</div>
<div class="lisefacesmall">
<div class="bkgface"></div>
<div class="txtface"></div>
</div>
</div>
<!--EXCLU-->
<div id="temp-exclu">
<div class="excluface">
<div class="imgface"></div>
<div class="txtface"></div>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!-- SIMULATION -->
<div id="simu-box">
<h2>Simulation contenant</h2>
<div class="legende-move c-maroon font11">Faites tourner l’objet avec votre souris</div>
<!--DOUBLECUBE-->
<div class="box-holder doublecube-holder">
<div class="simu-container container-db"></div>
</div>
</div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
</div>

284
www/modules/antadissimulator/views/templates/hook/productbloc/doublecube-exclusif.tpl Normal file
View File

@ -0,0 +1,284 @@
{addJsDef theme=$themeName}
{addJsDef themeImg=$themeImagePath}
<div id="custom_elmts">
<!--COMMONS-->
<div class="noms-holder">
<div class="nom nom_1"></div>
<div class="nom et">&</div>
<div class="nom nom_2"></div>
</div>
<div class="date-holder">
<div class="date day"></div>
<div class="date month"></div>
<div class="date year"></div>
</div>
<div class="date-holder-line">
<span class="date day"></span>
<span class="date month"></span>
<span class="date year"></span>
</div>
<div class="initiales-holder">
<div class="initiale initiale_1"></div>
<div class="initiale initiale_2"></div>
</div>
<div id="temp-base">
<!--doublecube-->
<div class="doublecube">
<div class="db-cube1 cube panels-backface-invisible">
<figure class="cubeface top" data-id="1"><!--1--></figure>
<figure class="cubeface bottom" data-id="2"><!--2--></figure>
<figure class="cubeface back" data-id="3"><!--3--></figure>
<figure class="cubeface front" data-id="4"><!--4--></figure>
<figure class="cubeface left" data-id="5"><!--5--></figure>
<figure class="cubeface right" data-id="6"><!--6--></figure>
</div>
<div id="join"></div>
<div class="db-cube2 cube panels-backface-invisible">
<figure class="cubeface top" data-id="7"><!--7--></figure>
<figure class="cubeface bottom" data-id="8"><!--8--></figure>
<figure class="cubeface back" data-id="9"><!--9--></figure>
<figure class="cubeface front" data-id="10"><!--10--></figure>
<figure class="cubeface left" data-id="11"><!--11--></figure>
<figure class="cubeface right" data-id="12"><!--12--></figure>
</div>
</div>
<!--chocos-->
<div class="chocos">
<div class="choco1 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="13"></div>
<div class="back"></div>
</div>
</div>
<div class="choco2 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="15"></div>
<div class="back"></div>
</div>
</div>
<div class="choco3 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="17"></div>
<div class="back"></div>
</div>
</div>
<div class="choco4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="19"></div>
<div class="back"></div>
</div>
</div>
<div class="choco5 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="21"></div>
<div class="back"></div>
</div>
</div>
</div>
<!--pochettes-->
<div class="pochettes">
<div class="pochette pochette1 panels-backface-invisible" data-id="1">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette2 panels-backface-invisible" data-id="2">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette3 panels-backface-invisible" data-id="3">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette4 panels-backface-invisible" data-id="4">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
</div>
</div>
<!--BICOLORE-->
<!--RUBAN-->
<div id="temp-ruban">
<!--doublecube-->
<div class="doublecube">
<div class="db-cube1 cube panels-backface-invisible">
<figure class="cubeface front">
<div class="bande">
<div class="txt nom nom_1"></div>
</div>
</figure>
<figure class="cubeface back"><div class="bande"><span class="txt date year"></span></div></figure>
<figure class="cubeface right"><div class="bande"><div class="txt">E</div></div></figure>
<figure class="cubeface left"><div class="bande"></div></figure>
<figure class="cubeface top">&nbsp;</figure>
<figure class="cubeface bottom">&nbsp;</figure>
</div>
<div id="join"></div>
<div class="db-cube2 cube panels-backface-invisible">
<figure class="cubeface front">
<div class="bande">
<div class="txt nom nom_2"></div>
</div>
</figure>
<figure class="cubeface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span></div></figure>
<figure class="cubeface right"><div class="bande"></div></figure>
<figure class="cubeface left"><div class="bande"><div class="txt">T</div></div></figure>
<figure class="cubeface top">&nbsp;</figure>
<figure class="cubeface bottom">&nbsp;</figure>
</div>
</div>
<!--chocos-->
<div class="chocos">
<div class="choco1 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco2 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco3 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco5 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
</div>
<!--pochettes-->
<div class="pochettes">
<div class="pochette pochette1 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette2 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette3 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette4 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
</div>
</div>
<!--BAYADERE-->
<div id="temp-bayadere">
<div class="bayaface">
<div class="colbaya col1"></div>
<div class="colbaya col2"></div>
<div class="colbaya col3"></div>
<div class="colbaya col4"></div>
<div class="colbaya colover"></div>
</div>
</div>
<!--LISERES-->
<div id="temp-liseres">
<div class="liseface">
<div class="bkgface"></div>
<div class="imgface"></div>
</div>
<div class="lisefacesmall">
<div class="bkgface"></div>
<div class="txtface"></div>
</div>
</div>
<!--EXCLU-->
<div id="temp-exclu">
<div class="excluface">
<div class="imgface"></div>
<div class="txtface"></div>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!-- SIMULATION -->
<div id="simu-box">
<h2>Simulation contenant</h2>
<div class="legende-move c-maroon font11">Faites tourner l’objet avec votre souris</div>
<!--DOUBLECUBE-->
<div class="box-holder doublecube-holder">
<div class="simu-container container-db"></div>
</div>
</div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
</div>

105
www/modules/antadissimulator/views/templates/hook/productbloc/doublecube.tpl
View File

@ -1,105 +0,0 @@
{addJsDef theme=$themeName}
{addJsDef themeImg=$themeImagePath}
<div id="custom_elmts">
<!--COMMONS-->
<div class="noms-holder">
<div class="nom nom_1">Marié(e)</div>
<div class="nom et">&amp;</div>
<div class="nom nom_2">Marié(e)</div>
</div>
<div class="date-holder">
<div class="date day">16</div>
<div class="date month">Juin</div>
<div class="date year">2017</div>
</div>
<div class="date-holder-line">
<span class="date day">16</span>
<span class="date month">Juin</span>
<span class="date year">2017</span>
</div>
<div class="initiales-holder">
<div class="initiale initiale_1">M</div>
<div class="initiale initiale_2">M</div>
</div>
<div id="temp-base">
<!--doublecube-->
<div class="doublecube">
<div class="db-cube1 cube panels-backface-invisible">
<figure class="cubeface top" data-id="1"><!--1--></figure>
<figure class="cubeface bottom" data-id="2"><!--2--></figure>
<figure class="cubeface back" data-id="3"><!--3--></figure>
<figure class="cubeface front" data-id="4"><!--4--></figure>
<figure class="cubeface left" data-id="5"><!--5--></figure>
<figure class="cubeface right" data-id="6"><!--6--></figure>
</div>
<div id="join"></div>
<div class="db-cube2 cube panels-backface-invisible">
<figure class="cubeface top" data-id="7"><!--7--></figure>
<figure class="cubeface bottom" data-id="8"><!--8--></figure>
<figure class="cubeface back" data-id="9"><!--9--></figure>
<figure class="cubeface front" data-id="10"><!--10--></figure>
<figure class="cubeface left" data-id="11"><!--11--></figure>
<figure class="cubeface right" data-id="12"><!--12--></figure>
</div>
</div>
<!--chocos-->
<div class="chocos">
<div class="choco1 flip-container argent" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="13"></div>
<div class="back"></div>
</div>
</div>
<div class="choco2 flip-container argent" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="15"></div>
<div class="back"></div>
</div>
</div>
<div class="choco3 flip-container argent" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="17"></div>
<div class="back"></div>
</div>
</div>
<div class="choco4 flip-container argent" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="19"></div>
<div class="back"></div>
</div>
</div>
<div class="choco5 flip-container argent" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="21"></div>
<div class="back"></div>
</div>
</div>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!-- SIMULATION -->
<div id="simu-box">
<h2>Simulation contenant</h2>
<div class="legende-move c-maroon font11">Faites tourner l’objet avec votre souris</div>
<!--DOUBLECUBE-->
<div class="box-holder doublecube-holder">
<div class="simu-container container-db"></div>
</div>
</div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
</div>

349
www/modules/antadissimulator/views/templates/hook/productbloc/pochette-bicolor.tpl Normal file
View File

@ -0,0 +1,349 @@
{addJsDef theme=$themeName}
{addJsDef themeImg=$themeImagePath}
<div id="custom_elmts">
<!--COMMONS-->
<div class="noms-holder">
<div class="nom nom_1">Marié(e)</div>
<div class="nom et">&amp;</div>
<div class="nom nom_2">Marié(e)</div>
</div>
<div class="date-holder">
<div class="date day">16</div>
<div class="date month">Juin</div>
<div class="date year">2017</div>
</div>
<div class="date-holder-line">
<span class="date day">16</span>
<span class="date month">Juin</span>
<span class="date year">2017</span>
</div>
<div class="initiales-holder">
<div class="initiale initiale_1">M</div>
<div class="initiale initiale_2">M</div>
</div>
<div id="temp-base">
<!--doublecube-->
<div class="doublecube">
<div class="db-cube1 cube panels-backface-invisible">
<figure class="cubeface top" data-id="1"><!--1--></figure>
<figure class="cubeface bottom" data-id="2"><!--2--></figure>
<figure class="cubeface back" data-id="3"><!--3--></figure>
<figure class="cubeface front" data-id="4"><!--4--></figure>
<figure class="cubeface left" data-id="5"><!--5--></figure>
<figure class="cubeface right" data-id="6"><!--6--></figure>
</div>
<div id="join"></div>
<div class="db-cube2 cube panels-backface-invisible">
<figure class="cubeface top" data-id="7"><!--7--></figure>
<figure class="cubeface bottom" data-id="8"><!--8--></figure>
<figure class="cubeface back" data-id="9"><!--9--></figure>
<figure class="cubeface front" data-id="10"><!--10--></figure>
<figure class="cubeface left" data-id="11"><!--11--></figure>
<figure class="cubeface right" data-id="12"><!--12--></figure>
</div>
</div>
<!--chocos-->
<div class="chocos">
<div class="choco1 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="13"></div>
<div class="back"></div>
</div>
</div>
<div class="choco2 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="15"></div>
<div class="back"></div>
</div>
</div>
<div class="choco3 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="17"></div>
<div class="back"></div>
</div>
</div>
<div class="choco4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="19"></div>
<div class="back"></div>
</div>
</div>
<div class="choco5 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="21"></div>
<div class="back"></div>
</div>
</div>
</div>
<!--pochettes-->
<div class="pochettes">
<div class="pochette pochette1 panels-backface-invisible" data-id="1">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette2 panels-backface-invisible" data-id="2">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette3 panels-backface-invisible" data-id="3">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette4 panels-backface-invisible" data-id="4">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
</div>
</div>
<!--BICOLORE-->
<!--RUBAN-->
<div id="temp-ruban">
<!--doublecube-->
<div class="doublecube">
<div class="db-cube1 cube panels-backface-invisible">
<figure class="cubeface front">
<div class="bande">
<div class="txt nom nom_1"></div>
</div>
</figure>
<figure class="cubeface back"><div class="bande"><span class="txt date year"></span></div></figure>
<figure class="cubeface right"><div class="bande"><div class="txt">E</div></div></figure>
<figure class="cubeface left"><div class="bande"></div></figure>
<figure class="cubeface top">&nbsp;</figure>
<figure class="cubeface bottom">&nbsp;</figure>
</div>
<div id="join"></div>
<div class="db-cube2 cube panels-backface-invisible">
<figure class="cubeface front">
<div class="bande">
<div class="txt nom nom_2"></div>
</div>
</figure>
<figure class="cubeface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span></div></figure>
<figure class="cubeface right"><div class="bande"></div></figure>
<figure class="cubeface left"><div class="bande"><div class="txt">T</div></div></figure>
<figure class="cubeface top">&nbsp;</figure>
<figure class="cubeface bottom">&nbsp;</figure>
</div>
</div>
<!--chocos-->
<div class="chocos">
<div class="choco1 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco2 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco3 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco5 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
</div>
<!--pochettes-->
<div class="pochettes">
<div class="pochette pochette1 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette2 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette3 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette4 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
</div>
</div>
<!--BAYADERE-->
<div id="temp-bayadere">
<div class="bayaface">
<div class="colbaya col1"></div>
<div class="colbaya col2"></div>
<div class="colbaya col3"></div>
<div class="colbaya col4"></div>
<div class="colbaya colover"></div>
</div>
</div>
<!--LISERES-->
<div id="temp-liseres">
<div class="liseface">
<div class="bkgface"></div>
<div class="imgface"></div>
</div>
<div class="lisefacesmall">
<div class="bkgface"></div>
<div class="txtface"></div>
</div>
</div>
<!--EXCLU-->
<div id="temp-exclu">
<div class="excluface">
<div class="imgface"></div>
<div class="txtface"></div>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!-- SIMULATION -->
<div id="simu-box">
<h2>Simulation contenant</h2>
<div class="legende-move c-maroon font11">Faites tourner l’objet avec votre souris</div>
<!--DOUBLECUBE-->
<div class="box-holder doublecube-holder">
<div class="simu-container container-pochette"></div>
</div>
</div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
</div>
<div>
<h2>Choix des 2 couleurs</h2>
<div class="pdin-lr-10">
<div class="mgin-b-5">
<span class="c-maroon" style="padding-right:8px">Couleur 1 : </span>
<select name="colorpicker" id="colorpicker1" style="display: none;">
<option value="#B5DC10" data-id="anis">Anis</option>
<option value="#F0037F" data-id="fuschia">Fuchsia</option>
<option value="#FFC211" data-id="or">Or/Jaune</option>
<option value="#7FCDD0" data-id="turquoise">Turquoise</option>
<option value="#766546" data-id="grisf">Gris foncé</option>
<option value="#159033" data-id="vert">Vert</option>
<option value="#6B1687" data-id="violet">Violet</option>
<option value="#E37222" data-id="orange">Orange</option>
<option value="#10147E" data-id="bleuf">Bleu foncé</option>
<option value="#7F0700" data-id="bordeaux">Bordeaux</option>
<option value="#F88CC4" data-id="rose">Rose</option>
<option value="#D198CA" data-id="parme">Parme</option>
<option value="#F50003" data-id="rouge">Rouge</option>
<option value="#C42B68" data-id="framboise">Framboise</option>
<option value="#3C1503" data-id="marron">Marron</option>
<option value="#FFFFFF" data-id="blanc">Blanc</option>
<option value="#FFFAD7" data-id="ivoire">Ivoire</option>
<option value="#CCC6AB" data-id="taupe">Taupe</option>
<option value="#C2C2C2" data-id="argent">Argent/Gris clair</option>
<option value="#000000" data-id="noir">Noir</option>
</select>
<span style="font-size:18px; padding-right:8px;">￬</span>
<span class="color1text">Bleu foncé</span>
</div>
<div>
<span class="c-maroon" style="padding-right:8px">Couleur 2 : </span>
<select name="colorpicker" id="colorpicker2" style="display: none;">
<option value="#B5DC10" data-id="anis">Anis</option>
<option value="#F0037F" data-id="fuschia">Fuchsia</option>
<option value="#FFC211" data-id="or">Or/Jaune</option>
<option value="#7FCDD0" data-id="turquoise">Turquoise</option>
<option value="#766546" data-id="grisf">Gris foncé</option>
<option value="#159033" data-id="vert">Vert</option>
<option value="#6B1687" data-id="violet">Violet</option>
<option value="#E37222" data-id="orange">Orange</option>
<option value="#10147E" data-id="bleuf">Bleu foncé</option>
<option value="#7F0700" data-id="bordeaux">Bordeaux</option>
<option value="#F88CC4" data-id="rose">Rose</option>
<option value="#D198CA" data-id="parme">Parme</option>
<option value="#F50003" data-id="rouge">Rouge</option>
<option value="#C42B68" data-id="framboise">Framboise</option>
<option value="#3C1503" data-id="marron">Marron</option>
<option value="#FFFFFF" data-id="blanc">Blanc</option>
<option value="#FFFAD7" data-id="ivoire">Ivoire</option>
<option value="#CCC6AB" data-id="taupe">Taupe</option>
<option value="#C2C2C2" data-id="argent">Argent/Gris clair</option>
<option value="#000000" data-id="noir">Noir</option>
</select>
<span style="font-size:18px; padding-right:8px;">￬</span>
<span class="color2text">Blanc</span>
</div>
</div>
</div>

264
www/modules/antadissimulator/views/templates/hook/productbloc/pochette-exclusif.tpl Normal file
View File

@ -0,0 +1,264 @@
<div id="custom_elmts">
<!--COMMONS-->
<div class="noms-holder">
<div class="nom nom_1"></div>
<div class="nom et">&</div>
<div class="nom nom_2"></div>
</div>
<div class="date-holder">
<div class="date day"></div>
<div class="date month"></div>
<div class="date year"></div>
</div>
<div class="date-holder-line">
<span class="date day"></span>
<span class="date month"></span>
<span class="date year"></span>
</div>
<div class="initiales-holder">
<div class="initiale initiale_1"></div>
<div class="initiale initiale_2"></div>
</div>
<div id="temp-base">
<!--doublecube-->
<div class="doublecube">
<div class="db-cube1 cube panels-backface-invisible">
<figure class="cubeface top" data-id="1"><!--1--></figure>
<figure class="cubeface bottom" data-id="2"><!--2--></figure>
<figure class="cubeface back" data-id="3"><!--3--></figure>
<figure class="cubeface front" data-id="4"><!--4--></figure>
<figure class="cubeface left" data-id="5"><!--5--></figure>
<figure class="cubeface right" data-id="6"><!--6--></figure>
</div>
<div id="join"></div>
<div class="db-cube2 cube panels-backface-invisible">
<figure class="cubeface top" data-id="7"><!--7--></figure>
<figure class="cubeface bottom" data-id="8"><!--8--></figure>
<figure class="cubeface back" data-id="9"><!--9--></figure>
<figure class="cubeface front" data-id="10"><!--10--></figure>
<figure class="cubeface left" data-id="11"><!--11--></figure>
<figure class="cubeface right" data-id="12"><!--12--></figure>
</div>
</div>
<!--chocos-->
<div class="chocos">
<div class="choco1 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="13"></div>
<div class="back"></div>
</div>
</div>
<div class="choco2 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="15"></div>
<div class="back"></div>
</div>
</div>
<div class="choco3 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="17"></div>
<div class="back"></div>
</div>
</div>
<div class="choco4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="19"></div>
<div class="back"></div>
</div>
</div>
<div class="choco5 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" data-id="21"></div>
<div class="back"></div>
</div>
</div>
</div>
<!--pochettes-->
<div class="pochettes">
<div class="pochette pochette1 panels-backface-invisible" data-id="1">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette2 panels-backface-invisible" data-id="2">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette3 panels-backface-invisible" data-id="3">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
<div class="pochette pochette4 panels-backface-invisible" data-id="4">
<figure class="pochetteface front">&nbsp;</figure>
<figure class="pochetteface back">&nbsp;</figure>
<figure class="pochetteface right">&nbsp;</figure>
<figure class="pochetteface left">&nbsp;</figure>
<figure class="pochetteface top">&nbsp;</figure>
<figure class="pochetteface bottom">&nbsp;</figure>
</div>
</div>
</div>
<!--BICOLORE-->
<!--RUBAN-->
<div id="temp-ruban">
<!--doublecube-->
<div class="doublecube">
<div class="db-cube1 cube panels-backface-invisible">
<figure class="cubeface front">
<div class="bande">
<div class="txt nom nom_1"></div>
</div>
</figure>
<figure class="cubeface back"><div class="bande"><span class="txt date year"></span></div></figure>
<figure class="cubeface right"><div class="bande"><div class="txt">E</div></div></figure>
<figure class="cubeface left"><div class="bande"></div></figure>
<figure class="cubeface top">&nbsp;</figure>
<figure class="cubeface bottom">&nbsp;</figure>
</div>
<div id="join"></div>
<div class="db-cube2 cube panels-backface-invisible">
<figure class="cubeface front">
<div class="bande">
<div class="txt nom nom_2"></div>
</div>
</figure>
<figure class="cubeface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span></div></figure>
<figure class="cubeface right"><div class="bande"></div></figure>
<figure class="cubeface left"><div class="bande"><div class="txt">T</div></div></figure>
<figure class="cubeface top">&nbsp;</figure>
<figure class="cubeface bottom">&nbsp;</figure>
</div>
</div>
<!--chocos-->
<div class="chocos">
<div class="choco1 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco2 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco3 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco5 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
</div>
<!--pochettes-->
<div class="pochettes">
<div class="pochette pochette1 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette2 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette3 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
<div class="pochette pochette4 panels-backface-invisible">
<figure class="pochetteface front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt nom nom_2"></span></div></figure>
<figure class="pochetteface back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></figure>
<figure class="pochetteface right"></figure>
<figure class="pochetteface left"></figure>
<figure class="pochetteface top"></figure>
<figure class="pochetteface bottom"></figure>
</div>
</div>
</div>
<!--BAYADERE-->
<div id="temp-bayadere">
<div class="bayaface">
<div class="colbaya col1"></div>
<div class="colbaya col2"></div>
<div class="colbaya col3"></div>
<div class="colbaya col4"></div>
<div class="colbaya colover"></div>
</div>
</div>
<!--LISERES-->
<div id="temp-liseres">
<div class="liseface">
<div class="bkgface"></div>
<div class="imgface"></div>
</div>
<div class="lisefacesmall">
<div class="bkgface"></div>
<div class="txtface"></div>
</div>
</div>
<!--EXCLU-->
<div id="temp-exclu">
<div class="excluface">
<div class="imgface"></div>
<div class="txtface"></div>
</div>
</div>
</div>

9
www/modules/antadissimulator/views/templates/hook/productbloc/pochette-thematique.tpl
View File

@ -107,13 +107,12 @@
<div id="simu-box">
<h2>Simulation contenant</h2>
<div class="legende-move c-maroon font11">Faites tourner l’objet avec votre souris</div>
<!--DOUBLECUBE-->
<div class="box-holder doublecube-holder">
<div class="box-holder">
<div class="simu-container container-pochette"></div>
</div>
</div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
</div>

70
www/modules/antadissimulator/views/templates/hook/productbloc/pochette6-bicolor.tpl Normal file
View File

@ -0,0 +1,70 @@
<div id="tools-holder-base" class="clearfix" style="margin-bottom:10px;">
<div class="tool-holder clean left" id="tool-infos">
<h1 style="margin-bottom:15px;">Vos informations</h1>
<div class="tool-part open clearfix">
<div class="left mgin-r-10" >
<h2>Prénom</h2>
<input type="text" id="name_1" value="" placeholder="Prénom" class="simu"/>
</div>
<div class="left mgin-r-10">
<h2>Date de l'évènement</h2>
<input type="date" id="date_mariage" class="simu"/>
</div>
<div class="left mgin-r-10">
<h2>Type d'évènement</h2>
<div class="clearfix">
<div class="left" style="line-height:27px;">
<select name="event" id="event">
<option value="">Choisissez</option>
<option value="Baptême">Baptême</option>
<option value="Communion">Communion</option>
<option value="Bar Mitzvah">Bar Mitzvah</option>
<option value="Anniversaire">Anniversaire</option>
<option value="Naissance">Naissance</option>
<option value="Remise de diplôme">Remise de diplôme</option>
</select>
</div>
<div class="left pdin-lr-5" style="line-height:27px;">OU</div>
<div class="left"><input type="text" id="other_event" class="simu" maxlength="15" placeholder="Autre"/></div>
</div>
</div>
</div>
</div>
</div>
<div id="simus-holder" class="clearfix">
<div class="left">
<div id="simu-box" style="height:400px;">
<h2>Simulation pochette</h2>
<div class="legende-move c-maroon font11">Faites tourner l’objet avec votre souris</div>
<div class="legende2 legende-chocos">Chocolats personnalisés pour le café ou vos propres ballotins : Ils seront la touche de raffinement dont tout le monde se souviendra ! <br><a href="produits.php">En savoir plus</a></div>
<div class="legende2 legende-pochette">Pochette personnalisée de 6 chocolats personnalisés. Insérez votre photo pour obtenir un cadeau unique et inoubliable ! <br><a href="produits.php">En savoir plus</a></div>
<!--VRAC-->
<div class="box-holder chocos-box-holder-eve">
<img src="img/simulation/image-vrac.png" width="500" height="500">
</div>
<!--POCHETTE-->
<div class="box-holder pochette-holder-eve">
<div class="container container-pochette-eve">
</div>
</div>
</div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder">
</div>
</div>
<!--<div id="faceholder"></div>
<canvas id="canvas" height="400" width="400"></canvas>
<img src="img/chocolats/chocolats.png" alt="" id="canvasImg" width="400" height="400">-->
</div>

99
www/modules/antadissimulator/views/templates/hook/productbloc/sachet-bicolor.tpl
View File

@ -4,26 +4,26 @@
<div id="custom_elmts">
<!--COMMONS-->
<div class="noms-holder">
<div class="nom nom_1"></div>
<div class="nom et">&</div>
<div class="nom nom_2"></div>
<div class="nom nom_1">Marié(e)</div>
<div class="nom et">&amp;</div>
<div class="nom nom_2">Marié(e)</div>
</div>
<div class="date-holder">
<div class="date day"></div>
<div class="date month"></div>
<div class="date year"></div>
<div class="date day">16</div>
<div class="date month">Juin</div>
<div class="date year">2017</div>
</div>
<div class="date-holder-line">
<span class="date day"></span>
<span class="date month"></span>
<span class="date year"></span>
<span class="date day">16</span>
<span class="date month">Juin</span>
<span class="date year">2017</span>
</div>
<div class="initiales-holder">
<div class="initiale initiale_1"></div>
<div class="initiale initiale_2"></div>
<div class="initiale initiale_1">M</div>
<div class="initiale initiale_2">M</div>
</div>
<div id="temp-base">
@ -136,16 +136,73 @@
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!-- SIMULATION -->
<div id="simu-box">
<h2>Simulation contenant</h2>
<div class="legende-move c-maroon font11">Faites tourner l’objet avec votre souris</div>
<!--DOUBLECUBE-->
<div class="box-holder doublecube-holder">
<div class="simu-container container-db"></div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
</div>
<div>
<h2>Choix des 2 couleurs</h2>
<div class="pdin-lr-10">
<div class="mgin-b-5">
<span class="c-maroon" style="padding-right:8px">Couleur 1 : </span>
<select name="colorpicker" id="colorpicker1" style="display: none;">
<option value="#B5DC10" data-id="anis">Anis</option>
<option value="#F0037F" data-id="fuschia">Fuchsia</option>
<option value="#FFC211" data-id="or">Or/Jaune</option>
<option value="#7FCDD0" data-id="turquoise">Turquoise</option>
<option value="#766546" data-id="grisf">Gris foncé</option>
<option value="#159033" data-id="vert">Vert</option>
<option value="#6B1687" data-id="violet">Violet</option>
<option value="#E37222" data-id="orange">Orange</option>
<option value="#10147E" data-id="bleuf">Bleu foncé</option>
<option value="#7F0700" data-id="bordeaux">Bordeaux</option>
<option value="#F88CC4" data-id="rose">Rose</option>
<option value="#D198CA" data-id="parme">Parme</option>
<option value="#F50003" data-id="rouge">Rouge</option>
<option value="#C42B68" data-id="framboise">Framboise</option>
<option value="#3C1503" data-id="marron">Marron</option>
<option value="#FFFFFF" data-id="blanc">Blanc</option>
<option value="#FFFAD7" data-id="ivoire">Ivoire</option>
<option value="#CCC6AB" data-id="taupe">Taupe</option>
<option value="#C2C2C2" data-id="argent">Argent/Gris clair</option>
<option value="#000000" data-id="noir">Noir</option>
</select>
<span style="font-size:18px; padding-right:8px;">￬</span>
<span class="color1text">Bleu foncé</span>
</div>
<div>
<span class="c-maroon" style="padding-right:8px">Couleur 2 : </span>
<select name="colorpicker" id="colorpicker2" style="display: none;">
<option value="#B5DC10" data-id="anis">Anis</option>
<option value="#F0037F" data-id="fuschia">Fuchsia</option>
<option value="#FFC211" data-id="or">Or/Jaune</option>
<option value="#7FCDD0" data-id="turquoise">Turquoise</option>
<option value="#766546" data-id="grisf">Gris foncé</option>
<option value="#159033" data-id="vert">Vert</option>
<option value="#6B1687" data-id="violet">Violet</option>
<option value="#E37222" data-id="orange">Orange</option>
<option value="#10147E" data-id="bleuf">Bleu foncé</option>
<option value="#7F0700" data-id="bordeaux">Bordeaux</option>
<option value="#F88CC4" data-id="rose">Rose</option>
<option value="#D198CA" data-id="parme">Parme</option>
<option value="#F50003" data-id="rouge">Rouge</option>
<option value="#C42B68" data-id="framboise">Framboise</option>
<option value="#3C1503" data-id="marron">Marron</option>
<option value="#FFFFFF" data-id="blanc">Blanc</option>
<option value="#FFFAD7" data-id="ivoire">Ivoire</option>
<option value="#CCC6AB" data-id="taupe">Taupe</option>
<option value="#C2C2C2" data-id="argent">Argent/Gris clair</option>
<option value="#000000" data-id="noir">Noir</option>
</select>
<span style="font-size:18px; padding-right:8px;">￬</span>
<span class="color2text">Blanc</span>
</div>
</div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
</div>

99
www/modules/antadissimulator/views/templates/hook/productbloc/vrac-bicolor.tpl
View File

@ -4,26 +4,26 @@
<div id="custom_elmts">
<!--COMMONS-->
<div class="noms-holder">
<div class="nom nom_1"></div>
<div class="nom et">&</div>
<div class="nom nom_2"></div>
<div class="nom nom_1">Marié(e)</div>
<div class="nom et">&amp;</div>
<div class="nom nom_2">Marié(e)</div>
</div>
<div class="date-holder">
<div class="date day"></div>
<div class="date month"></div>
<div class="date year"></div>
<div class="date day">16</div>
<div class="date month">Juin</div>
<div class="date year">2017</div>
</div>
<div class="date-holder-line">
<span class="date day"></span>
<span class="date month"></span>
<span class="date year"></span>
<span class="date day">16</span>
<span class="date month">Juin</span>
<span class="date year">2017</span>
</div>
<div class="initiales-holder">
<div class="initiale initiale_1"></div>
<div class="initiale initiale_2"></div>
<div class="initiale initiale_1">M</div>
<div class="initiale initiale_2">M</div>
</div>
<div id="temp-base">
@ -136,16 +136,73 @@
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!-- SIMULATION -->
<div id="simu-box">
<h2>Simulation contenant</h2>
<div class="legende-move c-maroon font11">Faites tourner l’objet avec votre souris</div>
<!--DOUBLECUBE-->
<div class="box-holder doublecube-holder">
<div class="simu-container container-db"></div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
</div>
<div>
<h2>Choix des 2 couleurs</h2>
<div class="pdin-lr-10">
<div class="mgin-b-5">
<span class="c-maroon" style="padding-right:8px">Couleur 1 : </span>
<select name="colorpicker" id="colorpicker1" style="display: none;">
<option value="#B5DC10" data-id="anis">Anis</option>
<option value="#F0037F" data-id="fuschia">Fuchsia</option>
<option value="#FFC211" data-id="or">Or/Jaune</option>
<option value="#7FCDD0" data-id="turquoise">Turquoise</option>
<option value="#766546" data-id="grisf">Gris foncé</option>
<option value="#159033" data-id="vert">Vert</option>
<option value="#6B1687" data-id="violet">Violet</option>
<option value="#E37222" data-id="orange">Orange</option>
<option value="#10147E" data-id="bleuf">Bleu foncé</option>
<option value="#7F0700" data-id="bordeaux">Bordeaux</option>
<option value="#F88CC4" data-id="rose">Rose</option>
<option value="#D198CA" data-id="parme">Parme</option>
<option value="#F50003" data-id="rouge">Rouge</option>
<option value="#C42B68" data-id="framboise">Framboise</option>
<option value="#3C1503" data-id="marron">Marron</option>
<option value="#FFFFFF" data-id="blanc">Blanc</option>
<option value="#FFFAD7" data-id="ivoire">Ivoire</option>
<option value="#CCC6AB" data-id="taupe">Taupe</option>
<option value="#C2C2C2" data-id="argent">Argent/Gris clair</option>
<option value="#000000" data-id="noir">Noir</option>
</select>
<span style="font-size:18px; padding-right:8px;">￬</span>
<span class="color1text">Bleu foncé</span>
</div>
<div>
<span class="c-maroon" style="padding-right:8px">Couleur 2 : </span>
<select name="colorpicker" id="colorpicker2" style="display: none;">
<option value="#B5DC10" data-id="anis">Anis</option>
<option value="#F0037F" data-id="fuschia">Fuchsia</option>
<option value="#FFC211" data-id="or">Or/Jaune</option>
<option value="#7FCDD0" data-id="turquoise">Turquoise</option>
<option value="#766546" data-id="grisf">Gris foncé</option>
<option value="#159033" data-id="vert">Vert</option>
<option value="#6B1687" data-id="violet">Violet</option>
<option value="#E37222" data-id="orange">Orange</option>
<option value="#10147E" data-id="bleuf">Bleu foncé</option>
<option value="#7F0700" data-id="bordeaux">Bordeaux</option>
<option value="#F88CC4" data-id="rose">Rose</option>
<option value="#D198CA" data-id="parme">Parme</option>
<option value="#F50003" data-id="rouge">Rouge</option>
<option value="#C42B68" data-id="framboise">Framboise</option>
<option value="#3C1503" data-id="marron">Marron</option>
<option value="#FFFFFF" data-id="blanc">Blanc</option>
<option value="#FFFAD7" data-id="ivoire">Ivoire</option>
<option value="#CCC6AB" data-id="taupe">Taupe</option>
<option value="#C2C2C2" data-id="argent">Argent/Gris clair</option>
<option value="#000000" data-id="noir">Noir</option>
</select>
<span style="font-size:18px; padding-right:8px;">￬</span>
<span class="color2text">Blanc</span>
</div>
</div>
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
</div>

72
www/modules/antadissimulator/views/templates/hook/productbloc/vrac-thematique.tpl
View File

@ -63,78 +63,6 @@
</div>
</div>
<!--BICOLORE-->
<!-- Damier -->
<!-- Ruban -->
<div id="temp-ruban">
<!--chocos-->
<div class="chocos">
<div class="choco1 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco2 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco3 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
<div class="choco5 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><div class="bande"><span class="txt nom nom_1"></span><span class="txt txt2">&</span><span class="txt nom nom_2"></span></div></div>
<div class="back"><div class="bande"><span class="txt date day"></span><span class="txt date month"></span><span class="txt date year"></span></div></div>
</div>
</div>
</div>
<!-- Bayadere-->
<div id="temp-bayadere">
<div class="bayaface">
<div class="colbaya col1"></div>
<div class="colbaya col2"></div>
<div class="colbaya col3"></div>
<div class="colbaya col4"></div>
<div class="colbaya colover"></div>
</div>
</div>
<!-- Liseres-->
<div id="temp-liseres">
<div class="liseface">
<div class="bkgface"></div>
<div class="imgface"></div>
</div>
<div class="lisefacesmall">
<div class="bkgface"></div>
<div class="txtface"></div>
</div>
</div>
<!-- Exclu -->
<div id="temp-exclu">
<div class="excluface">
<div class="imgface"></div>
<div class="txtface"></div>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>