<!DOCTYPE html>
<html lang="en">
<head>
<title>Twintails🎀 - Search Husbando</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="shortcut icon" href="https://i.imgur.com/NgV0KSf.png">
<style>
.gradient {
background: linear-gradient(90deg, #bee1fd 0%, rgb(124, 111, 241) 100%);
}
</style>
<style>
.topnav {
background-color:rgb(255, 146, 250);
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: rgb(255, 255, 255);
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: rgb(255, 146, 250);
color: white;
}
</style>
<div class="topnav gradient"> <!--Remove gradient for unblend-->
<a href="/">Home</a>
<a href="/search">Waifu Search</a>
<a href="/addcharacter">Add Character</a>
</div>
</head>
<style>
#myImg {
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
:root {
--main-bg-color: brown;
}
</style>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
background: #f2f2f2;
font-family: 'Open Sans', sans-serif;
}
</style>
<body class="gradient"">
<div class="container">
<h2>Search husbandos in the database</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Search Husbando</label>
<input type="email" onkeyup="getwaifu(this.value)" oninvalid="this.setCustomValidity('Type a husbando name pls')" onvalid="this.setCustomValidity('')" class="form-control"id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter a keyword">
<small id="emailHelp" class="form-text text-muted">Enter a husbando name.</small>
</div>
<div id="results"></div>
</form>
</div>
<script>
function getwaifu(keyword) {
let showResults = document.querySelector('#results')
if (keyword != '') {
fetch('http://localhost:8080/database/v1/husbandodb')
.then(res => res.json())
.then((out) => {
let output = Object.values(out.husbandoID).find(husbando => husbando.names.toLowerCase().includes(keyword.toLowerCase()))
if (output != undefined) {
showResults.innerHTML = "<a href='" + output.img_url + "'> <img id='myImg' style='' alt='husbando' height='200' src='" + output.img_url + " '></a> " + "<br>" + "<p1 style='font-size:30px'>" + output.names + "</p1>" ;
} else {
showResults.innerHTML = 'No Results found.'
}
}).catch(err => console.error(err));
} else {
showResults.innerHTML = 'Please enter a keyword to search!'
}
}
</script>
<style>
.fixed-header, .fixed-footer{
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
text-align: center;
}
</style>
<div class="fixed-footer">
<div class="container">If you're husbando isn't there, you can add it by pressing the "Add Character" button in the top left.</div>
</div>
</body>
</html>
I have this code which looks like:
I want to make it look more asthethic but idk how to because all the css is premade, I want to make it so I can freely customize it.