diff --git a/templates/index.html b/templates/index.html index eb38494..c228b37 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,4 +1,3 @@ - @@ -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; } + @@ -87,65 +208,8 @@ font_size:0, }; - - - - -#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; -} - - - - - - - -

Welcome to NexTrade

+
+ +

+ W + e + l + c + o + m + e + +    + t + o + +    + N + e + x + T + r + a + d + e +

+
@@ -230,6 +321,7 @@

Buy Stock

document.getElementById('sellStockBtn').addEventListener('click', () => { alert('Feature not implemented yet!'); }); + const toggleBtn = document.getElementById('toggleBtn'); const body = document.body; const sunContainer = document.getElementById('sunContainer'); @@ -240,20 +332,14 @@

Buy Stock

sunContainer.classList.toggle('active'); moonContainer.classList.toggle('active'); }); - - + - + + diff --git a/templates/nex.webp b/templates/nex.webp new file mode 100644 index 0000000..b6c5947 Binary files /dev/null and b/templates/nex.webp differ