Untitled

avatar
unknown
plain_text
2 years ago
3.5 kB
4
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);">&times;</a>
            <h1>List of games sorted by ranking</h1>
        </div>

        <div id="main">
            <button class="openbtn" onclick="openNav()">&#9776; 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...