templates/web/Default/index.html.twig line 1

Open in your IDE?
  1. {# src//WebBundle/Resources/views/index.html.twig #}
  2. {% extends 'webbase.html.twig' %}
  3. {% block homeClass 'active' %}
  4. {% block stylesheets %}
  5.     {{ parent() }}
  6.     <style>
  7.         #canvas {
  8.             position:relative;
  9.             margin:auto;
  10.             left:0;right:0;
  11.         }
  12.         #flash{
  13.             overflow-x: hidden !important;
  14.         }
  15.     </style>
  16. {% endblock %}
  17. {% block headJavascripts %}
  18. {% endblock %}
  19. {% block headjs -%}
  20.     <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  21.     <script>
  22.         function initTyped() {
  23.             return new Typed('#typed', {
  24.                 stringsElement: '#typed-strings',
  25.                 typeSpeed: 40,
  26.                 backSpeed: 40,
  27.                 backDelay: 1000,
  28.                 smartBackspace: true, // this is a default
  29.                 loop: true,
  30.                 cursorChar: '|',
  31.                 showCursor: true,
  32.                 onComplete: function (self) {
  33.                     var date = Date.now();
  34.                     var currentDate = null;
  35.                     do {
  36.                         currentDate = Date.now();
  37.                     } while (currentDate - date < 5000);
  38.                 }
  39.             });
  40.         }
  41.     </script>
  42.     <script src="forest.js"></script>
  43.     <script>
  44.     var canvas, stage, exportRoot;
  45.     function initAnimation() {
  46.         //alert('hi');
  47.         canvas = document.getElementById("canvas");
  48.         images = images||{};
  49.         ss = ss||{};
  50.         var loader = new createjs.LoadQueue(false);
  51.         loader.addEventListener("fileload", handleFileLoad);
  52.         loader.addEventListener("complete", handleComplete);
  53.         loader.loadManifest(lib.properties.manifest);
  54.     }
  55.     function handleFileLoad(evt) {
  56.         if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
  57.     }
  58.     function handleComplete(evt) {
  59.         //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
  60.         var queue = evt.target;
  61.         var ssMetadata = lib.ssMetadata;
  62.         for(i=0; i<ssMetadata.length; i++) {
  63.             ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
  64.         }
  65.         exportRoot = new lib.forestv3();
  66.         stage = new createjs.Stage(canvas);
  67.         stage.addChild(exportRoot);
  68.         //Registers the "tick" event listener.
  69.         createjs.Ticker.setFPS(lib.properties.fps);
  70.         createjs.Ticker.addEventListener("tick", stage);
  71.         //Code to support hidpi screens and responsive scaling.
  72.         (function(isResp, respDim, isScale, scaleType) {
  73.             var lastW, lastH, lastS=1;
  74.             window.addEventListener('resize', resizeCanvas);
  75.             //resizeCanvas();
  76.             function resizeCanvas() {
  77.                 var w = lib.properties.width, h = lib.properties.height;
  78.                 var iw = window.innerWidth, ih=window.innerHeight;
  79.                 var pRatio = window.devicePixelRatio, xRatio=iw/w, yRatio=ih/h, sRatio=1;
  80.                 if(isResp) {
  81.                     if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
  82.                         sRatio = lastS;
  83.                     }
  84.                     else if(!isScale) {
  85.                         if(iw<w || ih<h)
  86.                             sRatio = Math.min(xRatio, yRatio);
  87.                     }
  88.                     else if(scaleType==1) {
  89.                         sRatio = Math.min(xRatio, yRatio);
  90.                     }
  91.                     else if(scaleType==2) {
  92.                         sRatio = Math.max(xRatio, yRatio);
  93.                     }
  94.                 }
  95.                 canvas.width = w*pRatio*sRatio;
  96.                 canvas.height = h*pRatio*sRatio;
  97.                 canvas.style.width = w*sRatio+'px';
  98.                 canvas.style.height = h*sRatio+'px';
  99.                 stage.scaleX = pRatio*sRatio;
  100.                 stage.scaleY = pRatio*sRatio;
  101.                 lastW = iw; lastH = ih; lastS = sRatio;
  102.             }
  103.         })(true, 'height', false, 1);
  104.     }
  105.     var verifyCallback = function (response) {
  106.         alert(response);
  107.     };
  108.     var siteKey = '6Ld9Du4UAAAAAGSUteoaWMYD9ilOyu15quK1OlpO';
  109.     var widgetId1;
  110.     var onloadCallback = function () {
  111.         // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
  112.         // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
  113.         widgetId1 = grecaptcha.render(document.getElementById('emailCaptcha'), {
  114.             'sitekey': siteKey
  115.         });
  116.     };
  117.     </script>
  118. {% endblock %}
  119. {% block body -%}
  120. {#    <section id="flash">#}
  121. {#        <canvas id="canvas" width="2825" height="920"#}
  122. {#                style="display: block; background-color:rgba(22, 45, 66, 1.00)"></canvas>#}
  123. {#    </section>#}
  124.     <section id="home">
  125.         <div class="row">
  126.             <div class="container">
  127.                 <div class="row ">
  128.                     <div class="col-md-12 col-sm-12 fullscreen">
  129.                         <div class="center-y">
  130.                             <h1><img src="{{ asset('../img/alphaWerk.png') }}" width="700px"
  131.                                      alt="alphaWerk" id="logo"/></h1>
  132.                             <span id="typed"></span>
  133.                             <div id="typed-strings" style="display: none;">
  134.                                 {{ home.content|raw }}
  135.                             </div>
  136.                         </div>
  137.                     </div>
  138.                 </div>
  139.             </div>
  140.         </div>
  141.     </section>
  142.     {% if servicesSection.publish == true %}
  143.         <section id="about">
  144.             <div class="container">
  145.                 <h2>Services</h2>
  146.                 {% for service in services %}
  147.                     {{ include('web/Default/_service_card.html.twig') }}
  148.                 {% endfor %}
  149.         </div>
  150.     </section>
  151.     {% endif %}
  152.     {% if howWeWork.publish == true %}
  153.     <section id="how-we-work">
  154.         <div class="container">
  155.             <div class="row">
  156.                 <div class="col-md-4">
  157.                     <img data-src="holder.js/750x375/auto/sky/text:Listen" class="img-responsive" alt="Listen">
  158.                 </div>
  159.                 <div class="col-md-4">
  160.                     <img data-src="holder.js/750x375/auto/vine/text:Discover" class="img-responsive" alt="Discover">
  161.                 </div>
  162.                 <div class="col-md-4">
  163.                     <img data-src="holder.js/750x375/auto/sky/text:Map" class="img-responsive" alt="Map">
  164.                 </div>
  165.             </div>
  166.             <div class="row">
  167.                 <div class="col-md-4">
  168.                     <img data-src="holder.js/750x375/auto/vine/text:Build" class="img-responsive" alt="Build">
  169.                 </div>
  170.                 <div class="col-md-4">
  171.                     <img data-src="holder.js/750x375/auto/sky/text:Test" class="img-responsive" alt="Test">
  172.                 </div>
  173.                 <div class="col-md-4">
  174.                     <img data-src="holder.js/750x375/auto/vine/text:Learn" class="img-responsive" alt="Learn">
  175.                 </div>
  176.             </div>
  177.             <div class="row">
  178.                 <div class="col-md-12 text-justify">
  179.                     <h4>{{ howWeWork.title }}</h4>
  180.                     <p>{{ howWeWork.content|raw }}</p>
  181.                 </div>
  182.             </div>
  183.         </div>
  184.     </section>
  185.     {% endif %}
  186.     <section id="contact">
  187.         <div class="row">
  188.             <script type="text/javascript">
  189.                 function initialize() {
  190.                     var alphaWerk = new google.maps.LatLng(52.122310, -1.813710);
  191.                     var firstLatlng = new google.maps.LatLng(52.122310, -1.813710);
  192.                     var firstOptions = {
  193.                         zoom: 11,
  194.                         center: firstLatlng,
  195.                         mapTypeId: google.maps.MapTypeId.ROADMAP,
  196.                         scrollwheel: false,
  197.                         draggable: false,
  198.                         styles: [
  199.                                   {
  200.                                     "featureType": "poi",
  201.                                     "stylers": [
  202.                                       { "visibility": "off" }
  203.                                     ]
  204.                                   },{
  205.                                     "featureType": "administrative",
  206.                                     "stylers": [
  207.                                       { "visibility": "on" }
  208.                                     ]
  209.                                   },{
  210.                                     "featureType": "landscape.man_made",
  211.                                     "stylers": [
  212.                                       { "visibility": "simplified" },
  213.                                     ]
  214.                                   },{
  215.                                     "featureType": "road",
  216.                                     "elementType": "geometry.stroke",
  217.                                     "stylers": [
  218.                                       { "visibility": "off" }
  219.                                     ]
  220.                                   },{
  221.                                     "featureType": "road.highway",
  222.                                     "stylers": [
  223.                                     ]
  224.                                   },{
  225.                                     "featureType": "water",
  226.                                     "elementType": "geometry",
  227.                                     "stylers": [
  228.                                     ]
  229.                                   },{
  230.                                     "featureType": "water",
  231.                                     "elementType": "labels.text.stroke",
  232.                                     "stylers": [
  233.                                     ]
  234.                                   },{
  235.                                   },{
  236.                                     "featureType": "poi",
  237.                                     "elementType": "labels.text.fill",
  238.                                     "stylers": [
  239.                                       { "visibility": "on" }
  240.                                     ]
  241.                                   }
  242.                                 ]
  243.                     };
  244.                     var map = new google.maps.Map(document.getElementById("map-canvas"), firstOptions);
  245.                     firstmarker = new google.maps.Marker({
  246.                         map:map,
  247.                         draggable: false,
  248.                         animation: google.maps.Animation.DROP,
  249.                         title: 'alphaWerk',
  250.                         position: alphaWerk
  251.                     });
  252.                     var contentString1 = '<p>alphaWerk<br />Evening Hall<br />Dorsington Road<br />Pebworth<br />Worcestershire<br />CV37 8XD</p>';
  253.                     var infowindow1 = new google.maps.InfoWindow({
  254.                         content: contentString1
  255.                     });
  256.                     google.maps.event.addListener(firstmarker, 'click', function() {
  257.                         infowindow1.open(map,firstmarker);
  258.                     });
  259.                     infowindow1.open(map,firstmarker);
  260.                     google.maps.event.addDomListener(window, 'resize', function() {
  261.                         map.panTo(firstLatlng);
  262.                     });
  263.                 }
  264.                 function loadScript() {
  265.                       var script = document.createElement('script');
  266.                       script.type = 'text/javascript';
  267.                       // script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize';
  268.                       script.src = 'https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&callback=initialize';
  269.                       document.body.appendChild(script);
  270.                 }
  271.                 window.onload = loadScript;
  272.             </script>
  273.             <div class="map">
  274.                 <div id="map-canvas">
  275.                 </div>
  276.             </div>
  277.         </div>
  278.         <div id="map" class="">
  279.             <div class="container">
  280.                 <h2>Contact</h2>
  281.                 <div class="row">
  282.                     <div class="col-md-8 clearfix" id="email-form">
  283.                         {{ form_start(formEmail, {'method': 'post', 'attr': {'novalidate': 'novalidate', 'id': 'email', 'class': '', 'autocomplete': 'off'} } ) }}
  284.                         {{ form_errors(formEmail) }}
  285.                         <div class="form-group">
  286.                             {{ form_label(formEmail.companyName, null, {'label_attr': {'class': 'control-label'} } ) }}
  287.                             <div class="controls">
  288.                                 {{ form_widget(formEmail.companyName) }}
  289.                             </div>
  290.                         </div>
  291.                         <div class="form-group">
  292.                             {{ form_label(formEmail.email, null, {'label_attr': {'class': 'control-label'} } ) }}<span style="color: red; font-weight: bold;"> *</span>
  293.                             <div class="controls">
  294.                                 {{ form_widget(formEmail.email) }}
  295.                             </div>
  296.                         </div>
  297.                         <div class="row">
  298.                             <div class="col-md-6 clearfix">
  299.                                 <div class="form-group">
  300.                                     {{ form_label(formEmail.firstName, null, {'label_attr': {'class': 'control-label'} } ) }}<span style="color: red; font-weight: bold;"> *</span>
  301.                                     <div class="controls">
  302.                                         {{ form_widget(formEmail.firstName) }}
  303.                                     </div>
  304.                                 </div>
  305.                             </div>
  306.                             <div class="col-md-6 clearfix">
  307.                                 <div class="form-group">
  308.                                     {{ form_label(formEmail.lastName, null, {'label_attr': {'class': 'control-label'} } ) }}<span style="color: red; font-weight: bold;"> *</span>
  309.                                     <div class="controls">
  310.                                         {{ form_widget(formEmail.lastName) }}
  311.                                     </div>
  312.                                 </div>
  313.                             </div>
  314.                         </div>
  315.                         <div class="form-group">
  316.                             {{ form_label(formEmail.requirement, null, {'label_attr': {'class': 'control-label'} } ) }}
  317.                             <div class="controls">
  318.                                 {{ form_widget(formEmail.requirement) }}
  319.                             </div>
  320.                         </div>
  321.                         <div class="form-group">
  322.                             {{ form_label(formEmail.body, null, {'label_attr': {'class': 'control-label'} } ) }}<span style="color: red; font-weight: bold;"> *</span>
  323.                             <div class="controls">
  324.                                 {{ form_widget(formEmail.body) }}
  325.                             </div>
  326.                         </div>
  327.                         <div class="text-center captchaParent">
  328.                             <div id="emailCaptcha"></div>
  329.                         </div>
  330.                         <div class="form-group">
  331.                             <div class="controls">
  332.                                 <a href="#" class="btn btn-primary pull-right" id="email-send-button"
  333.                                         data-loading-text="Sending..." form="email">Send
  334.                                 </a>
  335.                             </div>
  336.                         </div>
  337.                         {{ form_rest(formEmail) }}
  338.                         {{ form_end(formEmail) }}
  339.                     </div>
  340.                     <div class="col-md-4 clearfix" id="contact-details">
  341.                         <address>
  342.                             &alpha;lphaWerk Ltd<br>
  343.                             Evening Hall<br />
  344.                             Dorsington Road<br />
  345.                             Pebworth<br />
  346.                             Worcestershire<br />
  347.                             CV7 8XD<br>
  348.                         </address>
  349.                         <address>
  350.                             {#0121 285 4424#}
  351.                         </address>
  352.                         <address>
  353.                             <a href="mailto:sales@alphawerk.co.uk">sales@alphawerk.co.uk</a>
  354.                         </address>
  355.                    </div>
  356.                 </div>
  357.             </div>
  358.         </div>
  359.     </section>
  360. {% endblock %}
  361. {% block javascripts %}
  362.     {{ parent() }}
  363.     <script src="{{ asset('js/typed.min.js') }}"></script>
  364.     <script src="{{ asset('js/scroll.js') }}"></script>
  365.     <script src="{{ asset('js/emailSubmit.js') }}"></script>
  366.     <script type="text/javascript">
  367.         var typed = null;
  368.         $(document).ready(function() {
  369.             initAnimation();
  370.             typed = initTyped();
  371.             typed.reset();
  372.         });
  373.     </script>
  374.     <script type="text/javascript">
  375.         $(document).ready(function() {
  376.             $('section').css('min-height', window.innerHeight);
  377.             $('.fullscreen').css('min-height', window.innerHeight);
  378.         });
  379.     </script>
  380.     <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
  381.             async defer>
  382.         $('#emailCaptcha').hide();
  383.     </script>
  384. {% endblock %}