url-shortener/data/www/index.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>