{# src//WebBundle/Resources/views/index.html.twig #}
{% extends 'webbase.html.twig' %}
{% block homeClass 'active' %}
{% block stylesheets %}
{{ parent() }}
<style>
#canvas {
position:relative;
margin:auto;
left:0;right:0;
}
#flash{
overflow-x: hidden !important;
}
</style>
{% endblock %}
{% block headJavascripts %}
{% endblock %}
{% block headjs -%}
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
function initTyped() {
return new Typed('#typed', {
stringsElement: '#typed-strings',
typeSpeed: 40,
backSpeed: 40,
backDelay: 1000,
smartBackspace: true, // this is a default
loop: true,
cursorChar: '|',
showCursor: true,
onComplete: function (self) {
var date = Date.now();
var currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < 5000);
}
});
}
</script>
<script src="forest.js"></script>
<script>
var canvas, stage, exportRoot;
function initAnimation() {
//alert('hi');
canvas = document.getElementById("canvas");
images = images||{};
ss = ss||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete(evt) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
}
exportRoot = new lib.forestv3();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
//Registers the "tick" event listener.
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Code to support hidpi screens and responsive scaling.
(function(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
//resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = w*sRatio+'px';
canvas.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
})(true, 'height', false, 1);
}
var verifyCallback = function (response) {
alert(response);
};
var siteKey = '6Ld9Du4UAAAAAGSUteoaWMYD9ilOyu15quK1OlpO';
var widgetId1;
var onloadCallback = function () {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render(document.getElementById('emailCaptcha'), {
'sitekey': siteKey
});
};
</script>
{% endblock %}
{% block body -%}
{# <section id="flash">#}
{# <canvas id="canvas" width="2825" height="920"#}
{# style="display: block; background-color:rgba(22, 45, 66, 1.00)"></canvas>#}
{# </section>#}
<section id="home">
<div class="row">
<div class="container">
<div class="row ">
<div class="col-md-12 col-sm-12 fullscreen">
<div class="center-y">
<h1><img src="{{ asset('../img/alphaWerk.png') }}" width="700px"
alt="alphaWerk" id="logo"/></h1>
<span id="typed"></span>
<div id="typed-strings" style="display: none;">
{{ home.content|raw }}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% if servicesSection.publish == true %}
<section id="about">
<div class="container">
<h2>Services</h2>
{% for service in services %}
{{ include('web/Default/_service_card.html.twig') }}
{% endfor %}
</div>
</section>
{% endif %}
{% if howWeWork.publish == true %}
<section id="how-we-work">
<div class="container">
<div class="row">
<div class="col-md-4">
<img data-src="holder.js/750x375/auto/sky/text:Listen" class="img-responsive" alt="Listen">
</div>
<div class="col-md-4">
<img data-src="holder.js/750x375/auto/vine/text:Discover" class="img-responsive" alt="Discover">
</div>
<div class="col-md-4">
<img data-src="holder.js/750x375/auto/sky/text:Map" class="img-responsive" alt="Map">
</div>
</div>
<div class="row">
<div class="col-md-4">
<img data-src="holder.js/750x375/auto/vine/text:Build" class="img-responsive" alt="Build">
</div>
<div class="col-md-4">
<img data-src="holder.js/750x375/auto/sky/text:Test" class="img-responsive" alt="Test">
</div>
<div class="col-md-4">
<img data-src="holder.js/750x375/auto/vine/text:Learn" class="img-responsive" alt="Learn">
</div>
</div>
<div class="row">
<div class="col-md-12 text-justify">
<h4>{{ howWeWork.title }}</h4>
<p>{{ howWeWork.content|raw }}</p>
</div>
</div>
</div>
</section>
{% endif %}
<section id="contact">
<div class="row">
<script type="text/javascript">
function initialize() {
var alphaWerk = new google.maps.LatLng(52.122310, -1.813710);
var firstLatlng = new google.maps.LatLng(52.122310, -1.813710);
var firstOptions = {
zoom: 11,
center: firstLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
draggable: false,
styles: [
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "visibility": "simplified" },
]
},{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.highway",
"stylers": [
]
},{
"featureType": "water",
"elementType": "geometry",
"stylers": [
]
},{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
]
},{
},{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{ "visibility": "on" }
]
}
]
};
var map = new google.maps.Map(document.getElementById("map-canvas"), firstOptions);
firstmarker = new google.maps.Marker({
map:map,
draggable: false,
animation: google.maps.Animation.DROP,
title: 'alphaWerk',
position: alphaWerk
});
var contentString1 = '<p>alphaWerk<br />Evening Hall<br />Dorsington Road<br />Pebworth<br />Worcestershire<br />CV37 8XD</p>';
var infowindow1 = new google.maps.InfoWindow({
content: contentString1
});
google.maps.event.addListener(firstmarker, 'click', function() {
infowindow1.open(map,firstmarker);
});
infowindow1.open(map,firstmarker);
google.maps.event.addDomListener(window, 'resize', function() {
map.panTo(firstLatlng);
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
// script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize';
script.src = 'https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<div class="map">
<div id="map-canvas">
</div>
</div>
</div>
<div id="map" class="">
<div class="container">
<h2>Contact</h2>
<div class="row">
<div class="col-md-8 clearfix" id="email-form">
{{ form_start(formEmail, {'method': 'post', 'attr': {'novalidate': 'novalidate', 'id': 'email', 'class': '', 'autocomplete': 'off'} } ) }}
{{ form_errors(formEmail) }}
<div class="form-group">
{{ form_label(formEmail.companyName, null, {'label_attr': {'class': 'control-label'} } ) }}
<div class="controls">
{{ form_widget(formEmail.companyName) }}
</div>
</div>
<div class="form-group">
{{ form_label(formEmail.email, null, {'label_attr': {'class': 'control-label'} } ) }}<span style="color: red; font-weight: bold;"> *</span>
<div class="controls">
{{ form_widget(formEmail.email) }}
</div>
</div>
<div class="row">
<div class="col-md-6 clearfix">
<div class="form-group">
{{ form_label(formEmail.firstName, null, {'label_attr': {'class': 'control-label'} } ) }}<span style="color: red; font-weight: bold;"> *</span>
<div class="controls">
{{ form_widget(formEmail.firstName) }}
</div>
</div>
</div>
<div class="col-md-6 clearfix">
<div class="form-group">
{{ form_label(formEmail.lastName, null, {'label_attr': {'class': 'control-label'} } ) }}<span style="color: red; font-weight: bold;"> *</span>
<div class="controls">
{{ form_widget(formEmail.lastName) }}
</div>
</div>
</div>
</div>
<div class="form-group">
{{ form_label(formEmail.requirement, null, {'label_attr': {'class': 'control-label'} } ) }}
<div class="controls">
{{ form_widget(formEmail.requirement) }}
</div>
</div>
<div class="form-group">
{{ form_label(formEmail.body, null, {'label_attr': {'class': 'control-label'} } ) }}<span style="color: red; font-weight: bold;"> *</span>
<div class="controls">
{{ form_widget(formEmail.body) }}
</div>
</div>
<div class="text-center captchaParent">
<div id="emailCaptcha"></div>
</div>
<div class="form-group">
<div class="controls">
<a href="#" class="btn btn-primary pull-right" id="email-send-button"
data-loading-text="Sending..." form="email">Send
</a>
</div>
</div>
{{ form_rest(formEmail) }}
{{ form_end(formEmail) }}
</div>
<div class="col-md-4 clearfix" id="contact-details">
<address>
αlphaWerk Ltd<br>
Evening Hall<br />
Dorsington Road<br />
Pebworth<br />
Worcestershire<br />
CV7 8XD<br>
</address>
<address>
{#0121 285 4424#}
</address>
<address>
<a href="mailto:sales@alphawerk.co.uk">sales@alphawerk.co.uk</a>
</address>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/typed.min.js') }}"></script>
<script src="{{ asset('js/scroll.js') }}"></script>
<script src="{{ asset('js/emailSubmit.js') }}"></script>
<script type="text/javascript">
var typed = null;
$(document).ready(function() {
initAnimation();
typed = initTyped();
typed.reset();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('section').css('min-height', window.innerHeight);
$('.fullscreen').css('min-height', window.innerHeight);
});
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
$('#emailCaptcha').hide();
</script>
{% endblock %}