cryptonite/index.html at master · benny-sit/cryptonite · 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cryptonite</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
      crossorigin="anonymous"
    />
    <link rel="shortcut icon"  type="image/png" href="media/crystal.png" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

    <link rel="stylesheet" href="css/styles.css" />

    <script
      src="https://code.jquery.com/jquery-3.6.1.min.js"
      integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
      crossorigin="anonymous"
      defer
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
      crossorigin="anonymous"
      defer
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>

    <script src="js/lazyRain.js" type="text/javascript" defer></script>
    <script src="js/main.js" type="text/javascript" defer></script>
  </head>
  <body>
    <div class="top-wrapper">
        <div class="top-image bg-black"></div>
        <div class="text-white top-text">
            <h1 class="display-1 appear-first">View.</h1>
            <h1 class="display-1">Explore.</h1>
            <h1 class="display-1">Expand.</h1>
        </div>
        <div id="scroll-down">
            <h4 class="bi bi-chevron-down"></h4>
        </div>
    </div>
    <nav class="navbar navbar-light bg-light px-3 border-bottom" id="myNav" style="opacity: 0.5;">
        <a class="navbar-brand" href="#"><img src="media/crystal.png" class="img img-responsive" />Cryptonite</a>
    </nav>

    <div class="container-fluid" id="main-content">
      <canvas id="lazy-rain"></canvas>
      <div class="container min-vh-100 px-0" id="the-content">
          <ul class="nav nav-pills my-3 px-2" id="pills-tab" role="tablist">
              <li class="nav-item bg-white bg-opacity-25 rounded-start" role="presentation">
                <button class="nav-link active" id="pills-coins-tab" data-bs-toggle="pill" data-bs-target="#pills-coins" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Coins</button>
              </li>
              <li class="nav-item bg-white bg-opacity-25" role="presentation">
                <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-graph" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Live Graph</button>
              </li>
              <li class="nav-item bg-white bg-opacity-25 rounded-end" role="presentation">
                <button class="nav-link" id="pills-about-tab" data-bs-toggle="pill" data-bs-target="#pills-about" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">About</button>
              </li>
              <form class="d-flex ms-auto" id="search-form">
                  <input class="form-control me-2 " type="search" placeholder="Search" aria-label="Search" id="search-input">
                  <button class="btn btn-outline-success bg-white bg-opacity-25" type="submit">Search</button>
              </form>
            </ul>
            <div class="tab-content" id="pills-tabContent">
              <div class="tab-pane fade show active" id="pills-coins" role="tabpanel" aria-labelledby="pills-coins-tab">
                  <div class="row d-flex justify-content-center my-3 px-3" id="coins-grid">
                  </div>
                  <div class="row d-flex justify-content-center my-3 px-3" id="spinner-coins">
                    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
                </div>
              </div>
              <div class="tab-pane fade" id="pills-graph" role="tabpanel" aria-labelledby="pills-profile-tab">
                <div class="row d-flex justify-content-center my-3 px-3" id="spinner-graph">
                  <canvas id="myChart" class="bg-white">
                    <p>Not working</p>
                  </canvas>
                </div>
                <div class="row d-flex justify-content-center my-3 px-3 invisible" id="spinner-graph">
                  <div class="lds-ellipsis invisible"><div></div><div></div><div></div><div></div></div>
              </div>
              </div>
              <div class="tab-pane fade" id="pills-about" role="tabpanel" aria-labelledby="pills-about-tab">
                <div class="about-text-main">
                  <h1 class="display-1">Visualizing</h1>
                  <h1 class="display-1">Coingecko</h1>
                  <h1 class="display-1">API</h1>
                </div>
                <div class="row my-2">
                  <div class="col-sm-12 col-md-6 col-lg-4">
                    <div class="bg-white about-card p-3">
                      <h3>About This Project</h3>
                      <hr />
                      <p>
                        This project is made to give basic info on all coingecko coins.
                        I made this project for John bryce as the second project in the full-stack web dev course.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="row my-2 d-flex justify-content-center">
                  <div class="col-sm-12 col-md-6 col-lg-5">
                    <div class="bg-white about-card p-3">
                      <h3>About Me</h3>
                      <hr />
                      <p>
                        My name is Benny,<br/>
                        I am highly organized and detail-oriented, learning in John Bryce college. Very curious and passionate about learning and developing new skills. <br/>
                        Well-versed in numerous programming languages including Python, JavaScript, CSS, Bootstrap, HTML5, Django, React, SQL, C/C#, Assembly. <br/>
                        I am open for job opportunities.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="row my-2 d-flex justify-content-end">
                  <div class="col-sm-12 col-md-6 col-lg-4">
                    <div class="bg-white about-card p-3">
                      <h3>For More Info</h3>
                      <hr />
                      <p>
                        The code for this project available at <a target="_blank" href="https://github.com/benny-sit/cryptonite">Github</a>. <br/>
                        If you have any questions feel free to contact with me through email -> <b>benysit2002@gmail.com</b>.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

      </div>

      <div class="sticky-container">
        <button id="scroll-up" class="btn btn-outline-primary rounded-circle invisible"><i class="bi bi-arrow-up"></i></button>
      </div>

      <footer class="footer footer-fixed bg-light rounded-top light-box-shadow">
          <div class="row d-flex justify-content-between mx-0 p-3">
              <div class="col text-center text-lg-start text-muted">&copy; 2022 Copyright <i class="text-black">Benny S</i> </div>
              <div class="col d-flex justify-content-end ">
                  <a href="https://github.com/benny-sit" class="text-reset"><i class="bi bi-github"></i></a>
              </div>
          </div>
      </footer>
    </div>

    <!-- deselect coin modal -->
    <div class="modal modal-lg show fade" tabindex="-1" id="deselect-modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Deselect Coin</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="display-6">You can select only 5 coins to show.</div>
            <div id="selected-coins-modal">

            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>