Working on the appearance of the login page...

7 files changed, 398 insertions, 6 deletions

diff --git a/src/css/src/login.scss b/src/css/src/login.scss
new file mode 100644
index 0000000..9005d12
--- /dev/null
+++ b/src/css/src/login.scss
@@ -0,0 +1,228 @@
+@import 'shared/colors';
+@import 'shared/shadows';
+
+*
+{
+   color: $GOLD-0;
+   @include text-shadow(1px, $BROWN-0, 0.5);
+}
+
+body,
+.fullscreen-module
+{
+   display: flex;
+   flex-direction: column;
+   background-color: $BROWN-2;
+
+   align-items: center;
+}
+
+.fullscreen-module > header
+{
+   display: flex;
+   flex-direction: row;
+}
+
+.fullscreen-module > header nav
+{
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   flex: 1;
+   align-items: center;
+   justify-content: space-around;
+}
+
+.fullscreen-module > header nav a
+{
+   color: $GOLD-0;
+   transition: background-color 0.3s ease-out;
+   font-size: 1.5em;
+   font-variant: small-caps;
+   font-weight: bold;
+   text-decoration: none;
+   margin: 0.5em;
+}
+
+.main-server-logo
+{
+   z-index: 1;
+   margin: 0.5em;
+}
+
+.main-server-version
+{
+   z-index: 0;
+   position: absolute;
+   font-size: 0.7em;
+   top: 0;
+   right: 0;
+}
+
+main
+{
+   position: relative;
+   display: inline-block;
+   max-width: 80em;
+   min-width: 40em;
+   margin: 1em;
+}
+
+main > nav a
+{
+   position: relative;
+   margin-bottom: -1px;
+
+   color: $BROWN-1;
+   text-shadow: none;
+   box-shadow: none;
+
+   transition: background-color 0.3s ease-out;
+   font-size: 1.5em;
+   font-variant: small-caps;
+   font-weight: bold;
+   text-decoration: none;
+
+   display: inline-block;
+
+   background-color: $BROWN-4;
+
+   border: 1px solid $BROWN-0;
+
+   border-radius: 8px 8px 0 0;
+   border-bottom: 1px solid $BROWN-4;
+
+   padding: 0.5em 1em 0.5em 1em;
+   margin-left: 0.5em;
+
+   z-index: 0;
+}
+
+main > nav a.active
+{
+   z-index: 2;
+}
+
+main > nav a.inactive
+{
+   background: $BROWN-3;
+}
+
+main > nav a:first-of-type
+{
+   margin-left: 1em;
+}
+
+main > nav a:last-of-type
+{
+   margin-right: 1em;
+}
+
+main > nav a.inactive:hover
+{
+   background-color: $BROWN-4;
+   cursor: pointer;
+}
+
+article
+{
+   position: relative;
+   z-index: 1;
+   background: $BROWN-4;
+
+   border: 1px solid $BROWN-0;
+
+   line-height: 1.3em;
+   font-size: 1.2em;
+   color: $BROWN-0;
+   text-shadow: none;
+
+   display: flex;
+   flex-direction: column;
+}
+
+article header
+{
+   display: inline-block;
+   margin: -0.1em 0.5em 1em 0.5em;
+   border: 2px solid $GLAUQUE-1;
+   border-top-width: 1px;
+   border-radius: 0 0 8px 8px;
+   text-align: center;
+   padding: 0.5em 1em 0.5em 1em;
+   background: $GLAUQUE-2;
+   color: $GLAUQUE-6;
+   font-size: 1.5em;
+   font-variant: small-caps;
+   font-weight: bold;
+}
+
+article h1
+{
+   display: inline-block;
+   background: $BLUE-2;
+   font-size: 1.2em;
+   font-variant: small-caps;
+   font-weight: normal;
+   border: 2px solid $BLUE-1;
+   border-left-width: 1px;
+   border-radius: 0 15px 15px 0;
+   color: $BLUE-6;
+   padding: 0.5em;
+   padding-left: 1.5em;
+   max-width: 50%;
+}
+
+article input
+{
+   background: $BLUE-5;
+   font-size: 1.2em;
+   font-variant: small-caps;
+   font-weight: normal;
+   border: 2px solid $BLUE-3;
+   border-right-width: 1px;
+   border-radius: 15px 0 0 15px;
+   padding: 0.5em;
+
+   color: $BROWN-0;
+   text-shadow: none;
+}
+
+article .user-input input
+{
+   flex: 1;
+   margin-left: 2em;
+}
+
+article .user-input
+{
+   width: calc(100% + 0.4em);
+   display: flex;
+   flex-direction: row;
+   margin: 1em -0.2em 1em -0.2em;
+}
+
+button
+{
+   text-transform: uppercase;
+   background-color: $BROWN-3;
+   border-color: $BROWN-1;
+
+   padding: 0.5em;
+   margin: 0.5em;
+}
+
+button + button
+{
+   margin-left: 0.5em;
+}
+
+button:hover
+{
+   background-color: $BROWN-4;
+}
+
+button:disabled
+{
+   background-color: $BROWN-0;
+}
diff --git a/src/css/src/verbose.scss b/src/css/src/verbose.scss
index 7a505a6..d75334a 100644
--- a/src/css/src/verbose.scss
+++ b/src/css/src/verbose.scss
@@ -14,13 +14,15 @@ body
    background-color: $BROWN-2;
 }
 
-body > header
+body > header,
+.fullscreen-module > header
 {
    display: flex;
    flex-direction: row;
 }
 
-body > header nav
+body > header nav,
+.fullscreen-module > header nav
 {
    display: flex;
    flex-direction: row;
@@ -30,7 +32,8 @@ body > header nav
    justify-content: space-around;
 }
 
-body > header nav a
+body > header nav a,
+.fullscreen-module > header nav a
 {
    color: $GOLD-0;
    transition: background-color 0.3s ease-out;
diff --git a/src/login/src/ElmModule/View.elm b/src/login/src/ElmModule/View.elm
index 558decd..55e720f 100644
--- a/src/login/src/ElmModule/View.elm
+++ b/src/login/src/ElmModule/View.elm
@@ -9,6 +9,9 @@ import Html.Attributes
 import Struct.Event
 import Struct.Model
 
+import View.Header
+import View.MainMenu
+
 --------------------------------------------------------------------------------
 -- LOCAL -----------------------------------------------------------------------
 --------------------------------------------------------------------------------
@@ -23,5 +26,7 @@ view model =
          (Html.Attributes.class "fullscreen-module")
       ]
       [
+         (View.Header.get_html),
+         (View.MainMenu.get_html)
       ]
    )
diff --git a/src/login/src/View/Header.elm.m4 b/src/login/src/View/Header.elm.m4
new file mode 100644
index 0000000..81ac132
--- /dev/null
+++ b/src/login/src/View/Header.elm.m4
@@ -0,0 +1,76 @@
+module View.Header exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.UI
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+link_html : String -> String -> Bool -> (Html.Html Struct.Event.Type)
+link_html src label is_active =
+   (Html.a
+      [
+         (Html.Attributes.src src)
+      ]
+      [
+         (
+            if (is_active)
+            then (Html.text label)
+            else (Html.s [] [(Html.text label)])
+         )
+      ]
+   )
+
+navigation_html : (Html.Html Struct.Event.Type)
+navigation_html =
+   (Html.nav
+      []
+      [
+         (link_html "/login/" "Play" False),
+         (link_html "/news/" "News" False),
+         (link_html "/community/" "Community" False),
+         (link_html "/about/" "About" False),
+         (link_html "/battle/?id=0" "[D] Battle" True),
+         (link_html "/map-editor/?id=0" "[D] Map Editor" True)
+      ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (Html.Html Struct.Event.Type)
+get_html =
+   (Html.header
+      []
+      [
+         (Html.div
+            [
+               (Html.Attributes.class "main-server-logo")
+            ]
+            [
+               (Html.img
+                  [
+                     (Html.Attributes.src "__CONF_SERVER_LOGO")
+                  ]
+                  [
+                  ]
+               )
+            ]
+         ),
+         (Html.div
+            [
+               (Html.Attributes.class "main-server-version")
+            ]
+            [
+               (Html.text "__CONF_VERSION")
+            ]
+         ),
+         (navigation_html)
+      ]
+   )
diff --git a/src/login/src/View/MainMenu.elm b/src/login/src/View/MainMenu.elm
new file mode 100644
index 0000000..018b9ba
--- /dev/null
+++ b/src/login/src/View/MainMenu.elm
@@ -0,0 +1,82 @@
+module View.MainMenu exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.UI
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+link_html : String -> Bool -> (Html.Html Struct.Event.Type)
+link_html label is_active =
+   (Html.a
+      [
+         (Html.Attributes.class
+            (
+               if (is_active)
+               then "active"
+               else "inactive"
+            )
+         )
+      ]
+      [
+         (Html.text label)
+      ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (Html.Html Struct.Event.Type)
+get_html =
+   (Html.main_
+      [
+      ]
+      [
+         (Html.nav
+            []
+            [
+               (link_html "Login" True),
+               (link_html "Create Account" False),
+               (link_html "Recover Account" False)
+            ]
+         ),
+         (Html.article
+            []
+            [
+               (Html.div
+                  [
+                     (Html.Attributes.class "user-input")
+                  ]
+                  [
+                     (Html.h1 [] [(Html.text "Username")]),
+                     (Html.input [] [])
+                  ]
+               ),
+               (Html.div
+                  [
+                     (Html.Attributes.class "user-input")
+                  ]
+                  [
+                     (Html.h1 [] [(Html.text "Password")]),
+                     (Html.input
+                        [
+                           (Html.Attributes.type_ "password")
+                        ]
+                        []
+                     )
+                  ]
+               ),
+               (Html.button
+                  []
+                  [ (Html.text "Send") ]
+               )
+            ]
+         )
+      ]
+   )
diff --git a/src/login/www/index.html b/src/login/www/index.html
index d2e13fd..459c550 100644
--- a/src/login/www/index.html
+++ b/src/login/www/index.html
@@ -2,7 +2,6 @@
 <html>
    <head>
       <link rel="stylesheet" type="text/css" href="/css/global.css">
-      <link rel="stylesheet" type="text/css" href="/css/verbose.css">
       <link rel="stylesheet" type="text/css" href="/css/login.css">
       <link rel="icon" type="image/x-icon" href="/favicon.ico">
    </head>
diff --git a/www/index.html.m4 b/www/index.html.m4
index 610466f..b66afb0 100644
--- a/www/index.html.m4
+++ b/www/index.html.m4
@@ -15,8 +15,7 @@
          <div class="main-server-logo"><img src="__CONF_SERVER_LOGO"/></div>
          <div class="main-server-version">__CONF_VERSION</div>
          <nav>
-            <a href="/login/?act=signin"><s>Login</s></a>
-            <a href="/login/?act=signup"><s>Create Account</s></a>
+            <a href="/login/"><s>Play</s></a>
             <a href="/news/"><s>News</s></a>
             <a href="/community/"><s>Community</s></a>
             <a href="/about/"><s>About</s></a>