datnguyentien204's picture
Update templates/index.html
b75eb4c verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BTL Web</title>
<link rel="stylesheet" href="static/assets/css/style.css">
<link rel="stylesheet" href="static/assets/css/swiper-bundle.min.css">
<link rel="stylesheet" type="text/css" href="static/assets/css/fontawesome-free-5.15.4-web/css/all.min.css">
</head>
<body>
<div id="chatBot">
<icon id="iconChatBot" class="fas fa-comment-dots"></icon>
<div id="chatBotContent">
<div id="chatBotContentTop">
<span id="chatBotContentTop-1">Welcome to Neural* AI Lab. How can we help you?</span>
</div>
<div id="chatBotmid">
</div>
<div id="chatBotContentBottom">
<form id="chatBotForm">
<input type="text" placeholder="Type your message here" id="chatBotInput">
<button type="submit" id="chatBotBtn">Send</button>
</form>
</div>
</div>
</div>
<!-- Phần đầu home, bao gồm video và chữ giới thiệu về team research -->
<div id="homeBtn" class="hero">
<video autoplay loop muted playsinline class="back-video">
<source src="static/assets/video/videoDNA.mp4" type="video/mp4">
</video>
<nav>
<img src="static/assets/images/icon-main.svg" alt="icon" class="logo">
<ul>
<li><a href="#homeBtn">Home</a></li>
<li><a href="#aboutBtn">About</a></li>
<li><a href="#sumenhBtn">Mission</a></li>
<li><a href="#researchBtn">Research</a></li>
<li><a href="#applicationBtn">Application</a></li>
<li><a href="#contactUsBtn">Contact Us</a></li>
</ul>
<form class="search-form">
<input type="text" placeholder="Search...">
</form>
</nav>
<div class="content">
<h1>Welcome to Neural* AI Research Laboratory</h1>
<a href="#">Explore</a>
</div>
</div>
<!-- Phần giới thiệu về team research -->
<div id="aboutBtn" class="aboutUS">
<video autoplay muted class="back-video2">
<source src="static/assets/video/videoAbout.mp4" type="video/mp4">
</video>
<div id="about1"></div>
</div>
<!-- Phần nói về sứ mệnh -->
<div id="sumenhBtn" class="sumenh">
<div id="text-sumenh-top">
<span id="text-sumenh-top-den">Our mission is to change the world and make them better by providing</span>
<span id="text-sumenh-top-xam">AI solutions in medical, revolutionizing healthcare and enhancing patient outcomes for a healthier future.</span>
</div>
<div id="gif-phattrien">
<div class="home__images">
<div class="home__swiper swiper">
<div class="swiper-wrapper">
<article class="home__article swiper-slide">
<img src="static/assets/images/ai_in_medical.jpg" alt="image" class="home__img">
</article>
<article class="home__article swiper-slide">
<img src="static/assets/images/ai2.jpg" alt="image" class="home__img">
</article>
<article class="home__article swiper-slide">
<img src="static/assets/images/ai2.jpg" alt="image" class="home__img">
</article>
<article class="home__article swiper-slide">
<img src="static/assets/images/ai3.jpg" alt="image" class="home__img">
</article>
<article class="home__article swiper-slide">
<img src="static/assets/images/ai4.jpg" alt="image" class="home__img">
</article>
<article class="home__article swiper-slide">
<img src="static/assets/images/ai5.jpg" alt="image" class="home__img">
</article>
</div>
</div>
</div>
</div>
<div id="text-sumenh-bottom">
<div id="text-sumenh-bottom1">
<div id="text-in-sm-bt1-top" class="counter" data-target="5" data-speed="500" data-suffix="+">0</div>
<div id="text-in-sm-bt1-bottom">Years of Experience</div>
</div>
<div id="text-sumenh-bottom2">
<div id="text-in-sm-bt2-top" class="counter" data-target="10" data-speed="50" data-suffix="+">0</div>
<div id="text-in-sm-bt2-bottom">Countries in Service</div>
</div>
<div id="text-sumenh-bottom3">
<div id="text-in-sm-bt3-top" class="counter" data-target="70" data-speed="50" data-suffix="%">0</div>
<div id="text-in-sm-bt3-bottom">accuracy rate in lung diagnostics</div>
</div>
<div id="text-sumenh-bottom4">
<div id="text-in-sm-bt4-top" class="counter" data-target="3000" data-speed="20" data-suffix="+">0</div>
<div id="text-in-sm-bt4-bottom">Satisfied Customers</div>
</div>
</div>
</div>
<!-- Phần nói về research -->
<div id="researchBtn" class="research">
<div id="text-rs-top">
<span id="text-rs-top-1">FOR RESEARCHER</span>
<br>
<span id="text-rs-top-2">Research with Neural* AI Research Laboratory</span>
</div>
<div id="research-children">
<div id="projects-slider-container" class="section-items-wrapper">
<div id="projects-slider-wrapper" class="section-items section-thumbnails-grid section-thumbnails-slider-mobile item-col-2">
<a href="https://huggingface.co/datnguyentien204" class="grid-item">
<div class="grid-item-image" style="background: url('https://lucidrealitylabs.com/wp-content/uploads/2023/07/Medtronic-Nurse-Training-Case-Study.png') no-repeat center / cover">
<span class="grid-item-tags"><span class="grid-item-tag">VR</span><span class="grid-item-tag">Healthcare</span></span>
</div>
<p class="grid-item-title">Medtronic HysteroLux™ Fluid Management System Medical VR Training for Nurses</p>
<p class="grid-item-text">The main objective of the project was to create a VR simulation experience that would help introduce the PMD-200 NOL®, a non-invasive and continuous pain monitoring device, which helps anesthesiologists correctly identify nociception levels of pain for the patient during the operation.</p>
</a>
<a href="https://huggingface.co/datnguyentien204" class="grid-item">
<div class="grid-item-image" style="background: url('https://lucidrealitylabs.com/wp-content/uploads/2023/11/Frame-1410125366-2.png') no-repeat center / cover">
<span class="grid-item-tags"><span class="grid-item-tag">VR</span><span class="grid-item-tag">Healthcare</span></span>
</div>
<p class="grid-item-title">Philips Quality Assurance VR Training</p>
<p class="grid-item-text">The Solution to Save Millions of Lives Yearly from Cardiovascular Disease In atherosclerosis, fatty deposits build up on the arterial walls, forming plaque. This process narrows the blood vessels and reduces blood flow. With a drug-coated angioplasty balloon, Stellarex 035, a global leader in health technology, Philips created the possibility of cleaning the vessel, ensuring […]</p>
</a>
<a href="https://github.com/datnguyen-tien204" class="grid-item">
<div class="grid-item-image" style="background: url('https://lucidrealitylabs.com/wp-content/uploads/2023/11/Roche-Case-Study-Web-2.png') no-repeat center / cover">
<span class="grid-item-tags"><span class="grid-item-tag">VR</span><span class="grid-item-tag">Healthcare</span><span class="grid-item-tag">Pharmaceutical</span></span>
</div>
<p class="grid-item-title">Roche Ophthalmology Macular Disease XR Simulation</p>
<p class="grid-item-text">Challenge &amp; Context Macular disease can take many forms, e.g. age-related macular degeneration (AMD) being one of the most common conditions and the most significant cause of sight loss. The global number of people living with macular disease globally is estimated to reach 288 million by 2040. The condition today impacts nearly 11 million people […]</p>
</a>
<a href="https://github.com/datnguyen-tien204" class="grid-item">
<div class="grid-item-image" style="background: url('https://lucidrealitylabs.com/wp-content/uploads/2023/11/Red-Cross-case-Study-Web-1.png') no-repeat center / cover">
<span class="grid-item-tags"><span class="grid-item-tag">VR</span></span>
</div>
<p class="grid-item-title">American Red Cross Lifeguard VR Training</p>
<p class="grid-item-text">Multi-Scenario Customized Simulation in Virtual Environment to Save Lives In the USA, more children ages 1–4 die from drowning than any other cause of death. For children ages 5–14, drowning is the second leading cause of unintentional injury death after motor vehicle crashes*. To address this immense challenge, the American Red Cross focuses its efforts […]</p>
</a>
</div>
</div>
<div class="section-cta">
<div class="button-research">
<a href="/home2" class="section-cta-btn button-opacity-1 button-icon">Show All Cases</a>
</div>
</div>
</div>
</div>
<!-- Phần nói về application -->
<div id="applicationBtn" class="application">
<div id="application-chilren">
<div id="text-application-top">
<span id="text-application-top-1">FOR CUSTOMERS</span>
<br>
<span id="text-application-top-2">Build with Neural* AI Research Laboratory</span>
</div>
<div id="application-bottom">
<div href="https://github.com/datnguyen-tien204" id="box1">
<div id="box1-top">
<img src="static/assets/images/brain_gradCam.png" alt="medical" loading="lazy">
</div>
<div id="box1-bottom">
<span class="text-top-box">Build</span>
<br>
<span class="text-mid-box">Neural AI* Research Lab</span>
<br>
<span class="text-bottom-box">An easy way to develop model prompts and build quickly with the Gemini API.</span>
</div>
<div class="icon_bottom">
<img class="icon-b" src="static/assets/images/icons8-external-link-60.png" alt="medical" loading="lazy">
</div>
</div>
<div id="box2">
<div id="box2-top">
<img src="static/assets/images/lung1.png" alt="medical" loading="lazy">
</div>
<div id="box2-bottom">
<span class="text-top-box">Build</span>
<br>
<span class="text-mid-box">Neural AI* Research Lab</span>
<br>
<span class="text-bottom-box">An easy way to develop model prompts and build quickly with the Gemini API.</span>
</div>
<div class="icon_bottom">
<img class="icon-b" src="static/assets/images/icons8-external-link-60.png" alt="medical" loading="lazy">
</div>
</div>
</div>
<div id="box3">
<div id="box3-top">
<img src="static/assets/images/lung2.jpg" alt="medical" loading="lazy">
</div>
<div id="box3-bottom">
<span class="text-top-box">Build</span>
<br>
<span class="text-mid-box">Neural AI* Research Lab</span>
<br>
<span class="text-bottom-box">An easy way to develop model prompts and build quickly with the Gemini API.</span>
</div>
<div class="icon_bottom">
<img class="icon-b" src="static/assets/images/icons8-external-link-60.png" alt="medical" loading="lazy">
</div>
</div>
</div>
<div class="section-cta1">
<div class="button-research1">
<a href="/home2" class="section-cta-btn button-opacity-2 button-icon">Explore more</a>
</div>
</div>
</div>
<!--Phânf nói về Contact Us-->
<div id="contactUsBtn" class="contactUS">
<div id="contactUS-children">
<div id="contactUs-left">
<div id="contactUS-leftTop">
<span id="contactUs-left-1">Contact Us</span>
<br>
<span id="contactUs-left-2">Get in touch with us</span>
<br>
<span id="contactUs-left-3">We are here to help you</span>
<br>
<span id="contactUs-left-4">info@research.synapsys.com</span>
<br>
<span id="contactUs-left-5">+1 234 567 890</span>
</div>
<div id="contactUs-left-bottom">
<div id="left">
<span id="left-1">Customer Support</span>
<br>
<span id="left-2">Our support team is available around the clock to address any concern or queries you may have </span>
</div>
<div id="mid">
<span id="mid-1">Feedback and Suggestions</span>
<br>
<span id="mid-2">We value your feedback and are continously working to improve Neural* AI Lab. Your input is crucial in shaping the future Neural* AI Lab</span>
</div>
<div id="right">
<span id="right-1">Media Inquiries</span>
<br>
<span id="right-2">For media-related questions or press inquiries, please contact us at research@synapsys.com</span>
</div>
</div>
</div>
<div id="contactUs-right">
<div id="contactUs-right-children">
<div id="contactUs-rightTop">
<span id="contactUs-right-1">Get in Touch</span>
<br>
<span id="contactUs-right-2">You can reach us anytime</span>
</div>
<div id="contactUs-rightBottom">
<form id="contact-form">
<input type="text" placeholder="&nbsp;&nbsp;&nbsp;First name" id="firstName">
<input type="text" placeholder="&nbsp;&nbsp;&nbsp;Last name" id="lastName">
<input type="text" placeholder="&nbsp;&nbsp;&nbsp;Email" id="Email">
<input type="text" name="example" list="exampleList" id="cboChon" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Code">
<datalist id="exampleList">
<option value="+86">
<option value="+84">
</datalist>
<input type="tel" placeholder="&nbsp;&nbsp;&nbsp;Phone number" id="phonenumber">
<textarea placeholder="&nbsp;&nbsp;&nbsp;&nbsp;How can we help?" id="message"></textarea>
<button type="submit" id="btnSend">Send</button>
<span id="text-dit">
By contacting us, you agree to our <a href="#"><b>Privacy Policy</b></a> and
<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#"><b>Terms of services</b></a>
</span>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Labratory</h4>
<ul>
<li><a href="#">about us</a></li>
<li><a href="#">our services</a></li>
<li><a href="#">privacy policy</a></li>
<li><a href="#">affiliate program</a></li>
</ul>
</div>
<div class="footer-col">
<h4>get help</h4>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">shipping</a></li>
<li><a href="#">returns</a></li>
<li><a href="#">order status</a></li>
<li><a href="#">payment options</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Buy our product</h4>
<ul>
<li><a href="#applicationBtn">watch</a></li>
<li><a href="#applicationBtn">AI Products</a></li>
<li><a href="#applicationBtn">Medical</a></li>
<li><a href="#applicationBtn">VR Glasses</a></li>
</ul>
</div>
<div class="footer-col">
<h4>follow us</h4>
<div class="social-links">
<a href="https://www.facebook.com/charrise.elaina?locale=vi_VN"><i class="fab fa-facebook-f"></i></a>
<a href="https://x.com/TNguyendatdtqn"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/_ngtdt204/"><i class="fab fa-instagram"></i></a>
<a href="https://weibo.com/u/7730984206"><i class="fab fa-weibo"></i></a>
<a href="https://www.xiaohongshu.com/user/profile/625adc0e0000000010009a74"><i>
<img src="static/assets/images/xhs.png" alt="linkedin" loading="lazy" style="width: 20px;height: 20px;margin-top: 10px">
</i></a>
<a href="https://www.xiaohongshu.com/user/profile/625adc0e0000000010009a74"><i>
<img src="static/assets/images/zhihu.png" alt="linkedin" loading="lazy" style="width: 20px;height: 20px;margin-top: 10px">
</i></a>
<a href="https://huggingface.co/datnguyentien204"><i>
<img src="static/assets/images/hugff.png" alt="linkedin" loading="lazy" style="width: 20px;height: 20px;margin-top: 10px">
</i></a>
<a href="https://github.com/datnguyen-tien204"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</div>
</footer>
<script src="static/assets/js/swiper-bundle.min.js"></script>
<script src="static/assets/js/main.js"></script>
<script src="static/assets/js/scrollreveal.min.js"></script>
</body>
</html>