London_mockup/3b.html at master · EttoreM/London_mockup · 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
<html>

<head>
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <div class="PageContainer bkg_map_london_grey">


    <!-- Top logos -->
    <img src="./imgs/DSH_logo_3.png" onclick="location.href = 'index.html'" class="DHSlogo" />
    <div class="NERClogo">
      <img src="./imgs/NERC_logo.png" style="width: 9vw;" />
      <div style="width: 0.835rem; display: flex;"></div>
      <img src="./imgs/UOM_logo.png" style="width: 6.5vw; height: auto;" />
    </div>


    <!-- Search Bar -->
    <div class="SearchBar">
      <input class="InputSearch" placeholder="Search..." />
      <div class="SearchIcon">
        <img src="./imgs/search.svg" style="width: 1.0855vw;" />
      </div>
    </div>


    <!-- Login / Register / Logout -->
    <div class="LoginButtonSmall">Login</div>


    <!-- Options -->
    <div class="Option1_up" onclick="location.href = '2.html'">
      <span style="display: block; font-size: 0.8vw;">I want to</span> Know more about
    </div>
    <div class="Option2_down">
      <span style="display: block; font-size: 0.8vw;">I want to</span> Explore more
    </div>


    <!-- Questions -->
    <div class="Question Q1_up" onclick="location.href = '3.html'">
      <b>Q</b>: What is my personal exposure to <b>air pollution</b> according to my location?
    </div>


    <!-- Search PostCoder -->
    <div class="SearchPC">
      <input class="InputPC" placeholder="Enter location..." value="London" />
      <div class="SearchIconPC">
        <img src="./imgs/search.svg" style="width: 1.0855vw;" onclick="location.href = '4.html'" />
      </div>
    </div>


    <!-- Blue panel -->
    <div class="BluePanel">
      <div class="BluePanelItem">
        <div class="BluePanelRow">
          <img src="./imgs/switch_off.svg" onclick="location.href = '4.html'" style="width: 1.5vw; cursor: pointer;" />
          <div style="width: 1vw;"></div>
          <p style="width:80%;">Exposure to PM<sub>2.5</sub></p>
          <div style="width: 5.5vw;"></div>
          <img src="./imgs/info.png" style="width: 1vw; cursor: pointer;" onclick="location.href = '5.html'" />
        </div>

        <!-- <hr style="opacity: 0.3; margin-top: 0.835rem;" /> -->
        <div class="BluePanelItem">
          <div class="BluePanelRow">
            <img src="./imgs/switch_off.svg" style="width: 1.5vw;" />
            <div style="width: 1vw;"></div>
            <p style="width:80%;">Exposure to NO<sub>2</sub></p>
            <div style="width: 5.5vw;"></div>
            <img src="./imgs/info.png" style="width: 1vw;" />
          </div>
          <!-- <hr style="opacity: 0.3; margin-top: 0.835rem;" /> -->
          <div class="BluePanelItem">
            <div class="BluePanelRow">
              <img src="./imgs/switch_off.svg" style="width: 1.5vw;" />
              <div style="width: 1vw;"></div>
              <p style="width:80%;">Exposure to O<sub>3</sub> (Ozone)</p>
              <div style="width: 5.0vw;"></div>
              <img src="./imgs/info.png" style="width: 1vw;" />
            </div>
          </div>
          <!-- <hr style="opacity: 0.3; margin-top: 0.835rem;" /> -->
          <div class="BluePanelItem">
            <div class="BluePanelRow">
              <img src="./imgs/switch_off.svg" style="width: 1.5vw;" />
              <div style="width: 1vw;"></div>
              <p style="width:80%;">Vulnerability to air pollution (by age group)</p>
              <div style="width: 1vw;"></div>
              <img src="./imgs/info.png" style="width: 1vw;" />
            </div>
          </div>

          <!-- <hr style="opacity: 0.3; margin-top: 0.835rem;" /> -->
          <div class="BluePanelItem">
            <div class="BluePanelRow">
              <img src="./imgs/switch_off.svg" style="width: 1.5vw;" />
              <div style="width: 1vw;"></div>
              <p style="width:80%;">Vulnerability to air pollution (by underlying health consitions)</p>
              <div style="width: 1vw;"></div>
              <img src="./imgs/info.png" style="width: 1vw;" />
            </div>

          </div>

          <div style="height: 1.6vw;"></div>
        </div>

        <!-- Slider -->
        <!-- <div class="Slider">
          <img src="./imgs/slider.png" style="width: 13vw;" />
        </div> -->

        <!-- Learn More -->
        <div class="LearnMore">Learn More</div>


      </div>
</body>

</html>