Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <meta name="description" content="">
- <meta name="author" content="">
- <title>Sam's Surf Report</title>
- <!-- Bootstrap core CSS -->
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
- <!-- Custom styles for this template -->
- <link href="dashboard.css" rel="stylesheet">
- </head>
- <body>
- <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
- <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Sam's Surf Report</a>
- <p class="text-info">AI should you surf predidiction</p>
- <ul class="navbar-nav px-3">
- <li class="nav-item text-nowrap">
- <a class="nav-link" href="#">This is in development and not fully working currently build 0.1
- </a>
- </li>
- </ul>
- </nav>
- <div class="container-fluid">
- <div class="row">
- <nav class="col-md-2 d-none d-md-block bg-light sidebar">
- <div class="sidebar-sticky">
- <ul class="nav flex-column">
- <li class="nav-item">
- <a class="nav-link active" href="#">
- <span data-feather="home"></span>
- Dashboard <span class="sr-only">(current)</span>
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file"></span>
- Orders
- </a>
- </li>
- </ul>
- </nav>
- <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
- <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
- <h1 class="h2">Dashboard</h1>
- <div class="btn-toolbar mb-2 mb-md-0">
- <div class="btn-group mr-2">
- <button class="btn btn-sm btn-outline-secondary">Share</button>
- <button class="btn btn-sm btn-outline-secondary">Export</button>
- </div>
- <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
- <span data-feather="calendar"></span>
- This week
- </button>
- </div>
- </div>
- <!-- <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> -->
- <h2>Section title</h2>
- <div class="table-responsive">
- <table class="table table-striped table-sm">
- <thead>
- <tr>
- <th>Days from Today</th>
- <th>Avrage Wave Height</th>
- <th>Star Rating</th>
- <th>Wave Intervals</th>
- <th>Tempreture</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>1 ft</td>
- <td> <span data-feather="target"></span> <span data-feather="disc"></span></td>
- <td>9 </td>
- <td>12</td>
- </tr>
- </tbody>
- </table>
- </div>
- <h1>
- model
- </h1>
- <!-- Button trigger modal -->
- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
- Launch demo modal
- </button>
- <!-- Modal -->
- <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- <div class="modal-body">
- ...
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary">Save changes</button>
- </div>
- </div>
- </div>
- </div>
- </main>
- </div>
- </div>
- <!-- Bootstrap core JavaScript
- ================================================== -->
- <!-- Placed at the end of the document so the pages load faster -->
- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
- <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
- <script src="../../assets/js/vendor/popper.min.js"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
- <!-- Icons -->
- <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
- <script>
- feather.replace()
- </script>
- <!-- Graphs -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
- <script>
- var ctx = document.getElementById("myChart");
- var myChart = new Chart(ctx, {
- type: 'line',
- data: {
- labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
- datasets: [{
- data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
- lineTension: 0,
- backgroundColor: 'transparent',
- borderColor: '#007bff',
- borderWidth: 4,
- pointBackgroundColor: '#007bff'
- }]
- },
- options: {
- scales: {
- yAxes: [{
- ticks: {
- beginAtZero: false
- }
- }]
- },
- legend: {
- display: false,
- }
- }
- });
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment