Skip to content

Commit

Permalink
Merge pull request #53 from siri-chandana-macha/logo
Browse files Browse the repository at this point in the history 
Added logo and reviewed changes
  • Loading branch information
@Akshat111111
Akshat111111 authored Oct 23, 2024
2 parents 4652400 + 53972eb commit 0a58220
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 71 deletions.
228 changes: 157 additions & 71 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
Expand Down Expand Up @@ -69,10 +68,132 @@
}

.gtranslate_wrapper{
position:absolute;
bottom:30px;
position: absolute;
bottom: 30px;
left: 30px;
}

#toggleBtn {
background-color: #f0f0f0;
border: none;
border-radius: 30px;
padding: 5px;
cursor: pointer;
display: flex;
align-items: center;
transition: background-color 0.3s;
}

.icon-container {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s, color 0.3s;
}

.fa-sun {
color: #ffb300;
}

.fa-moon {
color: #3f51b5;
}

.active {
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.night-mode {
background-color: #333;
}

.night-mode #toggleBtn {
background-color: #555;
}

.night-mode .active {
background-color: #777;
}

.header {
display: flex;
align-items: center;
}

.logo {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #4f9a94, #ebc08b);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin-right: 20px;
}

h1 {
margin: 0;
font-size: 3rem;
display: flex;
}

.logo img {
max-width: 100%;
height: auto;
border-radius: 50%;
}

.letter {
animation: colorChange 3s infinite; /* Animation for each letter */
}

/* Keyframes for color change */
@keyframes colorChange {
0% {
color: #2c7a73; /* First color */
}
33% {
color:#c89f6b; /* Second color */
}
67% {
color: #d85d4d; /* Third color */
}
100% {
color: #2c7a73; /* Back to first color */
}
}

/* Space class */
.space {
display: inline-block; /* Ensures space is treated as a block */
width:60 px; /* Adjust width for spacing */
}

/* Delay each letter's animation */
.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 0.1s; }
.letter:nth-child(3) { animation-delay: 0.2s; }
.letter:nth-child(4) { animation-delay: 0.3s; }
.letter:nth-child(5) { animation-delay: 0.4s; }
.letter:nth-child(6) { animation-delay: 0.5s; }
.letter:nth-child(7) { animation-delay: 0.6s; }
.letter:nth-child(8) { animation-delay: 0.7s; }
.letter:nth-child(9) { animation-delay: 0.8s; }
.letter:nth-child(10) { animation-delay: 0.9s; }
.letter:nth-child(11) { animation-delay: 1s; }
.letter:nth-child(12) { animation-delay: 1.1s; }
.letter:nth-child(13) { animation-delay: 1.2s; }
.letter:nth-child(14) { animation-delay: 1.3s; }
.letter:nth-child(15) { animation-delay: 1.4s; }
.letter:nth-child(16) { animation-delay: 1.5s; }
.letter:nth-child(17) { animation-delay: 1.6s; }
.letter:nth-child(18) { animation-delay: 1.7s; }

</style>
</head>
<body>
Expand All @@ -87,65 +208,8 @@
font_size:0,
};
</script>
<script
src="https://cdn.gtranslate.net/widgets/latest/popup.js"
defer
></script>



#toggleBtn {
background-color: #f0f0f0;
border: none;
border-radius: 30px;
padding: 5px;
cursor: pointer;
display: flex;
align-items: center;
transition: background-color 0.3s;
}
<script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>

.icon-container {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s, color 0.3s;
}

.fa-sun {
color: #ffb300;
}

.fa-moon {
color: #3f51b5;
}

.active {
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.night-mode {
background-color: #333;
}

.night-mode #toggleBtn {
background-color: #555;
}

.night-mode .active {
background-color: #777;
}
</style>
</head>
<body>

</head>

<body>
<button id="toggleBtn">
<div class="icon-container active" id="sunContainer">
<i class="fas fa-sun"></i>
Expand All @@ -155,7 +219,34 @@
</div>
</button>

<h1>Welcome to NexTrade</h1>
<div class="header">
<div class="logo">
<img src="nex.webp" alt="NexTrade Logo" width="100" height="100">
</div>
<h1>
<span class="letter">W</span>
<span class="letter">e</span>
<span class="letter">l</span>
<span class="letter">c</span>
<span class="letter">o</span>
<span class="letter">m</span>
<span class="letter">e</span>
<span class="letter"> </span>
&nbsp;&nbsp; <!-- Two non-breaking spaces after "Welcome" -->
<span class="letter">t</span>
<span class="letter">o</span>
<span class="letter"> </span>
&nbsp;&nbsp; <!-- Two non-breaking spaces after "to" -->
<span class="letter">N</span>
<span class="letter">e</span>
<span class="letter">x</span>
<span class="letter">T</span>
<span class="letter">r</span>
<span class="letter">a</span>
<span class="letter">d</span>
<span class="letter">e</span>
</h1>
</div>

<!-- MetaMask Wallet Section -->
<button id="connectWalletBtn">Connect MetaMask</button>
Expand Down Expand Up @@ -230,6 +321,7 @@ <h2>Buy Stock</h2>
document.getElementById('sellStockBtn').addEventListener('click', () => {
alert('Feature not implemented yet!');
});

const toggleBtn = document.getElementById('toggleBtn');
const body = document.body;
const sunContainer = document.getElementById('sunContainer');
Expand All @@ -240,20 +332,14 @@ <h2>Buy Stock</h2>
sunContainer.classList.toggle('active');
moonContainer.classList.toggle('active');
});


</script>

<script>
window.embeddedChatbotConfig = {
chatbotId: "0-7cUKPHhqckCZ8tKOQGd",
domain: "www.chatbase.co"
}
</script>
<script
src="https://www.chatbase.co/embed.min.js"
chatbotId="0-7cUKPHhqckCZ8tKOQGd"
domain="www.chatbase.co"
defer>
</script>
</script>
<script src="https://www.chatbase.co/embed.min.js" chatbotId="0-7cUKPHhqckCZ8tKOQGd" domain="www.chatbase.co" defer></script>
</body>
</html>
Binary file added templates/nex.webp
View file
Binary file not shown.

0 comments on commit 0a58220

Please sign in to comment.