yt_search_template.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

<!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>