Skip to content

Commit

Permalink
refactor: Bootstrap layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@kordwarshuis
kordwarshuis committed Jan 28, 2024
1 parent 1b94e9b commit b3a55e8
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 27 deletions.
45 changes: 35 additions & 10 deletions public/collection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,43 @@
<link rel="stylesheet" href="assets/index.css">
</head>

<body class="m-5">
<div class="m-5">
<a class="btn btn-outline-dark" href="options.html">Go to options</a>
<button class="btn btn-outline-dark" id="logButton">Show collection</button>
<button class="btn btn-outline-dark" id="clearButton">Clear collection</button>
</div>


<h1 class="mb-3">Your collected definitions</h1>
<div id="container-collection"></div>
<body class="m-5 mx-auto" style="max-width: 60em;">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="options.html">Options</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="collection.html">Collection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="info.html">Info</a>
</li>
</ul>
</div>
<button class="btn btn-outline-dark me-3" id="logButton">Show collection</button>
<button class="btn btn-outline-dark" id="clearButton">Clear collection</button>
</nav>
<div class="jumbotron">
<h1><img src="images/icon48.png" alt="Kerific logo" class="logo me-5">Kerific collection</h1>
<p>
Collection.
</p>
<!-- <p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p> -->
</div>

</div>

<h1 class="mb-3">Your collected definitions</h1>
<div id="container-collection"></div>
</div>
</div>
</body>
<!-- <script src="assets/index.js"></script> -->
<script src="js/index.js"></script>
Expand Down
82 changes: 82 additions & 0 deletions public/info.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kerific</title>
<link rel="stylesheet" href="css/bootstrap-5.3.2/bootstrap.min.css">
<link rel="stylesheet" href="assets/index.css">
</head>

<body class="m-5 mx-auto" style="max-width: 60em;">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="options.html">Options</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="collection.html">Collection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="info.html">Info</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1><img src="images/icon48.png" alt="Kerific logo" class="logo me-5">Kerific info</h1>
<p>Version: <span id="versionNumber">-</span></p>
<!-- <p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p> -->
</div>
</div>
</div>
<div class="row gx-5">
<div class="col-md-4">
<h2>
How does it work?
</h2>
<video style="max-width: 100%;" src="video/explainer-1.mp4" controls autoplay loop></video>
</div>
<div class="col-md-4">
<h2>
How does it work?
</h2>
<p>This extension loads glossaries related to Key Event Receipt Infrastructure (KERI).</p>
<p>It looks for matches in the text of a web page with definitions in the glossaries, and makes them
clickable.</p>
<p>Click on the extension icon to see the glossaries that are loaded.</p>
<p>Clicking shows a modal in the webpage showing the found definitions, so you can compare.</p>
<p>It works on any webpage, but is especially useful for the KERI documentation.</p>
<p>It does NOT work on pdf's.</p>

<p>There are currently no options to configure.</p>

</div>
<div class="col-md-4">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
</div>
</div>
</body>
<script src="showVersionNumber.js"></script>
<!-- <script src="assets/index.js"></script> -->

</html>
92 changes: 75 additions & 17 deletions public/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,82 @@
<link rel="stylesheet" href="assets/index.css">
</head>

<body class="m-5">
<div class="m-5">
<a class="btn btn-outline-dark" href="collection.html">Go to collection</a>
</div>

<h1><img src="images/icon128.png" alt="Kerific logo" class="logo">Kerific</h1>
<p>Version: <span id="versionNumber">-</span></p>
<p>This extension loads glossaries related to Key Event Receipt Infrastructure (KERI).</p>
<p>It looks for matches in the text of a web page with definitions in the glossaries, and makes them clickable.</p>
<p>Click on the extension icon to see the glossaries that are loaded.</p>
<p>Clicking shows a modal in the webpage showing the found definitions, so you can compare.</p>
<p>It works on any webpage, but is especially useful for the KERI documentation.</p>
<p>It does NOT work on pdf's.</p>
<video src="video/explainer-1.mp4" controls autoplay loop></video>
<p>There are currently no options to configure.</p>
<body class="m-5 mx-auto" style="max-width: 60em;">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="options.html">Options</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="collection.html">Collection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="info.html">Info</a>
</li>

</ul>
</div>
</nav>
<div class="jumbotron">
<h1><img src="images/icon48.png" alt="Kerific logo" class="logo me-5">Kerific settings</h1>
<p>
Settings.
</p>
<!-- <p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p> -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
</div>
</div>
</body>
<script src="showVersionNumber.js"></script>
<!-- <script src="assets/index.js"></script> -->

</html>

0 comments on commit b3a55e8

Please sign in to comment.