239 lines
7.5 KiB
HTML
239 lines
7.5 KiB
HTML
<!--
|
|
~ Project Asgard
|
|
~
|
|
~ Copyright (c) 2021. Elex. All Rights Reserved.
|
|
~ https://www.elex-project.com/
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="./dist/bundle.css" />
|
|
<title>Hello</title>
|
|
<script src="./dist/bundle.js"></script>
|
|
</head>
|
|
<body>
|
|
<aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
|
|
<div class="mdc-drawer__header">
|
|
<p>Hello</p>
|
|
</div>
|
|
<div class="mdc-drawer__content">
|
|
<nav class="mdc-list mdc-list--dense">
|
|
<a
|
|
class="mdc-list-item mdc-list-item--activated"
|
|
href="#"
|
|
aria-current="page"
|
|
>
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Inbox</span>
|
|
</a>
|
|
<a class="mdc-list-item" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Outgoing</span>
|
|
</a>
|
|
<a class="mdc-list-item" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
|
|
</a>
|
|
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Drafts</span>
|
|
</a>
|
|
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
|
|
</a>
|
|
<a class="mdc-list-item" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Drafts</span>
|
|
</a>
|
|
<a class="mdc-list-item mdc-list-item--depth-2" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Drafts</span>
|
|
</a>
|
|
<a class="mdc-list-item" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Drafts</span>
|
|
</a>
|
|
<a class="mdc-list-item" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Drafts</span>
|
|
</a>
|
|
<a class="mdc-list-item" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text"
|
|
>Drafts Drafts Drafts Drafts Drafts Drafts Drafts</span
|
|
>
|
|
</a>
|
|
<a class="mdc-list-item" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Drafts</span>
|
|
</a>
|
|
<a class="mdc-list-item" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Drafts</span>
|
|
</a>
|
|
<a class="mdc-list-item" href="#">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Drafts</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
<div id="layout-content" class="mdc-drawer-app-content">
|
|
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
|
|
<div class="mdc-elevation-overlay"></div>
|
|
<div class="mdc-top-app-bar__row">
|
|
<section
|
|
class="
|
|
mdc-top-app-bar__section mdc-top-app-bar__section--align-start
|
|
"
|
|
>
|
|
<button
|
|
class="
|
|
material-icons
|
|
mdc-top-app-bar__navigation-icon
|
|
mdc-icon-button
|
|
"
|
|
aria-label="Open navigation menu"
|
|
>
|
|
menu
|
|
</button>
|
|
<span class="mdc-top-app-bar__title">Page title.</span>
|
|
</section>
|
|
<section
|
|
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
|
|
role="toolbar"
|
|
>
|
|
<button
|
|
class="
|
|
material-icons
|
|
mdc-top-app-bar__action-item
|
|
mdc-icon-button
|
|
"
|
|
aria-label="Favorite"
|
|
>
|
|
favorite
|
|
</button>
|
|
<button
|
|
class="
|
|
material-icons
|
|
mdc-top-app-bar__action-item
|
|
mdc-icon-button
|
|
"
|
|
aria-label="Search"
|
|
>
|
|
search
|
|
</button>
|
|
<div class="mdc-menu-surface--anchor">
|
|
<button
|
|
id="btn-overflow"
|
|
class="
|
|
material-icons
|
|
mdc-top-app-bar__action-item
|
|
mdc-icon-button
|
|
"
|
|
aria-label="Options"
|
|
>
|
|
more_vert
|
|
</button>
|
|
<div class="mdc-menu mdc-menu-surface">
|
|
<ul
|
|
class="mdc-list"
|
|
role="menu"
|
|
aria-hidden="true"
|
|
aria-orientation="vertical"
|
|
tabindex="-1"
|
|
>
|
|
<li class="mdc-list-item" role="menuitem">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">A Menu Item</span>
|
|
</li>
|
|
<li class="mdc-list-item" role="menuitem">
|
|
<span class="mdc-list-item__ripple"></span>
|
|
<span class="mdc-list-item__text">Another Menu Item</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</header>
|
|
<div id="layout-main" class="mdc-top-app-bar--fixed-adjust">
|
|
<main class="mdc-layout-grid">
|
|
<article>
|
|
<h1>Heading 1</h1>
|
|
<p>Ha<em>Hehe</em>hoho.</p>
|
|
<button class="mdc-button mdc-button--raised">
|
|
<div class="mdc-button__ripple"></div>
|
|
<span class="mdc-button__label">Button</span>
|
|
</button>
|
|
<div>
|
|
<label class="mdc-text-field mdc-text-field--filled username">
|
|
<span class="mdc-text-field__ripple"></span>
|
|
<input
|
|
type="text"
|
|
class="mdc-text-field__input"
|
|
aria-labelledby="username-label"
|
|
name="username"
|
|
/>
|
|
<span class="mdc-floating-label" id="username-label"
|
|
>Username</span
|
|
>
|
|
<span class="mdc-line-ripple"></span>
|
|
</label>
|
|
<label class="mdc-text-field mdc-text-field--filled password">
|
|
<span class="mdc-text-field__ripple"></span>
|
|
<input
|
|
type="password"
|
|
class="mdc-text-field__input"
|
|
aria-labelledby="password-label"
|
|
name="password"
|
|
/>
|
|
<span class="mdc-floating-label" id="password-label"
|
|
>Password</span
|
|
>
|
|
<span class="mdc-line-ripple"></span>
|
|
</label>
|
|
</div>
|
|
<blockquote>Hahaha</blockquote>
|
|
<p>동해물과 백두산이 마르고 닳도록</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
<strong>Ut enim ad minim</strong> veniam, quis nostrud
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia
|
|
deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
|
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
|
sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
</article>
|
|
</main>
|
|
<footer class="mdc-layout-grid">
|
|
<p>Copyright © 2021</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|