Untitled

avatar
unknown
plain_text
2 years ago
3.3 kB
2
Indexable
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Top 100 BG Graph</title>
    <!-- Pulsante per impostare la dark/light mode, avrebbe bisogno di più ottimizzazione -->
    <!-- <button id="dark-mode-toggle">Attiva 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;">
        <img id="backgroundImage" src="background.png" alt="Immagine di sfondo" />
        <h1>Networks Graph for Top 100 BoardGames from BoardGameGeek.com</h1>
        <h3>
            <!--  Hove over a game to highlight its connection (which means that players
            of the one game also like the other game). Click to display all the
            information about that game. -->
            <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>

    <div id="introduction" style="text-align: center; font-size:20px">
        <p class="large">Here are some instructions on how to navigate the graph:</p>
        <p class="large">
            Hove over a game-node to show a brief description of that game and the type
            of relation that he has with other games:
        </p>
        <p style="text-align: left; display: inline-block; font-size:25px">
            An <span style="background-color: orange;"><strong>orange link</strong></span> means that players of that
            game liked the other one, and viceversa [strongest connection].<br />
            A <span style="background-color: blue; color: white;">blue link</span> means that only the players of
            the selected game liked the other one.<br />
            A <span style="background-color: green">green link</span> means that the game is liked
            by the other game's players.
        </p>
        <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="popup1.png" style="width: 200px; margin-right: 10px; border-radius: 5px;"
                onclick="showPopupImage(this)" />
            <div class="overlay" onclick="hidePopupImage()">
                <img src="" />
            </div>
            <img src="popup2.png" style="width: 200px;border-radius: 5px;"onclick="showPopupImage(this)"/>
            <div class="overlay" onclick="hidePopupImage()">
              <img src="" />
            </div>
        </div>

        <button id="startButton"
            style="font-size: large; padding: 10px 20px;stroke: black; stroke-width: 30px ; border-radius: 5px; background-color: lightblue; color: rgb(0, 0, 0); cursor: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'  width=\'40\' height=\'48\' viewport=\'0 0 100 100\' style=\'fill:black;font-size:24px;\'><text y=\'50%\'>🚀</text></svg>') 16 0, auto;">
            Start exploring!
        </button>

    </div>




    <div id="graph" style="display: none;"></div>

    <script src="js/script.js" type="text/javascript"></script>
</body>

</html>
Editor is loading...