kar/phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s1

Browse Source
This commit is contained in:
Suvodip
2024-06-12 22:03:40 +05:30
parent 495079802c
commit 1be005a089
12 changed files with 381 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/tick/v1.astro
View File

@@ -5,16 +5,24 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
</div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-6 select-none" id="gameDescription"></p>
<form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center">
@@ -71,7 +79,6 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div>
</form>
</div>

139
src/pages/tick/v12.astro Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body {
font-family: Quicksand;
}
input.largerCheckbox {
width: 40px;
height: 40px;
cursor: pointer;
accent-color: red; /* Change the accent color to red */
}
.greenBorder {
border: 4px solid #008000;
border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
}
.redBorder {
border: 4px solid red;
border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
}
#image1, #image2, #image3, #image4, #image5, #image6 {
width: 150px;
}
#label1, #label2, #label3, #label4, #label5, #label6 {
text-align: center;
font-weight: bold;
color: #17A1A7;
font-size: 20px;
padding-top: 10px;
}
#LearningArea, #LearningSubArea_copy {
font-size: 20px;
color: #7C4C23;
font-weight: bold;
}
.round-checkbox-label {
display: inline-block;
cursor: pointer;
position: relative;
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
width: 150px; /* Adjust to the width of your images */
text-align: center;
}
.round-checkbox-label::before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.5); /* Red background with 0.5 opacity */
position: absolute;
top: 0;
left: 0;
border-radius: 30%;
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}
input.round-checkbox-input:checked + .round-checkbox-label::before {
opacity: 1;
}
</style>
</head>
<body>
<form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p>
</div>
</label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p>
</div>
</label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p>
</div>
</label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p>
</div>
</label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p>
</div>
</label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p>
</div>
</label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div>
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p>
</div>
</form>
</body>
</html>