Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

issue#24 solved #38

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

issue#24 solved #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,27 @@ <h1>Check If you are a Thala ?
</h1>
<form id="userForm">
<input type="text" id="query" name="query" placeholder="Enter... for example: 'Subinoy'" required>
<button type="button" onclick="generateContent()" class="checkButton" >Check</button>

<div class="form-buttons">

<button type="button" onclick="generateContent()" class="checkButton">Check</button>

<button onclick="handleNewsearch(event)" class="animated-button newSearch">
<svg viewBox="0 0 24 24" class="arr-2" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z">
</path>
</svg>
<span class="text">New Search</span>
<span class="circle"></span>
<svg viewBox="0 0 24 24" class="arr-1" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z">
</path>
</svg>
</button>

</div>
</form>
<div id="loadingAnimation"></div>

Expand Down
6 changes: 6 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,12 @@ async function generateContent() {
}
}

function handleNewsearch(event) {
event.preventDefault();
document.getElementById("query").value = '';
location.reload();
}

function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
Expand Down
215 changes: 191 additions & 24 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@
body {
margin: 0;
padding: 0;
background: url("bg.svg") center/750% no-repeat; /* Replace 'your-background-image-url.jpg' with the actual URL */
background: url("bg.svg") center/750% no-repeat;
/* Replace 'your-background-image-url.jpg' with the actual URL */
font-family: "Figtree", sans-serif;
height: 100%;
width: 100%;
overflow: hidden; /* Prevent scrollbars caused by background image */
overflow: hidden;
/* Prevent scrollbars caused by background image */
display: flex;
align-items: center;
justify-items: center;
Expand All @@ -32,15 +34,15 @@ body {
margin: 20vh auto;
max-width: 500px;
width: 80%;
background: rgba(
255,
255,
255,
0.221
); /* Background color with transparency */
background: rgba(255,
255,
255,
0.221);
/* Background color with transparency */
border-radius: 12px;
padding: 20px;
backdrop-filter: blur(10px); /* Glassmorphism effect */
backdrop-filter: blur(10px);
/* Glassmorphism effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.131);
}

Expand All @@ -61,12 +63,12 @@ input {
padding: 8px;
border: none;
border-radius: 10px;
background: rgba(
255,
255,
255,
0.7
); /* Input background color with transparency */
background: rgba(255,
255,
255,
255,
0.7);
/* Input background color with transparency */
height: 20px;
}

Expand All @@ -75,14 +77,16 @@ button {
padding: 10px;
border: none;
border-radius: 10px;
background: #08054c; /* Button background color */
background: #08054c;
/* Button background color */
color: #fff;
cursor: pointer;
transition: background 0.3s ease;
}

button:hover {
background: #05032f; /* Button background color on hover */
background: #05032f;
/* Button background color on hover */
}

#resultContainer {
Expand All @@ -105,46 +109,54 @@ button:hover {
height: 5rem;
padding: 0;
align-items: center;

button {
background: none;
display: flex;
align-items: center;
justify-items: center;
}
}

.shareButton {
width: 3rem;
padding: 0;
}

#shareIcon {
height: 30px;
}

#clipIcon {
height: 20px;
}

/* src/style.css */
#foot a {
text-decoration: none; /* Remove text decoration for all anchor links inside #foot */
text-decoration: none;
/* Remove text decoration for all anchor links inside #foot */
color: black;
}

#foot a:hover {
text-decoration: underline; /* Add underline on hover (optional) */
text-decoration: underline;
/* Add underline on hover (optional) */
}

.lower {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.clip {
display: flex;
flex-direction: row;
height: 5rem;
padding: 0;
align-items: center;
justify-items: center;

button {
background: none;
align-items: center;
Expand All @@ -153,7 +165,7 @@ button:hover {
}
}

.linkCopied{
.linkCopied {
background: rgba(29, 29, 29, 0.6);
color: white;
border-radius: 10px;
Expand All @@ -167,14 +179,17 @@ button:hover {
justify-items: center;
align-items: center;
}
.toast{

.toast {
transition: all 0.3s ease-in-out;
}
.hiddenToast{

.hiddenToast {
position: absolute;
bottom: -100px;
}
.showToast{

.showToast {
position: absolute;
bottom: 60px;
}
Expand Down Expand Up @@ -205,5 +220,157 @@ button:hover {
height: 20px;
background: #333;
border-radius: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}

.form-buttons {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 1rem;
}

.checkButton {
width: 40%;
border-radius: 100px;
font-weight: 600;
color: #fff;
}

.newSearch {
width: 40%;
}

.animated-button {
width: 40%;
position: relative;
display: flex;
flex-shrink: none;
align-items: center;
gap: 2px;
padding: 4px 35px;
border: 4px solid;
border-color: transparent;
font-size: 16px;
background-color: inherit;
border-radius: 100px;
font-weight: 600;
color: #fff;
background-color: #08054c;
box-shadow: 0 0 0 2px #08054c;
cursor: pointer;
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button svg {
position: absolute;
width: 24px;
fill: #ffffff;
z-index: 9;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
right: 16px;
}

.animated-button .arr-2 {
left: -25%;
}

.animated-button .circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: #ffffff;
border-radius: 50%;
opacity: 0;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
position: relative;
z-index: 1;
transform: translateX(-12px);
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
box-shadow: 0 0 0 12px transparent;
color: #08054c;
border-radius: 12px;
}

.animated-button:hover .arr-1 {
right: -25%;
}

.animated-button:hover .arr-2 {
left: 16px;
}

.animated-button:hover .text {
transform: translateX(12px);
}

.animated-button:hover svg {
fill: #08054c;
}

.animated-button:active {
scale: 0.95;
box-shadow: 0 0 0 4px #fff;
}

.animated-button:hover .circle {
width: 220px;
height: 220px;
opacity: 1;
}

@media screen and (max-width: 527px) {
.form-buttons {
width: 100%;
height: 6rem;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin-top: 1rem;
}

.checkButton {
width: 52%;
}

.newSearch {
width: 52%;
}

.animated-button {
width: 52%;
position: relative;
display: flex;
flex-shrink: none;
align-items: center;
gap: 2px;
padding: 4px 25px;
border: 4px solid;
border-color: transparent;
font-size: 14px;
background-color: inherit;
border-radius: 100px;
font-weight: 600;
color: #fff;
background-color: #08054c;
box-shadow: 0 0 0 2px #08054c;
cursor: pointer;
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
}