welsonjs/app/index.html

<div id="aside">
    <div class="searchbox">
        <input id="keyword" class="text" type="text" placeholder="위치 찾아보기..."/>
    </div>

    <div class="serverbox">
        <ul>
            <li>
                <span>모든 위치</span>
                <ul class="sub">
                    <li class="show-no-logged"><span><img src="app/assets/img/iconfinder_Caution_53013.png" alt="Caution" /> 로그인하세요</span></li>
                    <li class="show-logged"><a href="#us1"><span><img src="app/assets/img/flags/shiny/16/United-States.png" alt="United States" /> US 1</span></a></li>
                    <li class="show-logged"><a href="#us2"><span><img src="app/assets/img/flags/shiny/16/United-States.png" alt="United States" /> US 2</span></a></li>
                    <li class="show-logged"><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="closebox">
		<a href="#exit"><img src="app/assets/img/x-mark-24.png" alt="닫기" title="이 프로그램을 닫습니다." /></a>
	</div>

    <div class="logobox">
        <img src="app/assets/img/logo.png" alt="로고" />
    </div>

    <div class="loginbox show-no-logged">
        <form id="loginform" method="post" action="http://96.30.198.29/">
            <div class="hidden">
                <input type="hidden" name="route" value="api.authenticate" />
                <input type="hidden" name="action" value="getToken" />
            </div>
            <div class="box1">
                <ul>
                    <li>
                        <label for="username">사용자 이름</label>
                        <input id="username" name="username" class="text" type="text" placeholder="사용자 이름" />
                    </li>
                    <li>
                        <label for="password">패스워드</label>
                        <input id="password" name="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="logoutbox show-logged">
        <div class="box1">
            <p>환영합니다. <span id="logged_username" class="username"></span></p>
        </div>
        <div class="box2">
            <button id="btn_logout" class="logout" type="button">로그아웃</button>
        </div>
    </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 onclick="javascript:console.log('test');">test</a></dt>
                    <dd>-</dd>
                </dl>
            </li>
        </ul>
    </div>
</div>