10201project/input2.html at main · jc-1001/10201project · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>填寫資料2</title>
    <link rel="stylesheet" href="./css/input2.css" />
  </head>
  <body>
    <!-- header -->
    <div class="banner">
      <div class="header">
        <div class="logo">
          <img src="./sub-page-Img/contract/logo-small.svg" alt="" />
        </div>
      </div>
    </div>

    <!-- 進度條 -->

    <section class="loading">
      <p>生成文件進度</p>
      <img src="./sub-page-Img/contract/input2/loading2.svg" alt="" />
    </section>

    <!-- 介面 -->
    <section class="container">
      <!-- 左邊視窗 -->
      <div class="contain-left">
        <form>
        <!-- 問題一 -->
        <div class="qa1">
          <div class="question">
            <h2>每月租金多少錢？</h2>
          </div>
        </div>

        <div class="answer">
          <label for="pay1">新台幣</label>
          <input
            type="number"
            id="pay1"
            name="pay1"
            placeholder="輸入金額"
            autocomplete="off"
            min="0"
            step="1"
            required
          />元
        </div>

        <!-- 問題二 -->

        <div class="qa2">
          <div class="question">
            <h2>承租人應於每月幾號支付每期租金？</h2>
          </div>
        </div>

        <div class="answer">
          <label for="payday">每月的</label>
          <input
            type="number"
            id="payday"
            name="payday"
            placeholder="1-31"
            min="1"
            max="31"
            step="1"
            required
          />日
        </div>

        <!-- 問題三 -->
        <div class="qa3">
          <div class="question">
            <h2>支付方式</h2>
          </div>
        </div>

        <div class="answer">
          <div class="option1">
            <input
              type="radio"
              id="howtoPay"
              name="howtoPay"
              value="howtoPay"
              checked
            />
            <label for="howtoPay">現金支付</label>
          </div>

          <div class="option2">
            <input
              type="radio"
              id="howtoPay1"
              name="howtoPay"
              value="howtoPay1"
            />
            <label for="howtoPay1">轉帳支付</label>
          </div>
        </div>

        <!-- 問題四 -->
        <div class="qa4">
          <div class="question">
            <h2>是否有押租金約定？押租金多少錢？</h2>
          </div>
          <div class="hint">
            <img src="./sub-page-Img/contract/input2/Lightbulb.svg" alt="" />
            <p>小提醒</p>
            <div class="hint-block">
              <p>
                押金不得超過兩個月租金總額且應明確約定押金金額、交付方式及退還條件。
              </p>
            </div>
          </div>
        </div>

        <div class="answer">
          <div class="option1">
            <input
              type="radio"
              id="pre-rant1"
              name="pre-rant"
              value="pre-rant1"
              checked
            />
            <label for="pre-rant1">無約定</label>
          </div>

          <div class="option2">
            <input
              type="radio"
              id="pre-rant2"
              name="pre-rant"
              value="pre-rant2"
            />
            <label for="pre-rant2">有押金</label>
            <br />
            <div class="pre-pay-name">
              <label for="pre-pay" class="pre-pay-name"></label>
              押金金額為：新台幣<input
                type="number"
                id="pre-pay"
                name="pre-pay"
                value="pre-pay"
                placeholder="輸入金額"
              />元
            </div>
            <br />
          </div>
        </div>

        <!-- 按鍵處 -->
        <div class="button-all">
          <a href="./input1.html">
            <div class="goback">
              <img src="./sub-page-Img/contract/backicon.svg" alt="" />
              <p>返回上一步</p>
            </div>
          </a>
          <a href="./input3.html">
            <button type="submit">
              <p>下一步</p>
            </button>
          </a>
        </div>
      </form>
      </div>
      <!-- 右邊視窗 -->
      <div class="contain-right">
        <div class="view-text">
          <p>預覽：</p>
        </div>
        <div class="view-box">
          <div class="contract">
            <p>二、租金：</p>
            <br />
            <ul>
              <li>
                承租人每月租金為<span id="preview-pay1">________</span
                >元整，應於每月<span id="preview-payday">___</span
                >日前支付，不得有任何理由拖延或拒絕；出租人於租賃期間亦不得以任何理由要求調漲租金
              </li>
              <li>
                租金支付方式為：<span id="preview-howtoPay"
                  >__________________</span
                >
              </li>

              <li>
                押租金約定：<span id="preview-pre-rant-status"
                  >無約定/有押金</span
                >
                <span id="preview-pre-rant-amount" style="display: none"
                  >，金額為新台幣<span id="preview-pre-pay">________</span
                  >元整。</span
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <script src="./js/vendors/jquery/jquery-3.7.1.min.js"></script>
    <script src="./js/input2-submit.js"></script>


  </body>
</html>