https://wasael.ai/core/test/LoginForm.asp

1<!doctype html>
2
3
4<html lang="en">
5  <head>
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8    <meta name="description" content="">
9    <meta name="author" content="Aiman Khawaldeh">
10 
11    <meta name="apple-itunes-app" content="app-id=6670721921">
12
13		<link rel="shortcut icon" href="/logo/wasael.png">
14	    <title>WASAEL</title>
15
16
17    <link rel="canonical" href="https://wasael.ai">
18
19    <!-- Bootstrap core CSS -->
20<link href="https://getbootstrap.com/docs/4.4/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
21
22    <!-- Favicons -->
23<link rel="apple-touch-icon" href="/logo/wasael.png" sizes="180x180">
24<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
25

26<script src="https://accounts.google.com/gsi/client" async defer></script>

26
27
28

29<script type="application/ld+json">
30{
31  "@context": "https://schema.org",
32  "@type": "Organization",
33  "name": "Wasael.ai",
34  "alternateName": "Wasael Platform",
35  "url": "https://wasael.ai",
36  "logo": "https://www.wasael.ai/logo/Wasael.png",
37  "founder": "Nawadi for Digital Transformation LLC",
38  "sameAs": [
39    "https://nawadi.ae",
40    "https://www.linkedin.com/company/wasael-ai",
41    "https://www.facebook.com/wasael.ai"
42  ],
43  "description": "Wasael.ai is a unified digital transformation platform offering AI-powered HRMS, CRM, ERP, and service automation for institutions across the UAE and GCC.",
44  "foundingDate": "2024",
45  "location": {
46    "@type": "Place",
47    "address": {
48      "@type": "PostalAddress",
49      "addressLocality": "Abu Dhabi",
50      "addressCountry": "UAE"
51    }
52  }
53}
54</script>

54
55
56
57  
58

59<script src="/assets/js/jquery-3.7.1.min.js"></script>

59
60
61
62
63    

63<script>window.jQuery || document.write('

63<script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>

63
64    

64<script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script>

64
65    

65<script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script>

65
66	
67

68<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

68
69

70<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

70

71<script type="text/javascript" src="https://unpkg.com/[email protected]/lib/qr-code-styling.js"></script>

71
72
73
74
75    

75<script>
76        // Your JavaScript/jQuery code will go here
77
78
79function hideElementById(id) {
80  // Get the element by its id
81  var element = document.getElementById(id);
82
83  // Hide the element by modifying its display property
84  element.style.display = "none";
85}
86
87function setFocusToInput(inputId) {
88    var inputElement = $('#' + inputId);
89    if (inputElement.length) {
90        inputElement.focus();
91    } else {
92        console.error('Input element with ID ' + inputId + ' not found.');
93    }
94}
95
96function focusAndSelectInput(inputId) {
97    var inputElement = $('#' + inputId);
98    if (inputElement.length) {
99        inputElement.focus();
100        inputElement.select();
101    } else {
102        console.error('Input element with ID ' + inputId + ' not found.');
103    }
104}
105   
106        // Your JavaScript/jQuery code will go here
107    
108function FillDiv(element, targetURL, divID) {
109
110    // Check if the first argument is an instance of Event
111 
112
113    // Show "loading content" message in the result div
114    $('#' + divID).html('<center><div class="loader"></div></center>');
115
116
117  
118
119    // Check if the element is a form
120    if (element.tagName.toLowerCase() === 'form') {
121        // Serialize the form data for the AJAX request
122        var requestData = $(element).serialize();
123        var requestType = 'POST';
124    } else {
125        // Use an empty data object for the AJAX request if it's not a form
126        var requestData = {};
127        var requestType = 'GET';
128    }
129
130    // Send an AJAX request to the specified targetURL
131    $.ajax({

132        type: requestType,
133        url: targetURL,
134        data: requestData,
135        success: function(response) {
136            // Update the specified div with the content from the target page or form response
137            $('#' + divID).html(response);
138
139           //   window.alert('FillDiv: ' + targetURL);
140
141        },
142        error: function() {
143            // Handle any errors that may occur during the AJAX request
144            $('#' + divID).html('An error occurred while loading the content.');
145        }
146    });
147}
148
149
150
151
152</script>

152
153
154
155
156<meta name="theme-color" content="steelblue">
157
158    <style>
159   .input-error {
160        border: 1px solid red;
161    }
162
163.shine-me {
164    width:100%; /*Make sure the animation is over the whole element*/
165
166    -webkit-animation-name: ShineAnimation;
167    -webkit-animation-duration: 5s;
168    -webkit-animation-iteration-count: infinite;
169    -webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
170}
171@-webkit-keyframes ShineAnimation{
172    from {
173        background-repeat:no-repeat;
174        background-image:-webkit-linear-gradient(
175            top left,
176            rgba(255, 255, 255, 0.0) 0%,
177            rgba(255, 255, 255, 0.0) 45%,
178            rgba(255, 255, 255, 0.5) 48%,
179            rgba(255, 255, 255, 0.8) 50%,
180            rgba(255, 255, 255, 0.5) 52%,
181            rgba(255, 255, 255, 0.0) 57%,
182            rgba(255, 255, 255, 0.0) 100%
183        );
184        background-position:-250px -250px;
185        background-size: 600px 600px
186    }
187    to {
188        background-repeat:no-repeat;
189        background-position:250px 250px;
190    }
191}
192
193
194
195@keyframes glowing {
196  0% { box-shadow: 0 0 -10px #3498DB; }
197  40% { box-shadow: 0 0 20px #3498DB; }
198  60% { box-shadow: 0 0 20px #3498DB; }
199  100% { box-shadow: 0 0 -10px #3498DB; }
200}
201
202@keyframes glowing2 {
203  0% { box-shadow: 0 0 -10px DarkSeaGreen; }
204  40% { box-shadow: 0 0 20px DarkSeaGreen }
205  60% { box-shadow: 0 0 20px DarkSeaGreen }
206  100% { box-shadow: 0 0 -10px DarkSeaGreen }
207}
208.button-glow {
209  animation: glowing 5000ms infinite;
210}
211
212.glowGreen {
213  animation: glowing2 5000ms infinite;
214}
215
216
217	@font-face {
218  font-family: Bukra;
219  src: url('/fonts/29LT Bukra-Regular.OTF');
220}
221
222
223
224      .bd-placeholder-img {
225        font-size: 1.125rem;
226        text-anchor: middle;
227        -webkit-user-select: none;
228        -moz-user-select: none;
229        -ms-user-select: none;
230        user-select: none;
231      }
232
233      @media (min-width: 768px) {
234        .bd-placeholder-img-lg {
235          font-size: 3.5rem;
236        }
237      }
238
239
240
241	    @keyframes spinning {
242    from { transform: rotate(0deg) }
243    to { transform: rotate(360deg) }
244  }
245  .spinhov:hover {
246    animation-name: spinning;
247    animation-duration: 1s;
248    animation-iteration-count: 1;
249    /* linear | ease | ease-in | ease-out | ease-in-out */
250    animation-timing-function: ease-in-out;
251  }
252
253
254.social-btn {
255  width: 320px;
256  height: 44px;
257
258  border-radius: 4px;
259  border: 1px solid #dadce0;
260  background: #fff;
261
262  display: flex;
263  align-items: center;
264
265  font-family: Roboto, Arial, sans-serif;
266  font-size: 14px;
267  font-weight: 500;
268  color: #3c4043;
269
270  cursor: pointer;
271  transition: background-color .2s, box-shadow .2s;
272  margin: 0 auto 12px auto;
273
274  padding-left: 14px;
275  padding-right: 14px;
276}
277
278/* icon column – FIXED WIDTH like Google */
279.social-btn img {
280  width: 18px;
281  height: 18px;
282  margin-right: 12px;
283  flex-shrink: 0;
284}
285
286/* text – centered relative to button, not icon */
287.social-btn span {
288  flex: 1;
289  text-align: center;
290  margin-right: 18px; /* balances icon space */
291}
292
293/* hover */
294.social-btn:hover {
295  background-color: #f7f8f8;
296  box-shadow: 0 1px 2px rgba(60,64,67,.3);
297}
298
299/* Apple */
300.apple-btn {
301  background: #000;
302  color: #fff;
303  border-color: #000;
304}
305
306.apple-btn:hover {
307  background: #111;
308}
309
310/* WhatsApp */
311.whatsapp-btn {
312  border-color: #25D366;
313  color: #25D366;
314}
315
316.whatsapp-btn:hover {
317  background: #f1fff6;
318}
319
320
321
322    </style>
323    <!-- Custom styles for this template -->
324    <link href="signin.css" rel="stylesheet">
325  </head>
326  <body class="text-center" style="width: 100%;
327
328min-height: 100vh;
329display: -webkit-box;
330display: -webkit-flex;
331display: -moz-box;
332display: -ms-flexbox;
333display: flex;
334flex-wrap: wrap;
335justify-content: center;
336align-items: center;
337padding: 15px;
338background-repeat: no-repeat;
339background-size: cover;
340background-position: center;
341position: relative;
342z-index: -1;
343opacity: 3;
344-webkit-background-size: cover;
345      -moz-background-size: cover;
346      -o-background-size: cover;
347      background-size: cover;"
348	  background-attachment: fixed;
349	  overflow-y:scroll;
350	  "
351>
352
353
354<div class="container-fluid">
355
356  
357  <img class="img-fluid mb-6 spinhov " src="/logo/wasael.png" alt=""    style="width:200

357px;"     >  
358    <br>  
359
360  
361
362<!-- <h4 class="h4 mb-4 font-weight-normal" style="    font-size: 18px;"><b></b></h4>   -->
363<font color="steelblue">
364
365
366
367 
368
369
370
371    <div id="LoginandSignUpBox">  
372
373
374    <form  method="post"  class="form-signin" action="LoginForm.asp?CCODE=WASAEL&ACTION=LOGIN"  >
375	
376	
377
378<!------------------------------------------------------------------------------------------------->
379  <label for="inputEmail" class="sr-only">Email address</label>
380
381
382  <input type="text" id="inputEmail" class="form-control" placeholder="Email" required autofocus name="username" style=" height: 32px !important;    margin-bottom: 12px !important; ">
383
384
385<!------------------------------------------------------------------------------------------------->
386  <label for="inputPassword" class="sr-only">Password</label>
387
388
389  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required name="password" style="height: 32px !important;">
390
391
392
393
394
395  <button class="btn btn-primary btn-block   " style ="background-color:#25456e;border-color:black" type="submit">Sign in - دخول</button>
396
397
398
399
400
401
402
403
404
405
406</form>
407
408
409
410        
411              
412              <form id="Form3">
413                <input type="hidden" name="KEY" value="3487">
414                <input type="hidden" name="FORMACTION" value="SHOW">
415                <button type="button"  class="btn btn-link" onclick="FillDiv(this.form, 'ProcessFormActionSignUp.asp?MENU=NO', 'LoginandSignUpBox')"> Sign Up مستخدم جديد</button>
416              </form>
417            
418       
419              
420              <form id="Form4">
421                <input type="hidden" name="KEY" value="3487">
422                <input type="hidden" name="FORMACTION" value="forgotpwdform">
423                <button type="button"  class="btn btn-link" onclick="FillDiv(this.form, 'ProcessFormActionSignUp.asp?MENU=NO', 'LoginandSignUpBox')"> Forgot Password</button>
424
425               
426
427              </form>
428
429
430
431<div id="empqrcode" style="margin: 0 auto !important; padding: 0 !important; text-align: center;   width: 100px;height: 100px;"></div>
432

433<script type="text/javascript">
434
435    const qrCode = new QRCodeStyling({
436        width: 100,
437        height: 100,
438        type: "svg",
439        data: "https://wasael.ai/",
440      // image: "https://wasael.ai/images/logo/wasael.png",
441
442        dotsOptions: {
443            color: "#25456e",
444            type: "dot"
445        },
446        backgroundOptions: {
447            color: null,
448        },
449        imageOptions: {
450            crossOrigin: "square"
451        },
452          cornersDotOptions: {
453          type: "square",
454          color: "#25456e"
455        },
456        cornersSquareOptions: {
457          type: "square",
458          color: "#25456e"
459        }
460    });
461
462    qrCode.append(document.getElementById("empqrcode"));
463  //  qrCode.download({ name: "qr", extension: "svg" });
464</script>

464
465
466<br>
467
468            </div> 
469
470      
471
472
473
474
475</div>
476
477
478
479
480</body>
481</html>
482