summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/css/src/login.scss228
-rw-r--r--src/css/src/verbose.scss9
-rw-r--r--src/login/src/ElmModule/View.elm5
-rw-r--r--src/login/src/View/Header.elm.m476
-rw-r--r--src/login/src/View/MainMenu.elm82
-rw-r--r--src/login/www/index.html1
-rw-r--r--www/index.html.m43
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>