improve graph design on homepage && add footer and techs && add official pages

src/.htaccess

@@ -0,0 +1,7 @@
+<IfModule mod_authz_core.c>
+    Require all denied
+</IfModule>
+<IfModule !mod_authz_core.c>
+    Order deny,allow
+    Deny from all
+</IfModule>

src/Jotunheimr/UserBundle/Resources/public/css/layout.css

@@ -152,6 +152,10 @@ header section h3.or {
     margin: 20px 0;
 }
 
+header section #id_welcome {
+    margin-bottom: 115px;
+}
+
 header section .buttons,
 header section form {
     z-index: 2;
@@ -225,6 +229,83 @@ header section .failure-main {
     border-radius: 5px;
 }
 
+main div.txt {
+    width: 100%;
+    max-width: 1000px;
+    font-family: 'Rajdhani', sans-serif;
+    color: #414040;
+    margin: 50px auto 0 auto;
+}
+
+main div.txt h2 {
+    margin: 0 0 50px 0;
+}
+
+main div.txt p {
+    font: normal 16px 'Rajdhani', sans-serif;
+}
+
+main div.txt li {
+    font: normal 16px 'Rajdhani', sans-serif;
+    padding-left: 10px;
+    margin-left: 50px;
+}
+
+main .technologies {
+    text-align: center;
+}
+
+main .technologies img {
+    display: inline-block;
+    width: 90%;
+    max-width: 100px;
+    margin: 20px;
+}
+
+main .technologies h1 {
+    font-weight: bold;
+}
+
+footer {
+    background: #414040;
+    width: 100%;
+    min-height: 50px;
+    margin-top: 50px;
+}
+
+footer nav {
+    display: block;
+    text-align: center;
+}
+
+footer nav ul {
+    display: inline-block;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+footer nav ul li {
+    display: inline-block;
+    font: bold 16px 'Rajdhani', sans-serif;
+    color: #FFFFFF;
+}
+
+footer nav ul li:nth-child(even) {
+    width: 50px;
+    text-align: center;
+}
+
+footer nav ul li a {
+    text-align: center;
+    line-height: 50px;
+    color: #FFFFFF;
+}
+
+footer nav ul li a:hover {
+    color: #FFFFFF;
+}
+
 @media screen and (max-width: 1100px) {
     header section .form-input,
     header section .form-check {
@@ -248,7 +329,7 @@ header section .failure-main {
 
 @media screen and (max-width: 550px) {
     header section {
-        padding: 10px;
+        padding: 20px;
     }
 
     header section .form-input {
@@ -274,4 +355,12 @@ header section .failure-main {
     header section div.buttons > a.slack-login span {
         display: none;
     }
+
+    footer nav ul li {
+        display: block;
+    }
+
+    footer nav ul li:nth-child(even) {
+        display: none;
+    }
 }

src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig

@@ -79,6 +79,33 @@
     </section>
 {% endblock fos_user_content %}
 
+{% block body %}
+    <div class="txt">
+        <div class="technologies">
+            <h1>Used technologies</h1>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/websocket.png') }}" alt="Used Websocket" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/react.png') }}" alt="Used React.js" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/symfony.png') }}" alt="Used Symfony" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/jquery.png') }}" alt="Used jQuery" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/lets-encrypt.png') }}" alt="Used Let's Encrypt" border="0"/>
+        </div>
+    </div>
+{% endblock %}
+
+{% block footer %}
+    <nav>
+        <ul>
+            <li><a href="{{ path('MineSeekerBundle_homepage') }}">Homepage</a></li>
+            <li>&middot;</li>
+            <li><a href="{{ path('MineSeekerBundle_terms') }}">Terms of Use</a></li>
+            <li>&middot;</li>
+            <li><a href="{{ path('MineSeekerBundle_privacy') }}">Privacy Policy</a></li>
+            <li>&middot;</li>
+            <li><a href="{{ path('MineSeekerBundle_contact') }}">Contact</a></li>
+        </ul>
+    </nav>
+{% endblock %}
+
 {% block javascripts %}
     {{ parent() }}
 

src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig

@@ -61,6 +61,33 @@
     </section>
 {% endblock fos_user_content %}
 
+{% block body %}
+    <div class="txt">
+        <div class="technologies">
+            <h1>Used technologies</h1>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/websocket.png') }}" alt="Used Websocket" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/react.png') }}" alt="Used React.js" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/symfony.png') }}" alt="Used Symfony" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/jquery.png') }}" alt="Used jQuery" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/lets-encrypt.png') }}" alt="Used Let's Encrypt" border="0"/>
+        </div>
+    </div>
+{% endblock %}
+
+{% block footer %}
+    <nav>
+        <ul>
+            <li><a href="{{ path('MineSeekerBundle_homepage') }}">Homepage</a></li>
+            <li>&middot;</li>
+            <li><a href="{{ path('MineSeekerBundle_terms') }}">Terms of Use</a></li>
+            <li>&middot;</li>
+            <li><a href="{{ path('MineSeekerBundle_privacy') }}">Privacy Policy</a></li>
+            <li>&middot;</li>
+            <li><a href="{{ path('MineSeekerBundle_contact') }}">Contact</a></li>
+        </ul>
+    </nav>
+{% endblock %}
+
 {% block javascripts %}
     {{ parent() }}
 

src/Mine/SeekerBundle/Controller/GameController.php

@@ -48,4 +48,24 @@ class GameController extends Controller
     {
 
     }
+
+    public function privacyAction()
+    {
+        return $this->render('MineSeekerBundle:Official:privacy.html.twig');
+    }
+
+    public function termsAction()
+    {
+        return $this->render('MineSeekerBundle:Official:terms.html.twig');
+    }
+
+    public function contactAction()
+    {
+        return $this->render('MineSeekerBundle:Official:contact.html.twig');
+    }
+
+    public function landingAction()
+    {
+        return $this->render('MineSeekerBundle:Official:landing.html.twig');
+    }
 }

src/Mine/SeekerBundle/Resources/config/routing.yml

@@ -17,3 +17,23 @@ MineSeekerBundle_slack:
     path:     /slack
     defaults: { _controller: MineSeekerBundle:Game:slack }
     schemes:  [https]
+
+MineSeekerBundle_terms:
+    path:     /terms-of-service
+    defaults: { _controller: MineSeekerBundle:Game:terms }
+    schemes:  [https]
+
+MineSeekerBundle_privacy:
+    path:     /privacy-policy
+    defaults: { _controller: MineSeekerBundle:Game:privacy }
+    schemes:  [https]
+
+MineSeekerBundle_contact:
+    path:     /contact
+    defaults: { _controller: MineSeekerBundle:Game:contact }
+    schemes:  [https]
+
+MineSeekerBundle_landing:
+    path:     /landing-page
+    defaults: { _controller: MineSeekerBundle:Game:landing }
+    schemes:  [https]

src/Mine/SeekerBundle/Resources/public/css/style.homepage.css

@@ -9,19 +9,19 @@ html, body {
     display: block;
     width: 100%;
     height: 100%;
-
-    overflow-x: hidden;
 }
 
 header {
     background: #d1e8ff;
+    position: relative;
     width: 100%;
-    height: 900px;
+    height: 950px;
     color: #ffffff;
+
+    overflow: hidden;
 }
 
 header section {
-    position: relative;
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
@@ -46,8 +46,8 @@ header section > img {
     position: absolute;
     width: 1300px;
     height: 1300px;
-    right: -50%;
-    bottom: -30%;
+    right: -10%;
+    top: -10%;
 
     z-index: 1;
 }
@@ -80,12 +80,12 @@ header section h3 img {
 }
 
 header section div.buttons > a {
-    background: #83aed9;
+    background: #69788e;
     display: table;
     font: bold 32px 'Rajdhani', sans-serif;
     text-transform: uppercase;
     text-decoration: none;
-    border: 1px solid #658fb8;
+    border: 5px solid #57667b;
     color: #FFFFFF;
     padding: 25px 150px;
     margin-bottom: 20px;
@@ -101,7 +101,7 @@ header section div.buttons > a {
 }
 
 header section div.buttons > a:hover {
-    background: #86b5e1;
+    background: #57667b;
 
     -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
     box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
@@ -112,15 +112,16 @@ header section div.buttons > a:hover {
 }
 
 header section div.buttons > a.small {
-    background: transparent;
+    background: #83aed9;
     display: inline-block;
     font: bold 22px 'Rajdhani', sans-serif;
-    border: 3px solid #83aed9;
-    color: #83aed9;
+    border: 1px solid #6890ba;
+    color: #FFFFFF;
     padding: 10px;
 
-    -webkit-box-shadow: none;
-    box-shadow: none;-webkit-transition: all 250ms ease-in-out;
+    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    -webkit-transition: all 250ms ease-in-out;
     -moz-transition: all 250ms ease-in-out;
     -o-transition: all 250ms ease-in-out;
     transition: all 250ms ease-in-out;
@@ -128,10 +129,12 @@ header section div.buttons > a.small {
 }
 
 header section div.buttons > a.small:hover {
-    background: #658fb8;
-    border: 3px solid #658fb8;
+    background: #86b5e1;
+    border: 1px solid #658fb8;
     color: #FFFFFF;
 
+    -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
     -webkit-transition: all 250ms ease-in-out;
     -moz-transition: all 250ms ease-in-out;
     -o-transition: all 250ms ease-in-out;

src/Mine/SeekerBundle/Resources/views/Game/index.html.twig

@@ -3,20 +3,23 @@
 {% block header %}
     <section class="header-content">
         <div class="logo">
-            <img src="{{ asset('bundles/mineseeker/images/mine-logo-txt.png') }}" alt="MineSeeker Logo w/ Txt"
-                 border="0"/>
+            <a href="{{ path('MineSeekerBundle_homepage') }}" target="_self">
+                <img src="{{ asset('bundles/mineseeker/images/mine-logo-txt.png') }}" alt="MineSeeker Logo w/ Txt"
+                     border="0"/>
+            </a>
         </div>
         <div>
-            {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
-                <h2 id="fb-welcome">
-                    Hello, {{ app.user.realName is not null ? app.user.realName : app.user.username }}!
-                </h2>
-                <h1>Let's play!! :D</h1>
-            {% else %}
-                <h2>A minesweeper game rethought...</h2>
-                <h1>...and you can play w/o register!!</h1>
-            {% endif %}
-
+            <div id="id_welcome">
+                {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
+                    <h2>
+                        Hello, {{ app.user.realName is not null ? app.user.realName : app.user.username }}!
+                    </h2>
+                    <h1>Let's play!! :D</h1>
+                {% else %}
+                    <h2>A minesweeper game rethought...</h2>
+                    <h1>...and you can play w/o register!!</h1>
+                {% endif %}
+            </div>
             <div class="buttons">
                 <a href="{{ path('MineSeekerBundle_gamePlay') }}">Play NOW!</a>
                 {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
@@ -37,6 +40,33 @@
     </section>
 {% endblock %}
 
+{% block body %}
+    <div class="txt">
+        <div class="technologies">
+            <h1>Used technologies</h1>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/websocket.png') }}" alt="Used Websocket" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/react.png') }}" alt="Used React.js" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/symfony.png') }}" alt="Used Symfony" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/jquery.png') }}" alt="Used jQuery" border="0"/>
+            <img src="{{ asset('bundles/mineseeker/images/technologies/lets-encrypt.png') }}" alt="Used Let's Encrypt" border="0"/>
+        </div>
+    </div>
+{% endblock %}
+
+{% block footer %}
+    <nav>
+        <ul>
+            <li><a href="{{ path('MineSeekerBundle_homepage') }}">Homepage</a></li>
+            <li>&middot;</li>
+            <li><a href="{{ path('MineSeekerBundle_terms') }}">Terms of Use</a></li>
+            <li>&middot;</li>
+            <li><a href="{{ path('MineSeekerBundle_privacy') }}">Privacy Policy</a></li>
+            <li>&middot;</li>
+            <li><a href="{{ path('MineSeekerBundle_contact') }}">Contact</a></li>
+        </ul>
+    </nav>
+{% endblock %}
+
 {% block stylesheets %}
     {{ parent() }}
 
@@ -44,7 +74,9 @@
           rel="stylesheet">
 
     {% stylesheets filter='?uglifycss'
-    '@MineSeekerBundle/Resources/public/css/style.homepage.css' %}
+    '@JotunheimrAdminBundle/Resources/public/js/vendor/bootstrap/css/bootstrap.min.css'
+    '@MineSeekerBundle/Resources/public/css/style.homepage.css'
+    '@JotunheimrUserBundle/Resources/public/css/layout.css' %}
     <link rel="stylesheet" media="screen" href="{{ asset_url }}" type="text/css"/>
     {% endstylesheets %}
 {% endblock %}

src/Mine/SeekerBundle/Resources/views/Official/contact.html.twig

@@ -0,0 +1,13 @@
+{% extends '@MineSeeker/Game/index.html.twig' %}
+
+{% block title %} - Contact{% endblock %}
+
+{% block body %}
+    <div class="txt">
+        <h2>Contact and user support</h2>
+
+        <h3>Under construction</h3>
+
+        <a href="mailto:langlasz@gmail.com">langlasz@gmail.com</a>
+    </div>
+{% endblock %}

src/Mine/SeekerBundle/Resources/views/Official/landing.html.twig

@@ -0,0 +1,11 @@
+{% extends '@MineSeeker/Game/index.html.twig' %}
+
+{% block title %} - Landing page{% endblock %}
+
+{% block body %}
+    <div class="txt">
+        <h2>Landing page w/ marketing</h2>
+
+        <h3>Under construction</h3>
+    </div>
+{% endblock %}

src/Mine/SeekerBundle/Resources/views/Official/privacy.html.twig

@@ -0,0 +1,52 @@
+{% extends '@MineSeeker/Game/index.html.twig' %}
+
+{% block title %} - Privacy Policy{% endblock %}
+
+{% block body %}
+    <div class="txt">
+        <h2>MineSeeker Privacy Policy</h2>
+
+        <p>Your privacy is important to us.</p>
+
+        <p>It is MineSeeker's policy to respect your privacy regarding any information we may collect while operating
+            our
+            website. Accordingly, we have developed this privacy policy in order for you to understand how we collect,
+            use,
+            communicate, disclose and otherwise make use of personal information. We have outlined our privacy policy
+            below.</p>
+
+        <ul>
+            <li>We will collect personal information by lawful and fair means and, where appropriate, with the knowledge
+                or
+                consent of the individual concerned.
+            </li>
+            <li>Before or at the time of collecting personal information, we will identify the purposes for which
+                information is being collected.
+            </li>
+            <li>We will collect and use personal information solely for fulfilling those purposes specified by us and
+                for
+                other ancillary purposes, unless we obtain the consent of the individual concerned or as required by
+                law.
+            </li>
+            <li>Personal data should be relevant to the purposes for which it is to be used, and, to the extent
+                necessary
+                for those purposes, should be accurate, complete, and up-to-date.
+            </li>
+            <li>We will protect personal information by using reasonable security safeguards against loss or theft, as
+                well
+                as unauthorized access, disclosure, copying, use or modification.
+            </li>
+            <li>We will make readily available to customers information about our policies and practices relating to the
+                management of personal information.
+            </li>
+            <li>We will only retain personal information for as long as necessary for the fulfilment of those
+                purposes.
+            </li>
+        </ul>
+
+        <p>We are committed to conducting our business in accordance with these principles in order to ensure that the
+            confidentiality of personal information is protected and maintained. MineSeeker may change this privacy
+            policy
+            from time to time at MineSeeker's sole discretion.</p>
+    </div>
+{% endblock %}

src/Mine/SeekerBundle/Resources/views/Official/terms.html.twig

@@ -0,0 +1,100 @@
+{% extends '@MineSeeker/Game/index.html.twig' %}
+
+{% block title %} - Terms of Service{% endblock %}
+
+{% block body %}
+    <div class="txt">
+        <h2>MineSeeker Terms of Service</h2>
+
+        <h3>1. Terms</h3>
+
+        <p>By accessing the website at <a href="https://www.mineseeker.ninja">https://www.mineseeker.ninja</a>, you are
+            agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are
+            responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you
+            are
+            prohibited from using or accessing this site. The materials contained in this website are protected by
+            applicable copyright and trademark law.</p>
+
+        <h3>2. Use License</h3>
+
+        <ol type="a">
+            <li>
+                Permission is granted to temporarily download one copy of the materials (information or software) on
+                MineSeeker's website for personal, non-commercial transitory viewing only. This is the grant of a
+                license,
+                not a transfer of title, and under this license you may not:
+
+                <ol type="i">
+                    <li>modify or copy the materials;</li>
+                    <li>use the materials for any commercial purpose, or for any public display (commercial or
+                        non-commercial);
+                    </li>
+                    <li>attempt to decompile or reverse engineer any software contained on MineSeeker's website;</li>
+                    <li>remove any copyright or other proprietary notations from the materials; or</li>
+                    <li>transfer the materials to another person or "mirror" the materials on any other server.</li>
+                </ol>
+            </li>
+            <li>This license shall automatically terminate if you violate any of these restrictions and may be
+                terminated by
+                MineSeeker at any time. Upon terminating your viewing of these materials or upon the termination of this
+                license, you must destroy any downloaded materials in your possession whether in electronic or printed
+                format.
+            </li>
+        </ol>
+
+        <h3>3. Disclaimer</h3>
+
+        <ol type="a">
+            <li>The materials on MineSeeker's website are provided on an 'as is' basis. MineSeeker makes no warranties,
+                expressed or implied, and hereby disclaims and negates all other warranties including, without
+                limitation,
+                implied warranties or conditions of merchantability, fitness for a particular purpose, or
+                non-infringement
+                of intellectual property or other violation of rights.
+            </li>
+            <li>Further, MineSeeker does not warrant or make any representations concerning the accuracy, likely
+                results, or
+                reliability of the use of the materials on its website or otherwise relating to such materials or on any
+                sites linked to this site.
+            </li>
+        </ol>
+
+        <h3>4. Limitations</h3>
+
+        <p>In no event shall MineSeeker or its suppliers be liable for any damages (including, without limitation,
+            damages
+            for loss of data or profit, or due to business interruption) arising out of the use or inability to use the
+            materials on MineSeeker's website, even if MineSeeker or a MineSeeker authorized representative has been
+            notified orally or in writing of the possibility of such damage. Because some jurisdictions do not allow
+            limitations on implied warranties, or limitations of liability for consequential or incidental damages,
+            these
+            limitations may not apply to you.</p>
+
+        <h3>5. Accuracy of materials</h3>
+
+        <p>The materials appearing on MineSeeker's website could include technical, typographical, or photographic
+            errors.
+            MineSeeker does not warrant that any of the materials on its website are accurate, complete or current.
+            MineSeeker may make changes to the materials contained on its website at any time without notice. However
+            MineSeeker does not make any commitment to update the materials.</p>
+
+        <h3>6. Links</h3>
+
+        <p>MineSeeker has not reviewed all of the sites linked to its website and is not responsible for the contents of
+            any
+            such linked site. The inclusion of any link does not imply endorsement by MineSeeker of the site. Use of any
+            such linked website is at the user's own risk.</p>
+
+        <h3>7. Modifications</h3>
+
+        <p>MineSeeker may revise these terms of service for its website at any time without notice. By using this
+            website
+            you are agreeing to be bound by the then current version of these terms of service.</p>
+
+        <h3>8. Governing Law</h3>
+
+        <p>These terms and conditions are governed by and construed in accordance with the laws of Budapest, Hungary and
+            you
+            irrevocably submit to the exclusive jurisdiction of the courts in that State or location.</p>
+    </div>
+{% endblock %}