Give us some feedback, any feedback, we just want feedback!

Your name:

Your email:

Your feedback:

 

game concept

Project Description:

game concept design intro UI/UX.

Created: 8 Years ago

Last edited: 8 Years ago

Branch Project

Project name:

Project description:

 

game concept
Branch Project
HTML <body>
1
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
2
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
3
 
4
<div class="game_wrapper">
5
 
6
<div class="space-bg">
7
  <div class="stars"></div>
8
  <div class="twinkle"></div>
9
  <div class="clouds"></div>
10
</div>
11
 
12
<div class="earth-bg">
13
  <img class="bgrotate" src="http://orbit.notomono.onnix.net/images/earth.png" alt="">
14
  <img class="horbiter horbit1" style="animation-delay: -20s;" src="http://orbit.notomono.onnix.net/images/ship.png">
15
  <img class="horbiter horbit1" style="animation-delay: -60s;" src="http://orbit.notomono.onnix.net/images/ship.png">
16
  <img class="horbiter horbit2" style="animation-delay: -25s;" src="http://orbit.notomono.onnix.net/images/ship.png">
17
</div>
18
 
19
<div class="navbutton"><i class="fa fa-bars" aria-hidden="true"></i></div>
20
 
21
<div id="home" class="window_center">
22
  <div class="window">
23
    <div class="wbox">
24
      <i class="fa fa-globe" style="margin-bottom:15px;" aria-hidden="true"></i>
25
      <h1 style="margin-bottom:20px;">Welcome to Orbity.</h1>
26
      <input class="button alt play_anon" type="button" style="width:55%;" value="Play Now!">
27
      <div style="margin-bottom:10px;">- or Login -</div>
28
      <input id="login_name" style="width:35%;" type="text" placeholder="Username / Email">
29
      <input id="login_pass" style="width:35%;" type="password" placeholder="Password">
30
      <input id="main_login" class="button" style="width:72%;" type="button" value="Login">
31
      <a style="display:block; color:#FFF; margin-bottom:10px;" href="/signup.php">- or Signup -</a>
32
      <input class="button alt2" type="button" style="width:55%;" value="Begin an Adventure">
33
      <p style="font-size:0.75em; color:#999; margin-top:20px;">Enjoy your flight.</p>
34
    </div>
35
  </div>
36
</div>
37
 
38
<div id="respawn" class="window_center">
39
  <div class="window">
40
    <div class="wbox">
41
      <i class="fa fa-frown-o" style="margin-bottom:15px;" aria-hidden="true"></i>
42
      <h1 style="margin-bottom:20px;">You crashed.</h1>
43
      <input class="button alt play_anon" type="button" style="width:55%;" value="Respawn">
44
      <p>Score: 92,310</p>
45
      <p>You were taken out by: Joe</p>
46
      <p>Time alive: 6 minutes 32 seconds</p>
47
      <p style="font-size:0.75em; color:#999; margin-top:20px;">Enjoy your flight.</p>
48
    </div>
49
  </div>
50
</div>
51
 
52
<div id="nav" class="nwrapper">
53
  <div class="nav">
54
    <ul class="lnav">
55
      <li class="logo">
56
        <img src="http://orbit.notomono.onnix.net/images/ship.png" alt="">
57
        <a href="/" title="Orbity | An Online Multiplayer Space Orbiting Game">Orbity.io</a>
58
      </li>
59
      <li><a href="#" data-featherlight="/how-to-play.php">How to Play <i class="fa fa-question-circle" aria-hidden="true"></i></a></li>
60
      <li><a href="#" data-featherlight="/leaderboards.php">Leaderboards <i class="fa fa-line-chart" aria-hidden="true"></i></a></li>
61
      <li><a href="#" data-featherlight="/feedback.php">Feedback <i class="fa fa-comment-o"></i></a></li>
62
      <li><a class="perk_link" href="#" data-featherlight="/perks.php">Perks <span class="fa fa-bolt"></span></a></li>
63
    </ul>
64
    <ul class="rnav">
65
      <li><a href="#" data-featherlight="#login">Login <i class="fa fa-sign-in" aria-hidden="true"></i></a> | <a href="#" data-featherlight="#signup .test">Signup <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></li>
66
      <li><small>v0.0.1 | <a href="#" data-featherlight="/changelog.php">Changelog</a></small></li>
67
      <li><small>© 2016 <a style="text-decoration:none; color:#1CC1F7;" href="http://www.2dio.com" target="_blank" title="A two-man dev studio in Seattle, WA">2Dio Studio</a></small></li>
68
    </ul>
69
    <div class="clear"></div>
70
  </div>
71
</div>
72
 
73
</div>
 
CSS <style>
1
* {padding:0; margin:0; box-sizing:border-box;}
2
body {background: #F9F9F9 url('http://orbit.notomono.onnix.net/images/bg.jpg') repeat; font-family:monospace; cursor:crosshair;} /*overflow:hidden;*/
3
 
4
a {text-decoration:none; color:#1CC1F7;}
5
a:hover {opacity:0.9;}
6
.clear {clear:both;}
7
 
8
.perk_link {color:#F96145; transition:color 150ms ease-in;}
9
  .perk_link:hover {color:#FF4522;}
10
 
11
 
12
/* Game */
13
 
14
.game_wrapper {position:fixed; width:100%; height:calc(100% - 35px);}
15
 
16
 
17
/* Homepage / Space */
18
 
19
.space-bg {background-color:#000; z-index:-5;}
20
 
21
.space-bg, .stars, .twinkle, .clouds {
22
  position:fixed;
23
  width:100%;
24
  height:100%;
25
}
26
 
27
.stars {
28
  top:0; right:0; bottom:0; left:0; margin:auto;
29
  background:#000 url('http://orbit.notomono.onnix.net/images/stars.png') repeat top center;
30
  width:1920px; height:1920px;
31
  z-index:-4;
32
  opacity:0.5;
33
  animation:spin 1440s linear infinite;
34
}
35
 
36
.twinkle{
37
  background:transparent url('http://orbit.notomono.onnix.net/images/twinkle.png') repeat top center;
38
  z-index:-3;
39
  animation:move-twink-back 200s linear infinite;
40
  opacity:0.4;
41
}
42
 
43
.clouds{
44
  background:transparent url('http://orbit.notomono.onnix.net/images/clouds.png') repeat top center;
45
  z-index:-2;
46
  animation:move-clouds-back 200s linear infinite;
47
}
48
 
49
@keyframes move-twink-back {
50
    from {background-position:0 0;}
51
    to {background-position:-10000px 5000px;}
52
}
53
@-webkit-keyframes move-twink-back {
54
    from {background-position:0 0;}
55
    to {background-position:-10000px 5000px;}
56
}
57
@-moz-keyframes move-twink-back {
58
    from {background-position:0 0;}
59
    to {background-position:-10000px 5000px;}
60
}
61
@-ms-keyframes move-twink-back {
62
    from {background-position:0 0;}
63
    to {background-position:-10000px 5000px;}
64
}
65
 
66
@keyframes move-clouds-back {
67
    from {background-position:0 0;}
68
    to {background-position:10000px 0;}
69
}
70
@-webkit-keyframes move-clouds-back {
71
    from {background-position:0 0;}
72
    to {background-position:10000px 0;}
73
}
74
@-moz-keyframes move-clouds-back {
75
    from {background-position:0 0;}
76
    to {background-position:10000px 0;}
77
}
78
@-ms-keyframes move-clouds-back {
79
    from {background-position: 0;}
80
    to {background-position:10000px 0;}
81
}
82
 
83
 
84
/* Homepage / Earth */
85
86
.earth-bg {
87
  position:relative; top:50%; transform: translateY(-50%);
88
  margin:auto;
89
  max-width:1000px;
90
}
91
  .earth-bg img.bgrotate {width:100%; min-width:500px; animation:spin 600s linear infinite;}
92
 
93
@-moz-keyframes spin {
94
  from { -moz-transform: rotate(0deg); }
95
  to { -moz-transform: rotate(359deg); }
96
}
97
@-webkit-keyframes spin {
98
    from { -webkit-transform: rotate(0deg); }
99
    to { -webkit-transform: rotate(359deg); }
100
}
101
@keyframes spin {
102
    from {transform:rotate(0deg);}
103
    to {transform:rotate(359deg);}
104
}
105
 
106
/* Homepage / Earth Orbiters */
107
 
108
.horbiter {
109
  position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
110
}
111
 
112
.horbit1{
113
  animation: orbit1 80s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
114
}
115
 
116
@keyframes orbit1 {
117
  from {  transform: rotate(0deg) translateX(525px) rotate(180deg); }
118
  to   {  transform: rotate(360deg) translateX(525px) rotate(180deg); }
119
}
120
 
121
.horbit2{
122
  animation: orbit2 100s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
123
}
124
 
125
@keyframes orbit2 {
126
  from {  transform: rotate(0deg) translateX(575px) rotate(180deg); }
127
  to   {  transform: rotate(360deg) translateX(575px) rotate(180deg); }
128
}
129
 
130
 
131
 
132
 
133
.navbutton {display:none; position:absolute; top:0; right:0; z-index:1; width:50px; height:50px; font-size:16px; text-align:center; color:#FFF; opacity:0.8;}
134
  .navbutton .fa {position:relative; top:50%; transform:translateY(-50%);}
135
 
136
 
137
 
138
/* Centered Lightbox Window */
139
 
140
.window_center {display:none; position:absolute; top:50%; right:0; left:0; max-width:500px; margin:auto; color:#333; transform: translateY(-50%);}
141
.window {width:500px; height:500px; border-radius:250px; text-align:center; color:#FFF; background-color:rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 75px 10px rgba(0,0,0,0.5);}
142
  .window .wbox {position:relative; top:50%; transform: translateY(-50%);}
143
 
144
 
145
#home {display:block;}
146
  #home .fa-globe {font-size:1.5em; animation:spin 60s linear infinite;}
147
  #home h1 {font-size:1.2em; font-weight:normal;}
148
  #home .wbox {}
149
    #home .wbox input {font-family:monospace; border-radius:5px; line-height:22px; border:1px solid #555; padding:15px; margin-bottom:10px; text-align:center; width:75%; transition:background-color 250ms; opacity:0.9;}
150
      #home .wbox input:focus {border:1px solid #81bc00;}
151
      #home .button {border:none; background-color:#81bc00; color:#FFF;}
152
        #home .button.alt {background-color:#4DBAE7;}
153
        #home .button.alt2 {background-color:#3f84a0;}
154
      #home .button:hover {background-color:#21bc00; cursor:pointer;}
155
        #home .button.alt:hover {background-color:#1CC1F7;}
156
    #home p.foot {font-size:0.7em; color:#999;}
157
 
158
/* Home Window / Welcome / Main */
159
 
160
.content.form {width:400px; text-align:center; color:#333; background-color:#FFF; padding:25px;}
161
  .content.form h1 {font-size:1em;}
162
  .content.form h2 {font-size:1.3em;}
163
  .content.form p {font-size:1.2em;}
164
    .content.form .fa {font-size:1.5em; margin:10px 0;}
165
      .content.form .fa-globe {-webkit-animation:spin 300s linear infinite; -moz-animation:spin 300s linear infinite; animation:spin 300s linear infinite;}
166
    .content.form input {border-radius:5px; line-height:22px; border:1px solid #1CC1F7; transition:all 0.3s; padding:15px; margin-bottom:10px; width:75%; font-family:monospace; outline:0;}
167
    .content.form input:focus {border:1px solid #3f84a0;}
168
    .content.form .button {border:none; background-color:#81bc00; color:#FFF; font-size:1.1em;}
169
        .content.form .button.alt {background-color:#4DBAE7;}
170
      .content.form .button:hover {background-color:#21bc00; cursor:pointer;}
171
        .content.form .button.alt:hover {background-color:#1CC1F7;}
172
    .content.form p.foot {font-size:0.7em; color:#999;}
173
 
174
 
175
/* Bottom Nav / Footer */
176
 
177
.nwrapper {position:fixed; bottom:0; width:100%; min-width:1024px; background-color:rgba(0, 0, 0, 0.75);}
178
.nav {margin:0 auto; max-width:1024px; height:35px; line-height:35px;}
179
  .nav ul {margin:0; padding:0; list-style:none;}
180
    .nav ul li {display:inline-block; margin-left:25px;}
181
      .nav ul li:first-child {margin-left:0;}
182
    .nav ul li.logo {position:relative;}
183
      .nav ul li.logo a {color:white; font-size:1.2em; vertical-align:middle;}
184
      .nav ul li.logo img {position:absolute; top:8px; left:-5px; width:5px; transform: rotate(-60deg); -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg);}
185
  .nav ul.lnav {float:left; color:#777;}
186
  .nav ul.rnav {float:right; color:#777;}
187
 
188
 
189
@media (max-device-width: 1024px){
190
  html {-webkit-text-size-adjust:100%;}
191
  input {-webkit-appearance:none;}
192
  input[type="checkbox"] {-webkit-appearance:checkbox;}
193
  input[type="radio"] {-webkit-appearance:radio;}
194
195
  .game_wrapper {height:100%;}
196
197
  .earth-bg {top:0;}
198
199
  .navbutton {display:block;}
200
201
  .window {width:100vw; height:100vh; border-radius:0; background-color:rgba(0, 0, 0, 0.35); box-shadow:none;}
202
  .window_center {max-width:initial;}
203
204
205
  #nav {transform:translate3d(0, 100%, 0); transition: transform 200ms ease-out}
206
    #nav.nopen {transform:translate3d(0, 0, 0);}
207
  .nwrapper {min-width:100%; height:100%; background-color:rgba(0, 0, 0, 0.9);}
208
  .nav {height:auto; position:relative; top:50%; transform:translateY(-50%);}
209
    .nav ul li {margin:0; width:100%;}
210
      .nav ul li.logo img {display:none;}
211
    .nav ul.lnav, .nav ul.rnav {float:none; width:100%; text-align:center;}
212
      .nav ul.lnav {line-height:50px;}
213
      .nav ul.rnav {margin-top:20px;}
214
}
 
JS <script> (jQuery supported)
1
$(".navbutton").on("touchend", function (e){
2
    e.stopPropagation();
3
    $("#nav").toggleClass("nopen");
4
    return false;
5
  });