https://www.yachtornyacht.com/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <!-- Google tag (gtag.js) -->

4
5  <script async src="https://www.googletagmanager.com/gtag/js?id=

5G-PRT0LHC5NC

5"></script>
6  

6<script>
7    

7window.dataLayer = window.dataLayer || [];
8    function gtag(){dataLayer.push(arguments);}
9    gtag('js', new Date());
10
11    gtag('config', '

11G-PRT0LHC5NC

11');
12  

12</script>

12
13
14  <meta charset="UTF-8">
15  <meta name="viewport" content="width=device-width, initial-scale=1.0">
16  <title>Yacht or Nyacht?</title>
17
18  <!-- Import Styles -->
19  <link rel="stylesheet" type="text/css" href="style.css" />
20  <link rel="preconnect" href="https://fonts.googleapis.com">
21  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
23
24  <!-- Import data and js -->
25  

25<script src="./data.js"></script>

25
26  

26<script src="./shared.js"></script>

26
27  

27<script src="./app.js"></script>

27
28  

28<script src="./index.js"></script>

28
29</head>
30
31<body>
32  <div class="page-container">
33    <header>
34      <div class="nav-bar">
35        <div class="title">
36          Yacht or Nyacht?
37        </div>
38
39        <div class="menu">
40          <button id="menuBtn" class="menu-btn">
41            <svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
42              <path d="M4 6H20M4 12H20M4 18H20" stroke="#343434" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
43            </svg>
44          </button>
45
46          <div id="menuList" class="menu-list" style="display:none;">
47          </div>
48        </div>
49      </div>
50
51      <div class="filters">
52        <div>
53          <div class="score-filters">
54            <button class="filter score-filter active" lower="0" upper="100">All Songs</button>
55
56            <button class="filter score-filter essential-filter" lower="90" upper="100">Essentials</button>
57
58            <button class="filter score-filter yacht-filter" lower="50" upper="100">Yacht Rock</button>
59
60            <button class="filter score-filter nyacht-filter" lower="0" upper="50">Nyacht Rock</button>
61          </div>
62        </div>
63
64        <div>
65          <input class="text-filter" placeholder="Filter by artist or title..." type="search" id="list-search" name="q" />
66        </div>
67      </div>
68    </header>
69
70    <div class="song-list">
71      <div class="song-row header-row">
72        <div>
73          <span prop="yachtski" class="sort-filter">Yachtski</span>
74        </div>
75        <div class="left-align">
76          <span prop="artist" class="sort-filter">Artist</span> -
77          <span prop="title" class="sort-filter">Title</span>
78        </div>
79        <div>
80          <span prop="year" class="sort-filter">Year</span>
81        </div>
82        <div class="hidden-sm">
83          <span prop="jd_score" class="sort-filter">JD</span>
84        </div>
85        <div class="hidden-sm">
86          <span prop="hunter_score" class="sort-filter">Hunter</span>
87        </div>
88        <div class="hidden-sm">
89          <span prop="steve_score" class="sort-filter">Steve</span>
90        </div>
91        <div class="hidden-sm">
92          <span prop="dave_score" class="sort-filter">Dave</span>
93        </div>
94        <div class="hidden-md">
95          <span prop="episode" class="sort-filter">Ep #</span>
96        </div>
97      </div>
98
99      <div id="songList">
100      </div>
101    </div>
102  </div>
103</body>
104</html>