【ログイン】指摘によりログイン背景仮設定

resources/views/auth/login.blade.php

@@ -26,14 +26,43 @@
                                         <strong>{{ $errors->first('ope_id') }}</strong>
                                     </div>
                     @endif
-                    <div class="input-group mb-3 {{ $errors->has('ope_pass') ? 'error_input' : '' }}">
+
-               <input type="password"
+<div class="input-group mb-3 {{ $errors->has('ope_pass') ? 'error_input' : '' }}">
-                   class="form-control form-control-lg "
+    <input type="password"
-                   placeholder="{{ __('パスワード') }}" name="ope_pass">
+           id="ope_pass"
-                        <div class="input-group-append">
+           class="form-control form-control-lg"
-                            <span class="fa fa-lock input-group-text"></span>
+           placeholder="{{ __('パスワード') }}"
-                        </div>
+           name="ope_pass">
-                    </div>
+
+    <div class="input-group-append">
+        <span class="input-group-text eye-btn"
+              onmousedown="showPassword('ope_pass', this)"
+              onmouseup="hidePassword('ope_pass', this)"
+              onmouseleave="hidePassword('ope_pass', this)"
+              ontouchstart="showPassword('ope_pass', this)"
+              ontouchend="hidePassword('ope_pass', this)">
+            {{-- 默认：闭眼 --}}
+            <svg class="eye-off" width="20" height="20" viewBox="0 0 24 24" fill="none">
+                <path d="M1 12C3.5 7 7.5 4 12 4C16.5 4 20.5 7 23 12C20.5 17 16.5 20 12 20C7.5 20 3.5 17 1 12Z"
+                      stroke="currentColor" stroke-width="2"/>
+                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
+                <line x1="3" y1="3" x2="21" y2="21"
+                      stroke="currentColor" stroke-width="2"/>
+            </svg>
+
+            {{-- 按住时：睁眼 --}}
+            <svg class="eye-on d-none" width="20" height="20" viewBox="0 0 24 24" fill="none">
+                <path d="M1 12C3.5 7 7.5 4 12 4C16.5 4 20.5 7 23 12C20.5 17 16.5 20 12 20C7.5 20 3.5 17 1 12Z"
+                      stroke="currentColor" stroke-width="2"/>
+                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
+            </svg>
+        </span>
+    </div>
+</div>
+
+
+
+
                     @if ($errors->has('ope_pass'))
                         <div class="error_login" role="alert">
                                         <strong>{{ $errors->first('ope_pass') }}</strong>
@@ -59,4 +88,37 @@
             <!-- /.login-card-body -->
         </div>
     </div>
+
+<script>
+function showPassword(id, el) {
+    const input = document.getElementById(id);
+    if (!input) return;
+
+    input.type = 'text';
+    el.querySelector('.eye-off').classList.add('d-none');
+    el.querySelector('.eye-on').classList.remove('d-none');
+}
+
+function hidePassword(id, el) {
+    const input = document.getElementById(id);
+    if (!input) return;
+
+    input.type = 'password';
+    el.querySelector('.eye-on').classList.add('d-none');
+    el.querySelector('.eye-off').classList.remove('d-none');
+}
+</script>
+
+{{-- 指摘により暫定対応  --}}
+<style>
+.login-card-body {
+    background-color: #9ff3c4ff; 
+    border-radius: 8px;
+}
+
+.login-box .card {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+}
+</style>
 @endsection