49 lines
2.2 KiB
HTML
49 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<script src="./js/vue.global.js"></script>
|
|
<script src="./js/vuex.global.js"></script>
|
|
<script src="https://cdn.tailwindcss.com/3.3.5"></script>
|
|
<link rel="stylesheet" href="./css/style.css" />
|
|
<link rel="stylesheet" href="./css/responsive.css" />
|
|
|
|
<title>Codem Billing</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="w-full h-[100vh] relative">
|
|
<div class="w-[15%] h-[20%] absolute right-0 top-[30%] flex items-center justify-center">
|
|
<transition-group name="fadenotify">
|
|
<div
|
|
class="w-[19%] h-[25%]"
|
|
style="background-image: url(./images/billnotify.png); background-size: 100% 100%"
|
|
v-for="notification in notifications"
|
|
:key="notification.id"
|
|
>
|
|
<div class="w-full h-[35%] flex items-center justify-end">
|
|
<div
|
|
class="w-[30%] mb-[1.5vh] h-full rounded-full flex items-center justify-center"
|
|
style="background-color: #ea3352"
|
|
>
|
|
<h2 style="font-family: sf-pro-rounded-medium; font-size: 0.7vw; color: white">1</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
|
|
<transition-group name="fade">
|
|
<component v-if="activePage" :is="activePage"></component>
|
|
</transition-group>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js" type="text/javascript"></script>
|
|
<script src="./js/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|