Skip to content

Commit

Permalink
Scroll up button Added
Browse files Browse the repository at this point in the history
  • Loading branch information
@heli0707
heli0707 committed Jun 21, 2024
1 parent 5d65c37 commit 22f6393
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 37 deletions.
2 changes: 1 addition & 1 deletion chatBot/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
display: flex;
justify-content: center;
align-items: center;
background: #227ebb;
background: #2a95f6;
color: #f3f7f8;
border: none;
border-radius: 50%;
Expand Down
6 changes: 3 additions & 3 deletions css/navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,16 +120,16 @@ body{
color: #7D41E2;
}

#loginButton{
#loginButton:hover{
border: 1px solid #208FF4;
background-color: transparent;
color: #2a95f6;
}
#loginButton:hover{
/* #loginButton:hover{
border: 1px solid #f6f8f9;
background-color:#208FF4 ;
color: white;
}
} */
#signup:hover{
border: 1px solid #208FF4;
background-color: transparent;
Expand Down
137 changes: 104 additions & 33 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,45 @@
<link rel="stylesheet" href="css/sec1.css" />
<link rel="stylesheet" href="css/sec2.css" />
<link rel="stylesheet" href="css/sec3.css" />
<style>
/* Style the scroll up button */
#scrollUpBtn {
display: none;
/* Hidden by default */
position: fixed;
/* Fixed/sticky position */
bottom: 90px;
/* Place the button at the bottom of the page */
right: 22px;
/* Place the button 30px from the right */
z-index: 99;
/* Make sure it does not overlap */
border: none;
/* Remove borders */
outline: none;
/* Remove outline */
background-color: #2a95f6;
/* Set a background color */
color: white;
/* Text color */
cursor: pointer;
/* Add a mouse pointer on hover */
padding: 10px 21px 13px 21px;
/* Some padding */
border-radius: 50px;
/* Rounded corners */
font-size: 30px;
/* Increase font size */
}

#scrollUpBtn:hover {
border: 1px solid #208FF4;
background-color: transparent;
color: #2a95f6;
/* Add a dark-grey background on hover */
}
</style>

<!-- <link rel="stylesheet" href="css/sec4.css" /> -->
<!-- material -->
<link rel="stylesheet"
Expand All @@ -24,13 +63,37 @@
var navbar = document.getElementById("navbar");
navbar.classList.toggle("dark");
}


</script>
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> -->
</head>

<body>

<!-- Scroll Up Button -->
<button id="scrollUpBtn" title="Go to top">↑</button>
<script>
// Get the button
let mybutton = document.getElementById("scrollUpBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}

// When the user clicks on the button, scroll to the top of the document
mybutton.onclick = function () {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
};
</script>
<!-- Navbar ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

<div class="navbar" id="navbar">
Expand All @@ -43,35 +106,35 @@
<div class="navs2">
<!-- <img src="img/final logo 1.png" alt="" /> -->
<img src="assests/moon.png" alt="image" id="themeImg">
<button id="loginButton" class="button_nav txtColor hello" ><a href="login.html">
LogIn</a></button>
<button id="loginButton" class="button_nav txtColor hello"><a href="login.html">
LogIn</a></button>
<button id="signup" class="button_nav txtColor">Sign Up</button>
<button onclick="click" id="Calender" class="button_nav txtColor1 hello">Calendar</button>
</div>
</div>
<!--Calender-->
<!--Calender-->
<div class="overlay1" id="overlay1">
<div class="popup1">
<div class="header">
<button class="prevBtn" id="prevBtn">
<i class="fa-solid fa-chevron-left"></i>
<i class="fa-solid fa-chevron-left"></i>
</button>
<div class="monthYear" id="monthYear"></div>
<button class="nextBtn" id="nextBtn">
<i class="fa-solid fa-chevron-right"></i>
<i class="fa-solid fa-chevron-right"></i>
</button>
</div>
<div class="days">
<div class="day">Mon</div>
<div class="day">Tue</div>
<div class="day">Wed</div>
<div class="day">Thur</div>
<div class="day">Fri</div>
<div class="day">Sat</div>
<div class="day">Sun</div>
<div class="day">Mon</div>
<div class="day">Tue</div>
<div class="day">Wed</div>
<div class="day">Thur</div>
<div class="day">Fri</div>
<div class="day">Sat</div>
<div class="day">Sun</div>
</div>
<div class="dates" id="dates"></div>
</div>
</div>
</div>

<!-- <div class="overlay" id="overlay">
Expand Down Expand Up @@ -113,15 +176,21 @@
</div>
<input class="search" placeholder="Search"></input>
<div class="buttons">
<button class="s1btn1" >All</button>
<button class="s1btn1" style="background-color: white;color:black;" id = 'Tech' onclick="buttonClick('Tech')">Technology</button>
<button class="s1btn1"style="background-color: white;color:black;" id = 'branding' onclick="buttonClick('branding')">Branding </button>
<button class="s1btn1"style="background-color: white;color:black" id = 'news' onclick="buttonClick('news')" >News</button>
<button class="s1btn1"style="background-color: white;color:black" id = 'AI' onclick="buttonClick('AI')" > AI</button>
<button class="s1btn1"style="background-color: white;color:black" id = 'Management' onclick="buttonClick('Management')" >Management</button>
<button class="s1btn1"style="background-color: white;color:black" id = 'Design' onclick="buttonClick('Design')">Design</button>
<button class="s1btn1">All</button>
<button class="s1btn1" style="background-color: white;color:black;" id='Tech'
onclick="buttonClick('Tech')">Technology</button>
<button class="s1btn1" style="background-color: white;color:black;" id='branding'
onclick="buttonClick('branding')">Branding </button>
<button class="s1btn1" style="background-color: white;color:black" id='news'
onclick="buttonClick('news')">News</button>
<button class="s1btn1" style="background-color: white;color:black" id='AI' onclick="buttonClick('AI')">
AI</button>
<button class="s1btn1" style="background-color: white;color:black" id='Management'
onclick="buttonClick('Management')">Management</button>
<button class="s1btn1" style="background-color: white;color:black" id='Design'
onclick="buttonClick('Design')">Design</button>
</div>

</div>
<!-- Sec-2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

Expand Down Expand Up @@ -165,36 +234,38 @@
</form>
<div id="subscriptionMessage" style="display: none;">You have subscribed successfully!</div>
</div>

<script>
document.getElementById("subscriptionForm").addEventListener("submit", function(event) {
document.getElementById("subscriptionForm").addEventListener("submit", function (event) {
event.preventDefault(); // Prevent the form from submitting

// Get the email input value
var email = document.getElementById("emailId").value;

// Email validation using regular expression
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert("Please enter a valid email address.");
return;
}

// Simulate subscription (you may replace this with actual subscription code)
// For now, just displaying the success message
document.getElementById("subscriptionMessage").style.display = "block";
});
</script>



<div class="contact">
<div class="footer_titles">Contact Us</div>
<a href="mailto:[email protected]"><div class="mail">[email protected]</div></a>
<a href="mailto:[email protected]">
<div class="mail">[email protected]</div>
</a>
</div>
</div>

<!-- Chat bot -->
<!-- Chat bot -->
<button class="chatbot__button">
<span class="material-symbols-outlined">mode_comment</span>
<span class="material-symbols-outlined">close</span>
Expand Down

0 comments on commit 22f6393

Please sign in to comment.