diff --git a/Release/database/XNSim.db b/Release/database/XNSim.db index b7f0965..b8e70aa 100644 Binary files a/Release/database/XNSim.db and b/Release/database/XNSim.db differ diff --git a/XNSimHtml/components/auth-component.js b/XNSimHtml/components/auth-component.js index 33659ca..9b8e864 100644 --- a/XNSimHtml/components/auth-component.js +++ b/XNSimHtml/components/auth-component.js @@ -19,207 +19,280 @@ class AuthComponent extends HTMLElement { display: flex; align-items: center; justify-content: center; - background: #f5f7fa; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container { width: 90%; - max-width: 1200px; + max-width: 1000px; min-height: 600px; background: white; border-radius: 20px; - box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); display: flex; overflow: hidden; + position: relative; } .content { flex: 1; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - padding: 60px; + padding: 60px 40px; display: flex; align-items: center; justify-content: center; color: white; + position: relative; + overflow: hidden; + } + .content::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); + animation: float 6s ease-in-out infinite; + } + @keyframes float { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(180deg); } } .welcome-section { text-align: center; + position: relative; + z-index: 1; } .welcome-section h1 { - font-size: 3.5rem; - margin-bottom: 2rem; - font-weight: 700; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + font-size: 4rem; + margin-bottom: 1.5rem; + font-weight: 800; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); + letter-spacing: 2px; } .welcome-text { - font-size: 1.2rem; + font-size: 1.3rem; line-height: 1.8; - opacity: 0.9; + opacity: 0.95; + font-weight: 300; + } + .welcome-text p { + margin: 0.5rem 0; } .auth-container { - width: 500px; + width: 450px; background: white; - padding: 40px; + padding: 50px 40px; display: flex; flex-direction: column; + position: relative; + box-sizing: border-box; } .form-toggle { display: flex; - margin-bottom: 30px; - border-radius: 8px; + margin-bottom: 40px; + border-radius: 12px; overflow: hidden; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + background: #f8f9fa; + padding: 4px; } .toggle-btn { flex: 1; - padding: 15px; + padding: 16px 20px; border: none; - background: #f0f0f0; + background: transparent; cursor: pointer; - font-size: 1rem; - font-weight: 500; + font-size: 1.1rem; + font-weight: 600; transition: all 0.3s ease; + border-radius: 8px; + color: #6c757d; } .toggle-btn.active { - background: #667eea; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } .form-panel { display: none; - animation: fadeIn 0.3s ease; + animation: slideIn 0.4s ease; margin-top: 10px; } - @keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } + @keyframes slideIn { + from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .form-panel.active { display: block; } .form-group { - margin-bottom: 20px; + margin-bottom: 25px; + width: 100%; } .form-row { display: flex; gap: 20px; - margin-bottom: 20px; + margin-bottom: 25px; + width: 100%; } .form-row .form-group { flex: 1; margin-bottom: 0; + min-width: 0; } label { display: block; - margin-bottom: 8px; - color: #555; - font-weight: 500; + margin-bottom: 10px; + color: #495057; + font-weight: 600; + font-size: 0.95rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } input { width: 100%; - padding: 12px 15px; - border: 2px solid #eee; - border-radius: 8px; + padding: 15px 18px; + border: 2px solid #e9ecef; + border-radius: 12px; font-size: 1rem; transition: all 0.3s ease; + background: #f8f9fa; + box-sizing: border-box; + height: 52px; } input:focus { border-color: #667eea; outline: none; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); + box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); + background: white; } .password-input { position: relative; display: flex; align-items: center; + width: 100%; } .password-input input { - padding-right: 40px; + padding-right: 50px; + width: 100%; + box-sizing: border-box; } .toggle-password { position: absolute; - right: 10px; + right: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; - padding: 5px; + padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; - transition: opacity 0.3s ease; + transition: all 0.3s ease; + border-radius: 6px; + z-index: 2; } .toggle-password:hover { - opacity: 0.7; + background: rgba(102, 126, 234, 0.1); } .toggle-password:focus { outline: none; } .visibility-icon { - width: 20px; - height: 20px; + width: 18px; + height: 18px; object-fit: contain; - } - .remember-me { - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 20px; - } - .remember-me input { - width: auto; + opacity: 0.6; } .submit-btn { width: 100%; - padding: 15px; + padding: 18px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; - border-radius: 8px; + border-radius: 12px; color: white; - font-size: 1rem; - font-weight: 500; + font-size: 1.1rem; + font-weight: 600; cursor: pointer; transition: all 0.3s ease; + margin-top: 10px; + position: relative; + overflow: hidden; + } + .submit-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + transition: left 0.5s; + } + .submit-btn:hover::before { + left: 100%; } .submit-btn:hover { - transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); + } + .submit-btn:active { + transform: translateY(-1px); } .toast { position: fixed; top: 20px; right: 20px; - background: rgba(0, 0, 0, 0.8); + background: rgba(0, 0, 0, 0.9); color: white; - padding: 12px 24px; - border-radius: 8px; + padding: 15px 25px; + border-radius: 10px; font-size: 14px; z-index: 10000; opacity: 0; - transition: opacity 0.3s ease; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transition: all 0.3s ease; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); + backdrop-filter: blur(10px); } .toast.show { opacity: 1; } + .required-field::after { + content: ' *'; + color: #dc3545; + } @media (max-width: 1024px) { .container { flex-direction: column; min-height: auto; margin: 20px; + max-width: 500px; } .content { - padding: 40px; + padding: 40px 30px; } .auth-container { width: 100%; + padding: 40px 30px; + } + .welcome-section h1 { + font-size: 3rem; + } + .form-row { + gap: 15px; } } @media (max-width: 480px) { .container { margin: 0; border-radius: 0; + min-height: 100vh; } .auth-container { - padding: 20px; + padding: 30px 20px; } .welcome-section h1 { font-size: 2.5rem; @@ -228,6 +301,32 @@ class AuthComponent extends HTMLElement { flex-direction: column; gap: 15px; } + .form-row .form-group { + flex: none; + width: 100%; + } + .form-toggle { + margin-bottom: 30px; + } + .toggle-btn { + padding: 14px 16px; + font-size: 1rem; + } + input { + height: 48px; + padding: 12px 16px; + } + .password-input input { + padding-right: 45px; + } + .toggle-password { + right: 12px; + padding: 6px; + } + .visibility-icon { + width: 16px; + height: 16px; + } }