CardsDM4YM/index.html at master · ladevis/CardsDM4YM · 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
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="card.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amatic+SC">
<script type="text/javascript" src="map.js"></script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAt8bbppRnopqiZDPHb5cjRdKV9yzMwX7U&callback=initMap">
</script>

<body>

<!--AIzaSyC130mBhHPeWfI0F0AWqlycAxCbl3Jq_ns-->
 <!--exclude test and classromm test from-->

  <div class="boxcards">


      <div class="face face-front">
        <div class="containerborder">
           <!--to do autorotate image when portrait-->
          <!--to get from table the name of the picture-->
          <img src="../dest/happy_IPTC59ca5a15a85789.48244740.jpg">
        </div>
      </div>

    <!--card back block-->
    <div class="face face-back">
      <div class="containerinfo">
        <div class= "boxlogoandemotion">
          <div class= "logo sqre">
            <img src="Img/logodm4ym.png">
          </div>
          <div class= "emotion sqre">
            <!--get from table emotion and change background, svg and emotion name -->
            <img src="svg/happy.svg">
            <p class="emotionname">happy</p>
          </div>
          </div>
          <div class= "boxtextdata">
            <!--get from table description -->
            <p><b>classroom:</b>Paul Klee</p>
            <p><b>date:</b> 2017/09/29 12:41</p>
            <p><b>description:</b>playground, school</p>

          </div>
          <div class= "boxmap">
          <!--get from table geolocation, center the map and addmaker -->
             <div id="map"></div>
          </div>

    </div>
  </div>
  <!--card back block end-->
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59ca5a781de808.28204734.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59ca5accecac60.84630495.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59ca5d2f667112.27868797.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59ca5d80e7ba98.05140390.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59ca5eb5ebe7a6.72201991.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59ca6221e6a1d2.79452511.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59ca668a68f702.03245369.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/angry_IPTC59ca5a2000cdf8.18805754.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/angry_IPTC59ca5a2000cdf8.18805754.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59cba8c4b6edd7.73812253.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59cbb0e3495f09.24582508.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59cbb442d688a1.84068519.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59cbb559ac0490.39423306.jpg">
        </div>
    </div>
    <div class="face face-front">
        <div class="containerborder">
          <img src="../dest/happy_IPTC59cbb7e34acb07.39388830.jpg">
        </div>
    </div>

  </div>


</body>