PageSourceSearch
Opt out API access

https://asap.pi.ac.th/login

html pi.ac.th collected 2026-09-24 09:17:19 UTC 10,483 bytes, 209 lines download raw bytes 

1<!DOCTYPE html>
2<html lang="th">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>เข้าสู่ระบบ | ระบบลงทะเบียนและติดตามตำแหน่งทางวิชาการ</title>
8    <link href="https://asap.pi.ac.th/css/app.css" rel="stylesheet">
9    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
10    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
11    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
12    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
13    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
14    <style>
15        /* CSS สำหรับทำให้ข้อความโดดเด่น */
16        .highlight-text {
17            font-size: 1.5rem;
18            /* ขยายขนาดตัวอักษร */
19            background: linear-gradient(45deg, #0056b3, #00b09b);
20            /* ไล่สีน้ำเงินไปเขียวตาม CI */
21            -webkit-background-clip: text;
22            -webkit-text-fill-color: transparent;
23            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
24            /* ใส่เงาบางๆ ให้ดูมีมิติ */
25            letter-spacing: 1px;
26        }
27
28        /* เพิ่ม Effect เมื่อเอาเมาส์ไปชี้ (Optional) */
29        .custom-brand-title:hover .highlight-text {
30            filter: brightness(1.2);
31            transition: 0.3s;
32        }
33    </style>
34</head>
35
36<body>
37
38    <nav class="navbar navbar-light bg-white border-bottom sticky-top py-3">
39        <div class="container-fluid">
40            <div class="d-flex align-items-center justify-content-between w-100">
41
42                
43                <div style="width: 50px;" class="d-none d-md-block"></div>
44
45                
46                <div class=" flex-grow-1">
47                    <a class="navbar-brand m-0 p-0" href="#" style="white-space: normal;">
48                        <div style="color: #1b3a57; line-height: 1.2;">
49                            <span class="fw-bold" style="font-size: 2rem; display: block; margin-bottom: 4px;">
50                                ระบบเสนอและติดตามตำแหน่งทางวิชาการ
51                            </span>
52                            <span class="fw-bolder" style="font-size: 2rem; letter-spacing: -0.5px;">
53                                ASAP (Application System for Academic Position)
54                            </span>
55                        </div>
56                    </a>
57                </div>
58
59                
60                <div style="min-width: 50px;" class="text-end">
61                                    </div>
62
63            </div>
64        </div>
65    </nav>
66    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" style="background: linear-gradient(90deg, #0d7db6 0%, #00a5e5 25%, #00a5e5 75%, #0d7db6 100%);">
67    <div class="carousel-inner">
68        <div class="carousel-item active d-flex justify-content-center">
69            <img src="https://asap.pi.ac.th/image/banner.jpg" class="img-fluid" style="width:100%;" alt="...">
70        </div>
71    </div>
72</div>
73        <div class="container mt-5">
74        <div class="login-container d-flex align-items-center justify-content-center mb-5">
75    <div class="card login-card shadow-lg border-0" id="login-box" style="width: 100%; max-width: 500px; border-radius: 20px;">
76        <div class="card-body p-5">
77            <h3 class="text-center mb-4 fw-bold" style="color: #2c3e50;">เข้าสู่ระบบ</h3>
78            <p class="text-center text-muted small mb-4">กรุณาเลือกประเภทการลงชื่อเข้าใช้งานด้วย <b><u>Microsoft 365 @PI Mail</b></u></p>
79
80            <div class="d-grid gap-3">
81                
82                <a href="https://asap.pi.ac.th/login/microsoft" class="btn btn-login-user d-flex align-items-center justify-content-center py-3 shadow-sm">
83                    <img src="https://asap.pi.ac.th/image/logo-login.webp" alt="MS Logo" width="20" class="me-2">

84                    <span>ลงชื่อเข้าใช้สำหรับ <span class="fw-bold">ผู้ขอตำแหน่ง</span></span>
85                </a>
86                <hr>
87                
88                <a href="https://asap.pi.ac.th/login/microsoft" class="btn btn-login-staff d-flex align-items-center justify-content-center py-3 shadow-sm">
89                    <img src="https://asap.pi.ac.th/image/logo-login.webp" alt="MS Logo" width="20" class="me-2">
90                    <span>ลงชื่อเข้าใช้สำหรับ <span class="fw-bold">เจ้าหน้าที่</span></span>
91                </a>
92            </div>
93
94
95        </div>
96    </div>
97</div>
98
99<style>
100    /* ปุ่มสำหรับบุคคลทั่วไป (สีฟ้า) */
101    .btn-login-user {
102        background-color: #00a1f1;
103        /* สีฟ้า Microsoft */
104        color: white;
105        border: none;
106        border-radius: 12px;
107        transition: all 0.3s;
108        font-size: 1.05rem;
109    }
110
111    .btn-login-user:hover {
112        background-color: #0082c3;
113        color: white;
114        transform: translateY(-2px);
115        box-shadow: 0 4px 12px rgba(0, 161, 241, 0.3) !important;
116    }
117
118    /* ปุ่มสำหรับเจ้าหน้าที่ (สีชมพู) */
119    .btn-login-staff {
120        background-color: #ff69b4;
121        /* สีชมพู Hot Pink */
122        color: white;
123        border: none;
124        border-radius: 12px;
125        transition: all 0.3s;
126        font-size: 1.05rem;
127    }
128
129    .btn-login-staff:hover {
130        background-color: #e0569a;
131        color: white;
132        transform: translateY(-2px);
133        box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3) !important;
134    }
135
136    /* จัดการภาพโลโก้ให้สีพื้นหลังปุ่มไม่กลืน */
137    .btn-login-user img,
138    .btn-login-staff img {
139        filter: brightness(0) invert(1);
140        /* ทำให้โลโก้เป็นสีขาวเพื่อให้เด่นบนพื้นสี */
141    }
142</style>
143    </div>
144    
145    

145<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

145
146    

146<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

146
147    

147<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

147
148    

148<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

148
149    

149<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

149
150    

150<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

150
151        

151<script>
152        function confirmLogout() {
153            Swal.fire({
154                title: 'ยืนยันการออกจากระบบ?',
155                text: "คุณต้องการออกจากระบบติดตามตำแหน่งทางวิชาการใช่หรือไม่?",
156                icon: 'warning',
157                showCancelButton: true,
158                confirmButtonColor: '#d33',
159                cancelButtonColor: '#6e7881',
160                confirmButtonText: 'ใช่, ออกจากระบบ',
161                cancelButtonText: 'ยกเลิก',
162                reverseButtons: true
163            }).then((result) => {
164                if (result.isConfirmed) {
165                    document.getElementById('logout-form').submit();
166                }
167            })
168        }
169
170        // แก้ไขส่วน JavaScript ให้ดักจับเหตุการณ์คลิก
171        document.addEventListener('DOMContentLoaded', function() {
172            const toggleBtn = document.getElementById('toggle-btn');
173            const sidebar = document.getElementById('sidebar');
174
175            if (toggleBtn && sidebar) {
176                toggleBtn.addEventListener('click', () => {
177                    sidebar.classList.toggle('collapsed');
178                });
179            }
180        });
181        // 2. ตั้งค่า jQuery UI Datepicker ภาษาไทย + พ.ศ.
182        $(document).ready(function() {
183            $.datepicker.regional['th'] = {
184                closeText: 'ปิด',
185                prevText: '&#xAB;&#xA0;ย้อน',
186                nextText: 'ถัดไป&#xA0;&#xBB;',
187                currentText: 'วันนี้',
188                monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน',
189                    'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'
190                ],
191                monthNamesShort: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.',
192                    'ก.ค.', 'ส.ย.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'
193                ],
194                dayNames: ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสบดี', 'ศุกร์', 'เสาร์'],
195                dayNamesShort: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
196                dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
197                weekHeader: 'Wk',
198                dateFormat: 'dd/mm/yy',
199                firstDay: 0,
200                isRTL: false,
201                showMonthAfterYear: false,
202                yearSuffix: ''
203            };
204            $.datepicker.setDefaults($.datepicker.regional['th']);
205        });
206    </script>

206
207</body>
208
209</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.