MA0301/tools/discrete-extraction-tools/pages/popup/popup.html

165 lines
5.0 KiB
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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="style.css"/>
<script src="lib/bootstrap.bundle.js" defer></script>
<script src="scripts/boolean-algebra.js" defer></script>
<script src="index.js" defer></script>
</head>
<body class="py-3, px-2">
<div class="container mt-3">
<h3>Math stuffs</h3>
</div>
<hr>
<div class="container">
<h4>Boolean Algebra Calc</h4>
<div class="my-2">
<input type="text" id="bool-alg-input" placeholder="A!B + !(AB)">
</div>
<div class="btn-group my-2" role="group">
<input type="radio" class="btn-check" name="boolalg" id="boolalg1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="boolalg1">Algebra</label>
<input type="radio" class="btn-check" name="boolalg" id="boolalg2" autocomplete="off">
<label class="btn btn-outline-primary" for="boolalg2">Logic</label>
<input type="radio" class="btn-check" name="boolalg" id="boolalg3" autocomplete="off">
<label class="btn btn-outline-primary" for="boolalg3">Sets</label>
</div>
<!-- <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div> -->
<button class="btn btn-primary" id="bool-alg-btn">Go!</button>
</div>
<hr>
<div class="container">
<h4>Proof by induction</h4>
<div class="alert alert-danger">
Fibonacci and Lucas etc. is not supported!
</div>
<div class="row">
<div class="col-3">
<img src="img/sum.png" alt="Sum from i=? to n+1" width="100%"/>
</div>
<div class="col align-self-center">
<input type="text" id="ind-expr1" class="form-control" placeholder="i^2" min="0">
</div>
</div>
<div class="row my-3">
<div class="col-1 d-flex mx-2">
<select name="exprsign" id="ind-sign" class="form-select">
<option value="gt">&gt;</option>
<option value="geq">&geq;</option>
<option value="eq" selected>=</option>
<option value="leq">&leq;</option>
<option value="lt">&lt;</option>
</select>
</div>
<div class="col">
<input type="text" id="ind-expr2" class="form-control" placeholder="n(n+1)(2n+1)/2" min="0">
</div>
</div>
<div class="row my-3">
<div class="col-5 align-self-center">
<img src="img/i.png" alt="i = " width="100%"/>
</div>
<div class="col-3 align-self-center px-0">
<input type="number" id="ind-s" class="form-control" value="0" min="0">
</div>
</div>
<div class="row">
<div class="col-3 align-self-center">
<img src="img/n.png" alt="n" width="100%"/>
</div>
<div class="col-2 d-flex">
<select name="nsign" id="ind-nsign" class="form-select">
<option value="gt">&gt;</option>
<option value="geq">&geq;</option>
</select>
</div>
<div class="col">
<input type="number" id="ind-n" class="form-control" value="0" min="0">
</div>
</div>
<!-- <div class="input-group my-2">
<input type="text" id="sy" class="form-control" placeholder="y" min="0">
</div>
<div class="input-group">
<input type="number" id="sx" class="form-control" placeholder="x" min="0">
<input type="number" id="sz" class="form-control" placeholder="z" min="0">
</div> -->
<button class="btn btn-primary" id="ind-btn">Go!</button>
</div>
<hr>
<div class="container">
<h4>Permutations, Combinations</h4>
<div class="input-group my-2">
<input type="number" id="pn" class="form-control" placeholder="n" min="0">
<span class="input-group-text">P</span>
<input type="number" id="pr" class="form-control" placeholder="r" min="0">
<button class="btn btn-primary" id="perm-btn">Go!</button>
</div>
<div class="input-group my-2">
<input type="number" id="cn" class="form-control" placeholder="n" min="0">
<span class="input-group-text">C</span>
<input type="number" id="cr" class="form-control" placeholder="r" min="0">
<button class="btn btn-primary" id="comb-btn">Go!</button>
</div>
</div>
</body>
</html>