proship-integration/index.html at main · viktv159-lab/proship-integration · 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
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ProShip Easy — เข้าสู่ระบบ</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    * { font-family: 'Prompt', sans-serif; }
    body {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card {
      background: rgba(255,255,255,0.97);
      border-radius: 24px;
      box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    }
    .role-card {
      border: 2.5px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
      border-radius: 16px;
      background: #f8f7ff;
    }
    .role-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102,126,234,0.2); }
    .role-card.selected-master {
      border-color: #764ba2;
      background: linear-gradient(135deg, #f3f0ff, #ede9fe);
      box-shadow: 0 4px 16px rgba(118,75,162,0.25);
    }
    .role-card.selected-branch {
      border-color: #3b82f6;
      background: linear-gradient(135deg, #eef2ff, #e0e7ff);
      box-shadow: 0 4px 16px rgba(59,130,246,0.25);
    }
    .login-btn {
      background: linear-gradient(135deg, #667eea, #764ba2);
      transition: opacity 0.2s;
    }
    .login-btn:hover { opacity: 0.9; }
    .login-btn:active { opacity: 0.8; }
    input:focus {
      outline: none;
      border-color: #764ba2;
      box-shadow: 0 0 0 3px rgba(118,75,162,0.15);
    }
    @keyframes shake {
      0%,100% { transform: translateX(0); }
      15%      { transform: translateX(-8px); }
      30%      { transform: translateX(8px); }
      45%      { transform: translateX(-6px); }
      60%      { transform: translateX(6px); }
      75%      { transform: translateX(-4px); }
      90%      { transform: translateX(4px); }
    }
    .shake { animation: shake 0.5s ease; }
  </style>
</head>
<body>
  <div class="card w-full max-w-md mx-4 p-8">
    <!-- Branding -->
    <div class="text-center mb-8">
      <div class="text-5xl mb-2">📦</div>
      <h1 class="text-2xl font-bold text-gray-800">ProShip Easy</h1>
      <p class="text-sm text-gray-400 mt-1">ระบบจัดการร้านรับพัสดุ</p>
    </div>

    <!-- Role Selection -->
    <p class="text-sm font-medium text-gray-500 mb-3 text-center">เลือกประเภทผู้ใช้งานก่อนเข้าสู่ระบบ</p>
    <div class="grid grid-cols-2 gap-3 mb-6">
      <div id="role-master" class="role-card p-4 text-center" onclick="selectRole('master')">
        <div class="text-3xl mb-1">👑</div>
        <div class="font-semibold text-gray-700 text-sm">Master Admin</div>
        <div class="text-xs text-gray-400 mt-0.5">คุณจิ๋ว / ผู้ดูแลระบบ</div>
      </div>
      <div id="role-branch" class="role-card p-4 text-center" onclick="selectRole('branch')">
        <div class="text-3xl mb-1">🏪</div>
        <div class="font-semibold text-gray-700 text-sm">สาขา</div>
        <div class="text-xs text-gray-400 mt-0.5">ร้านรับพัสดุ</div>
      </div>
    </div>

    <!-- Error Message -->
    <div id="error-msg" class="hidden mb-4 px-4 py-3 bg-red-50 border border-red-200 rounded-xl text-sm text-red-600 text-center font-medium"></div>

    <!-- Login Form -->
    <form id="login-form" onsubmit="handleLogin(event)">
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-600 mb-1.5">ชื่อผู้ใช้งาน</label>
        <input id="username" type="text" placeholder="กรอกชื่อผู้ใช้งาน"
               class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm text-gray-800 bg-gray-50 transition-all duration-200"
               autocomplete="username" />
      </div>
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-600 mb-1.5">รหัสผ่าน</label>
        <input id="password" type="password" placeholder="กรอกรหัสผ่าน"
               class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm text-gray-800 bg-gray-50 transition-all duration-200"
               autocomplete="current-password" />
      </div>
      <button type="submit" class="login-btn w-full text-white font-semibold py-3.5 rounded-xl text-base">
        เข้าสู่ระบบ
      </button>
    </form>

    <p class="text-center text-xs text-gray-400 mt-4">ลืมรหัสผ่าน? ติดต่อ Admin</p>
    <p class="text-center text-xs text-gray-300 mt-4 border-t border-gray-100 pt-4">
      ทดลองใช้: admin/1234 หรือ branch1/1234
    </p>
  </div>

  <script>
    let selectedRole = null;
    function selectRole(role) {
      selectedRole = role;
      document.getElementById('role-master').classList.remove('selected-master','selected-branch');
      document.getElementById('role-branch').classList.remove('selected-master','selected-branch');
      if (role === 'master') document.getElementById('role-master').classList.add('selected-master');
      else document.getElementById('role-branch').classList.add('selected-branch');
      hideError();
    }
    function showError(msg) {
      const el = document.getElementById('error-msg');
      el.textContent = msg; el.classList.remove('hidden');
    }
    function hideError() { document.getElementById('error-msg').classList.add('hidden'); }
    function shakeForm() {
      const f = document.getElementById('login-form');
      f.classList.remove('shake'); void f.offsetWidth; f.classList.add('shake');
    }
    function handleLogin(e) {
      e.preventDefault(); hideError();
      if (!selectedRole) { showError('กรุณาเลือกประเภทผู้ใช้งาน'); return; }
      const u = document.getElementById('username').value.trim();
      const p = document.getElementById('password').value;
      if (selectedRole === 'master' && u === 'admin' && p === '1234') {
        window.location.href = 'master-dashboard.html'; return;
      }
      if (selectedRole === 'branch' && u === 'branch1' && p === '1234') {
        window.location.href = 'branch.html'; return;
      }
      shakeForm(); showError('ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง กรุณาลองใหม่อีกครั้ง');
    }
  </script>
</body>
</html>