108 lines
2.9 KiB
HTML
108 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Search</title>
|
|
<link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml">
|
|
<style type="text/css">
|
|
|
|
body{
|
|
margin:0;
|
|
padding: 0;
|
|
|
|
color:#222;
|
|
//background-color:#888888;
|
|
background-color:#cccccc;
|
|
|
|
min-height:100vh;
|
|
|
|
display:grid;
|
|
grid-template-columns: 3fr 1fr;
|
|
grid-template-rows: 50px 1fr;
|
|
}
|
|
h3{
|
|
margin:0;
|
|
}
|
|
#header{
|
|
background-color:#333333;
|
|
|
|
display: grid;
|
|
grid-column: 1 / span 3;
|
|
grid-row: 1;
|
|
|
|
grid-template-columns: 3fr 1fr;
|
|
|
|
}
|
|
#header-left{
|
|
display:grid;
|
|
|
|
grid-template-columns: 1fr 800px;
|
|
|
|
}
|
|
#search-form{
|
|
grid-column: 2;
|
|
|
|
display: grid;
|
|
grid-template-columns: 1fr 0fr;
|
|
|
|
}
|
|
|
|
#search-box{
|
|
grid-column: 1;
|
|
align-self:center;
|
|
height:25px;
|
|
padding:0;
|
|
margin:0;
|
|
border:0;
|
|
|
|
}
|
|
#search-button{
|
|
grid-column: 2;
|
|
align-self:center;
|
|
height:25px;
|
|
|
|
padding-top:0;
|
|
padding-bottom:0;
|
|
border-style:solid;
|
|
border-width:1px;
|
|
}
|
|
|
|
#left{
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
|
|
#right{
|
|
|
|
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="header">
|
|
<div id="header-left">
|
|
<form id="search-form" action="/youtube.com/search">
|
|
<input type="text" name="query" id="search-box">
|
|
<input type="submit" value="Search" id="search-button">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="left">
|
|
</div>
|
|
|
|
|
|
<div id="right">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |