<!DOCTYPE html>
<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=Roboto:ital,wght@1,500&display=swap" rel="stylesheet">
<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=Roboto:ital,wght@1,500&display=swap" rel="stylesheet">
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<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=Oxygen:wght@300;700&family=Roboto:ital,wght@1,500&display=swap"
rel="stylesheet">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ပုရပိုက်</title>
</head>
<body>
<div id="header">
<div class="w3-animate-opacity"><h1 class="main_name">ပုရပိုက်</h1></div>
<div class="w3-animate-opacity"><h3 class="sub_name">ကြောင်တောင်တောင် ဟောစာတမ်းများ</h3></div>
</div>
<div class="main-container">
<br>
<div class="w3-container w3-center w3-animate-top item" id="box">
<br>
<br>
<img class="woman-img" src="images/undraw_woman_ffrd.svg" alt="woman">
<br>
<br>
<input class="name-input" type="text" id="name-input" placeholder="နာမည်">
<input class="birth-input" type="text" id="birth-input" placeholder="မွေးသက္ကရာဇ်">
<input class="num-input" type="text" id="num-input" placeholder="Lucky Number">
<br>
<br>
<button class="check" id="check" onclick="delay_check()">ကိုင်မယ်</button>
<div id="loading" class="loading">
<div class="lds-dual-ring" id="lds-dual-ring"></div>
</div>
<br>
<br>
</div>
<div class="w3-container w3-center w3-animate-top item" id="result">
<br>
<br>
<img class="woman-img" src="images/undraw_walking_in_rain_owdb.svg" alt="woman">
<br>
<p class="prediction-text" id="prediction-text"></p>
<button class="check" id="check" onclick="returnToIndex()">ထပ်ကိုင်မလား</button>
<br>
<br>
</div>
<div class="w3-container w3-center w3-animate-top item" id="z-box">
<br>
<br>
<img class="dream-img" src="images/undraw_dreamer_re_9tua.svg" alt="woman">
<br>
<br>
<input class="name-input" type="text" id="name-input" placeholder="နာမည်">
<input class="birth-input" type="text" id="z-month-input" placeholder="မွေးလ">
<input class="num-input" type="text" id="z-date-input" placeholder="မွေးရက်">
<br>
<br>
<button class="z-check" id="z-check" onclick="z_delay_check()">Zodiac ကြည့်မယ်</button>
<div id="z_loading" class="z_loading">
<div class="lds-dual-ring" id="lds-dual-ring"></div>
</div>
<br>
<br>
</div>
<div class="w3-container w3-center w3-animate-top item" id="z_result">
<br>
<br>
<img class="woman-img" src="images/undraw_walking_in_rain_owdb.svg" alt="woman">
<br>
<p class="z-text" id="z-text"></p>
<button class="z-check" id="z-check" onclick="z_returnToIndex()">Back Home</button>
<br>
<br>
</div>
<div class="w3-container w3-center w3-animate-top item" id="z-box">
<br>
<br>
<img class="cat-img" src="images/undraw_cat_epte.svg" alt="woman">
<br>
<br>
<h3 style="font-family: 'Oxygen', sans-serif; font-size: 20px;">ကံကောင်းစေသောနံပါတ်</h3>
<div class="num-panel">
<h3 class="rand_num" id="rand_num"></h3>
</div>
<br>
<br>
<button class="get-num" id="get-num" onclick="getRand_num()">Get Number</button>
<div id="loading" class="loading">
<div class="lds-dual-ring" id="lds-dual-ring"></div>
</div>
<br>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w3-animate-opacity" id="svg-overlay">
<path fill="#ffd6ff" fill-opacity="1"
d="M0,224L40,234.7C80,245,160,267,240,234.7C320,203,400,117,480,96C560,75,640,117,720,144C800,171,880,181,960,176C1040,171,1120,149,1200,122.7C1280,96,1360,64,1400,48L1440,32L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z">
</path>
</svg>
<div class="footer">
<p>Made By Khun Myat Hpone © 2023 Parapyte Webs</p>
</div>
</body>
</html>