Untitled
unknown
plain_text
2 years ago
3.5 kB
2
Indexable
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Top 100 BG Graph</title> <!-- Button to set dark/light mode, could use more optimization --> <!-- <button id="dark-mode-toggle">Activate Dark Mode</button> --> <script src="https://d3js.org/d3.v7.js"></script> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="my_header" style="text-align: center;"> <h1 style="font-size: 35px;">Networks Graph for Top 100 BoardGames from BoardGameGeek.com</h1> <h3> <button id="returnButton" style="font-size: large; padding: 10px 20px;stroke: black; stroke-width: 30px ; border-radius: 5px; background-color: lightblue; color: rgb(0, 0, 0);">Home Page</button> </h3> <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" style="color: rgb(0, 0, 0);">×</a> <h1>List of games sorted by ranking</h1> </div> <div id="main"> <button class="openbtn" onclick="openNav()">☰ Games list</button> </div> </div> <div id="introduction" style="text-align: center; font-size:20px"> <p class="large"> Interact with the graph by hovering the cursor over a node or by clicking on it.<br /> Hovering over a node lets you visualize the kind of connections that game has with other games,<br /> </p> <div class="boxed" style="text-align: left; display: inline-block; font-size:25px"> <span style="text-align: center; display: block;">Links color legend:</span><br /> A <span style="background-color: red; color: white;"><strong>red link</strong></span> means that players of that game liked the other one, and vice versa [strongest connection,<br /> this is what the graph shows by default without needing to interact with it.]<br /> <br /> A <span style="background-color: green; color: white;"><strong>green link</strong></span> means that the players of the selected game liked the other one.<br /><br /> A <span style="background-color: blue; color: white;"><strong>blue link</strong></span> means that the game is liked by the other game's players. </div> <p class="large">Click on a game to show a popup containing all the info about that game:</p> <div style="display: flex; justify-content: center;"> <img src="images/popup1.png" style="width: 200px; margin-right: 10px; border-radius: 5px;border: 1px solid black;" onclick="showPopupImage(this)" /> <div class="overlay" onclick="hidePopupImage()"> <img src="" /> </div> <img src="images/popup2.png" style="width: 200px;border-radius: 5px;border: 1px solid black;" onclick="showPopupImage(this)" /> <div class="overlay" onclick="hidePopupImage()"> <img src="" /> </div> </div> <br /> <button id="startButton"> <strong>Start exploring!</strong> </button> <p>Student: Massimiliano Patrizi 508637</p> </div> <div id="graph" style="display: none;"></div> <script src="js/script.js" type="text/javascript"></script> </body> </html>
Editor is loading...