Skip to content

Instantly share code, notes, and snippets.

@mdadils

mdadils/pd-prevent-index.html

Last active June 25, 2023 05:07
Show Gist options
  • Save mdadils/527e03071e2b105b0b48a5e0b89e6c60 to your computer and use it in GitHub Desktop.
Save mdadils/527e03071e2b105b0b48a5e0b89e6c60 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pd-prevent-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PDP</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="./loader.css" />
<link rel="stylesheet" href="./custom.css" />
<link rel="stylesheet" href="./progressbar.css" />
</head>
<body>
<!-- Loading -->
<div
id="fullPageLoader"
class="loader-mask modal justify-content-center align-items-center flex-column">
<main>
<svg
class="ip"
viewBox="0 0 256 128"
width="256px"
height="128px"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#5ebd3e" />
<stop offset="33%" stop-color="#ffb900" />
<stop offset="67%" stop-color="#f78200" />
<stop offset="100%" stop-color="#e23838" />
</linearGradient>
<linearGradient id="grad2" x1="1" y1="0" x2="0" y2="0">
<stop offset="0%" stop-color="#e23838" />
<stop offset="33%" stop-color="#973999" />
<stop offset="67%" stop-color="#009cdf" />
<stop offset="100%" stop-color="#5ebd3e" />
</linearGradient>
</defs>
<g fill="none" stroke-linecap="round" stroke-width="16">
<g class="ip__track" stroke="#ddd">
<path d="M8,64s0-56,60-56,60,112,120,112,60-56,60-56" />
<path d="M248,64s0-56-60-56-60,112-120,112S8,64,8,64" />
</g>
<g stroke-dasharray="180 656">
<path
class="ip__worm1"
stroke="url(#grad1)"
stroke-dashoffset="0"
d="M8,64s0-56,60-56,60,112,120,112,60-56,60-56" />
<path
class="ip__worm2"
stroke="url(#grad2)"
stroke-dashoffset="358"
d="M248,64s0-56-60-56-60,112-120,112S8,64,8,64" />
</g>
</g>
</svg>
</main>
<p class="loader-text">Loading</p>
</div>
<!--
███╗ ███╗ ██████╗ ██████╗ █████╗ ██╗
████╗ ████║██╔═══██╗██╔══██╗██╔══██╗██║
██╔████╔██║██║ ██║██║ ██║███████║██║
██║╚██╔╝██║██║ ██║██║ ██║██╔══██║██║
██║ ╚═╝ ██║╚██████╔╝██████╔╝██║ ██║███████╗
╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝
-->
<div
tabindex="-1"
role="dialog"
id="resultModal"
data-backdrop="static"
class="modal fade"
aria-labelledby="resultModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="resultModalLabel">Result aa gaya</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body d-flex align-items-center flex-column">
<div id="resultText"></div>
<!-- https://codepen.io/alvaromontoro/pen/poWgdVV?editors=1100 -->
<div id="resultProgressbar" role="progressbar"></div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
<!--
███████╗ ██████╗ ██████╗ ███╗ ███╗
██╔════╝██╔═══██╗██╔══██╗████╗ ████║
█████╗ ██║ ██║██████╔╝██╔████╔██║
██╔══╝ ██║ ██║██╔══██╗██║╚██╔╝██║
██║ ╚██████╔╝██║ ██║██║ ╚═╝ ██║
╚═╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝
-->
<div class="container">
<div class="py-5 text-center">
<img
class="d-block mx-auto mb-4"
src="https://fastly.picsum.photos/id/907/200/300.jpg?hmac=BYvJHklGn1KzEhHiZTkbQtFiRXUET5zYdLLKS6RXF3I"
alt=""
width="72"
height="72" />
<h2>PD-Prevent</h2>
<p class="lead">
Below is an example form built entirely with Bootstrap's form
controls.
</p>
</div>
<div class="row">
<div class="col-md-4 order-md-2 mb-4 right-sidebar">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Tests and symptoms added</span>
<span class="badge badge-secondary badge-pill factors-count"
>0</span
>
</h4>
<ul class="list-group mb-3" id="listOfRisks"></ul>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">Risk assessment form</h4>
<form
novalidate=""
method="POST"
action="/submit"
class="needs-validation"
id="pdpForm">
<!-- Name -->
<div class="mb-3">
<strong for="username"
>Name <span class="text-muted">(Optional)</span></strong
>
<div class="input-group">
<input
type="text"
id="username"
autocomplete="off"
placeholder="Name"
class="form-control" />
</div>
</div>
<div class="row">
<!-- Gender -->
<div class="col-md-6 mb-3">
<strong for="firstName">Gender</strong>
<div class="form-group">
<div class="form-check form-check-inline">
<input
id="Male"
type="radio"
name="gender"
value="Male"
class="form-check-input" />
<label class="form-check-label" for="Male">Male</label>
</div>
<div class="form-check form-check-inline">
<input
id="Female"
type="radio"
name="gender"
class="form-check-input"
value="Female" />
<label class="form-check-label" for="Female">Female</label>
</div>
</div>
<div class="invalid-feedback">Valid name is required.</div>
</div>
<!-- Age -->
<div class="col-md-6 mb-3">
<strong for="Age">Age</strong>
<input
min="1"
id="Age"
value=""
max="120"
required=""
type="number"
class="form-control"
placeholder="Enter your age in years" />
<div class="invalid-feedback">Valid last name is required.</div>
</div>
</div>
<hr class="mb-4" />
<!-- SWS add new factor START-->
<div class="form-group row" id="swsTopEl">
<div class="col-12 mb-2">
<strong>Add tests or symptoms </strong>
<span class="text-muted">(minimum 3 required)</span>
</div>
<div class="col-6 mb-3 mb-sm-5 selectpicker-wrp">
<select
id="swsFactors"
class="selectpicker"
data-live-search="true"
data-show-subtext="true"
data-width="100%"
title="Select a test or symptom"
data-style="btn-selectpicker-swsFactors"></select>
<label
class="text-danger small font-weight-bold error-helper"
for="swsFactors">
</label>
</div>
<div class="col-6 mb-3">
<button
type="button"
class="btn btn-outline-secondary"
onclick="addNewFactor(this)">
Add this factor
</button>
</div>
</div>
<!-- SWS add new factor ENDS -->
<button
class="btn btn-primary btn-lg btn-block"
type="submit"
id="submitFormCTA">
Calculate my risk profile
</button>
</form>
</div>
</div>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© 2023 Pd-Prevent</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Support</a></li>
</ul>
</footer>
</div>
<!--
███████╗ ██████╗██████╗ ██╗██████╗ ████████╗███████╗
██╔════╝██╔════╝██╔══██╗██║██╔══██╗╚══██╔══╝██╔════╝
███████╗██║ ██████╔╝██║██████╔╝ ██║ ███████╗
╚════██║██║ ██╔══██╗██║██╔═══╝ ██║ ╚════██║
███████║╚██████╗██║ ██║██║██║ ██║ ███████║
╚══════╝ ╚═════╝╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚══════╝
-->
<script src="./factorsConfig.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script src="./customJS.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment