otus-js-basic/index.html at 800239f2a89b66411624885ee0ec2e27cbbeb56a · otus-learning/otus-js-basic · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Templater</title>
  </head>
  <body>
    <section id="#forecast">
      <div id="#search-div" class="search-div">
        <label>Мой город</label>
        <input type="checkbox" id="#cbxId" class="cbx" />
        <input type="text" id="#edtId" class="edt" />
        <input type="button" value="Поиск" id="#btnId" class="btn" />
      </div>

      <div id="#forecast-div-id" class="flex-div">
        {{for list as listItem}} {{if index == First}}
        <div class="now-div">
          <p class="bold-p">Сейчас:</p>
          <p>{{listItem.weather.0.description}}</p>
          <div class="txt-div">
            <p>Температура: {{listItem.main.temp}} &#8451;</p>
            <p>Влажность: {{listItem.main.humidity}} %</p>
            <p>Скорость ветра: {{listItem.wind.speed}} м/с</p>
          </div>
          {{and listItem.weather.0.icon}}
          <div class="inline-img">
            <img
              src="http://openweathermap.org/img/wn/{{listItem.weather.0.icon}}@2x.png"
            />
          </div>
        </div>
        <div class="big-border-div"></div>
        {{endif}} {{if index != 1}} {{and {Part}listItem.dt_txt == 00:00:00}}
        <div class="small-border-div"></div>
        {{endif}} {{if index != First}}
        <div class="forecast-el">
          <p>{{listItem.dt_txt}}</p>
          <img
            src="http://openweathermap.org/img/wn/{{listItem.weather.0.icon}}@2x.png"
          />
          <p>{{listItem.main.temp}} &#8451;</p>
        </div>
        {{endif}} {{endfor}}
      </div>
      <div id="#world-map" class="map-div">
        <iframe
          src="https://www.openstreetmap.org/export/embed.html?bbox={{lonS}}%2C{{latS}}%2C{{lonE}}%2C{{latE}}&amp;layer=mapnik"
        ></iframe>
      </div>
      <div id="#history-div" class="hist-div">
        <p>История</p>
        {{for cities as city}}
        <a href="#" class="aClass">{{city}}</a>
        {{endfor}}
      </div>
    </section>
  </body>
  <script src="src/bundle.ts"></script>
</html>