財布画面デザイン完成

src/main/resources/static/css/style.css

@@ -2013,4 +2013,38 @@ th, td {
     position: sticky;
     top: 0;
     z-index: 1;
-}
+}
\ No newline at end of file
+
+/* 財布画面 */
+#amount-form {
+    margin: 20px 0;
+    text-align: center;
+}
+
+#amount {
+	width: 400px;
+	height: 30px;
+}
+
+#balance {
+	text-align: center;
+	margin-top: 50px;
+	margin-bottom: 60px;
+	font-size: 20px;
+}
+
+#balanceSpan {
+	margin-left: 30px;
+}
+
+.wallets-p {
+	margin-bottom: 100px;
+}
+
+#wallets-footer {
+	margin-top: 70px;
+}
+
+#en {
+	margin-right: 10px;
+}

src/main/resources/static/js/wallets.js

+//モーダル表示
+$(function(){
+    $('.js-modal-open').on('click',function(){
+        $('.js-modal').fadeIn();
+        return false;
+    });
+    $('.js-modal-close').on('click',function(){
+        $('.js-modal').fadeOut();
+        return false;
+    });
+});
+
+//フォーム送信
+$(document).ready(function() {
+    $('#ok-btn').click(function() {
+        $('#wallets-form').submit();
+    });
+});
\ No newline at end of file

src/main/resources/templates/wallets.html

@@ -67,26 +67,21 @@
 
         <!-- ログインフォーム -->
         <div class="container">
-            <p id="online-shoe-store"><span id="online-shoe-store-span">Wallets</span></p>
-            <form id="login-form" method="post" th:action="@{/login}">
-                <div id="email-form">
-                    <label for="login-email">Email</label>
-                    <input type="email" class="login" name="email" id="login-email" placeholder="Email" required="required"/>
-                </div>
-                <div id="password-form">
-                    <label for="login-password">Password</label>
-                    <input type="password" class="login" name="password" id="login-password" placeholder="Password" required="required"/>
-                </div>
-                <div id="submit-form">
-                    <input type="submit" class="login" id="btn" value="Login"/>
-                    <!-- 会員登録ボタン -->
-                    <button class="js-modal-open" id="sign-up">Sign Up</button>
+            <p id="online-shoe-store" class="wallets-p"><span id="online-shoe-store-span">Wallets</span></p>
+            <p id="balance">Balance<span id="balanceSpan" th:text="'&yen;' + ${wallet.amout}">10000</span></p>
+            <form id="wallets-form" method="post" th:action="@{/limited/wallets/charge/{id}(id=${user.id})}" th:object="${walletForm}">
+            	<div id="amount-form">
+	            	<label for="amount">Charge Money</label>
+	                <span id="en">&yen;</span><input type="number" id="amount" name="amount" required="required" th:field="*{amount}"/>          	
+            	</div>
+            	<div id="buy">
+                    <button class="js-modal-open" id="buy-btn">Charge</button>
                 </div>
             </form>
         </div>
 
         <!-- footer -->
-        <footer class="footer" id="login-footer">
+        <footer class="footer" id="wallets-footer">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12">
@@ -101,36 +96,9 @@
         <div class="modal js-modal">
             <div class="modal__bg js-modal-close"></div>
             <div class="modal__content">
-                <div class="sign-up-form">
-                    <p id="sign-up-text">Sign Up</p>
-                    <label for="name" class="sign-up-form-label">Name</label>
-                    <input type="text" id="name" class="sign-up-form-input" placeholder="Name" required="required"/>
-                </div>
-                <div class="sign-up-form">
-                    <label for="postal-code" class="sign-up-form-label">Postal Code</label>
-                    <input type="text" id="postal-code" class="sign-up-form-input" placeholder="Postal Code" required="required"/>
-                    <p class="attention">Please enter 7-digit alphanumeric characters with no hyphens.</p>
-                </div>
-                <div class="sign-up-form">
-                    <label for="address" class="sign-up-form-label">Address</label>
-                    <input type="text" id="address" class="sign-up-form-input" placeholder="Address" required="required"/>
-                    <p class="attention">Please enter numbers in half-width characters.</p>
-                </div>
-                <div class="sign-up-form">
-                    <label for="phone-number" class="sign-up-form-label">Phone Number</label>
-                    <input type="text" id="phone-number" class="sign-up-form-input" placeholder="Phone Number" required="required"/>
-                    <p class="attention">Please enter 11-digit alphanumeric characters with no hyphens.</p>
-                </div>
-                <div class="sign-up-form">
-                    <label for="email" class="sign-up-form-label">Email</label>
-                    <input type="email" id="email" class="sign-up-form-input" placeholder="Email" required="required"/>
-                </div>
-                <div class="sign-up-form">
-                    <label for="password" class="sign-up-form-label">Password</label>
-                    <input type="password" id="password" class="sign-up-form-input" placeholder="Password" required="required"/>
-                </div>
+                <p id="sign-up-text">Do you really charge money?</p>
                 <div>
-                    <button class="js-modal-sign-up" id="ok-btn">Ok</button>
+                    <button class="js-modal-sign-up" id="ok-btn">Charge</button>
                     <button class="js-modal-close" id="close-btn">Close</button>
                 </div>
             </div><!--modal__inner-->
@@ -145,7 +113,7 @@
         <script src="js/owl.carousel.min.js" th:src="@{/js/owl.carousel.min.js}"></script>
         <script src="js/wow.min.js" th:src="@{/js/wow.min.js}"></script>
         <script src="js/custom.js" th:src="@{/js/custom.js}"></script>-->
-        <script src="js/login.js" th:src="@{/js/login.js}"></script>
+        <script src="js/login.js" th:src="@{/js/wallets.js}"></script>
 
     </body>
 </html>