Skip to content

Commit

Permalink
Merge pull request #109 from prajnar123123213/main
Browse files Browse the repository at this point in the history 
updated doodle page
  • Loading branch information
@manas12709
manas12709 authored Nov 4, 2024
2 parents 9edc699 + a18db50 commit c43cbcd
Show file tree
Hide file tree
Showing 7 changed files with 430 additions and 68 deletions.
8 changes: 8 additions & 0 deletions _includes/nav/doodle.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<table>
<tr>
<td><a href="{{site.baseurl}}/create_and_compete/doodle">Drawing Pad</a></td>
<td><a href="{{site.baseurl}}/moderation/chat_doodle/">Chat Room</a></td>
<td><a href="{{site.baseurl}}/moderation/artpost_doodle/">Artpost</a></td>
<td><a href="{{site.baseurl}}/moderation/gallery_doodle/">Gallery</a></td>
</tr>
</table>
8 changes: 3 additions & 5 deletions navigation/create_and_compete/doodle-artpost.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,11 @@
layout: post
title: Create and Compete - Doodle
search_exclude: true
menu: nav/doodle.html
permalink: /moderation/artpost_doodle/
author: Alex, Arshia, Prajna, and Mirabelle
---


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -34,7 +32,7 @@ author: Alex, Arshia, Prajna, and Mirabelle
width: 100%;
}
.photo-container {
background: white;
background: purple;
margin: 10px;
padding: 10px;
border-radius: 5px;
Expand Down Expand Up @@ -125,4 +123,4 @@ author: Alex, Arshia, Prajna, and Mirabelle
});
</script>
</body>
</html>

227 changes: 189 additions & 38 deletions navigation/create_and_compete/doodle-chat.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,100 +2,251 @@
layout: post
title: Chat Room for Doodle
description: Chat freely with everyone
menu: nav/doodle.html
permalink: /moderation/chat_doodle/
author: Arshia, Prajna, Mirabelle, Alex
---


<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Room</title>
<style>
/* Basic styling */
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: #f3f0fa;
height: 100vh;
margin: 0;
}
#mainContainer {
width: 100vw;
height: 100vh;
display: flex;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
position: relative;
transition: all 0.3s;
}
#sidebar {
width: 30%;
background-color: #e6e1f7;
border-right: 1px solid #ccc;
padding: 15px;
overflow-y: auto;
}
.chatBox {
padding: 12px;
border-bottom: 1px solid #d1c7f0;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s;
}
.chatBox:hover {
background-color: #d8cff6;
}
.chatBox h3 {
margin: 0;
font-size: 16px;
color: #5a4b91;
}
.chatBox p {
margin: 4px 0 0;
color: #836fa9;
font-size: 14px;
}
#chatContainer {
width: 150%;
max-width: 600px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
flex: 1;
padding: 15px;
background-color: #ffffff;
display: flex;
flex-direction: column;
height: 100vh;
transition: all 0.3s;
}
#doodleImage {
width: 100%;
max-height: 200px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
object-fit: cover;
border: 2px solid #a38cd9;
}
#messages {
height: 300px;
overflow-y: scroll;
border: 1px solid #ddd;
padding: 10px;
flex: 1;
overflow-y: auto;
border: 1px solid #d1c7f0;
padding: 15px;
border-radius: 8px;
margin-bottom: 10px;
margin-bottom: 15px;
background-color: #f8f6fc;
}
.message {
margin: 5px 0;
padding: 5px;
border-radius: 5px;
background-color: #d0e6f5; /* Light blue background for messages */
color: #333; /* Darker text color for readability */
margin: 8px 0;
padding: 10px;
border-radius: 10px;
background-color: #d8cff6;
color: #333;
font-size: 15px;
max-width: 80%;
}
.message:nth-child(odd) {
background-color: #a38cd9;
color: white;
}
#inputContainer {
display: flex;
}
#inputMessage {
flex: 1;
padding: 8px;
padding: 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
border: 1px solid #d1c7f0;
border-radius: 8px;
margin-right: 8px;
}
#sendButton {
padding: 8px 12px;
margin-left: 5px;
padding: 12px 16px;
font-size: 16px;
background-color: #28a745;
background-color: #6c51a4;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}
#sendButton:hover {
background-color: #533b8a;
}

/* Fullscreen button styling */
#fullscreenButton, #exitFullscreenButton {
position: absolute;
top: 15px;
right: 15px;
background-color: #6c51a4;
color: white;
border: none;
border-radius: 4px;
border-radius: 50%;
padding: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
z-index: 100;
}
#fullscreenButton:hover, #exitFullscreenButton:hover {
background-color: #533b8a;
}
#exitFullscreenButton {
display: none;
}
.fullscreen #mainContainer {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 200;
background-color: #ffffff;
}
.fullscreen #fullscreenButton {
display: none;
}
.fullscreen #exitFullscreenButton {
display: block;
}
</style>
</head>
<body>

<div id="chatContainer">
<h2>Chat Room</h2>
<div id="messages"></div>
<div id="inputContainer">
<input type="text" id="inputMessage" placeholder="Type a message..." />
<button id="sendButton">Send</button>
<div id="mainContainer">
<div id="sidebar">
<div class="chatBox" onclick="loadConversation('Alex')">
<h3>Alex</h3>
<p>"Check out this doodle!"</p>
</div>
<div class="chatBox" onclick="loadConversation('Prajna')">
<h3>Prajna</h3>
<p>"I tried a new shading technique!"</p>
</div>
<div class="chatBox" onclick="loadConversation('Arshia')">
<h3>Arshia</h3>
<p>"Let’s brainstorm more ideas!"</p>
</div>
<div class="chatBox" onclick="loadConversation('Mirabelle')">
<h3>Mirabelle</h3>
<p>"Look at the details on this one!"</p>
</div>
</div>

<div id="chatContainer">
<img id="doodleImage" src="https://via.placeholder.com/400" alt="Doodle Image">
<div id="messages"></div>
<div id="inputContainer">
<input type="text" id="inputMessage" placeholder="Type a message..." />
<button id="sendButton">Send</button>
</div>
</div>
<button id="fullscreenButton" onclick="toggleFullscreen()">&#x26F6;</button>
<button id="exitFullscreenButton" onclick="toggleFullscreen()">X</button>
</div>

<script>
// Simple front-end chat function
const messages = document.getElementById('messages');
const inputMessage = document.getElementById('inputMessage');
const sendButton = document.getElementById('sendButton');
const doodleImage = document.getElementById('doodleImage');
const mainContainer = document.getElementById('mainContainer');

const conversations = {
'Alex': ["Alex: Check out this doodle!", "You: Wow! Did you use ink?", "Alex: Yes, and some shading too."],
'Prajna': ["Prajna: I tried a new shading technique!", "You: Looks amazing! It adds depth.", "Prajna: Thanks! I've been practicing!"],
'Arshia': ["Arshia: Let’s brainstorm more ideas!", "You: How about some abstract doodles?", "Arshia: Great idea! I'll sketch something."],
'Mirabelle': ["Mirabelle: Look at the details on this one!", "You: That’s so intricate!", "Mirabelle: Thanks! It took ages."]
};

function addMessage(message, sender = "You") {
function loadConversation(chatName) {
messages.innerHTML = '';
const chatMessages = conversations[chatName] || [];
doodleImage.src = "https://via.placeholder.com/400"; // Replace with specific images per chat if available

chatMessages.forEach((msg) => {
addMessage(msg);
});
}

function addMessage(message) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.textContent = `${sender}: ${message}`;
messageDiv.textContent = message;
messages.appendChild(messageDiv);
messages.scrollTop = messages.scrollHeight; // Auto-scroll
messages.scrollTop = messages.scrollHeight;
}

sendButton.addEventListener('click', () => {
const messageText = inputMessage.value.trim();
if (messageText) {
addMessage(messageText); // Display the message
inputMessage.value = ''; // Clear the input field
addMessage(`You: ${messageText}`);
inputMessage.value = '';
}
});

inputMessage.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendButton.click(); // Send on Enter key press
if (e.key === 'Enter') sendButton.click();
});

function toggleFullscreen() {
document.body.classList.toggle('fullscreen');
}

loadConversation('Alex');
</script>

</body>
</html>
</html>
Loading

0 comments on commit c43cbcd

Please sign in to comment.