rayos-vt.github.io/index.html at main · rayos-vt/rayos-vt.github.io · 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
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>G&F 100 Stock Market Dashboard</title>
    <meta property="og:locale" content="en_US">
    <meta property="og:title" content="G&F 100 Stock">
    <meta property="og:type" content="article">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="styles/style.css" rel="stylesheet">
    <link href="styles/date-range-slider.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <div id="left-side">
        <div id="main-title">
          <img id="main-icon" class="icon" src="images/statistics-icon.png" alt="">
          <h1>G&F 100 Stock Market Dashboard</h1>
        </div>
        <div id="sub-title">
          <div id="date-range">
            <label for="start-date"></label>
            <input id="startDate" type="date" name="start-date" value="2019-12-26">
            <label for="end-date"></label>
            <input id="endDate" type="date" name="end-date" value="">
            <div class="range_container">
                <div class="sliders_control">
                    <input id="fromSlider" type="range" value="0" min="0" max="100"/>
                    <input id="toSlider" type="range" value="100" min="0" max="100"/>
                </div>
            </div>
          </div>
          <div>
            <div id="last-price-group">
                <h3>Last Price Date -</h3><span id="last-price-date"></span>
            </div>
            <div id="last-price-details">Select the stock code for price/volume visual</div>
          </div>
        </div>
        <div id="stock-table">
          <table>
            <thead>
              <tr>
                <th>Stock Codes</th>
                <th>Last Price</th>
                <th>Previous Day Price</th>
                <th>Price Change</th>
                <th>% Change</th>
                <th>Max Price</th>
                <th>Low Price</th>
              </tr>
            </thead>
            <tbody id="stock-table-tbody"></tbody>
          </table>
        </div>
      </div>
      <div id="right-side">
        <div id="moving-averages">
          <div id="moving-average-title">
            <h3>Stock Price Moving Average Trend By Date</h3>
            <div id="ticker-group">
              Currently showing - <span id="ticker-symbol"></span>
            </div>
          </div>
          <div id="moving-average-group" class="chart-container">
            <canvas id="moving-average-chart"></canvas>
          </div>
          <div id="trading-volume-group" class="chart-container">
            <canvas id="trading-volume-chart"></canvas>
          </div>
        </div>
        <div id="top-worst">
          <h3>Top and Worst 3 Performing Stock</h3>
          <div id="day-average-group">
            <div class="day-average" class="chart-container">
              <h3>Last 30 Days</h3>
              <canvas id="last-30-days"></canvas>
            </div>
            <div class="day-average" class="chart-container">
              <h3>Last 7 Days</h3>
              <canvas id="last-7-days"></canvas>
            </div>
            <div class="day-average" class="chart-container">
              <h3>Selected Days</h3>
              <canvas id="selected-days"></canvas>
            </div>
          </div>
        </div>
        <footer id="created-by">
          <div>
            <h2>Created by : KhaosSquared</h2>
          </div>
          <div id="social-media">
            <div>Follow us on:-</div>
            <a href="https://www.youtube.com/@khaossquared3463">
              <img class="icon" src="images/youtube-icon.png"  alt="">
            </a>
            <a href="https://x.com/KontrolledK1">
              <img class="icon" src="images/twitter-icon.png"  alt="">
            </a>
            <a href="https://discord.gg/XvAJquafDj">
              <img class="icon" src="images/discord-icon.png"  alt="">
            </a>
            <a href="https://github.com/rayos-vt/100GF-Stock-Market-Dashboard">
              <img class="icon" src="images/github-icon.png"  alt="">
            </a>
          </div>
        </footer>
      </div>
    </main>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/chart.js" async></script>
  <script src="scripts/main.js" async></script>
  <script src="scripts/date-range-slider.js" async></script>
  <script src="scripts/create-charts.js" async></script>
</html>