Reorganise HTML

This commit is contained in:
Florine W. Dekker 2019-06-13 19:08:13 +02:00
parent a9c0ffdc5b
commit 64ae47808b
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
3 changed files with 91 additions and 76 deletions

91
index.html Normal file
View File

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Felix W. Dekker" />
<meta name="application-name" content="Codsworth name generator" />
<meta name="description"
content="Choose a fitting name for your Fallout 4 character that Codsworth can pronounce." />
<meta name="theme-color" content="#0033cc" />
<title>Codsworth name generator</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-common.css" crossorigin="anonymous" />
</head>
<body>
<main class="wrapper">
<!-- Header -->
<header class="header">
<section class="container">
<h1>Codsworth name generator</h1>
<p>
Use these generators to help you choose a name for your
<a href="https://www.fallout4.com/">Fallout 4</a> character that
<a href="http://fallout.wikia.com/wiki/Codsworth">Codsworth</a> can pronounce!
The names are selected from the list found
<a href="http://www.cinemablend.com/games/Fallout-4-Full-List-Names-Codsworth-Can-Say-98407.html">on
Nukapedia</a>.<br />
Note that this only works for the English version of the game.
</p>
</section>
</header>
<!-- Generators -->
<section class="container">
<div class="row">
<!-- Similar -->
<div class="column">
<h2>Similar names</h2>
<form>
<div class="form-group">
<label for="similarInput">Your name</label>
<input id="similarInput" class="form-control" type="text" autofocus />
</div>
<button id="generateSimilar" class="btn btn-primary" type="submit">Generate similar names
</button>
<label for="similarNames">Similar names are...</label>
<textarea id="similarNames" style="height: 10em;" readonly></textarea>
</form>
</div>
<!-- Random -->
<div class="column">
<h2>Random names</h2>
<form class="form-inline">
<button id="generateRandom" class="btn btn-primary" type="submit">Generate random name</button>
</form>
<label for="randomNames">Your name is...</label>
<textarea id="randomNames" style="height: 10em;" readonly></textarea>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<section class="container">
Made by <a href="https://fwdekker.com/">Felix W. Dekker</a>.
Licensed under the
<a href="https://git.fwdekker.com/FWDekker/codsworth-namegen/src/branch/master/LICENSE">MIT License</a>.
Source code available on <a href="https://git.fwdekker.com/FWDekker/codsworth-namegen/">git</a>.
</section>
</footer>
</main>
<!-- Scripts -->
<script src="js/levenshtein.js"></script>
<script src="js/jaro-winkler.js"></script>
<script src="js/main.js"></script>
</body>
</html>

View File

@ -1,16 +0,0 @@
<?php
require_once('/var/www/fwd/template/build.php');
print(buildFelixPage(array(
'scriptBottomInclude' => [array('src' => 'js/jaro-winkler.min.js'), array('src' => 'js/levenshtein.min.js'), array('src' => 'js/main.min.js')],
'metaDescription' => 'Choose a fitting name for your character that Codsworth can pronounce.',
'metaKeywords' => 'Fallout 4 fo4 Codsworth robot name character creation choose good',
'metaAuthor' => 'Felix Dekker',
'metaApplicationName' => 'Fallout 4 Codsworth name generator',
'pageTitle' => 'Codsworth name generator',
//'navbar' => '/views/navbar.html',
'contents' => 'views/index.html'
)));
?>

View File

@ -1,60 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Felix Dekker" />
<meta name="application-name" content="Codsworth Name Generator" />
<!-- Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<!-- Title -->
<title>Codsworth Name Generator</title>
</head>
<body>
<div class="page-header">
<h1>Codsworth name generator <small>for Fallout 4</small></h1>
</div>
<p>Use these generators to help you choose a name for your <a href="https://www.fallout4.com/">Fallout 4</a> character that <a href="http://fallout.wikia.com/wiki/Codsworth">Codsworth</a> can pronounce! The names are selected from the list found in <a href="http://www.cinemablend.com/games/Fallout-4-Full-List-Names-Codsworth-Can-Say-98407.html">this article</a>.<br />
Note that this only works for the English version of the game.</p>
<!-- Generators -->
<div class="row">
<!-- Similar -->
<div class="col-md-6">
<h2>Similar names</h2>
<p>Want a name that is similar to your own (or your friend's) name? Enter your name below and the best matches are automatically selected!</p>
<form class="form-inline">
<div class="form-group">
<input id="similarInput" class="form-control" type="text" placeholder="Your name" autofocus />
</div>
<button id="generateSimilar" class="btn btn-primary" type="submit">Generate similar names</button>
</form><br /><br />
Similar names are...
<textarea id="similarNames" class="form-control" rows="11" style="resize:vertical;" readonly></textarea>
</div>
<!-- /Similar -->
<!-- Random -->
<div class="col-md-6">
<h2>Random names</h2>
<p>Not even a slight clue what you want your name to be and in for a surprise? Generate a random name!</p>
<form class="form-inline">
<button id="generateRandom" class="btn btn-primary" type="submit">Generate random name</button>
</form><br /><br />
Your name is...
<textarea id="randomNames" class="form-control" rows="11" style="resize:vertical;" readonly></textarea>
</div>
<!-- /Random -->
</div>
<!-- /Generators -->
</body>
</html>