<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital@1&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap" rel="stylesheet">
</head>
<body>
  <div class="pinned-block">
  <section class="container-slanted container-fluid m-0 px-0">
    <div id="header">
    <img src="/assets/rhythmhubrwhite.svg" onclick="window.location.href='https://rhythm-hub.com'" alt="Logo" class="logo">
    <h1 class="py-5 sitetop">RHYTHM HUB</h1>
        <div class="filters filter-button-group button-group">
          <button class="menubutton button is-checked allbutton active" data-filter="*">All</button>
          <button class="menubutton button button2" data-filter=".button">Button</button>
          <button class="menubutton button dancebutton" data-filter=".dance">Dance</button>
          <button class="menubutton button touchbutton" data-filter=".touch">Touchscreen</button>
          <button class="menubutton button allbutton" data-filter=".US">US</button>
          <button class="menubutton button allbutton" data-filter=".JP">JP</button>
          <button class="menubutton button allbutton" onclick="window.open('https://iknoweverything.cargo.site/Carter')">About</button>
        </div>
            <div id="mobilemenu">
              <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars" style="font-size:50px;color:white"></i>
              </a>
        <div class="filters filter-button-group button-group" id="myLinks">
          <button class="mobilemenu button is-checked allbutton active" data-filter="*">All</button>
          <button class="mobilemenu button button2" data-filter=".button">Button</button>
          <button class="mobilemenu button dancebutton" data-filter=".dance">Dance</button>
          <button class="mobilemenu button touchbutton" data-filter=".touch">Touchscreen</button>
          <button class="mobilemenu button allbutton" data-filter=".US">US</button>
          <button class="mobilemenu button allbutton" data-filter=".JP">JP</button>
          <button class="mobilemenu button allbutton" onclick="window.location.href='about.html'">About</button>
        </div>
      </div>
    </div>
  </div>
    <div class="row">
    <div class="container col-12 content grid d-flex w-100">
    <div class="grid-item button US"> <!--Game containter for sorting-->
    <div class="slanted"> <!--Adds slanted angle-->
        <div class="image-wrapper reverse-slant"> <!--Removes slant on objects contained inside-->
            <img src="/assets/sdvx.png" alt="sdvx attract image" class="cvrimg">
        </div>
    <div id="title">
        <h2> Sound Voltex 6: Exceed Gear </h2>
    </div>
    </div>
    <div class="slanted" id="text">
      <img src="/assets/background.svg" alt="background art" class="background">
      <div class="body">
      <h2>DJ Button Game</h2>
      <p>Version Release Date: April 7, 2021</p>
      <p>Sound Voltex or SDVX is one of the largest arcade rhythm games as of late. With 6 buttons and 2 knobs to control the sound of the music, this game offers a fun and unique experience that entertains first-timers and challenges
         rhythm game veterans. The machines are found in almost every Round1 in the US.</p>
      <p>Overall Difficulty: Medium</p>
      <button class="pagebutton" onclick="window.location.href='sdvx.html'">Learn More</button>
      </div>
        <div>
        <img src="/assets/sdvx-svg.svg" alt="sdvx cabinet" class="svg-cab">
        </div>
    </div>
  </div>
  <div class="grid-item dance US">
  <div class="slanted">
      <div class="image-wrapper reverse-slant">
          <img data-src="/assets/ddra20.png" alt="ddr attract image" class="stack lazy-load">
      </div>
  <div id="title">
      <h2> Dance Dance Revolution A20+ </h2>
  </div>
  </div>
  <div class="slanted" id="text">
    <img src="/assets/background.svg" alt="background art" class="background">
    <div class="body">
    <h2>4-panel Dance Game</h2>
    <p>Version Release Date: July 1, 2020</p>
    <p>Dance Dance Revolution or DDR for short is a game featuring 4 pads in an up-down-left-right configuration. It's one of the easiest rhythm games to find in America, both Round1
      and Dave & Buster's carry the latest version connected to official servers. Lots of small arcades will also have a DDR machine though these will likely be older versions, good for nostalgia.</p>
    <p>Overall Difficulty: Hard</p>
    <button class="pagebutton" onclick="window.location.href='ddr.html'">Learn More</button>
    </div>
      <div>
      <img src="/assets/ddr-svg.svg" alt="ddr cabinet" class="svg-cab">
      </div>
  </div>
</div>
<div class="grid-item dance US">
<div class="slanted">
    <div class="image-wrapper reverse-slant">
        <img data-src="/assets/piu.png" alt="piu attract image" class="stack lazy-load">
    </div>
<div id="title">
    <h2> Pump It Up XX </h2>
</div>
</div>
<div class="slanted" id="text">
  <img src="/assets/background.svg" alt="background art" class="background">
  <div class="body">
  <h2>5-panel Dance Game</h2>
  <p>Version Release Date: January, 2020</p>
  <p>Pump it Up or PIU is a dance game with 5 buttons, one at the center and one in each of the diagonal corners. It has become the long standing rival of DDR. While both games can support two players at once,
     PIU is more infamous for its "Doubles" mode. In doubles, one player takes over the whole machine, controlling all 10 panels at once. PIU can be found in most Round1 and Dave & Buster's as well as some smaller arcades, almost all of which are connected to official servers.</p>
  <p>Overall Difficulty: Hard</p>
  <button class="pagebutton" onclick="window.location.href='piu.html'">Learn More</button>
  </div>
    <div>
    <img src="/assets/piu-svg.svg" alt="piu cabinet" class="svg-cab">
    </div>
</div>
</div>
<div class="grid-item dance US">
<div class="slanted">
    <div class="image-wrapper reverse-slant">
        <img data-src="/assets/dancerush.png" alt="dancerush attract image" class="stack lazy-load">
    </div>
<div id="title">
    <h2>DanceRush Stardom</h2>
</div>
</div>
<div class="slanted" id="text">
  <img src="/assets/background.svg" alt="background art" class="background">
  <div class="body">
  <h2>Freestyle Dance Game</h2>
  <p>Version Release Date: March 3, 2018</p>
  <p>DanceRush is perhaps one of the most unique rhythm games. Rather than featuring panels, the game uses a pad with infrared sensors to locate the aproximate location of each foot. This leads to gameplay that feels more akin to actual
  dancing than a rhythm game. While the actual scoring and charting of this game are rather easy, DanceRush's unique infrared system allows for players to freestyle while playing with ease. In fact, most
     competitions feature a panel of judges that rate the competitor's performance on top of the game's scoring.</p>
  <p>Overall Difficulty: Easy*</p>
  <button class="pagebutton">Coming Soon</button>
  </div>
    <div>
    <img src="/assets/dancerush-svg.svg" alt="dancerush cabinet" class="svg-cab">
    </div>
</div>
</div>
<div class="grid-item button US">
<div class="slanted">
    <div class="image-wrapper reverse-slant">
        <img data-src="/assets/bistrover.png" alt="iidx attract image" class="stack lazy-load">
    </div>
<div id="title">
    <h2> Beatmania IIDX 28: Bistrover </h2>
</div>
</div>
<div class="slanted" id="text">
  <img src="/assets/background.svg" alt="background art" class="background">
  <div class="body">
  <h2>DJ Button Game</h2>
  <p>Version Release Date: October 28, 2020</p>
  <p>While DDR is known as the grandfather of dancing games, Beatmania is the grandfather of button games. Beatmania was released on the last day of 1997 and featured 5 buttons and a DJ scratch disk. The game was extremely popular and was
     shortly succeeded by its, "child" Beatmania II deluxe or IIDX in 1999. This game now had 7 buttons instead of the previous 5 along with the DJ scratch disk. IIDX is found in almost if not all US Round1 Locations.</p>
  <p>Overall Difficulty: Hard</p>
  <button class="pagebutton" onclick="window.location.href='iidx.html'">Learn More</button>
  </div>
    <div>
    <img src="/assets/iidx-svg.svg" alt="iidx cabinet" class="svg-cab">
    </div>
</div>
</div>
<div class="grid-item touch US">
<div class="slanted">
    <div class="image-wrapper reverse-slant">
        <img data-src="/assets/wacca.png" alt="wacca attract image" class="stack lazy-load">
    </div>
<div id="title">
    <h2> Wacca Lily R</h2>
</div>
</div>
<div class="slanted" id="text">
  <img src="/assets/background.svg" alt="background art" class="background">
  <div class="body">
  <h2>Circular Touchscreen Game</h2>
  <p>Version Release Date: March 11, 2021</p>
  <p>Wacca is the newest rhythm game on this list, with its first release in July of 2019. The game has a circular screen with a cone of touch sensitive panels protruding from it. Due to its extremely new release not even all Round1 Locations, the
     Mecca of rhythm games in America, have it, though many will soon if not already.</p>
  <p>Overall Difficulty: Medium</p>
  <button class="pagebutton">Coming Soon</button>
  </div>
    <div>
    <img src="/assets/wacca-svg.svg" alt="wacca cabinet" class="svg-cab">
    </div>
</div>
</div>
<div class="grid-item button touch US">
<div class="slanted">
    <div class="image-wrapper reverse-slant">
        <img data-src="/assets/pdiva.png" alt="project diva attract image" class="stack lazy-load">
    </div>
<div id="title">
    <h2> Project Diva Arcade: Future Tone </h2>
</div>
</div>
<div class="slanted" id="text">
  <img src="/assets/background.svg" alt="background art" class="background">
  <div class="body">
  <h2>Vocaloid Rhythm Game</h2>
  <p>Version Release Date: November 21, 2013</p>
  <p>Project Diva features the popular vocaloid Hatsune Miku and her ensemble of friends. Songs in this game are exclusively vocaloid based, allowing for many Project Diva exclusives.
     This game is based off its more popular release on the playstation, pulling symbols directly from its counterpart.</p>
  <p>Overall Difficulty: Easy</p>
   <button class="pagebutton" onclick="window.location.href='pdiva.html'">Learn More</button>
  </div>
    <div>
    <img src="/assets/projectdiva-svg.svg" alt="PD cabinet" class="svg-cab">
    </div>
</div>
</div>
<div class="grid-item button US">
<div class="slanted">
    <div class="image-wrapper reverse-slant">
        <img data-src="/assets/gc4.png" alt="groove coaster attract image" class="stack lazy-load">
    </div>
<div id="title">
    <h2>Groove Coaster 4 MAX</h2>
</div>
</div>
<div class="slanted" id="text">
  <img src="/assets/background.svg" alt="background art" class="background">
  <div class="body">
  <h2>Joystick Button Game</h2>
  <p>Version Release Date: March 29, 2018</p>
  <p>Groove Coaster is a former mobile rhythm game that received an arcade version in November 2013. It features two joysticks with buttons on top and a vertical screen orientation. The game is also one of the only if not the only rhythm game to feature invisible bonus notes.
  Ad-lib notes are invisible, but can be obtained with ease by tapping to the rhythm when no other notes are present. Fortunately, they are not necessary to pass, and do not break combo if you happen to miss one.</p>
  <p>Overall Difficulty: Easy</p>
  <button class="pagebutton">Coming Soon</button>
  </div>
    <div>
    <img src="/assets/gc-svg.svg" alt="gc cabinet" class="svg-cab">
    </div>
</div>
</div>
<div class="grid-item button JP">
<div class="slanted">
    <div class="image-wrapper reverse-slant">
        <img data-src="/assets/popn.png" alt="pop'n attract image" class="stack lazy-load">
    </div>
<div id="title">
    <h2> Pop'n Music: Kaimei Riddles </h2>
</div>
</div>
<div class="slanted" id="text">
  <img src="/assets/background.svg" alt="background art" class="background">
  <div class="body">
  <h2>9 button Game</h2>
  <p>Version Release Date: December 9, 2020</p>
  <p>Pop'n stands with IIDX and DDR as one of the oldest arcade rhythm games still around today. Sadly, this game is not available in the US at least in arcade form. It features a whopping 9 buttons, color coded for easier understanding.
   The game features the most difficulty levels of any rhythm game, scaling from 1-50. It also features characters animated in a cute, storybook style on every song.</p>
   <p>Overall Difficulty: Hard</p>
   <button class="pagebutton">Coming Soon</button>
  </div>
    <div>
    <img src="/assets/popn-svg.svg" alt="popn cabinet" class="svg-cab">
    </div>
</div>
</div>
  </div>
  </div>
    <div class="slanted foot" id="footer">
      <div class="row"> <!-- Footer offset -->
        <div class="column" id="backtotop">
          <img src="/assets/backtotop.svg" onclick="window.location.href='https://rhythm-hub.com'" class="btticon">
          <h2 class="btticon" id"btttext">Back to Top</h2>
        </div>
        <div class="column" id="info">
          <button class="footbutton" onclick="window.location.href='sdvx.html'">Sound Voltex</button>
          <button class="footbutton" onclick="window.location.href='ddr.html'">Dance Dance Revolution</button>
          <button class="footbutton" onclick="window.location.href='piu.html'">Pump It Up</button>
          <button class="footbutton">Dancerush</button>
          <button class="footbutton" onclick="window.location.href='iidx.html'">Beatmania IIDX</button>
          <button class="footbutton">Wacca</button>
          <button class="footbutton" onclick="window.location.href='pdiva.html'">Project Diva</button>
          <button class="footbutton">Groove Coaster</button>
          <button class="footbutton" onclick="window.location.href='popn.html'">Pop'n Music</button>
        </div>
      </div>
    </div>
  </section>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
  <script type="text/javascript" src="/js/sort.js"></script>
  <script type="text/javascript" src="/js/lazyload.js"></script>
  <script type="text/javascript" src="/js/isInViewport.js"></script>
  <script type="text/javascript" src="/js/autopause.js"></script>
  <script type="text/javascript" src="/js/forceTopReload.js"></script>
  <script type="text/javascript" src="/js/mobilemenu.js"></script>
</body>
</html>
