The official website for the open-source compatibility layer fpPS4
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fixed some "teleporation" when (re)loading the page + code cleanup

+35 -33
+31 -3
public_html/compatibility/index.html
··· 24 24 .progressBarInfo {opacity: 0;} 25 25 </style> 26 26 <body> 27 - <header id="header"></header> 27 + <header id="header"> 28 + <style> 29 + header { 30 + position: fixed; 31 + height: 3rem; 32 + } 33 + </style> 34 + </header> 28 35 <main class="main"> 29 36 <h1 class="mainText">Game Compatibility List</h1> 30 37 <h3 class="smolMainText">These are the games that have been tested with <span style="color: #f0e74a;">fp</span>PS4.<br>Click on an image to view the game's GitHub issue.<br>The database is updated every 20 minutes.</h3> ··· 42 49 <div class="searchBarContainer"> 43 50 <input autocomplete="off" type="text" name="fpps4" class="searchBar" id="search" placeholder="Search TITLE / CUSA"> 44 51 <input autocomplete="off" type="number" min="1" placeholder="1/1" name="fpps4" class="pageSelector" id="search2"> 45 - <!-- chrome, stop thinking that an text and number field is used to input passwords... please--> 46 52 </div> 47 53 48 54 <div class="optionButtons"> ··· 58 64 <div class="gameContainer skeletonAnimation"></div> 59 65 <div class="gameContainer skeletonAnimation"></div> 60 66 <div class="gameContainer skeletonAnimation"></div> 67 + <div class="gameContainer skeletonAnimation"></div> 68 + <div class="gameContainer skeletonAnimation"></div> 69 + <div class="gameContainer skeletonAnimation"></div> 70 + <div class="gameContainer skeletonAnimation"></div> 71 + <div class="gameContainer skeletonAnimation"></div> 72 + <div class="gameContainer skeletonAnimation"></div> 73 + <div class="gameContainer skeletonAnimation"></div> 74 + <div class="gameContainer skeletonAnimation"></div> 75 + <div class="gameContainer skeletonAnimation"></div> 76 + <div class="gameContainer skeletonAnimation"></div> 77 + <div class="gameContainer skeletonAnimation"></div> 78 + <div class="gameContainer skeletonAnimation"></div> 79 + <div class="gameContainer skeletonAnimation"></div> 80 + <div class="gameContainer skeletonAnimation"></div> 81 + <h4 class="totalTimeText">0 results in 0ms </h4> 61 82 </div> 62 83 <div class="pageBarContainer"> 63 84 <img class="pageBarImage" id="pageBarBack" onclick="pageBarBack()" src="../images/arrow_back.svg" alt=""> ··· 69 90 <h5 style="text-align: center; font-size: 0.8rem;">Trademarks and logos displayed on this website are the property of their respective owners.<br> The use of any third-party trademarks, brand names, product names, and logos is for<br> informational purposes only and does not imply endorsement or sponsorship.</h5> 70 91 <br> 71 92 </main> 72 - <footer id="footer"></footer> 93 + <footer id="footer"> 94 + <style> 95 + footer { 96 + height: 3.65rem; 97 + margin-top: 3rem; 98 + } 99 + </style> 100 + </footer> 73 101 <script defer src="app.js"></script> 74 102 </body> 75 103 </html>
+4 -30
public_html/parts/navbar.html
··· 8 8 justify-content: space-between; 9 9 width: 100%; 10 10 height: 3rem; 11 - /* margin-top: 1.5rem; */ 12 11 background-color: var(--main1); 13 12 border: 0.05rem solid var(--border); 14 13 border-radius: 0 0 0.5rem 0.5rem; ··· 51 50 border-radius: 0.25rem; 52 51 } 53 52 54 - /* .boostyLogoSmol, 55 - .boostyLogo { 56 - width: 5.7rem; 57 - height: 2.5rem; 58 - border-radius: 0.5rem; 59 - } 60 - .boostyLogoSmol {display: none;} */ 61 - 62 53 .smolImage {height: 1.5rem; width: 1.5rem;} 63 54 .bigImage {height: 2.5rem; width: 2.5rem;} 64 - .gh-logo, .dc-logo {padding: 0.38rem;} /* fix icon hover */ 55 + .gh-logo, .dc-logo {padding: 0.38rem;} 65 56 .dc-logo {margin-right: 1.2vw;} 66 57 67 - /* @media screen and (max-width: 700px) { 68 - .boostyLogoSmol { 69 - display: block; 70 - width: 2rem; 71 - margin: 0 0.5rem 0 0.5rem; 72 - } 73 - 74 - .boostyLogo { 75 - display: none; 76 - } 77 - } */ 78 - 79 - .lightMode .navbar-right, .lightMode .logo {filter: invert(0);} /* light mode */ 80 - .lightMode .logo span {filter: invert(0);} /* light mode */ 81 - .menu-icon:hover, .gh-logo:hover, .dc-logo:hover, .lightModeButton:hover, .logo:hover, .boostyLogo:hover {background-color: #00000014;}/* hover effect */ 58 + .lightMode .navbar-right, .lightMode .logo {filter: invert(0);} 59 + .lightMode .logo span {filter: invert(0);} 60 + .menu-icon:hover, .gh-logo:hover, .dc-logo:hover, .lightModeButton:hover, .logo:hover {background-color: #00000014;}/* hover effect */ 82 61 </style> 83 62 <a href="https://fpps4.net" class="logo"> 84 63 <span style="color: #fff53c; font-weight: 500;">fp</span><span style="font-weight: 500;">PS4</span> ··· 98 77 <img src="https://fpps4.net/parts/images/dark_mode.svg" id="darkModeIcon" style="opacity: 0;" class="bigImage" alt="Dark mode toggle"> 99 78 <img src="https://fpps4.net/parts/images/light_mode.svg" id="lightModeIcon" style="display: none;" class="bigImage" alt="Light mode toggle"> 100 79 </div> 101 - <!-- <div class="seperator"></div> 102 - <a href="https://boosty.to/fpps4" target="_blank"> 103 - <img src="https://fpps4.net/parts/images/boosty.svg" class="boostyLogo"> 104 - <img src="https://fpps4.net/parts/images/boostySmol.svg" class="boostyLogoSmol"> 105 - </a> --> 106 80 </div>