diff options
-rw-r--r-- | website/assets/css/style.css | 31 | ||||
-rw-r--r-- | website/index.html | 91 |
2 files changed, 70 insertions, 52 deletions
diff --git a/website/assets/css/style.css b/website/assets/css/style.css index 8a277f7..4c691fb 100644 --- a/website/assets/css/style.css +++ b/website/assets/css/style.css | |||
@@ -30,3 +30,34 @@ | |||
30 | .overbox:target { | 30 | .overbox:target { |
31 | display: block; | 31 | display: block; |
32 | } | 32 | } |
33 | |||
34 | #map-frame { | ||
35 | width: 100%; | ||
36 | height: 100%; | ||
37 | border: none; | ||
38 | } | ||
39 | |||
40 | kbd { | ||
41 | padding: 0.1em 0.6em; | ||
42 | border: 1px solid #ccc; | ||
43 | font-size: 11px; | ||
44 | font-family: Arial, Helvetica, sans-serif; | ||
45 | background-color: #f7f7f7; | ||
46 | color: #333; | ||
47 | /*-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; | ||
48 | -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; | ||
49 | box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;*/ | ||
50 | -moz-border-radius: 3px; | ||
51 | -webkit-border-radius: 3px; | ||
52 | border-radius: 3px; | ||
53 | display: inline-block; | ||
54 | margin: 0 0.1em; | ||
55 | text-shadow: 0 1px 0 #fff; | ||
56 | line-height: 1.4; | ||
57 | white-space: nowrap; | ||
58 | vertical-align: text-top; | ||
59 | } | ||
60 | |||
61 | ul .fa { | ||
62 | margin-right: 0.25em; | ||
63 | } | ||
diff --git a/website/index.html b/website/index.html index 23f72be..da92ce7 100644 --- a/website/index.html +++ b/website/index.html | |||
@@ -9,18 +9,14 @@ | |||
9 | 9 | ||
10 | <link rel="stylesheet" href="/assets/css/pure-min.css"> | 10 | <link rel="stylesheet" href="/assets/css/pure-min.css"> |
11 | <link rel="stylesheet" href="/assets/css/font-awesome.min.css"> | 11 | <link rel="stylesheet" href="/assets/css/font-awesome.min.css"> |
12 | |||
13 | <link rel="stylesheet" href="/assets/css/main-grid.css"> | 12 | <link rel="stylesheet" href="/assets/css/main-grid.css"> |
14 | <link rel="stylesheet" href="/assets/css/marketing.css"> | 13 | <link rel="stylesheet" href="/assets/css/marketing.css"> |
15 | |||
16 | <link rel="stylesheet" href="/assets/css/style.css"> | 14 | <link rel="stylesheet" href="/assets/css/style.css"> |
17 | </head> | 15 | </head> |
18 | <body> | 16 | <body> |
19 | |||
20 | <div class="header"> | 17 | <div class="header"> |
21 | <divbox class="home-menu pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed"> | 18 | <div class="home-menu pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed"> |
22 | <a class="pure-menu-heading" href="#">ESIEEquest</a> | 19 | <a class="pure-menu-heading" href="#">ESIEEquest</a> |
23 | |||
24 | <ul> | 20 | <ul> |
25 | <li> | 21 | <li> |
26 | <a href="#">Play</a> | 22 | <a href="#">Play</a> |
@@ -32,7 +28,7 @@ | |||
32 | <a href="#about">About</a> | 28 | <a href="#about">About</a> |
33 | </li> | 29 | </li> |
34 | </ul> | 30 | </ul> |
35 | </div> | 31 | </div> |
36 | </div> | 32 | </div> |
37 | 33 | ||
38 | <div class="splash-container"> | 34 | <div class="splash-container"> |
@@ -50,7 +46,6 @@ | |||
50 | <div class="content-wrapper"> | 46 | <div class="content-wrapper"> |
51 | <div class="content"> | 47 | <div class="content"> |
52 | <h2 class="content-head is-center">ESIEE + quest = ESIEEquest</h2> | 48 | <h2 class="content-head is-center">ESIEE + quest = ESIEEquest</h2> |
53 | |||
54 | <div class="pure-g"> | 49 | <div class="pure-g"> |
55 | <div class="l-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4"> | 50 | <div class="l-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4"> |
56 | 51 | ||
@@ -82,77 +77,70 @@ | |||
82 | 77 | ||
83 | <div class="ribbon l-box-lrg pure-g"> | 78 | <div class="ribbon l-box-lrg pure-g"> |
84 | <a id="help" class="anchor"></a> | 79 | <a id="help" class="anchor"></a> |
85 | <div class="is-center pure-u-1 pure-u-med-1-2 pure-u-lrg-2-5"> | 80 | <div class="is-center pure-u-1 pure-u-med-1-2 pure-u-lrg-2-5 l-box" style="margin: auto;"> |
86 | <h2 class="content-head content-head-ribbon">I'm lost!</h2> | 81 | <h2 class="content-head content-head-ribbon">I'm lost!</h2> |
87 | <pre> | 82 | <p style="font-family: monospace;"> |
88 | Don't <span style="color: #dd514c;">panic()</span>; | 83 | Don't <span style="color: #dd514c;">panic()</span>; |
89 | <span style="color: rgb(128, 88, 165);">Throw</span> an <span style="color: #0e90d2;">Exception</span> and <span style="color: #5eb95e">try</span> with the | 84 | <br> |
90 | </pre> | 85 | <span style="color: rgb(128, 88, 165);">Throw</span> an <span style="color: #0e90d2;">Exception</span> and <span style="color: #5eb95e">try</span> the |
86 | </p> | ||
91 | <p> | 87 | <p> |
92 | <a href="#map" class="pure-button">Game map</a> | 88 | <a href="#map" class="pure-button">Game map</a> |
93 | </p> | 89 | </p> |
90 | <br> | ||
94 | </div> | 91 | </div> |
95 | <div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-3-5"> | 92 | <div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-3-5 l-box"> |
96 | <h2 class="content-head content-head-ribbon">Need some help pushing buttons?</h2> | 93 | <h2 class="content-head content-head-ribbon">Need some help pushing buttons?</h2> |
94 | <h4 class="content-head content-head-ribbon">Moving around</h4> | ||
97 | <p> | 95 | <p> |
98 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | 96 | Use <kbd>⇦</kbd> and <kbd>⇨</kbd> arrows to change your direction, <kbd>⇧</kbd> to move forward, and <kbd>⇩</kbd> to pick up an object or to speak to a character. |
99 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | ||
100 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
101 | consequat. Duis aute irure dolor. | ||
102 | </p> | 97 | </p> |
103 | 98 | <h4 class="content-head content-head-ribbon">Using items</h4> | |
99 | <p> | ||
100 | Use <kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, ... to drop or use items from your inventory. | ||
101 | </p> | ||
102 | <br> | ||
104 | </div> | 103 | </div> |
105 | |||
106 | </div> | 104 | </div> |
107 | 105 | ||
108 | <div class="content"> | 106 | <div class="content"> |
109 | <h2 class="content-head is-center">About that game</h2> | ||
110 | <a id="about" class="anchor"></a> | 107 | <a id="about" class="anchor"></a> |
108 | <h2 class="content-head is-center">About that game</h2> | ||
111 | <div class="pure-g"> | 109 | <div class="pure-g"> |
112 | <div class="l-box-lrg pure-u-1 pure-u-med-2-5"> | ||
113 | <form class="pure-form pure-form-stacked"> | ||
114 | <fieldset> | ||
115 | |||
116 | <label for="email">Your Name</label> | ||
117 | <input id="email" type="text" placeholder="Your Name"> | ||
118 | |||
119 | <label for="email">Your Email</label> | ||
120 | <input id="email" type="email" placeholder="Your Email"> | ||
121 | |||
122 | <label for="password">Your Password</label> | ||
123 | <input id="password" type="password" placeholder="Your Password"> | ||
124 | |||
125 | <button type="submit" class="pure-button"> | ||
126 | Sign Up | ||
127 | </button> | ||
128 | </fieldset> | ||
129 | </form> | ||
130 | </div> | ||
131 | |||
132 | <div class="l-box-lrg pure-u-1 pure-u-med-3-5"> | 110 | <div class="l-box-lrg pure-u-1 pure-u-med-3-5"> |
133 | <h4>Contact Us</h4> | 111 | <h4>The project</h4> |
134 | <p> | 112 | <p> |
135 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | 113 | The development of this game was conducted in part of the project-based learning unit IGI-1002, at ESIEE Paris, in which students are asked to write a simple adventure game in Java. |
136 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | ||
137 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
138 | consequat. | ||
139 | </p> | 114 | </p> |
140 | 115 | <br> | |
141 | <h4>More Information</h4> | 116 | <h4>The team</h4> |
142 | <p> | 117 | <p> |
143 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | 118 | This game was fully developped by Pacien TRAN-GIRARD and Benoît LUBRANO DI SBARAGLIONE, two first year ESIEE students ('18). |
144 | tempor incididunt ut labore et dolore magna aliqua. | ||
145 | </p> | 119 | </p> |
146 | </div> | 120 | </div> |
121 | <div class="l-box-lrg pure-u-1 pure-u-med-2-5"> | ||
122 | <div class="pure-menu pure-menu-open"> | ||
123 | <a class="pure-menu-heading">Additional resources</a> | ||
124 | <ul> | ||
125 | <li> | ||
126 | <a href="/report/a3p-3f-esieequest.pdf"><i class="fa fa-book"></i> Project report</a> | ||
127 | </li> | ||
128 | <li> | ||
129 | <a href="https://gitlab.pacien.net/pacien/a3p-esieequest"><i class="fa fa-coffee"></i> Source code</a> | ||
130 | </li> | ||
131 | <li> | ||
132 | <a href="/javadoc/"><i class="fa fa-files-o"></i> Javadoc</a> | ||
133 | </li> | ||
134 | </ul> | ||
135 | </div> | ||
136 | </div> | ||
147 | </div> | 137 | </div> |
148 | |||
149 | </div> | 138 | </div> |
150 | 139 | ||
151 | <div class="footer l-box is-center"> | 140 | <div class="footer l-box is-center"> |
152 | [0x3F] 2014 • ESIEEquest • IGI-1002 A3P | 141 | [0x3F] 2014 • ESIEEquest • IGI-1002 A3P |
153 | <br> | 142 | <br> |
154 | Pacien TRAN-GIRARD and Benoît LUBRANO DI SBARAGLIONE </div> | 143 | Pacien TRAN-GIRARD and Benoît LUBRANO DI SBARAGLIONE </div> |
155 | |||
156 | </div> | 144 | </div> |
157 | 145 | ||
158 | <div id="play" class="overbox fullscreen"> | 146 | <div id="play" class="overbox fullscreen"> |
@@ -166,6 +154,5 @@ Don't <span style="color: #dd514c;">panic()</span>; | |||
166 | <div id="map" class="overbox fullscreen"> | 154 | <div id="map" class="overbox fullscreen"> |
167 | <iframe id="map-frame" src="map.svg"></iframe> | 155 | <iframe id="map-frame" src="map.svg"></iframe> |
168 | </div> | 156 |