<td> <input type='radio' name='${dataArray[19][1]}' value='${dataArray[19][6]}' id='a1' class='multi me-1' required > </td> </tr> `; result += "</table>"; var div = document.getElementById('search-results'); div.innerHTML = result; } else { var div = document.getElementById('search-results'); //div.empty() div.innerHTML = "ไมพบขอมูล!"; } } </script>
Css.html <style> #bg-image { display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .dummy-container { background: #fff; border-bottom: 3px solid #ddd; border-radius: 10px; box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2); padding: 50px 50px; margin: 30px 0; position: relative; transform: translate(-50%); padding: 1rem 1rem; min-width: 300px; max-width: 800px; top: 5%; left: 50%;
} h3 { font-size: 40px; font-weight: 600; background: linear-gradient(0deg, rgba(131, 58, 180, 1) 0%, rgba(253, 115, 29, 0.9865196078431373) 0%, rgba(252, 195, 69, 0.9921218487394958) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(1px 2px 2px #575655); margin-top: 20px; margin-bottom: 5px; } .avatar { border: 3px solid white; border-radius: 7px; } .avatar_secc1 {} #num_id { font-size: 24px; font-weight: 300; background: linear-gradient(0deg, rgba(131, 58, 180, 1) 0%, rgba(210, 127, 26, 0.9865196078431373) 0%, rgba(252, 195, 69, 0.9921218487394958) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(3px 3px 3px #f9f9f9); margin-top: 5px; } .loader { display: block; position: relative; height: 32px; width: 200px; background: #fff; border: 2px solid #fff; color: blue;
overflow: hidden; } .loader::before { content: ''; background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(56,227,12,1) 0%, rgba(217,241,14,1) 35%, rgba(242,135,41,0.9921218487394958) 92%); position: absolute; left: 0; top: 0; width: 0; height: 100%; animation: loading 10s linear infinite; } .loader:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; font-size: 24px; line-height: 32px; color: rgb(0, 255, 255); mix-blend-mode: difference; animation: percentage 10s linear infinite; } @keyframes loading { 0% { width: 0 } 100% { width: 100% } }
@keyframes percentage { 0% { content: "0%" } 5% { content: "5%" } 10% { content: "10%" } 20% { content: "20%" } 30% { content: "30%" } 40% { content: "40%" } 50% { content: "50%" } 60% { content: "60%" } 70% { content: "70%" } 80% { content: "80%" } 90% { content: "90%" }
95% { content: "95%" } 96% { content: "96%" } 97% { content: "97%" } 98% { content: "98%" } 99% { content: "99%" } 100% { content: "100%" } } </style> <style> .loader3 { display: block; position: relative; height: 12px; width: 80%; border: 1px solid #fff; border-radius: 10px; overflow: hidden; } .loader3::after { content: ''; width: 40%; height: 100%;
background: #FF3D00; position: absolute; top: 0; left: 0; box-sizing: border-box; animation: animloader 2s linear infinite; } @keyframes animloader { 0% { left: 0; transform: translateX(-100%); } 100% { left: 100%; transform: translateX(0%); } } .loader2 { width: 0; height: 4.8px; display: inline-block; position: relative; background: #FFF; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); box-sizing: border-box; animation: animFw 8s linear infinite; } .loader2::after, .loader2::before { content: ''; width: 10px; height: 1px; background: #FFF; position: absolute; top: 9px;
right: -2px; opacity: 0; transform: rotate(-45deg) translateX(0px); box-sizing: border-box; animation: coli1 0.3s linear infinite; } .loader2::before { top: -4px; transform: rotate(45deg); animation: coli2 0.3s linear infinite; } @keyframes animFw { 0% { width: 0; } 100% { width: 100%; } } @keyframes coli1 { 0% { transform: rotate(-45deg) translateX(0px); opacity: 0.7; } 100% { transform: rotate(-45deg) translateX(-45px); opacity: 0; } } @keyframes coli2 { 0% { transform: rotate(45deg) translateX(0px); opacity: 1; }
100% { transform: rotate(45deg) translateX(-45px); opacity: 0.7; } } </style> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=K2D:wght@200;300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Mitr:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; /* font-family: 'K2D', sans-serif; */ /* font-family: 'Kanit', Helvetica, Arial; */ /* font-family: 'Bai Jamjuree', sans-serif; */ /* font-family: 'Mitr', sans-serif; */ font-family: 'Prompt', sans-serif; /* font-family: 'poppins', sans-serif; */ /* font-family: 'Chakra Petch', sans-serif; */ } .box{ min-height: 140px; min-width: 260px; margin-left: 20px; } .loader1 { display: block; position: relative; height: 20px;
width: 140px; background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); background-repeat: no-repeat; background-size: 20px auto; background-position: 0 0, 40px 0, 80px 0, 120px 0; animation: pgfill 1s linear infinite; } @keyframes pgfill { 0% { background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 25% { background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 50% { background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 75% { background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 100% { background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0); } } section { display: flex;
justify-content: center; align-items: center; //min-height: 100vh; width: 100%; /* background: url('https://images.pexels.com/photos/1229861/pexels-photo1229861.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')no-repeat; */ /* background: url('https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg')no-repeat; */ background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } section1 { display: flex; justify-content: center; align-items: center; width: 100%; } .form-box { position: relative; width: 400px; height: 410px; background: transparent; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 20px; backdrop-filter: blur(15px); display: flex; justify-content: center; align-items: center; margin-top: 100px; } h2 { font-size: 2em; color: #fff; text-align: center;
} .inputbox { position: relative; margin: 30px 0; width: 350px; border-bottom: 2px solid #fff; text-align: center; } .inputbox label { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: #fff; font-size: 1em; pointer-events: none; transition: .5s; } input:focus~label, input:valid~label { top: -5px; } .inputbox input { width: 100%; height: 50px; background: transparent; border: none; outline: none; font-size: 1em; padding: 0 35px 0 5px; color: #fff; } .inputbox ion-icon { position: absolute; right: 8px;
color: #fff; font-size: 1.2em; top: 20px; } .forget { margin: -15px 0 15px; font-size: .9em; color: #fff; display: flex; justify-content: space-between; } .forget label input { margin-right: 3px; } .forget label a { color: #fff; text-decoration: none; } .forget label a:hover { text-decoration: underline; } button { width: 100%; height: 40px; border-radius: 40px; background: #fff; border: none; outline: none; cursor: pointer; font-size: 1em; font-weight: 600; } .register { font-size: .9em; color: #fff;
text-align: center; margin: 25px 0 10px; } .register p a { text-decoration: none; color: #fff; font-weight: 600; } .register p a:hover { text-decoration: underline; } </style> <style> #side_nav { background: #007494; min-width: 250px; max-width: 250px; transition: all 0.3s; } .content { min-height: 100vh; width: 100%; } hr { background: #eee; } .sidebar li.active { background: #eee; border-radius: 8px; } .sidebar li.active a, .sidebar li a:hover { color: #000; background: #eee; }
.sidebar li a { color: #fff; } .title { font-size: 24px; } /* .close-btn { float: right; } */ .card-title { float: left; } .card-title1 { float: right; } @media(max-width: 767px) { #side_nav { margin-left: -250px; position: fixed; min-height: 100vh; z-index: 1; } #side_nav.active { margin-left: 0; } } .formtext { border-radius: 7px; text-align: center; height: 35px; font-size: 25px; background: #c8f7c6; max-width: 150px; }
a { cursor: pointer; } .home-section .home-content { position: relative; padding-top: 15px; } .home-content .overview-boxes { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 20px; margin-bottom: 26px; row-gap: 20px; //เพิ่มสวนนี้ } .overview-boxes .box { display: flex; align-items: center; justify-content: center; width: calc(100% / 4 - 15px); background: #fff; padding: 15px 14px; border-radius: 12px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .overview-boxes .box-topic { font-size: 24px; font-weight: 500; } .home-content .box .number { display: inline-block; font-size: 35px; margin-top: -6px; font-weight: 500;
} .home-content .box .indicator { display: flex; align-items: center; } .home-content .box .indicator i { height: 20px; width: 20px; background: #8FDACB; line-height: 20px; text-align: center; border-radius: 50%; color: #fff; font-size: 20px; margin-right: 5px; } .box .indicator i.down { background: #e87d88; } .home-content .box .indicator .text { font-size: 12px; } .home-content .box .cart { display: inline-block; font-size: 32px; height: 50px; width: 50px; background: #cce5ff; line-height: 50px; text-align: center; color: #66b0ff; border-radius: 12px; margin: -15px 0 0 6px; }
.home-content .box .cart.two { color: #2BD47D; background: #C0F2D8; } .home-content .box .cart.three { color: #ffc233; background: #ffe8b3; } .home-content .box .cart.four { color: #e05260; background: #f7d4d7; } .home-content .total-order { font-size: 20px; font-weight: 500; } .home-content .sales-boxes { display: flex; justify-content: space-between; /* padding: 0 20px; */ } /* left box */ .home-content .sales-boxes .recent-sales { width: 65%; background: #fff; padding: 20px 30px; margin: 0 20px; border-radius: 12px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .home-content .sales-boxes .sales-details { display: flex; align-items: center; justify-content: space-between; }
/** #### Loader #### **/ .overlay { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background: #000; z-index: 99999; opacity: 0.85; } .overlay__inner { left: 0; top: 0; width: 100%; height: 100%; position: absolute; } .overlay__content { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } .loader { width: 48px; height: 48px; display: inline-block; position: relative; border: 3px solid; border-color:#0f0 #0000 #00FFFF #0000; border-radius: 50%; box-sizing: border-box; animation: 1s rotate linear infinite;
} .loader:before , .loader:after{ content: ''; top: 0; left: 0; position: absolute; border: 10px solid transparent; border-bottom-color:#00FFFF; transform: translate(-10px, 19px) rotate(-35deg); } .loader:after { border-color: #0f0 #0000 #0000 #0000 ; transform: translate(32px, 3px) rotate(-35deg); } @keyframes rotate { 100%{transform: rotate(360deg)} } ////////////////////////////////////////////////////////////////////////////////// .nav-box { /* position: relative; */ background: transparent; border: 2px solid rgba(255, 255, 255, 0.5); border-left: none; border-right: none; /* backdrop-filter: blur(15px); */ backdrop-filter: blur(15px) contrast(1); -webkit-backdrop-filter: blur(15px) contrast(1); display: flex; justify-content: center; align-items: center; } #ctd2 { border: 2px solid white; padding: 10px; border-radius: 15px;
background: url(https://www.i-pic.info/i/8pnT349796.jpg); background-size: cover; } .card-boxes { position: relative; width: 100%; padding: 5rem 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px; } .card-boxes .box { position: relative; background: var(--white); padding: 20px; display: flex; justify-content: flex-start; border-radius: 10px; box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08); cursor: pointer; } .card-boxes .box .numbers { position: relative; margin-left: 15px; font-size: 1.2rem; font-weight: 500; color: var(--dark-blue); } /* responsive */ @media screen and (max-width: 1200px) { .card-boxes { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 600px) { .card-boxes { width: 100%; grid-template-columns: repeat(1, 1fr); } } ///////////////////////////////////////////////////////////////////////////////////////////// .details .recent_project, .details .recent_customers { position: relative; /* display: grid; */ min-height: 430px; /* padding: 20px; */ background: var(--white); border-radius: 10px; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; overflow-y: auto; white-space: nowrap; } </style> <script> $('.open-btn').on('click',function(){ $('.sidebar').addClass('active'); }); $('.close-btn').on('click',function(){ $('.sidebar').removeClass('active'); }); </script> <footer id="myF" style=" display:none"> <div class="text-center text-warning"> <a href="https://www.facebook.com/wirat.hadkam" target="blank"><img src="https://www.i-pic.info/i/A8DE345933.png" width="23px" height="23px" /></a> Cr : By Wir@t Hadkam || <a href="https://www.facebook.com/groups/672966823753293"
target="blank"><img src="https://www.i-pic.info/i/tHQn386258.png" width="20px" height="20px" /></a> Cr : Zoom Takasila. </div> </footer>