quack/main.html at main · W4IT-Dev/quack · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quack!</title>

    <meta name="theme-color" content="rgb(0,0,0);">

    <link rel="stylesheet" href="style.css">

    <script src="script/nav.js" defer></script>

    <script src="search/vqd.js" defer></script>
    <script src="search/all.js" defer></script>
    <script src="search/images.js" defer></script>
    <script src="search/videos.js" defer></script>
    <script src="search/news.js" defer></script>
    <script src="search/shopping.js" defer></script>
</head>

<body>
    <img src="icon.png" width="137px" alt="Quack!">
    <div id="search">
        <div id="searchBarWrapper">
            <input type="text" name="searchInput" placeholder="Search" id="searchInput" class="navItemVertical"
                data-navDown="#searchResultTypes .selectedOption" data-translate="search_input_placeholder">
            <!-- <div id="autoComplete" class="navItemVertical"></div> -->
        </div>
        <div id="searchResultTypes" class="">
            <div id="all" class="selectedOption navItemVertical navItemHorizontal"
                data-navDown="#searchResults .search-result" data-navUp="#searchInput" data-navRight="#images"
                tabindex="0">
                <svg class="searchResultTypesImage" width="20" height="20" viewBox="0 0 16 16" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M6 1C2.68629 1 0 3.68629 0 7C0 10.3137 2.68629 13 6 13C7.64669 13 9.13845 12.3366 10.2226 11.2626L14.7873 14.8403C15.1133 15.0959 15.5848 15.0387 15.8403 14.7127C16.0958 14.3867 16.0387 13.9153 15.7126 13.6597L11.1487 10.0826C11.6892 9.18164 12 8.12711 12 7C12 3.68629 9.31371 1 6 1ZM1.5 7C1.5 4.51472 3.51472 2.5 6 2.5C8.48528 2.5 10.5 4.51472 10.5 7C10.5 9.48528 8.48528 11.5 6 11.5C3.51472 11.5 1.5 9.48528 1.5 7Z"
                        fill="currentColor"></path>
                </svg>
                <span>All</span>
            </div>
            <div id="images" class="navItemHorizontal" data-navDown="#searchResults .search-result"
                data-navUp="#searchInput" data-navLeft="#all" data-navRight="#videos" tabindex="0">
                <svg class="searchResultTypesImage" width="20" height="20" viewBox="0 0 16 16" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M4.5 7C5.32843 7 6 6.32843 6 5.5C6 4.67157 5.32843 4 4.5 4C3.67157 4 3 4.67157 3 5.5C3 6.32843 3.67157 7 4.5 7Z"
                        fill="currentColor"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M3.25 1C1.45507 1 0 2.45507 0 4.25V11.75C0 13.5449 1.45507 15 3.25 15H12.75C14.5449 15 16 13.5449 16 11.75V10.2593C16.0001 10.2531 16.0001 10.2469 16 10.2407V4.25C16 2.45507 14.5449 1 12.75 1H3.25ZM14.5 8.43928V4.25C14.5 3.2835 13.7165 2.5 12.75 2.5H3.25C2.2835 2.5 1.5 3.2835 1.5 4.25V11.75C1.5 11.9563 1.5357 12.1543 1.60126 12.3381L5.96967 7.96967C6.26256 7.67678 6.73744 7.67678 7.03033 7.96967L8.00003 8.93937L10.9697 5.96967C11.2626 5.67678 11.7375 5.67678 12.0304 5.96967L14.5 8.43928ZM9.06069 10L10.0303 10.9697C10.3232 11.2626 10.3232 11.7374 10.0303 12.0303C9.73744 12.3232 9.26256 12.3232 8.96967 12.0303L6.5 9.56066L2.66192 13.3987C2.84572 13.4643 3.04369 13.5 3.25 13.5H12.75C13.7165 13.5 14.5 12.7165 14.5 11.75V10.5606L11.5001 7.56066L9.06069 10Z"
                        fill="currentColor"></path>
                </svg>
                <span>Images</span>
            </div>
            <div id="videos" class="navItemHorizontal" data-navDown="#searchResults .search-result"
                data-navUp="#searchInput" data-navLeft="#images" data-navRight="#news" tabindex="0">
                <svg class="searchResultTypesImage" width="20" height="20" viewBox="0 0 16 16" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M13.4887 5.55027C15.3801 6.63605 15.3801 9.36446 13.4887 10.4502L6.23148 14.6164C4.34816 15.6976 2 14.338 2 12.1664L2 3.83407C2 1.66248 4.34816 0.302917 6.23148 1.38408L13.4887 5.55027ZM12.7419 9.14937C13.629 8.64011 13.629 7.36041 12.7419 6.85115L5.48468 2.68496C4.60135 2.17787 3.5 2.81554 3.5 3.83407L3.5 12.1664C3.5 13.185 4.60135 13.8226 5.48468 13.3156L12.7419 9.14937Z"
                        fill="currentColor"></path>
                </svg>
                <span>Videos</span>
            </div>
            <div id="news" class="navItemHorizontal" data-navDown="#searchResults .search-result"
                data-navUp="#searchInput" data-navLeft="#videos" data-navRight="#shopping" tabindex="0">
                <svg class="searchResultTypesImage" width="20" height="20" viewBox="0 0 16 16" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M3 8.25C3 7.83579 3.33579 7.5 3.75 7.5H8.25C8.66421 7.5 9 7.83579 9 8.25C9 8.66421 8.66421 9 8.25 9H3.75C3.33579 9 3 8.66421 3 8.25Z"
                        fill="currentColor"></path>
                    <path
                        d="M3.75 10.5C3.33579 10.5 3 10.8358 3 11.25C3 11.6642 3.33579 12 3.75 12H8.25C8.66421 12 9 11.6642 9 11.25C9 10.8358 8.66421 10.5 8.25 10.5H3.75Z"
                        fill="currentColor"></path>
                    <path
                        d="M3 4.75C3 4.33579 3.33579 4 3.75 4H5.25C5.66421 4 6 4.33579 6 4.75V5.25C6 5.66421 5.66421 6 5.25 6H3.75C3.33579 6 3 5.66421 3 5.25V4.75Z"
                        fill="currentColor"></path>
                    <path
                        d="M7.75 4C7.33579 4 7 4.33579 7 4.75V5.25C7 5.66421 7.33579 6 7.75 6H8.25C8.66421 6 9 5.66421 9 5.25V4.75C9 4.33579 8.66421 4 8.25 4H7.75Z"
                        fill="currentColor"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M0 3C0 1.89543 0.895431 1 2 1H10C11.1046 1 12 1.89543 12 3H14C15.1046 3 16 3.89543 16 5V12.25C16 13.7688 14.7688 15 13.25 15H3.25C1.45507 15 0 13.5449 0 11.75V3ZM10.7999 13.5H3.25C2.2835 13.5 1.5 12.7165 1.5 11.75V3C1.5 2.72386 1.72386 2.5 2 2.5H10C10.2761 2.5 10.5 2.72386 10.5 3V12.25C10.5 12.7001 10.6081 13.125 10.7999 13.5ZM12 4.5V12.25C12 12.9404 12.5596 13.5 13.25 13.5C13.9404 13.5 14.5 12.9404 14.5 12.25V5C14.5 4.72386 14.2761 4.5 14 4.5H12Z"
                        fill="currentColor"></path>
                </svg>
                <span>News</span>
            </div>
            <div id="shopping" class="navItemHorizontal" data-navDown="#searchResults .search-result"
                data-navUp="#searchInput" data-navLeft="#news" tabindex="0">
                <svg class="searchResultTypesImage" width="20" height="20" viewBox="0 0 16 16" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M4.74994 4.5V4.25C4.74994 3.8232 4.834 3.40059 4.99733 3.00628C5.16066 2.61197 5.40005 2.25369 5.70184 1.9519C6.00363 1.65011 6.36191 1.41072 6.75622 1.24739C7.15053 1.08406 7.57314 1 7.99994 1C8.42674 1 8.84935 1.08406 9.24366 1.24739C9.63797 1.41072 9.99625 1.65011 10.298 1.9519C10.5998 2.25369 10.8392 2.61197 11.0025 3.00628C11.1659 3.40059 11.2499 3.82321 11.2499 4.25V4.5H13.1311C14.1502 4.5 15.0064 5.26627 15.1189 6.27914L15.6869 11.3911C15.9008 13.3163 14.3938 15 12.4568 15H3.54311C1.60607 15 0.0990778 13.3163 0.312988 11.3911L0.880983 6.27914C0.993524 5.26627 1.84965 4.5 2.86875 4.5H4.74994ZM7.33024 2.63321C7.54256 2.54526 7.77013 2.5 7.99994 2.5C8.22975 2.5 8.45732 2.54527 8.66964 2.63321C8.88196 2.72116 9.07487 2.85006 9.23738 3.01256C9.39988 3.17507 9.52878 3.36799 9.61673 3.58031C9.70467 3.79262 9.74994 4.02019 9.74994 4.25V4.5H6.24994V4.25C6.24994 4.02019 6.2952 3.79262 6.38315 3.5803C6.4711 3.36798 6.6 3.17507 6.7625 3.01256C6.925 2.85006 7.11792 2.72116 7.33024 2.63321ZM4.74994 6V7.25C4.74994 7.66421 5.08573 8 5.49994 8C5.91415 8 6.24994 7.66421 6.24994 7.25V6H9.74994V7.25C9.74994 7.66421 10.0857 8 10.4999 8C10.9142 8 11.2499 7.66421 11.2499 7.25V6H13.1311C13.3859 6 13.6 6.19157 13.6281 6.44478L14.1961 11.5567C14.3113 12.5934 13.4998 13.5 12.4568 13.5H3.54311C2.50009 13.5 1.68863 12.5934 1.80381 11.5567L2.37181 6.44478C2.39994 6.19157 2.61398 6 2.86875 6H4.74994Z"
                        fill="currentColor"></path>
                </svg>
                <span>Shopping</span>
            </div>
        </div>
    </div>
    <div id="searchResults" class=""></div>
</body>

</html>