Switch to side-by-side view

--- a/opensourceprojects/templates/frontpage.html
+++ b/opensourceprojects/templates/frontpage.html
@@ -1,11 +1,497 @@
-{% extends g.theme.master %}
-
-{% block title %}{{title}}{% endblock %}
-
-{% block header %}{{title}}{% endblock %}
-
-{% block extra_css %}
-{% endblock %}
-
-{% block content %}
-{% endblock %}
+<!DOCTYPE html>
+<!-- Server: {{g.server_name}} -->
+{% import 'allura:templates/jinja_master/lib.html' as lib with context %}
+{% if g.theme.jinja_macros %}
+  {% import g.theme.jinja_macros as theme_macros with context %}
+{% endif %}
+{% do g.register_forge_js('js/jquery-base.js', location='head_js') %}
+{% do g.register_forge_js('js/jquery.notify.js', location='head_js') %}
+{% do g.register_forge_js('js/sylvester.js') %}
+{% do g.register_forge_js('js/pb.transformie.min.js') %}
+{% do g.register_forge_js('js/allura-base.js') %}
+{% do g.register_forge_css('css/forge/hilite.css') %}
+{% do g.theme.require() %}
+{% do g.resource_manager.register_widgets(c) %}
+{# paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ #}
+<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]>--> <html lang="en" class="no-js"> <!--<![endif]-->
+  <head>
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
+    <title>{% block title %}opensourceprojects.eu{% endblock %}</title>
+    {{theme_macros.extra_header(g.theme_href(''))}}
+    <script type="text/javascript">
+            /*jslint onevar: false, nomen: false, evil: true, css: true, plusplus: false, white: false, forin: true, on: true, immed: false */
+            /*global confirm, alert, unescape, window, jQuery, $, net, COMSCORE */
+    </script>
+    {% for blob in g.resource_manager.emit('head_css') %}
+      {{ blob }}
+    {% endfor %}
+    {% for blob in g.resource_manager.emit('head_js') %}
+      {{ blob }}
+    {% endfor %}
+
+    {% if c.project and c.project.neighborhood.css %}
+      <style type="text/css">
+        {{c.project.neighborhood.get_custom_css()|safe}}
+      </style>
+    {% elif neighborhood and neighborhood.css %}
+      <style type="text/css">
+        {{neighborhood.get_custom_css()}}
+      </style>
+    {% endif %}
+    {% block extra_css %}{% endblock %}
+      <style>.{{ g.antispam.honey_class }} { display:none }</style>
+
+      <style>
+.upcontent{
+    background-color: #F4F1FF;
+    width:100%;
+    height:350px;
+    border-bottom: 2px solid #414E96;
+}
+
+.tagnsign{
+    margin: 0 auto;
+    padding-top:80px;
+    width: 900px;
+    right:0px;
+    left:0px;
+}
+
+.tagline{
+    max-width: 500px;
+    word-wrap:break-word;
+    float: left;
+    color:#000C4C;
+    text-shadow: -1px 1 #333, 1 1px #333, 1px 1 #333, 1 -1px #333;
+}
+
+
+.taglinebig{
+    font-size: 42pt;
+    line-height: 60px;
+}
+
+.taglinemini{
+    font-size: 20pt;
+    line-height: 30px;
+    color:#414E96;
+    margin-top: 5px;
+}
+
+.signbtn {
+  width:277px;
+  height: 42px;
+  display: inline-block;
+  *display: inline;
+  padding: 4px 12px;
+  margin-top: 10px;
+  margin-bottom: 0;
+  *margin-left: .3em;
+  font-size: 14pt;
+  line-height: 20px;
+  color: #fff;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #414E96;
+  *background-color: #414E96;
+  background-image: -moz-linear-gradient(top, #414E96, #000C4C);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#414E96), to(#000C4C));
+  background-image: -webkit-linear-gradient(top, #414E96, ##000C4C);
+  background-image: -o-linear-gradient(top, #414E96, #000C4C);
+  background-image: linear-gradient(to bottom, #414E96, #000C4C);
+  background-repeat: repeat-x;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border: 1px solid #000C4C;
+  text-shadow:none;
+  letter-spacing:1px;
+  font-weight: normal;
+  -webkit-box-shadow:none;
+  -moz-box-shadow:none;
+  box-shadow:none;
+    outline: none;
+}
+
+.signbtn:hover{
+  cursor: pointer;
+  background-color: #000C4C;
+  *background-color: #000C4C;
+  background-image: -moz-linear-gradient(top, #000C4C, #414E96);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000C4C), to(#414E96));
+  background-image: -webkit-linear-gradient(top, #000C4C, #414E96);
+  background-image: -o-linear-gradient(top, #000C4C, #414E96);
+  background-image: linear-gradient(to bottom, #000C4C, #414E96);
+  background-repeat: repeat-x;
+  border: 1px solid #000C4C !important;
+}
+
+.signform{
+    font-weight: lighter;
+    float: right;
+    max-width: 277px;
+}
+
+.signform input {
+    width:255px;
+    color:#444;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    letter-spacing: 1px;
+    font-size: 13pt;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    padding:10px;
+    margin:5px 0px 1px 0px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    -moz-box-shadow: none;
+}
+
+.signformbox{
+    border:1px solid #414E96;
+}
+
+.signformboxcheck {
+    border:1px solid #0E942C;
+    background-color: #D9FEE1;
+}
+
+.signformboxwrong {
+    border:1px solid #d04437;
+    background-color: #f6e4e4;
+}
+
+.signformerror{ 
+    background-color:#d04437;
+    padding:7px 6px 5px 10px;
+    color:#FFF;
+    font-size: 10pt;
+    position: relative;
+    word-wrap:break-word;
+    max-width:264px;
+    text-align: left;
+    font-weight: bold;
+    display:none;
+}
+
+.signformarrow{
+    width: 0; 
+    height: 0; 
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid #d04437;
+    margin-left:12px;
+    display:none;
+}
+
+/* display only to test */
+
+#passarrow, #passerror{
+    display:block;
+}
+
+.middlecontent{
+    background-color: #FFF;
+    width:100%;
+    height:350px;
+    border-bottom: 1px solid #DFE2F2;
+    display: none;
+}
+
+
+.highlightnrecent{
+    margin: 0 auto;
+    width: 900px;
+    right:0px;
+    left:0px;
+}
+
+.highlightproj{
+    padding-top:20px;
+    background-color: #F00;
+    height:330px;
+    width: 445px;
+    float: left;
+    opacity:0.6;
+    padding-right:5px;
+}
+.recentproj{
+    padding-top:20px;
+    background-color: #0F0;
+    height:330px;
+    width: 445px;
+    float: right;
+    opacity:0.6;
+    padding-left:5px;
+}
+
+
+.downcontent{
+    background-color: #FFF;
+    width:100%;
+    height:800px;
+    border-bottom: 1px solid #414E96;
+    background-color: #d2d7f4;
+}
+
+
+.featurenexplain{
+    margin: 0 auto;
+    width: 900px;
+    right:0px;
+    left:0px;
+}
+
+.featureosp{
+    margin-top:40px;
+    float: left;
+    text-align: center;
+    padding:24px;
+    height: 530px;
+        border-right-width:1px;
+    -webkit-border-image: 
+        -webkit-gradient(linear, 0 0, 0 100%, from(#414E96), to(#d2d7f4)) 1 100%;
+    -webkit-border-image: 
+        -webkit-linear-gradient(#414E96, #d2d7f4) 1 100%;
+    -o-border-image:
+             -o-linear-gradient(#414E96, #d2d7f4) 1 100%;
+    -moz-border-image:
+           -moz-linear-gradient(#414E96, #d2d7f4) 1 100%; 
+
+}
+
+#lastfeature {border:none;}
+
+.featureadmin {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    border: 1px solid #414E96;
+    width:172px;
+    background-color: #FFF;
+    margin:0 auto;
+    margin-top: 30px;
+    height: 315px;
+}
+
+
+.featuregit {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    border: 1px solid #414E96;
+    height: 255px;
+    width:172px;
+    background-color: #FFF;
+    margin:0 auto;
+    margin-top: 30px;
+}
+
+
+.featureforum {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    border: 1px solid #414E96;
+    height: 320px;
+    width:172px;
+    background-color: #FFF;
+    padding-left: 2px;
+    margin:0 auto;
+    margin-top: 30px;
+    padding-top:4px;
+    padding-bottom:3px;
+}
+
+.featuretickets {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    border: 1px solid #414E96;
+    height: 410px;
+    width:172px;
+    background-color: #FFF;
+    margin:0 auto;
+    margin-top: 30px;
+    padding-top:5px;
+    padding-bottom:1px;
+}
+
+
+.titleosp{
+    color:#000C4C;
+    font-size: 18pt;
+    font-weight: bold;
+    padding-bottom: 10px;
+    text-shadow: -1px 1 #333, 1 1px #333, 1px 1 #333, 1 -1px #333;
+}
+
+.explainosp{
+    color:#000C4C;
+    font-size: 10pt;
+    height: 60px;
+    line-height: 20px;
+    width: 170px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.explainosp p{
+    font-size: 13pt;
+    line-height: 25px;
+    padding: 0px;
+    margin: 0px; 
+}
+
+.featureadmin img{
+    width:167px;
+}
+
+.featureforum img{
+    width:170px;
+}
+
+.featuregit img{
+    width:167px;
+}
+
+.featuretickets img{
+    width:166px;
+}
+
+      </style>
+    {% block head %}
+    {% endblock %}
+    {{g.analytics.display()}}
+  </head>
+
+  <body{% block body_attrs %}{% endblock %} id="forge">
+    {% for blob in g.resource_manager.emit('body_top_js') %}
+      {{ blob }}
+    {% endfor %}
+    {{theme_macros.header(g.login_url, '/auth/logout')}}
+    {% set flash = tg.flash_obj.render('flash', use_js=False) %}
+    <section id="page-body" class="{{g.document_class(neighborhood)}}">
+
+      <div id="content_base" class="{% if c and c.app %}{{ c.app.config.tool_name }}{% endif %}">
+            {% block before_content %}{% endblock %}
+            {% block content %}
+            
+
+<div class="upcontent">
+<div class="tagnsign">
+
+<div class="tagline">
+<div class="taglinebig">A common location for ICT-EU projects</div>
+<div class="taglinemini">Community and Management Tools</div>
+</div>
+
+<form class="signform" action="/auth/create_account" method="get">
+
+    <button class="signbtn" type="submit">Sign up here </button>
+</form>
+</div>
+</div>
+
+
+
+<div class="middlecontent">
+<div class="highlightnrecent">
+
+<div class="highlightproj">
+<div class="projicon"></div>
+</div>
+<div class="recentproj"> </div>
+
+</div>
+</div>
+
+
+<div class="downcontent">
+<div class="featurenexplain">
+
+<div class="featureosp">
+    <div class="titleosp">Manage</div>
+    <div class="explainosp">
+        Create, costumise and monitor projects:
+        <p>Admin tools</p></div>
+    <div class="featureadmin">
+    <img src="{{g.theme_href('images/feature-admin.png')}}">
+    </div>
+</div>
+
+<div class="featureosp">
+    <div class="titleosp">Develop</div>
+    <div class="explainosp">
+        Support multiple tools for the same project:
+        <p>Git and SVN</p></div>
+    <div class="featuregit">
+    <img src="{{g.theme_href('images/feature-git.png')}}">
+    </div>
+</div>
+
+<div class="featureosp">
+    <div class="titleosp">Communicate</div>
+    <div class="explainosp">Engagement between users and projects:<p>Wiki, Forum and Blog</p> </div>
+    <div class="featureforum">
+    <img src="{{g.theme_href('images/feature-forum.png')}}">
+    </div>
+</div>
+
+<div class="featureosp" id="lastfeature">
+    <div class="titleosp">Track</div>
+    <div class="explainosp">What needs to be completed, bugs, requests or tasks:<p>Tickets</p> </div>
+    <div class="featuretickets">
+    <img src="{{g.theme_href('images/feature-tickets.png')}}">
+    </div>
+</div>
+
+</div>
+</div>
+
+
+
+
+
+
+
+
+
+            {% endblock %}
+            {% block after_content %}{% endblock %}
+      </div>
+    </section>
+    {{theme_macros.footer(g.year(), g.theme_href(''))}}
+    <div id="messages">
+        {% for n in h.pop_user_notifications() %}
+          <section class="message {{ n.subject or 'info' }}">
+            <header>Notification:</header>
+            <div class="content">{{ n.text }}</div>
+          </section>
+        {% endfor %}
+    </div>
+    {% for blob in g.resource_manager.emit('body_js') %}
+      {{ blob }}
+    {% endfor %}
+    {% for blob in g.resource_manager.emit('body_js_tail') %}
+      {{ blob }}
+    {% endfor %}
+    {% block extra_js %}{% endblock %}
+    {% if neighborhood %}
+      {{ neighborhood.site_specific_html | safe }}
+    {% elif c.project.neighborhood %}
+      {{ c.project.neighborhood.site_specific_html | safe }}
+    {% endif %}
+    {{theme_macros.custom_js()}}
+    {% if flash %}
+    <script type="text/javascript">{{flash | safe}}</script>
+    {% endif %}
+  </body>
+</html>
+