First website mockup

17 files changed, 237 insertions, 23 deletions

diff --git a/app/controllers/Application.scala b/app/controllers/Application.scala
index 7cd798f..43b579e 100644
--- a/app/controllers/Application.scala
+++ b/app/controllers/Application.scala
@@ -6,7 +6,15 @@ import play.api.mvc._
 object Application extends Controller {
 
   def index = Action {
-    Ok(views.html.index("Your new application is ready."))
+    Ok(views.html.pages.index("Your new application is ready."))
+  }
+
+  def ebe = Action {
+    Ok(views.html.pages.ebeHomepage())
+  }
+
+  def pepal = Action {
+    Ok(views.html.pages.pepalHomepage())
   }
 
 }
\ No newline at end of file
diff --git a/app/controllers/Console.scala b/app/controllers/Console.scala
new file mode 100644
index 0000000..93bc5d5
--- /dev/null
+++ b/app/controllers/Console.scala
@@ -0,0 +1,12 @@
+package controllers
+
+import play.api._
+import play.api.mvc._
+
+object Console extends Controller {
+
+  def console = Action {
+    Redirect("/")
+  }
+
+}
diff --git a/app/views/fragments/accountInfos.scala.html b/app/views/fragments/accountInfos.scala.html
new file mode 100644
index 0000000..711fb40
--- /dev/null
+++ b/app/views/fragments/accountInfos.scala.html
@@ -0,0 +1,14 @@
+<a class="pure-button" href="#">
+        <i class="fa fa-sign-out fa-lg"></i>
+        Logout
+</a>
+
+<a class="pure-button" href="#">
+        <i class="fa fa-money fa-lg"></i>
+        -400 000 €
+</a>
+
+<a class="pure-button" href="#">
+        <i class="fa fa-user fa-lg"></i>
+        Mr. Kornada
+</a>
diff --git a/app/views/fragments/ebeLogo.scala.html b/app/views/fragments/ebeLogo.scala.html
new file mode 100644
index 0000000..f2b552a
--- /dev/null
+++ b/app/views/fragments/ebeLogo.scala.html
@@ -0,0 +1 @@
+<span class="ebe-logo"><span class="red">e</span><span class="blue">b</span><span class="yellow">é</span></span>
\ No newline at end of file
diff --git a/app/views/fragments/ebeMainActions.scala.html b/app/views/fragments/ebeMainActions.scala.html
new file mode 100644
index 0000000..46faeb6
--- /dev/null
+++ b/app/views/fragments/ebeMainActions.scala.html
@@ -0,0 +1,13 @@
+<div class="pure-u-1 pure-u-lg-1-2">
+        <a class="pure-button blue-bg" href="#">
+                <i class="fa fa-gavel fa-5x"></i>
+                <span>Sell</span>
+        </a>
+</div>
+
+<div class="pure-u-1 pure-u-lg-1-2">
+        <a class="pure-button green-bg" href="#">
+                <i class="fa fa-dropbox fa-5x"></i>
+                <span>Buy</span>
+        </a>
+</div>
diff --git a/app/views/fragments/ebeSlogan.scala.html b/app/views/fragments/ebeSlogan.scala.html
new file mode 100644
index 0000000..c0b5332
--- /dev/null
+++ b/app/views/fragments/ebeSlogan.scala.html
@@ -0,0 +1 @@
+Le marketplace
\ No newline at end of file
diff --git a/app/views/fragments/pepalLogo.scala.html b/app/views/fragments/pepalLogo.scala.html
new file mode 100644
index 0000000..a4b75ae
--- /dev/null
+++ b/app/views/fragments/pepalLogo.scala.html
@@ -0,0 +1 @@
+<span class="pepal-logo"><span class="dark-blue">Pé</span><span class="light-blue">Pal</span></span>
\ No newline at end of file
diff --git a/app/views/fragments/pepalMainActions.scala.html b/app/views/fragments/pepalMainActions.scala.html
new file mode 100644
index 0000000..0e614a6
--- /dev/null
+++ b/app/views/fragments/pepalMainActions.scala.html
@@ -0,0 +1,13 @@
+<div class="pure-u-1 pure-u-lg-1-2">
+        <a class="pure-button dark-blue-bg" href="#">
+                <i class="fa fa-download fa-5x"></i>
+                <span>Deposit</span>
+        </a>
+</div>
+
+<div class="pure-u-1 pure-u-lg-1-2">
+        <a class="pure-button light-blue-bg" href="#">
+                <i class="fa fa-share fa-5x"></i>
+                <span>Send money</span>
+        </a>
+</div>
diff --git a/app/views/fragments/pepalSlogan.scala.html b/app/views/fragments/pepalSlogan.scala.html
new file mode 100644
index 0000000..a6d6e69
--- /dev/null
+++ b/app/views/fragments/pepalSlogan.scala.html
@@ -0,0 +1 @@
+Le money
\ No newline at end of file
diff --git a/app/views/index.scala.html b/app/views/index.scala.html
deleted file mode 100644
index d6a6b22..0000000
--- a/app/views/index.scala.html
+++ /dev/null
@@ -1,7 +0,0 @@
-@(message: String)
-
-@main("Welcome to Play") {
-
-    @play20.welcome(message)
-
-}
diff --git a/app/views/main.scala.html b/app/views/main.scala.html
deleted file mode 100644
index 5025aa5..0000000
--- a/app/views/main.scala.html
+++ /dev/null
@@ -1,15 +0,0 @@
-@(title: String)(content: Html)
-
-<!DOCTYPE html>
-
-<html>
-    <head>
-        <title>@title</title>
-        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
-        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
-        <script src="@routes.Assets.at("javascripts/hello.js")" type="text/javascript"></script>
-    </head>
-    <body>
-        @content
-    </body>
-</html>
diff --git a/app/views/pages/ebeHomepage.scala.html b/app/views/pages/ebeHomepage.scala.html
new file mode 100644
index 0000000..bf11462
--- /dev/null
+++ b/app/views/pages/ebeHomepage.scala.html
@@ -0,0 +1,47 @@
+@templates.ebe("eBé") {
+
+        <div class="action-buttons pure-g">
+        @fragments.ebeMainActions()
+        </div>
+
+        <br>
+
+        <div class="pure-g">
+                <div class="pure-u-1 pure-u-lg-1-2">
+                        <div class="l-box">
+                                <h3 class="information-head">Get started today</h3>
+                                <p>
+                                        With @fragments.ebeLogo(), the leading online auction platform, buy or sell items in a few clicks!
+                                </p>
+                        </div>
+                </div>
+
+                <div class="pure-u-1 pure-u-lg-1-2">
+                        <div class="l-box">
+                                <h3 class="information-head">Buy and sell with confidence</h3>
+                                <p>
+                                        @fragments.ebeLogo() guarantees all transactions for both buyers and sellers.
+                                </p>
+                        </div>
+                </div>
+
+                <div class="pure-u-1 pure-u-lg-1-2">
+                        <div class="l-box">
+                                <h3 class="information-head">24/7 customer support</h3>
+                                <p>
+                                        Any question? Just ask us! Our support team is committed to help you.
+                                </p>
+                        </div>
+                </div>
+
+                <div class="pure-u-1 pure-u-lg-1-2">
+                        <div class="l-box">
+                                <h3 class="information-head">Secure transactions</h3>
+                                <p>
+                                        With @fragments.ebeLogo(), you are not required to give any personal information to any buyer or seller.
+                                </p>
+                        </div>
+                </div>
+        </div>
+
+}
diff --git a/app/views/pages/index.scala.html b/app/views/pages/index.scala.html
new file mode 100644
index 0000000..b6e0029
--- /dev/null
+++ b/app/views/pages/index.scala.html
@@ -0,0 +1,3 @@
+@(message: String)
+
+@message
diff --git a/app/views/pages/pepalHomepage.scala.html b/app/views/pages/pepalHomepage.scala.html
new file mode 100644
index 0000000..6eb7070
--- /dev/null
+++ b/app/views/pages/pepalHomepage.scala.html
@@ -0,0 +1,47 @@
+@templates.pepal("PéPal") {
+
+        <div class="action-buttons pure-g">
+        @fragments.pepalMainActions()
+        </div>
+
+        <br>
+
+        <div class="pure-g">
+                <div class="pure-u-1 pure-u-lg-1-2">
+                        <div class="l-box">
+                                <h3 class="information-head">Get started today</h3>
+                                <p>
+                                        With @fragments.pepalLogo(), the leading online payment solution, buy or sell items on the web in a few clicks!
+                                </p>
+                        </div>
+                </div>
+
+                <div class="pure-u-1 pure-u-lg-1-2">
+                        <div class="l-box">
+                                <h3 class="information-head">Send money to friends</h3>
+                                <p>
+                                        Sending money to your friends or your family has never been easier.
+                                </p>
+                        </div>
+                </div>
+
+                <div class="pure-u-1 pure-u-lg-1-2">
+                        <div class="l-box">
+                                <h3 class="information-head">24/7 customer support</h3>