algorithms-visualized/index.html at main · oscar-jiang/algorithms-visualized · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>


<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Algorithms Visualized</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="styles/header.css">
    <link rel="stylesheet" href="styles/general.css">
    <link rel="stylesheet" href="styles/sidebar.css">
    <link rel="stylesheet" href="styles/home-page.css">
    <link rel="stylesheet" href="styles/application-preview.css">
  </head>

  <body>
    <div class="header">
        <div class="left-section">
            <p class="home-algorithms">Algorithms Visualized</p>
        </div>

        <div class="middle-section">
            <button class="base-button-header js-home-button">Home</button>
            <button class="base-button-header js-about-button">
              <div class="about-github-container">
                <span class="about-button-about-text">About</span>
                <img src="images/github.svg">
              </div>
            </button>
        </div>
    </div>

    <div class="sidebar">
        <button class="base-button-sidebar js-graph-editor-button"><img src="images/graph-editor-icon.svg"> Graph Editor</button>
        <button class="base-button-sidebar js-h-h-button"><img src="images/havel-hakimi-icon.svg"> Havel-Hakimi Game</button>
        <button class="base-button-sidebar js-sorting-button"><img src="images/sorting-algo-icon.svg"> Sorting</button>
    </div>

    <div class="home-page-main-container">
      <div class="home-page-title-text">
        <h2>Discover unique ways of looking at...</h2>
      </div>

      <div class="home-page-application-grid-container">
        <div class="home-page-application-preview js-graph-editor-button-application-preview">
          <div class="home-page-application-title">
            Graph Editor
          </div>

          <div class="home-page-application-thumbnail">
            <img class="home-page-application-preview-image" src="images/graph-editor-icon.svg">
          </div>
        </div>

        <div class="home-page-application-preview js-h-h-button-application-preview">
          <div class="home-page-application-title">
            Havel-Hakimi Game
          </div>

          <div class="home-page-application-thumbnail">
            <img class="home-page-application-preview-image" src="images/havel-hakimi-icon.svg">
          </div>
        </div>

        <div class="home-page-application-preview js-sorting-application-preview">
          <div class="home-page-application-title">
            Sorting Algorithms
          </div>

          <div class="home-page-application-thumbnail">
            <img class="home-page-application-preview-image" src="images/sorting-algo-icon.svg">
          </div>
        </div>

         <div class="home-page-application-preview">
          <div class="home-page-application-title">
            Coming soon...
          </div>

          <div class="home-page-application-thumbnail">
          </div>
        </div>

      </div>
    </div>

    <script src="scripts/general/header-sidebar-buttons.js"></script>
    <script src="scripts/homepage/home-page.js"></script>
  </body>
</html>