Skip to content

Commit

Permalink
a #177 from Sourabh782/scroll-indicator
Browse files Browse the repository at this point in the history 
Added scroll indicator
  • Loading branch information
@4darsh-Dev
4darsh-Dev authored Aug 10, 2024
2 parents 6d2129e + c961258 commit cf4d21f
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 127 deletions.
16 changes: 16 additions & 0 deletions django-web-app/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -687,6 +687,22 @@ body {
border-bottom: 2px solid darken(var(--color-primary), 15%);
}

/* Scroll indicator */
.progress-container {
position: fixed;
/* top: 0; */
z-index: 1;
width: 100%;
height: 6px;
background: transparent;
}

.scrollIndicator {
height: 6px;
background: rgb(0, 0, 255);
width: 0%;
}

/* Keyframes for animations */
@keyframes fadeInUp {
to {
Expand Down
277 changes: 150 additions & 127 deletions django-web-app/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
Expand Down Expand Up @@ -77,7 +78,7 @@ <h1><a href="/"><img class="logo-img" src="{% static 'img/cogniguard-logo.png' %
</div>
<div class="mobile-side-items-1">
<i class="fas fa-search side-icons"></i>

<a style="color: black;" target="_blank" href="https://github.com/4darsh-Dev/CogniGaurd"><i
class="fa-brands fa-github side-icons"></i></a>
</div>
Expand All @@ -86,7 +87,7 @@ <h1><a href="/"><img class="logo-img" src="{% static 'img/cogniguard-logo.png' %
<li> <a class="menu-items" href="{% url 'home:about' %}">About</a> </li>
<li class="dropdown">
<a class="menu-items dropdown-toggle" href="#">
Dark Patterns
Dark Patterns
</a>
<ul class="dropdown-menu">
<li><a class="drop-items" href="{% url 'home:know-about-dp' %}">What are Dark Patterns</a>
Expand All @@ -109,31 +110,38 @@ <h1><a href="/"><img class="logo-img" src="{% static 'img/cogniguard-logo.png' %
</ul>
{% if user.is_authenticated %}
<div class="user-profile">
<a id="side-login" href="{% url 'home:dashboard' %}">Dashboard <i class="fas fa-user-circle"></i></a>
<a id="side-register" href="{% url 'home:logoutUser' %}">Logout <i class="fas fa-sign-out-alt"></i></a>
<a id="side-login" href="{% url 'home:dashboard' %}">Dashboard <i
class="fas fa-user-circle"></i></a>
<a id="side-register" href="{% url 'home:logoutUser' %}">Logout <i
class="fas fa-sign-out-alt"></i></a>

{% else %}


<div class="side-items">
<i class="fas fa-search side-icons"></i>
<!-- <i class="fas fa-globe side-icons"></i> -->
{% else %}

<a style="color: black;" target="_blank" href="https://github.com/4darsh-Dev/CogniGuard"><i
class="fa-brands fa-github side-icons"></i></a>

<div class="side-items">
<i class="fas fa-search side-icons"></i>
<!-- <i class="fas fa-globe side-icons"></i> -->

<a id="side-login" href="{% url 'home:loginUser' %}">Login</a>
<a class="nav-btn" id="side-register" href="{% url 'home:registerUser' %}">Get Started</a>
</div>
<a style="color: black;" target="_blank" href="https://github.com/4darsh-Dev/CogniGuard"><i
class="fa-brands fa-github side-icons"></i></a>


<a id="side-login" href="{% url 'home:loginUser' %}">Login</a>
<a class="nav-btn" id="side-register" href="{% url 'home:registerUser' %}">Get Started</a>
</div>

{% endif %}
{% endif %}
</nav>

<div class="progress" role="progressbar" aria-label="Info example" id="progress-bar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="font-size:0rem;height:6px;border-radius: 0px;background-color: rgb(0, 0, 255);">


<div class="progress-container">
<div class="scrollIndicator" id="scrollIndicator"></div>
</div>

<!-- <div class="progress" role="progressbar" aria-label="Info example" id="progress-bar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"
style="font-size:0rem;height:6px;border-radius: 0px;background-color: rgb(0, 0, 255);">
</div> -->
</section>
</header>

Expand Down Expand Up @@ -191,7 +199,7 @@ <h3>Pages</h3>
<li><a href="#">Disclaimer</a></li>
</ul>
</div>

<div class="footer-column">
<h3>Follow Us</h3>
<ul class="social-icons">
Expand All @@ -204,50 +212,53 @@ <h3>Follow Us</h3>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
</ul>
</div>
<div class="container" style="display:block; text-align: start;" >
<div class="container" style="display:block; text-align: start;">
<h4>Email Us</h4>
<div id="message-placeholder">
<!-- The message will appear here -->
</div>
<div style="display: flex; align-items: center;margin-bottom: 28px;">
<input type="text" id="message-input" placeholder="Type your message here" style="padding: 3px;">
<a href="mailto:[email protected]"><i class="material-icons" id="send-icon" style="font-size:26px;color:rgb(150, 190, 220);width: 30px;padding: 3px;cursor: pointer; margin-bottom: -5px;">send</i></a>
<input type="text" id="message-input" placeholder="Type your message here"
style="padding: 3px;">
<a href="mailto:[email protected]"><i class="material-icons" id="send-icon"
style="font-size:26px;color:rgb(150, 190, 220);width: 30px;padding: 3px;cursor: pointer; margin-bottom: -5px;">send</i></a>
</div>

</div>
<div class="container" >
{% include "visitors.html" %}
</div>
<div class="footer-bottom">
<p>Made with <i class="fa-solid fa-heart"></i> by CogniGuardians &copy; 2024</p>
</div>
</div>
<div class="chatbot-container">
<button id="chatbotToggle" class="chatbot-toggle">
<span class="material-icons" >chat</span>
</button>
<div class="chatbot" id="chatbot">
<div class="chatbot-header">
<h2><i class="fa-solid fa-robot"></i></i> Chatbot <sub>(maintenance)</sub> </h2>
<button id="chatbotClose" class="chatbot-close">&times;</button>
</div>
<div class="chatbot-body" id="chatbot-body">
<!-- Messages will appear here -->

</div>
<div class="container">
{% include "visitors.html" %}
</div>
<div class="footer-bottom">
<p>Made with <i class="fa-solid fa-heart"></i> by CogniGuardians &copy; 2024</p>
</div>
</div>
<div class="chatbot-footer">
<input type="text" id="userInput" placeholder="Type a message...">
<button onclick="sendMessage()"><i class="material-icons">send</i></a>
<div class="chatbot-container">
<button id="chatbotToggle" class="chatbot-toggle">
<span class="material-icons">chat</span>
</button>
<div class="chatbot" id="chatbot">
<div class="chatbot-header">
<h2><i class="fa-solid fa-robot"></i></i> Chatbot <sub>(maintenance)</sub> </h2>
<button id="chatbotClose" class="chatbot-close">&times;</button>
</div>
<div class="chatbot-body" id="chatbot-body">
<!-- Messages will appear here -->
</div>
<div class="chatbot-footer">
<input type="text" id="userInput" placeholder="Type a message...">
<button onclick="sendMessage()"><i class="material-icons">send</i></a>
</button>
</div>
</div>
</div>
</div>
</div>

</footer>
</div>
<script src="{% static 'js/app.js' %}"></script>
<script src="https://kit.fontawesome.com/f3379b7634.js" crossorigin="anonymous"></script>

{% comment %} <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
{% comment %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script> {% endcomment %}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
Expand All @@ -268,83 +279,95 @@ <h2><i class="fa-solid fa-robot"></i></i> Chatbot <sub>(maintenance)</sub> </h2>
}
}, 100);
});


window.addEventListener('scroll', moveScrollIndicator);

const scrollIndicatorElt = document.getElementById('scrollIndicator');

const maxHeight = window.document.body.scrollHeight - window.innerHeight;

function moveScrollIndicator(e) {
const percentage = ((window.scrollY) / maxHeight) * 100;

scrollIndicatorElt.style.width = percentage + '%';
}

function displayMessage() {
var inputField = document.getElementById('message-input');
var input = inputField.value;
var placeholder = document.getElementById('message-placeholder');

if (input) {
placeholder.innerHTML = input;
inputField.setAttribute("placeholder", "Type your message here");
} else {
placeholder.innerHTML = 'No message to display';
}
}

document.getElementById('chatbotToggle').addEventListener('click', function() {
const chatbot = document.getElementById('chatbot');
chatbot.style.display = 'flex';
loadMessages();
});

document.getElementById('chatbotClose').addEventListener('click', function() {
document.getElementById('chatbot').style.display = 'none';
});

function sendMessage() {
const userInput = document.getElementById('userInput');
const message = userInput.value.trim();
if (message) {
addMessage('user', message);
saveMessage('user', message);
userInput.value = '';

// Simulate bot response
setTimeout(() => {
const botMessage = getBotResponse(message);
addMessage('bot', botMessage);
saveMessage('bot', botMessage);
}, 1000);
}
}

function addMessage(sender, text) {
const chatbotBody = document.getElementById('chatbot-body');
const messageElement = document.createElement('div');
messageElement.classList.add('message', sender);
messageElement.innerText = text;
chatbotBody.appendChild(messageElement);
chatbotBody.scrollTop = chatbotBody.scrollHeight;
}

function getBotResponse(userMessage) {
// Simple bot logic, you can enhance this part
const responses = {
'hi': 'Hello! How can I help you today?',
'hello': 'Hi there! How can I assist you?',
'how are you': 'I am just a bot, but I am functioning as expected!',
'bye': 'Goodbye! Have a nice day!'
};
return responses[userMessage.toLowerCase()] || "Sorry, I don't understand that.";
}

function saveMessage(sender, text) {
const messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
messages.push({ sender, text });
localStorage.setItem('chatMessages', JSON.stringify(messages));
}

function loadMessages() {
const messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
const chatbotBody = document.getElementById('chatbot-body');
chatbotBody.innerHTML = ''; // Clear existing messages
messages.forEach(message => {
addMessage(message.sender, message.text);
});
}
var inputField = document.getElementById('message-input');
var input = inputField.value;
var placeholder = document.getElementById('message-placeholder');

if (input) {
placeholder.innerHTML = input;
inputField.setAttribute("placeholder", "Type your message here");
} else {
placeholder.innerHTML = 'No message to display';
}
}

document.getElementById('chatbotToggle').addEventListener('click', function () {
const chatbot = document.getElementById('chatbot');
chatbot.style.display = 'flex';
loadMessages();
});

document.getElementById('chatbotClose').addEventListener('click', function () {
document.getElementById('chatbot').style.display = 'none';
});

function sendMessage() {
const userInput = document.getElementById('userInput');
const message = userInput.value.trim();

if (message) {
addMessage('user', message);
saveMessage('user', message);
userInput.value = '';

// Simulate bot response
setTimeout(() => {
const botMessage = getBotResponse(message);
addMessage('bot', botMessage);
saveMessage('bot', botMessage);
}, 1000);
}
}

function addMessage(sender, text) {
const chatbotBody = document.getElementById('chatbot-body');
const messageElement = document.createElement('div');
messageElement.classList.add('message', sender);
messageElement.innerText = text;
chatbotBody.appendChild(messageElement);
chatbotBody.scrollTop = chatbotBody.scrollHeight;
}

function getBotResponse(userMessage) {
// Simple bot logic, you can enhance this part
const responses = {
'hi': 'Hello! How can I help you today?',
'hello': 'Hi there! How can I assist you?',
'how are you': 'I am just a bot, but I am functioning as expected!',
'bye': 'Goodbye! Have a nice day!'
};

return responses[userMessage.toLowerCase()] || "Sorry, I don't understand that.";
}

function saveMessage(sender, text) {
const messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
messages.push({ sender, text });
localStorage.setItem('chatMessages', JSON.stringify(messages));
}

function loadMessages() {
const messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
const chatbotBody = document.getElementById('chatbot-body');
chatbotBody.innerHTML = ''; // Clear existing messages
messages.forEach(message => {
addMessage(message.sender, message.text);
});
}


</script>
Expand All @@ -353,4 +376,4 @@ <h2><i class="fa-solid fa-robot"></i></i> Chatbot <sub>(maintenance)</sub> </h2>
{% endblock script %}
</body>

</html>
</html>

0 comments on commit cf4d21f

Please sign in to comment.