templates/cdrom/projo900bif/index.html.twig line 1

Open in your IDE?
  1. {% extends 'cdrom/base2.html.twig' %}
  2. {% set newZindex = ( zindex + 1) %}
  5. {% block title %}CD-ROM IMMEMORY{% endblock %}
  8. {% block stylesheets %}
  9.   {% if app.user is not null %}
  10.     {% for role in app.user.roles  %}
  11.       {% if role == "ROLE_ADMIN" %}
  12.       {% endif %}
  13.     {% endfor %}
  14.   {% else %}
  15.     <SCRIPT LANGUAGE="JavaScript">
  16.       <!-- Disable
  17.       function disableselect(e){
  18.         return false
  19.       }
  21.       function reEnable(){
  22.         return true
  23.       }
  25.       //if IE4+
  26.       document.onselectstart=new Function ("return false")
  27.       document.oncontextmenu=new Function ("return false")
  28.       //if NS6
  29.       if (window.sidebar){
  30.         document.onmousedown=disableselect
  31.         document.onclick=reEnable
  32.       }
  33.       //-->
  34.     </script>
  35.   {% endif %}
  37.   <style media="screen">
  39.     body, html {
  40.       width:100%;
  41.       height: 100%;
  42.       min-width:100%;
  43.       min-height: 100%;
  44.       margin: 0;
  45.       padding: 0;
  46.     }
  48.     .ecranStack {
  49.       width: 100%;
  50.       height: 100%;
  51.       overflow: hidden;
  52.     
  53.       {% if app.user is not null %}
  54.         {% for role in app.user.roles  %}
  55.           {% if role == "ROLE_ADMIN" %}
  56.           cursor: url({{ pathLocal }}/images/curseurs/classicCursor60.png) 20 20, auto;
  57.           {% endif %}
  58.         {% endfor %}
  59.       {% else %}
  60.         cursor: url({{ pathLocal }}/images/curseurs/classicCursor60.png) 20 20, auto;
  61.       {% endif %}
  62.       position: relative;
  63.       display: flex;
  64.       justify-content: center;
  65.       align-items: center;
  66.       margin: auto;
  67.     }
  68.     .bureau{
  69.       max-width: 903px;
  70.       max-height: 677px;
  71.       margin: 15px;
  72.       min-height: 200px;
  73.       position: relative;
  74.       {% if app.user is not null %}
  75.         {% for role in app.user.roles  %}
  76.           {% if role == "ROLE_ADMIN" %}
  77.           border: 1px solid white;
  78.           {% endif %}
  79.         {% endfor %}
  80.       {% else %}
  81.       border: none;
  82.       {% endif %}
  83.     }
  85.     .Vpair{
  86.       top:0;
  87.     }
  88.     .Vimpair{
  89.       bottom:0;
  90.     }
  91.     .Vimpair .zonesImgBV{
  92.       bottom:0;
  93.     }
  94.     .Vpair .zonesImgBV{
  95.       top:0;
  96.     }
  98.     .zonesImg{
  99.       max-width: 900px;
  100.       max-height: 675px;
  101.       width: 100%;
  102.       height: 100%;
  103.       background-color: orange;
  104.     }
  105.     .zonesFilm{
  106.       max-width: 900px;
  107.       max-height: 675px;
  108.       width: 100%;
  109.       height: 100%;
  110.       top: 0;
  111.       left: 0;
  112.       display: block;
  113.       position: absolute;
  114.     }
  115.     .zonesNav{
  116.       max-width: 900px;
  117.       max-height: 675px;
  118.       width: 100%;
  119.       height: 100%;
  120.       top: 0;
  121.       left: 0;
  122.       display: block;
  123.       position: absolute;
  124.     }
  125.     .zonesX{
  126.       max-width: 900px;
  127.       max-height: 675px;
  128.       width: 100%;
  129.       height: 100%;
  130.       top: 0;
  131.       left: 0;
  132.       display: block;
  133.       position: absolute;
  134.     }
  136.     #v_film3{
  137.       top: {{ (0 / 675) * 100 }}%;
  138.       left: {{ (659 / 900) * 100 }}%;
  139.       display: block;
  140.       position: absolute;
  141.       width: {{ (210 / 900) * 100 }}%;
  142.       height: {{ (685 / 675) * 100 }}%;
  143.     }
  144.     .zoneAdd{
  145.       background-color: white;
  146.       position:absolute;
  148.       left: {{ (710 / 900) * 100 }}%;
  149.       top: {{ (195 / 675) * 100 }}%;
  150.       width: {{ (188 / 900) * 100 }}%;
  151.       height: {{ (210 / 675) * 100 }}%;
  152.       cursor: url("{{ pathLocal }}/images/curseurs/curseur-jaune.png") 20 20, auto;
  153.     }
  154.     .navH2{
  155.       position: absolute;
  156.       top: 0;
  157.       left: 0;
  158.       background-color: chartreuse;
  159.       width: {{ (900 / 900) * 100 }}%;
  160.       height: {{ (40 / 675) * 100 }}%;
  161.     }
  162.     .navG2{
  163.       position: absolute;
  164.       top: {{ (40 / 675) * 100 }}%;
  165.       left: 0;
  166.       background-color: chartreuse;
  167.       width: {{ (40 / 900) * 100 }}%;
  168.       height: {{ (595 / 675) * 100 }}%;
  169.     }
  170.     .navD2{
  171.       position: absolute;
  172.       top: {{ (40 / 675) * 100 }}%;
  173.       right: 0;
  174.       background-color: chartreuse;
  175.       width: {{ (40 / 900) * 100 }}%;
  176.       height: {{ (595 / 675) * 100 }}%;
  177.     }
  178.     .navBG2{
  179.       position: absolute;
  180.       top: {{ (635 / 675) * 100 }}%;
  181.       left: 0;
  182.       background-color: chartreuse;
  183.       width: {{ (450 / 900) * 100 }}%;
  184.       height: {{ (40 / 675) * 100 }}%;
  185.     }
  186.     .navBD2{
  187.       position: absolute;
  188.       top: {{ (635 / 675) * 100 }}%;
  189.       right: 0;
  190.       background-color: chartreuse;
  191.       width: {{ (450 / 900) * 100 }}%;
  192.       height: {{ (40 / 675) * 100 }}%;
  193.     }
  195.     .zoneActive{
  196.       {% if app.user is not null %}
  197.         {% for role in app.user.roles  %}
  198.           {% if role == "ROLE_USER" %}
  199.           opacity: 0.4;
  200.           {% endif %}
  201.         {% endfor %}
  202.       {% else %}
  203.       opacity: 0;
  204.       {% endif %}
  205.     }
  206.     .zoneActive:hover{
  207.       opacity: 0;
  208.     }
  211.     .rolloverAdd{
  212.       background-color: White;
  213.       position:absolute;
  214.       cursor: pointer;
  215.     }
  217.     .stack0{
  218.       max-width: 900px;
  219.       max-height: 675px;
  220.       width: 100%;
  221.       cursor: url('{{ pathLocal }}/images/curseurs/curseur_blanc.png') 20 20, auto;
  222.       /* background-color: orange; */
  223.     }
  225.     @media screen and (max-height: 360px) {
  226.       .bureau{
  227.         max-width: 480px;
  228.         max-height: 360px;
  229.         margin: 15px;
  230.         min-height: 125px;
  231.         position: relative;
  232.         {% if app.user is not null %}
  233.           {% for role in app.user.roles  %}
  234.             {% if role == "ROLE_ADMIN" %}
  235.             border: 1px solid white;
  236.             {% endif %}
  237.           {% endfor %}
  238.         {% else %}
  239.         border: none;
  240.         {% endif %}
  241.       }
  242.     }
  244.     @media screen and (max-width: 640px) {
  245.       .bureau{
  246.         max-width: 480px;
  247.         max-height: 360px;
  248.         margin: 15px;
  249.         min-height: 125px;
  250.         position: relative;
  251.         {% if app.user is not null %}
  252.           {% for role in app.user.roles  %}
  253.             {% if role == "ROLE_ADMIN" %}
  254.             border: 1px solid white;
  255.             {% endif %}
  256.           {% endfor %}
  257.         {% else %}
  258.         border: none;
  259.         {% endif %}
  260.       }
  261.     }
  264.     @media screen and (max-width: 568px) {
  265.       .bureau{
  266.         max-width: 426px; 900
  267.         max-height: 320px; 675
  268.         margin: 15px;
  269.         min-height: 125px;
  270.         position: relative;
  271.         {% if app.user is not null %}
  272.           {% for role in app.user.roles  %}
  273.             {% if role == "ROLE_ADMIN" %}
  274.             border: 1px solid white;
  275.             {% endif %}
  276.           {% endfor %}
  277.         {% else %}
  278.         border: none;
  279.         {% endif %}
  280.       }
  281.     }
  284.     @media screen and (max-height: 500px) {
  285.       .bureau{
  286.         max-width: 426px;
  287.         max-height: 320px;
  288.         margin: 15px;
  289.         min-height: 125px;
  290.         position: relative;
  291.         {% if app.user is not null %}
  292.           {% for role in app.user.roles  %}
  293.             {% if role == "ROLE_ADMIN" %}
  294.             border: 1px solid white;
  295.             {% endif %}
  296.           {% endfor %}
  297.         {% else %}
  298.         border: none;
  299.         {% endif %}
  300.       }
  301.     }
  303.   </style>
  304. {% endblock %}
  307. {% block body %}
  308.   <!-- Structure -->
  309.   <div class="ecranStack">
  310.     <div class="bureau">
  312.       <div class="enterStack text-center" style="position:absolute;">
  313.         <img
  314.         id="enterStackx"
  315.         src="{{ pathLocal }}/images/cdrom/ChatVertissementIntro.jpg"
  316.         alt=""
  317.         width="80%"
  318.         >
  319.         <div class="col-12">
  320.           <h2>Choisissez votre format</h2>
  321.           <a class="btn btn-sm btn-secondary" id="enterStackNatif" style="border-radius:0;">Natif</a>
  322.           &nbsp;&nbsp; - &nbsp;&nbsp;
  323.           <a class="btn btn-lg btn-success" id="enterStack" style="border-radius:0;">Upscalé</a>
  324.         </div>
  325.       </div>
  329.       <!-- Conteneur -->
  330.       <div class="stack0">
  332.         <!-- Stack -->
  333.         <div class="zonesImg">
  334.           <img
  335.           src="{{ pathLocal }}/images/cdrom/HOME-STACK001.jpeg"
  336.           alt=""
  337.           width="100%"
  338.           >
  341.         </div>
  343.         <div class="zoneTampon">
  345.         </div>
  347.       </div>
  349.     </div>
  350.   </div>
  351. {% endblock %}
  354. {% block javascripts %}
  355.   <script type="text/javascript">
  356.     $(function(){
  358.         console.log("polop"); 
  360.       // init
  361.       var oldStack = 0;
  362.       var oldRetourBiff = 0;
  364.       //$(".bureau").empty();
  366.       // init Stack // recupStackInitProjo (id_Stack, zindex, largeur, id_oldStack)
  367.       $("#enterStack").click(function(){
  368.         console.log("enterstack"); 
  369.         recupStackInitProjo( {{ stack.id }} , {{ zindex }}, 900, oldStack, oldRetourBiff );
  370.         $("#enterStack").remove();
  371.       });
  373.       // btn natif
  374.       $("#enterStackNatif").click(function(){
  375.         //recupStackInitProjo( {{ stack.id }} , {{ zindex }}, 640, oldStack, oldRetourBiff );
  376.         window.location.href = "{{ path("front_cdrom_640_ciblebif", {id: stack.id}) }}"; //Redirection similaire à un clic sur un lien
  378.         $("#enterStack").remove();
  379.       });
  383.       // load stacks functions
  384.       function recupStackInitProjo(id, zindex, size, oldStack, oldRetourBiff)
  385.       {
  386.         //alert("demo recupStack");
  388.         // AJAX recup code css, html et js
  389.         $.ajax({
  390.           type: "POST",
  391.           url: "{{ path('projo_stacks_recupStack2bif') }}",
  392.           data: {
  393.             id: id,
  394.             zindex: zindex,
  395.             size: size,
  396.             oldStack: oldStack,
  397.             oldRetourBiff: oldRetourBiff,
  398.           },
  399.           success: function(msg)
  400.           {
  402.             // affiche le code de la stack
  403.             $( ".bureau" ).prepend( msg );
  405.           }
  406.         });
  408.       }
  414.   });
  416. </script>
  417. {% endblock %}