DataVisualization/test1.html at main · GCPE2023/DataVisualization · 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
<!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>Dashboard</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=Inter:wght@200;300;400;500;600;700;800&family=Labrada:wght@700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="test1.css" />
</head>

<body>
  <div id="container">
    <section id="sidebar">
      <div id="sidebar-controller">
        <div id="logo">
          <h1 id="logo-text">ET</h1>
          <p id="logo-slogan">EXPENSE TRACKER</p>
        </div>
        <div id="sidebar-menu">
          <a class="sidebar-link active " href="#">Dashboard</a>
          <a class="sidebar-link" href="#something-else">Lorem Ipsum</a>
        </div>
      </div>
    </section>
    <section id="dashboard">
      <div id="profile">
        <img src="./profile.jpg" alt="profile picture">
        <div id="info">
          <div id="personal">
            <h1 id="name">Lim Jack Sheng</h1>
            <div id="location"><span id="state">Penang</span>, <span id="country">Malaysia</span></div>
          </div>
          <div id="socials">
            <a href="https://wa.me/603108866165">
              <img src="./whatsapp.svg" width="25px" alt="Whatsapp Link">
            </a>
            <a href="mailto: corporate@um.edu.my">
              <img src="./email.svg" width="25px" alt="Email link">
            </a>
          </div>
        </div>
        <hr class="spacer">
          <div id="expenses">
          <h1>My Expenses</h1>
            <iframe width="100%" height="400em" seamless frameborder="0" scrolling="no" src="CHART_URL"></iframe>
        <hr class="spacer">
          <div id = "usage">
          <h1>My Usages</h1>
            <iframe width="100%" height="400em" seamless frameborder="0" scrolling="no" src="CHART_URL_02"></iframe>
        <hr class="spacer">
          <h1> My Location </h1>
            <div id="map"></div>
              <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdqgqOcmjHaEuuBnDle_E1jdl-76K1sGY&callback=initMap"
              async defer></script>
              <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
              <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
              <script src="test1.js" ></script>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- save this for sidebar active link script -->
  <!-- <script src="https://code.jquery.com/jquery-3.6.3.min.js" -->
  <!-- integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> -->
</body>

</html>