space4/index.html at master · richard000031/space4 · 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
129
130
131
132
133
134
135
136
137
138
<!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>Contact Form</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="background"></div>
  <header>
    <div class="container">
      <ul>
        <li>
          <a href="#" class="logo">
            <div class="images">
              <img src="./img/logo-forDark.png" class="logo-forDark" title="Publius">
              <img src="./img/S4M-logo_230630-1.png" class="logo-forLight" title="Publius">
            </div>
            <h2></h2>
          </a>
        </li>

        <li>
          <!-- <span class="nav-link theme-toggle">
            <i class="fa-solid fa-sun"></i>
            <i class="fa-solid fa-moon"></i>
          </span> -->
        </li>
      </ul>
    </div>
  </header>

  <main>
    <section class="contact">
      <div class="container">
        <div class="main">
          <div class="form-wrapper">
            <div class="contact-heading">
              <h1>報修單</h1>
              <p class="text">
                ★親愛的用戶您好:報修單送出前,可先依照下列步驟初步處理：
                <ol>
                  <li>
                    顯示異常、黑畫面、播放異常等→請先確認電源是否開啟、或是斷電10秒重開機
                  </li>
                  <li>
                    過期內容→請洽詢總部派送新檔期
                  </li>
                  <li>
                    設備離線、網路異常→請斷電10秒重開機或洽詢總部網路客服
                  </li>
                </ol>
              </p>
            </div>
            <!-- <div class="form-bg"> -->
            <form action="index.html" method="post" class="contact-form">
              <div class="input-wrap">
                <input class="contact-input" placeholder="公司名稱" name="First Name" type="text" required>
                <i class="icon fa-solid fa-building"></i>
              </div>

              <div class="input-wrap">
                <input class="contact-input" placeholder="門市" autocomplete="off" name="Last Name" type="text" required>
                <i class="icon fa-solid fa-shop"></i>
              </div>

              <div class="input-wrap w-100">
                <input class="contact-input" placeholder="報修日期" name="Last Name" type="text" required>
                <i class="icon fa-solid fa-calendar"></i>
              </div>
              <div class="input-wrap w-100">
                <input class="contact-input" placeholder="聯絡人" autocomplete="off" name="Last Name" type="text" required>
                <i class="icon fa-solid fa-address-card"></i>
              </div>
              <div class="input-wrap w-100">
                <input class="contact-input" placeholder="聯絡人電話" autocomplete="off" name="Email" type="text" required>
                <i class="icon fa-solid fa-phone"></i>
              </div>
              <div class="input-wrap w-100">
                <input class="contact-input" placeholder="聯絡人信箱" autocomplete="off" name="Email" type="email" required>
                <i class="icon fa-solid fa-envelope"></i>
              </div>
              <div class="input-wrap w-100">
                <input class="contact-input" placeholder="維修地址" autocomplete="off" name="Email" type="email" required>
                <i class="icon fa-solid fa-map"></i>
              </div>
              <div class="input-wrap w-100">
                <input class="contact-input" placeholder="報修內容" autocomplete="off" name="Email" type="email" required>
                <i class="icon fa-solid fa-folder"></i>
              </div>

              <div class="input-wrap textarea w-100">
                <textarea name="Message" placeholder="說明" auto-complete="off" class="contact-input" required></textarea>
                <i class="icon fa-solid fa-inbox"></i>
              </div>

              <div class="contact-buttons">
                <button class="btn upload">
                  <span>
                    <i class="fa-solid fa-paperclip"></i> 上傳附件
                  </span>
                  <input type="file" name="attachement">
                </button>
                <input type="submit" value="送出" class="btn">
              </div>
            </form>
            <!-- </div> -->
          </div>
        </div>

        <!-- <div class="right">
          <div class="image-wrapper">
            <img src="./img/img.jpg" class="img">
            <div class="wave-wrap">
              <svg class="wave" viewBox="0 0 783 1536" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path id="wave"
                  d="M236.705 1356.18C200.542 1483.72 64.5004 1528.54 1 1535V1H770.538C793.858 63.1213 797.23 196.197 624.165 231.531C407.833 275.698 274.374 331.715 450.884 568.709C627.393 805.704 510.079 815.399 347.561 939.282C185.043 1063.17 281.908 1196.74 236.705 1356.18Z" />
              </svg>
            </div>
            <svg class="dashed-wave" viewBox="0 0 345 877" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path id="dashed-wave"
                d="M0.5 876C25.6667 836.167 73.2 739.8 62 673C48 589.5 35.5 499.5 125.5 462C215.5 424.5 150 365 87 333.5C24 302 44 237.5 125.5 213.5C207 189.5 307 138.5 246 87C185 35.5 297 1 344.5 1" />
            </svg>
          </div> -->
        </div>
      </div>
    </section>
  </main>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js"></script>
  <script src="app.js"></script>
</body>

</html>