72 lines
3.4 KiB
HTML
72 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>BannerGen</title>
|
|
<link href="static/bootstrap.min.css" rel="stylesheet">
|
|
<script src="static/bootstrap.bundle.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="./">BannerGen</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="./">Home</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Upcoming Games
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<li><a class="dropdown-item" href="static/upcoming-games.html?league=hockey/nhl">NHL</a></li>
|
|
<li><a class="dropdown-item" href="static/upcoming-games.html?league=baseball/mlb">MLB</a></li>
|
|
<li><a class="dropdown-item" href="static/upcoming-games.html?league=football/nfl">NFL</a></li>
|
|
<li><a class="dropdown-item" href="static/upcoming-games.html?league=basketball/nba">NBA</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="about.html">About</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container my-5">
|
|
<h1>BannerGen</h1>
|
|
<form action="generate/image.png">
|
|
<div class="mb-3">
|
|
<label for="left_logo" class="form-label">Left image</label>
|
|
<input type="url" class="form-control" id="left_logo" name="left_logo" value="https://a.espncdn.com/i/teamlogos/nhl/500/min.png">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="left_color" class="form-label">Left background color</label>
|
|
<input type="color" class="form-control" id="left_color" name="left_color" value="#124734">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="right_logo" class="form-label">Right image</label>
|
|
<input type="url" class="form-control" id="right_logo" name="right_logo" value="https://a.espncdn.com/i/teamlogos/nhl/500/vgk.png">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="right_color" class="form-label">Right background color</label>
|
|
<input type="color" class="form-control" id="right_color" name="right_color" value="#344043">
|
|
</div>
|
|
<button id="submit" type="submit" class="btn btn-primary">Generate image</button>
|
|
</form>
|
|
<div id="result"></div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
document.querySelector('form').addEventListener('submit', function(event){
|
|
event.preventDefault();
|
|
document.getElementById('result').innerHTML = `<img src="generate/image.png?${new URLSearchParams(new FormData(event.target)).toString()}">`;
|
|
});
|
|
</script>
|
|
</html>
|