74 lines
2.2 KiB
HTML
74 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Shorten URLs</title>
|
|
<link rel="stylesheet" href="./material.min.css">
|
|
<link rel="stylesheet" href="./googlefont.css">
|
|
<link rel="stylesheet" href="./app.css">
|
|
</head>
|
|
<body>
|
|
<!-- Simple header with fixed tabs. -->
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
|
|
mdl-layout--fixed-tabs">
|
|
<header class="mdl-layout__header">
|
|
<div class="mdl-layout__header-row">
|
|
<!-- Title -->
|
|
<span class="mdl-layout-title">Url Shortener</span>
|
|
</div>
|
|
<!-- Tabs -->
|
|
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
|
<a href="#add-item" class="mdl-layout__tab is-active">Shorten</a>
|
|
<a href="#links-you-have-shorten" class="mdl-layout__tab">Links You Have Shorten</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="mdl-layout__content">
|
|
<section class="mdl-layout__tab-panel is-active" id="add-item">
|
|
<div class="page-content">
|
|
<div class="center-box">
|
|
<div class="larger_tb mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
|
<input class="mdl-textfield__input" type="text" id="url">
|
|
<label class="mdl-textfield__label" for="url">Url</label>
|
|
|
|
|
|
|
|
</div>
|
|
<button id="copy_link" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
|
|
<i class="material-icons">content_paste</i>
|
|
</button>
|
|
|
|
</div>
|
|
<!-- Colored raised button -->
|
|
<div class="center-box">
|
|
<button id="shorten_btn" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
|
Shorten
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="mdl-layout__tab-panel" id="links-you-have-shorten">
|
|
|
|
<div class="page-content">
|
|
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp fullscr">
|
|
<thead>
|
|
<tr>
|
|
<th class="mdl-data-table__cell--non-numeric">Url</th>
|
|
<th>Shorten URL</th>
|
|
<th>Created Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="outls">
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="./material.min.js"></script>
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html> |