MultiMediaProgrammingProject/index.html at main · Bendd4/MultiMediaProgrammingProject · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <title>Left Over</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=IBM+Plex+Sans+Thai+Looped&family=Prompt&display=swap"
    rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="img file/logo/favicon-icon.png">
</head>

<body data-y="0" data-h="0">
  <div id="logo">
    <img src="img file/logo/Logo_Main.png" alt="" class="shake">
  </div>
  <div id="body-wrapper">
    <!-- หน้าเริ่ม -->
    <!-- หน้า 1 ตู้เย็น -->
    <section id="page1">
      <!-- ส่วนโลโก้ขยับ -->
      <section id="logo-down">

      </section>

      <!-- ส่วนตู้เย็นและชั้น -->
      <section id="first-fridge">
        <div class="shelf-background"></div>
        <!-- <div class="shelf-container"></div>       -->
        <div>
          <audio id="fridge-open-audio" src="Sound Effect/1 Fridge Scene/Fridge-Open.mp3"></audio>
          <audio id="digitonza55" src="Sound Effect/3 Store Scene/Store-Door.mp3"></audio>
          <img id="fridge" src="img file/page_1/Refrigerator (in).png" class="pic unlockButton fridge">


          <div class="bounce unlockButton">
            <div class="hotpoint unlockButton" id="hotpoint1" onclick="bounceAndDisappear()"></div>
            <img src="img file/page_1/New Refrigerator-02.png" class="pic unlockButton fridge bounce unlockButton" id="unlock_fridge" onclick="bounceAndDisappear()">
          </div>
          <img src="img file/page_3/Trash_Drop_2.png" style="position: absolute; width: 100%; top:65%;">


        </div>


      </section>

    </section>


    <!-- หน้า 2 ขยะโรยราย + ถุงขยะ -->
    <section id="page2">
      <div id="allTrash">
        <img src="img file/page_3/Trash_many.png" style="width:100%;">
        <img src="img file/page_3/Trash.png" style="width:100%;">
      </div>
      <audio id="trash-bag-audio" src="Sound Effect\2 Trash Scene/Trash Bag.mp3"></audio>
      <div id="Binbag" class="Binbag" onclick="up()">
        <div id="page2_Hint">
          ⬆ เก็บขยะ ⬆
        </div>
        <img src="img file/page_3/Bin Bag (top).png" id="unlock_bin" style="width:100%;margin-bottom: -1%;">
        <div id="page2_Text" onclick="changeText1()">
          รู้ไหมว่าขยะพวกนี้มาจากไหน ?
          <p style="font-size: 0.3em;">กดเพื่อไปต่อ</p>
        </div>
        <img src="img file/page_3/Bin_BG.jpg" style="width:100%; height: 210vh; overflow-y: hidden;">
      </div>
    </section>


    <!-- หน้า 3 buffer zone -->
    <section id="page3">
      <!-- <img src="img file/logo/Logo_Black.png" id="logo_black"> -->

      <!-- <img src="img file/page_3/Plastic_Bag.png" id="logo_black">  -->
    </section>

    <!-- หน้า 4 infographic -->
    <section id="page4">
      <div id="infograph">
        <!-- <div class="textcart">
          <h1 class="page4_top_left_txt">64%</h1>
          <p class="page4_bottom_txt">กองอาหารเหลือในตู้เย็น</p>
        </div>
        <div class="textcart2">
          <h1 class="page4_top_right_txt">36%</h1>
          <p class="page4_bottom_txt">อาหารที่เรารับประทาน</p>
        </div> -->

        <img src="img file/Info_new.png" class="pic" id="cartinfo">
      </div>
    </section>


    <!-- หน้า 5 ........... -->
    <section id="page5">
      <div id="page5_Text" onclick="changeText2()">
        "เหลือดีกว่าขาด"
        <p style="font-size: 0.3em;">กดเพื่อไปต่อ</p>
      </div>
    </section>


  </div>
</body>

</html>