updated

app.hta

@@ -23,7 +23,7 @@
             @attribute WindowsState		[Normal]|Minimize|Maximize
             -->
         <hta:application
-            ApplicationName="Application Name"
+            ApplicationName="NextVPN"
             Border="Thin"
             BorderStyle="Static"
             Caption="Yes"
@@ -38,7 +38,7 @@
             SysMenu="Yes"
             WindowState="Normal"
             />
-        <title>Application Title</title>
+        <title>NextVPN</title>
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <link type="text/css" rel="stylesheet" href="app/assets/css/style.css" />

app/app.html

@@ -5,11 +5,86 @@
 
     <div class="serverbox">
         <ul>
-            
+            <li>
+                <span>모든 위치</span>
+                <ul class="sub">
+                    <li><span>로그인하세요</span></li>
+                    <li><a href="#us1"><span><img src="app/assets/img/flags/shiny/16/United-States.png" alt="United States" /> US 1</span></a></li>
+                    <li><a href="#us2"><span><img src="app/assets/img/flags/shiny/16/United-States.png" alt="United States" /> US 2</span></a></li>
+                    <li><a href="#us3"><span><img src="app/assets/img/flags/shiny/16/United-States.png" alt="United States" /> US 3</span></a></li>
+                    </li>
+                </ul>
+            </li>
         </ul>
     </div>
 </div>
 
 <div id="content">
+    <div class="logobox">
+        <img src="app/assets/img/logo.png" alt="로고" />
+    </div>
+
+    <div class="loginbox">
+        <form method="post" action="">
+            <div class="box1">
+                <ul>
+                    <li>
+                        <label for="username">사용자 이름</label>
+                        <input id="username" class="text" type="text" placeholder="사용자 이름" />
+                    </li>
+                    <li>
+                        <label for="password">패스워드</label>
+                        <input id="password" class="text" type="password" placeholder="패스워드" />
+                    </li>
+                </ul>
+            </div>
+
+            <div class="box2">
+                <button id="btn_login" class="submit" type="submit">로그인</button>
+            </div>
+        </form>
+    </div>
     
+    <div class="statusbox">
+        <ul>
+            <li>
+                <dl>
+                    <dt>서버:</dt>
+                    <dd>-</dd>
+                </dl>
+            </li>
+            <li>
+                <dl>
+                    <dt>상태:</dt>
+                    <dd><span style="font-weight: bold;">연결 안됨</span></dd>
+                </dl>
+            </li>
+            <li>
+                <dl>
+                    <dt>IP:</dt>
+                    <dd>-</dd>
+                </dl>
+            </li>
+            <li>
+                <dl>
+                    <dt>업타임:</dt>
+                    <dd>-</dd>
+                </dl>
+            </li>
+            <li>
+                <dl>
+                    <dt>보냄:</dt>
+                    <dd>-</dd>
+                </dl>
+            </li>
+            <li>
+                <dl>
+                    <dt>받음: <a id="test" href="#test">test</a></dt>
+                    <dd>-</dd>
+                </dl>
+            </li>
+        </ul>
+    </div>
 </div>
+
+

app/assets/css/style.css

@@ -50,6 +50,7 @@ html, body {
 }
 
 input.text {
+    font-size: 1em;
     font-family: "맑은 고딕",, "Malgun Gothic",  "Segoe UI", Calibri, Arial, Sans-Serif;
 }
 
@@ -65,6 +66,7 @@ input.text {
     width: 30%;
     height: 100%;
     background-color: #333333;
+    font-size: 0.8em;
 }
 
 #aside .searchbox {
@@ -82,7 +84,101 @@ input.text {
     color: #505050;
 }
 
+#aside .serverbox ul li {
+    border-top: 1px solid #2a2c2b;
+    border-bottom: 1px solid #343635;
+    background-color: #27282a;
+    color: #fff;
+}
+
+#aside .serverbox ul li a {
+    display: block;
+    text-decoration: none;
+    color: #fff;
+}
+
+#aside .serverbox ul li span {
+    display: block;
+    padding: 10px;
+    text-align: center;
+}
+
+#aside .serverbox ul li span img {
+    vertical-align: middle;
+}
+
+#aside .serverbox ul.sub li {
+    background-color: #3b3c3e;
+}
+
+#aside .serverbox ul.sub li span {
+    padding-left: 30px;
+    text-align: left;
+}
+
 #content {
     float: right;
     width: 70%;
+    height: 100%;
+    background: url(../img/World-Map-PNG-Picture.png) no-repeat center 50px;
+}
+
+#content .logobox {
+    margin: 50px 0;
+    text-align: center;
+}
+
+#content .loginbox {
+    text-align: center;
+}
+
+#content .loginbox label {
+    display: none;
+}
+
+#content .loginbox ul li {
+    margin: 8px 0;
+}
+
+#content .loginbox ul li input.text {
+    width: 200px;
+    border: 1px solid #888;
+    border-radius: 8px;
+    padding: 5px 10px;
+}
+
+#content .loginbox button.submit {
+    border: 0;
+    background: none;
+    background-color: #43a747;
+    color: #fff;
+    font-weight: bold;
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 1em;
+    cursor: pointer;
+}
+
+#content .loginbox .box2 {
+    margin-top: 30px;
+}
+
+#content .statusbox {
+    width: 360px;
+    margin: 60px auto;
+}
+
+#content .statusbox ul li {
+    float: left;
+    width: 180px;
+    margin: 10px 0;
+}
+
+#content .statusbox ul li dl dt {
+    color: #616686;
+    display: inline;
+}
+
+#content .statusbox ul li dl dd {
+    display: inline;
 }