I have been reading up on various code and using it to make this web page for practice. I've learned a lot so far, but I've got a long way to go. So basically, my wife was sick of having to go to a bunch of different sites to find anime torrents, and having to search them all individually, so I thought there's got to be a way to combine it all into one process. Turns out it's not that easy, so what I ended up with was with a bunch of iframes. Some of the sites can be queried through URL parameters, so I have one function that will load a new src for the iframes with a search query from a text input field on the webpage.
This worked for about half of the sites. One site refuses to load in an iframe, so I made a function that launches a new tab with the search query parsed into the URL. And the last two sites, couldn't be queried from a URL, so one site is just the search page embedded in an iframe, and the other is just a long list of all the shows available on the site, but you can use ctrl+F to search that one.
That's the basic jist of what I've been doing, but I've also been trying to implement the HTML, CSS, and JavaScript I've been learning so it has some other code more focused on layout, effects, and accounting for different size screens and mobile devices and such. The only problem is I'm just trying things out and seeing what works, I have no idea if I'm doing it the right way. That's why I'd love it if somebody could look over my code and kind of point out anything I did weird or bad, so that I can learn the right way to do things. One thing I will say is that I didn't focus on many standards so it's missing stuff like the doctype and other information that would make it fail a validation test, so I'm not looking for critique on that too much unless it's going to cause a problem with the rest of the code. Also, I made this for the latest version of Chrome and did nothing to cater to any of the flaws of IE, seeing as it's most likely just for personal use and IE is junk anyways.
Here's the background image I used first in case you want to actually open it up:
Just put it in the root directory and name it bg.jpg.
<html>
<head>
<title>Anime Search Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
div.frames {
width: 915px;
height: 700px;
text-align: center;
position: relative;
margin: 40px 0 0 0;
padding: 0 10px 50px 10px;
border: 2px solid #000000;
background-color: rgba(60, 61, 61, 0.5);
font-size: 12pt;
font-weight: bold;
}
div.frames a {
color: #02afd6;
}
div.frames a:hover {
text-shadow: 2px 2px 2px #f409d9;
}
iframe {
width: 100%;
height: 100%;
border-style: none;
position: relative;
padding: 0;
margin: 0;
}
span.titles {
border-style: solid;
border-width: 2px 2px 0px 2px;
border-color: #02afd6;
padding: 5px 5px 0px 5px;
margin: 0px;
background-color: #2c0451;
color: #02afd6;
text-shadow: -2px 0 0 #000000, 0 2px 0 #000000, 2px 0 0 #000000, 0 -2px 0 #000000, 3px 3px 7px #f409d9;
font-size: 20pt;
font-weight: bold;
position: relative;
top: 1px;
}
div.toptitle {
border-style: solid;
border-width: 2px 2px 2px 2px;
border-color: #02afd6;
padding: 15px;
margin: 0 0 15px 0;
background-color: #2c0451;
color: #02afd6;
text-shadow: -2px 0 0 #000000, 0 2px 0 #000000, 2px 0 0 #000000, 0 -2px 0 #000000, 3px 3px 7px #f409d9;
font-size: 32pt;
font-weight: bold;
position: relative;
top: 0;
display: inline-block;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}
body {
background: url("bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #02afd6;
}
div.navbar {
position: relative;
top: 0;
display: inline-block;
margin: 0 auto;
padding: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}
ul.navbar li a {
display: block;
color: #02afd6;
text-align: center;
padding: 14px 14px 13px 14px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: rgba(44, 4, 81, 1);
text-shadow: -2px 0 0 #000000, 0 2px 0 #000000, 2px 0 0 #000000, 0 -2px 0 #000000, 3px 3px 7px #f409d9;
}
ul.navbar {
list-style-type:none;
overflow: hidden;
border-width: 2px 2px 2px 2px;
border-style: solid;
border-color: #02afd6;
padding: 0;
width: 100%;
color: #02afd6;
background-color: rgba(44, 4, 81, 0.7);
font-weight: bold;
font-size: 15pt;
margin: 0;
text-shadow: -2px 0 0 #000000, 0 2px 0 #000000, 2px 0 0 #000000, 0 -2px 0 #000000;
}
ul.navbar li {
float: left;
width: 200px;
border-right: 2px solid #02afd6;
padding: 0;
overflow: hidden;
}
ul.navbar li:last-child {
float: left;
width: 225px;
border-right: none;
padding: 0;
}
input.bgchange {
background-color: rgba(44, 4, 81, 0.7);
color: #02afd6;
width: 500px;
border: 2px solid #02afd6;
padding: 15px;
font-size: 12pt;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}
input.bgchange:focus {
background-color: rgba(44, 4, 81, 1);
}
div.colheader {
font-size: 20pt;
border-style: solid;
border-color: #000000;
text-shadow: -2px 0 0 #000000, 0 2px 0 #000000, 2px 0 0 #000000, 0 -2px 0 #000000;
font-weight: bold;
margin: 45px 0 0 0;
background-color: rgba(44, 4, 81, 0.7);
color: #02afd6;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}
.submitbuttons {
display: inline-block;
padding: 15px;
background-color: rgba(44, 4, 81, 0.7);
color: #02afd6;
border: 2px solid #02afd6;
margin: 0 10px 0 0;
font-size: 14pt;
font-weight: bold;
text-shadow: -1px 0 0 #000000, 0 1px 0 #000000, 1px 0 0 #000000, 0 -1px 0 #000000;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}
.submitbuttons:hover {
background-color: rgba(44, 4, 81, 1.0);
}
@media screen and (max-width: 1625px){
ul.navbar {
width: 200px;
}
ul.navbar li {
float: none;
border-right: none;
border-bottom: 2px solid #02afd6;
}
ul.navbar li:last-child {
float: none;
border-bottom: none;
}
div.frames {
float: none;
width: 97%;
}
div.colheader {
display: none;
}
}
</style>
<script>
function searchStuff() {
var srchtrm = String(document.getElementById('srchtrm').value);
document.getElementById('coalgirls').src = "https://coalgirls.wakku.to/?s=" + srchtrm;
document.getElementById('tpb').src = "https://thepiratebay.org/search/" + srchtrm +"/0/7/205";
document.getElementById('tpb2').src = "https://thepiratebay.org/search/" + srchtrm +"/0/7/208";
document.getElementById('tokyo').src = "https://www.tokyotosho.info/search.php?terms=" + srchtrm;
}
function searchStuffExt() {
var srchtrm = String(document.getElementById('srchtrm').value);
var baka = "https://www.bakabt.me/browse.php?q=" + srchtrm;
window.open(baka, '_blank');
}
function searchStuffBoth() {
var srchtrm = String(document.getElementById('srchtrm').value);
var baka = "https://www.bakabt.me/browse.php?q=" + srchtrm;
window.open(baka, '_blank');
document.getElementById('coalgirls').src = "https://coalgirls.wakku.to/?s=" + srchtrm;
document.getElementById('tpb').src = "https://thepiratebay.org/search/" + srchtrm +"/0/7/205";
document.getElementById('tpb2').src = "https://thepiratebay.org/search/" + srchtrm +"/0/7/208";
document.getElementById('tokyo').src = "https://www.tokyotosho.info/search.php?terms=" + srchtrm;
}
</script>
</head>
<body style="text-align:center;padding:0;margin:15px 0 0 0;">
<div id="top" style="position:relative;margin:0 auto;width:700;text-align:center;">
<div class="toptitle">Search Box</div>
<div style="position:relative;margin:0 0 15px 0;width:500px;display: inline-block;">
<input class="bgchange" type="text" name="srchtrm" id="srchtrm" value="Enter Search Term Here">
</div>
<div style="position:relative;width:100%;">
<input class="submitbuttons" type="button" value="Search Anime On Page" onclick="searchStuff()" >
<input class="submitbuttons" type="button" value="Open External Links" onclick="searchStuffExt()" >
<input class="submitbuttons" type="button" value="Both" onclick="searchStuffBoth()" >
</div>
</div>
<div style="padding:45px 0 45px 0;background-color: rgba(60,60,60,0.5);margin:25px 0 0 0;border-style:solid;border-color:black;border-width:2px 0 2px 0;text-align:center;">
<div class="colheader" style="float:left;border-width: 2px 2px 0 0;padding:10px 10px 10px 10px;">Manual Searches</div>
<div class="colheader" style="float:right;border-width: 2px 0 0 2px;padding:10px 10px 10px 10px;">Automatic Searches</div>
<div class="navbar">
<ul class="navbar">
<li><a href="#haruhead">Haruhichan</a></li>
<li><a href="#coalhead">CoalGirls</a></li>
<li><a href="#horrhead">HorribleSubs</a></li>
<li><a href="#tpbtv">TPB (TV)</a></li>
<li><a href="#tpbhdtv">TPB (HD TV)</a></li>
<li><a href="#tokyotosho">Tokyo Tosho</a></li>
</ul>
</div>
</div>
<div class="frames" style="float:left;clear:left">
<span class="titles"id="haruhead">Haruhichan</span>
<iframe src="http://haruhichan.com/page/search/anime.html" name="haruhichan"></iframe>
</div>
<div class="frames" style="float:right;clear:right">
<span class="titles" id="coalhead">CoalGirls</span>
<span style="float:right;position:relative;top:3px;"><a href="#top" >Top of Page</a></span>
<iframe src="https://coalgirls.wakku.to/?s=" id="coalgirls" name="coalgirls" ></iframe>
</div>
<div class="frames" style="float:left;">
<span class="titles" id="horrhead">HorribleSubs</span>
<span style="float:right;position:relative;top:3px;"><a href="#top" >Top of Page</a></span>
<iframe src="http://horriblesubs.info/shows/" id="horriblesubs" name="horriblesubs" style="top: -11px"></iframe>
</div>
<div class="frames" style="float:right;clear:right">
<span class="titles" id="tpbtv">TPB (TV Shows)</span>
<span style="float:right;position:relative;top:3px;"><a href="#top" >Top of Page</a></span>
<iframe id="tpb" name="tpb" src="http://thepiratebay.org/browse/205" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div class="frames" style="float:right">
<span class="titles" id="tpbhdtv">TPB (HD TV Shows)</span>
<span style="float:right;position:relative;top:3px;"><a href="#top" >Top of Page</a></span>
<iframe id="tpb2" name="tpb2" src="http://thepiratebay.org/browse/208" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div class="frames" style="float:left">
<span class="titles" id="tokyotosho">Tokyo Tosho</span>
<span style="float:right;position:relative;top:3px;"><a href="#top" >Top of Page</a></span>
<iframe id="tokyo" name="tokyo" src="https://www.tokyotosho.info/search.php" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
</body>
</html>
