Skip to content

Instantly share code, notes, and snippets.

@henkin

henkin/index.html

Created November 29, 2023 23:02
Show Gist options
  • Save henkin/9930d1e466a590d5ebe5063478d5aefc to your computer and use it in GitHub Desktop.
Save henkin/9930d1e466a590d5ebe5063478d5aefc to your computer and use it in GitHub Desktop.
Download ZIP
timer.ist
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
.col {
border: 1px solid black;
}
.task-time-label {
font-size: x-large;
/* font-family: monospace; */
}
</style>
</head>
<body>
<div class="container-full">
<ul class="list-group">
<li class="list-group-item progress-bar">
<!-- <div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div> -->
<a href="test">
<div id="progressbar"></div>
</a>
<li class="list-group-item justify-content-between align-items-center">
<div class="container">
<div class="row">
<div class="col-md">
<div class="progress" style="height: 50px;">
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="d-flex justify-content-end">
<div class="p-2">
<span class="task-time-label">43:11</span>
</div>
</div>
</div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="d-flex">
<div class="p-2">
<span class="task-time-label">16:49</span>
</div>
<div class="ml-auto p-2">
<span class="task-time-label">6:00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <span class="badge badge-primary badge-pill">-10:40</span> -->
</li>
<li class="list-group-item progress-bar" style="width:10% text-align: left; padding-left: 10px; height:3em; color: black">3:29</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment