{% extends "./layout.html" %}

{% block sectionClasses %}index{% endblock %}
{% block meta_title %}Java web framework{% endblock %}
{% block meta_description %}Highly Flexible Java Web Framework Based On Guice{% endblock %}

{% block scripts %}

<script src="/public/js/impress.js"></script>

<script>

	{#==========================================
    If Impress.js is supported, we hide the static
    features section and we show the presentation.
    ==========================================#}
    $(function() {  
		if(window.impress.supported) {
			$("#noPresentation").css("display", "none");
			$("#presentationIframe").css("display", "block");
			$("#presentationControls").css("display", "inline");
			
			$("#showText").on("click", function(event) {
				event.preventDefault();
				$("#noPresentation").toggle();
			});	
			
			$("#previousBtn").on("click", function(event) {
				event.preventDefault();
				document.getElementById("presentationIframe").contentWindow.impress.api.prev();
			});	
			
			$("#nextBtn").on("click", function(event) {
				event.preventDefault();
				document.getElementById("presentationIframe").contentWindow.impress.api.next();
			});	
			
		    $("#previousBtn img")
	        .mouseover(function() { 
	            $(this).attr("src", "/public/images/presentation/previous_over.png");
	        })
	        .mouseout(function() {
	        	$(this).attr("src", "/public/images/presentation/previous.png");
	        });
		    
		    $("#nextBtn img")
	        .mouseover(function() { 
	            $(this).attr("src", "/public/images/presentation/next_over.png");
	        })
	        .mouseout(function() {
	        	$(this).attr("src", "/public/images/presentation/next.png");
	        });
		    
		    $("#showText img")
	        .mouseover(function() { 
	            $(this).attr("src", "/public/images/presentation/text_over.png");
	        })
	        .mouseout(function() {
	        	$(this).attr("src", "/public/images/presentation/text.png");
	        });
			
		} else {
			$("#noPresentation").css("display", "block");	
		}
    }); 

</script>
{% endblock %}


{% block body %}

<div class="container">

    <div class="row"> 
        <div class="col-xs-12">
		    <div id="jumb" class="jumbotron">
		        <h1>Propulsion for your web backend</h1>
		        <p><span class="orange spincast">Spincast</span> is an highly flexible 
                and <a href="https://github.com/spincast/spincast-framework"><span>open source</span></a> Java web framework, based on Guice.</p>
		    </div>
	    </div>
    </div>

    <div class="row"> 
    
        {#==========================================
        Main content
        ==========================================#}
        <div class="col-md-9">
            <div id="indexContent" class="row">
            	<div class="col-xs-12">
            	
			        {#==========================================
			        Impress presentation
			        ==========================================#}
					<iframe id="presentationIframe" style="display:none;" src="/presentation"></iframe> 

					<div id="presentationControls" class="pointerCursor col-sm-12" style="display:none;">
						<span id="previousBtn" class="hint--bottom-left hint--bounce" data-hint="Previous slide">
							<img src="/public/images/presentation/previous.png" />
						</span>
						<span id="showText" class="pointerCursor hint--bottom hint--bounce" data-hint="Display the features as text">
							<img src="/public/images/presentation/text.png" />
						</span>
						<span id="nextBtn" class="pointerCursor hint--bottom-right hint--bounce" data-hint="Next slide">
							<img src="/public/images/presentation/next.png" />
						</span>
				    </div>
					
			        {#==========================================
			        Impress not supported
			        ==========================================#}
					<div id="noPresentation">
					
						<div class="row">
						
					        <div class="col-sm-6 col-md-4">
					            <div class="thumbnail">
					                <div class="caption">
					                    <p class="featureLogo">
					                    	<img src="/public/images/features/web.png" /> 
					                    </p>
					                    <h4>Any web application</h4>
					                    <p class="featureContent">Spincast is a framework to serve as a backend for Single Page Applications (<code>SPA</code>),
									        to develop old-school <code>HTML</code> generated websites or 
									        even to be a <code>REST</code> web service / microservice platform.
									    </p>
					                </div>
					            </div>
					        </div>
					        
					        <div class="col-sm-6 col-md-4">
					            <div class="thumbnail">
					                <div class="caption">
					                    <p class="featureLogo">
					                    	<img src="/public/images/features/flexible.png" /> 
					                    </p>
					                    <h4>Flexible...</h4>
							        	<p class="featureContent">
							        		Spincast is based on <a href="https://github.com/google/guice">Guice</a> from the ground up.
							        		It is very flexible: each part can be tweaked/overridden, even 
									        the core classes.
							        		There are no static methods and 
									        <a href="/about#private_methods">no private methods</a>.
									    </p>
					                </div>
					            </div>
					        </div>
					        
					        
					        <div class="col-sm-6 col-md-4">
					            <div class="thumbnail">
					                <div class="caption">
					                    <p class="featureLogo">
					                    	<img src="/public/images/features/flexible2.png" /> 
					                    </p>
					                    <h4>.... <em id="veryFlexible">very</em> flexible!</h4>
							        	<p class="featureContent">
							        		Spincast aims to feel more like a <em>library</em> than like a framework.
	         								It is not opinionated and favors configuration over convention. 
									    </p>
					                </div>
					            </div>
					        </div>
					        
					        <div class="col-sm-6 col-md-4">
					            <div class="thumbnail">
					                <div class="caption">
					                    <p class="featureLogo">
					                    	<img src="/public/images/features/modular.png" /> 
					                    </p>
					                    <h4>Modular</h4>
							        	<p class="featureContent">
							        		Spincast is composed of a small <strong>core</strong> 
		        							and a <a href="/plugins">plugins</a> ecosystem.
									    </p>
					                </div>
					            </div>
					        </div>
					        
					        <div class="col-sm-6 col-md-4">
					            <div class="thumbnail">
					                <div class="caption">
					                    <p class="featureLogo">
					                    	<img src="/public/images/features/websockets.png" /> 
					                    </p>
					                    <h4>WebSockets</h4>
					                    <p class="featureContent">WebSockets are fully supported.
					                    Even by the <a href="/plugins/spincast-http-client-with-websocket">Spincast HTTP client</a>!<p>
					                </div>
					            </div>
					        </div>
					        
					        <div class="col-sm-6 col-md-4">
					            <div class="thumbnail">
					                <div class="caption">
					                    <p class="featureLogo">
					                    	<img src="/public/images/features/server.png" /> 
					                    </p>
					                    <h4>Embedded server</h4>
					                    <p class="featureContent">The embedded server
									        makes everything easy to develop, test and deploy...
									        Think <code>Node.js</code> + <code>Express</code>, but easier to develop 
									        (no asynchronous code)
									        and using a better language than Javascript!
									    </p>
					                </div>
					            </div>
					        </div>
					        
					        <div class="col-sm-6 col-md-4">
					            <div class="thumbnail">
					                <div class="caption">
					                    <p class="featureLogo">
					                    	<img src="/public/images/features/router.png" /> 
					                    </p>
					                    <h4>Powerful router</h4>
					                    <p class="featureContent">
									       Spincast's powerful router is injectable 
		        							and dynamic. That means you can add and remove 
		        							<code>routes</code> from anywhere in your application, at any time.
									    </p>
					                </div>
					            </div>
					        </div>
					     
					        <div class="col-sm-6 col-md-4">
					            <div class="thumbnail">
					                <div class="caption">
					                    <p class="featureLogo">
					                    	<img src="/public/images/features/tested.png" /> 
					                    </p>
					                    <h4>Compatible and tested</h4>
					                    <p class="featureContent">
									       Spincast is validated using more than 1600 tests.
									    </p>
					                </div>
					            </div>
					        </div> 
					        
					        <div class="col-sm-6 col-md-4">
					            <div class="thumbnail">
					                <div class="caption">
					                    <p class="featureLogo">
					                    	<img src="/public/images/features/learn.png" /> 
					                    </p>
					                    <h4>Learn more...</h4>
								        <ul>
								        	<li>
								        		<a href="/demos-tutorials">Demos and tutorials</a>
								        	</li>
								        	<li>
								        		<a href="/documentation#quick_start">Quick Start application</a>
								        	</li>
								        	<li>
								        		<a href="/documentation">Documentation</a>
								        	</li>
								        	<li>
								        		<a href="/about">Why Spincast?</a>
								        	</li>
								        </ul> 
					                </div>
					            </div>
					        </div> 
					        
					    </div>
					</div>
								
			        {#==========================================
			        We hide the "No preesentation" as soon as possible
			        if javascript is enabled.
			        ==========================================#}
					<script>document.getElementById("noPresentation").style.display = "none";</script>

				</div>	
            </div>
        </div>
        
        {#==========================================
        Right sidebar
        ==========================================#}
        <div id="right-sidebar" class="col-md-3">
        
            <div class="quickStartWrapper">
                <a href="/documentation#quick_start" class="btn btn-lg hvr-radial-out">
                <img id="quickIcon" class="inlineIcon" src="/public/images/icons/flashHome.png" /> Quick Start application</a>
            </div>
        
	        {#==========================================
	        Current version
	        ==========================================#}
            <div id="version" class="well right-section">
	            <h4>
                    Current version
                </h4>
	            <p>
	                The current version is <code>{{spincast.spincastCurrrentVersion}}</code>. 
                    Spincast is considered as being in <em><b>beta</b></em> as long as
	                <code>1.0.0</code> is not reached.
	            </p>
            </div>
            
	        {#==========================================
	        Quote
	        ==========================================#}
            <div class="well right-section">
                <blockquote>
                    <p><em>Simple things should be simple, complex
                     things should be possible.</em></p>
                    <footer>Alan Kay</footer>
                </blockquote>
            </div>

        </div> {# End right-sidebar #}
    </div> {# End row #}
    
</div> 

{% endblock %}