From e383c1d25536d5d1f66a21769faee8de31721246 Mon Sep 17 00:00:00 2001 From: kush1434 Date: Mon, 4 Nov 2024 20:47:13 -0800 Subject: [PATCH] home and style changes --- navigation/create_and_compete/home.md | 8 + navigation/create_and_compete/riddle-room.md | 278 +++++++------------ navigation/create_and_compete/riddle.css | 132 +++++++++ 3 files changed, 236 insertions(+), 182 deletions(-) create mode 100644 navigation/create_and_compete/riddle.css diff --git a/navigation/create_and_compete/home.md b/navigation/create_and_compete/home.md index 60522972..3b505475 100644 --- a/navigation/create_and_compete/home.md +++ b/navigation/create_and_compete/home.md @@ -57,6 +57,14 @@ menu: nav/create_and_compete.html The **Zoom in Guess** is all about testing your attention to detail and having fun with friends. In this game, you look at a super close-up photo and try to guess who or what it is based on the small details you can see. Players can make their guesses, explain why they think they’re right, and submit their answers. You can also share your own zoomed-in images for others to guess and rate how tricky each image is. With the "guess and explain" theme, players can see what others guessed, react to answers, and share their thoughts, making it a fun space for friendly competition and conversation. Our page! Presented to you by Arhaan, Mihir, Akshaj, and Keerthan +
+ +**Riddle Room!** + +Welcome to the Riddle Room, where critical thinking and collaboration come together for an engaging challenge! Each day, a new riddle will be presented, which you can pin to the top of our channel for easy access. Answers will be revealed at the end of the day, giving you time to discuss and strategize with your fellow members in our dedicated chat box. If someone solves the riddle, our AI will promptly share the answer; otherwise, it will be revealed at day’s end to keep the suspense alive. To ensure a friendly atmosphere, any profanity will be automatically censored. Join us for a fun and thought-provoking experience! Our page! Presented to you by Kush, Tarun, Nolan, Vincent + +
+
**Doodle Game!** The **Doodle Game** is a place where people can explore themselves creatively and compete to see who has the best doodle. This allows for players to collaborate over their artistic abilities. Our room includes a chat room where players can converse about their creations, a doodle compete area, a place where people can post their art, and winners get crowned every week. This will help add to our classes page by making a fun artistic environment where everyone can collaborate. Our page! Coded by Arshia Deb Roy, Prajna Raj, Mirabelle Anderson, Alex Rubio diff --git a/navigation/create_and_compete/riddle-room.md b/navigation/create_and_compete/riddle-room.md index a552519e..0ee88c99 100644 --- a/navigation/create_and_compete/riddle-room.md +++ b/navigation/create_and_compete/riddle-room.md @@ -7,14 +7,14 @@ menu: nav/create_and_compete.html author: Kush, Tarun, Vincent, and Nolan --- +
-
+
Room Details Moderation Rules -

The main purpose of our riddle room is to have people think critically and collaborate with the other members of the channel to solve the riddle as fast as possible.

Room will consist of:

@@ -27,189 +27,103 @@ author: Kush, Tarun, Vincent, and Nolan
- - - - - Riddle Room Chat - - - -

Riddle Room Chat

- Please enter no extra characters beside the answer -
-

Riddle of the Day

-

-
-
-
- -
-

Users

-
    -
  • System
    • -
-
-
- -
- - -
+
+

Riddle of the Day

+

+
-
- - +
+
+
+

Users

+
    +
  • System
    • +
- - - - + } + + function displayMessage(message, isSystem = false) { + const messageElement = document.createElement('div'); + messageElement.classList.add('message', isSystem ? 'system-message' : 'user-message'); + messageElement.textContent = message; + chatBox.appendChild(messageElement); + chatBox.scrollTop = chatBox.scrollHeight; + } + + function addUser(newUsername) { + users.add(newUsername); + const userItem = document.createElement('li'); + userItem.textContent = newUsername; + userList.appendChild(userItem); + } + + function sendMessage() { + const messageText = messageInput.value.trim(); + if (messageText !== '') { + displayMessage(`${username}: ${messageText}`); + messageInput.value = ''; + } + } + + function checkAnswer() { + const userAnswer = answerInput.value.trim().toLowerCase(); + if (userAnswer === currentRiddle.answer) { + displayMessage(`${username} got it right!`, true); + } else { + displayMessage(`${username} guessed wrong! Try again.`, true); + } + answerInput.value = ''; + } + + displayMessage("Welcome to the Riddle Room Chat!", true); + requestUsername(); + displayRiddle(); + \ No newline at end of file diff --git a/navigation/create_and_compete/riddle.css b/navigation/create_and_compete/riddle.css new file mode 100644 index 00000000..f88ec816 --- /dev/null +++ b/navigation/create_and_compete/riddle.css @@ -0,0 +1,132 @@ +/* Base Styling */ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + padding: 20px; + background: #596972 !important; /* Light, neutral background */ + color: #B5B9B2 !important; /* Soft, brownish tone for text */ + line-height: 1.6; +} + +/* Header Styling */ +h1 { + color: #73706D; /* Neutral, muted color */ + font-size: 2.5em; + text-align: center; + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: 2px solid #73706D; +} + +p { + text-align: center; + color: #4B3C2D; /* Matching soft brown for paragraph text */ + font-size: 1.2em; + margin-bottom: 30px; +} + +/* Button Styling */ +button { + background-color: #736F6B; /* Neutral, minimalistic button color */ + color: #FFFFFF; /* White text for contrast */ + border: none; + border-radius: 8px; + padding: 10px 20px; + cursor: pointer; + font-size: 16px; + font-weight: bold; + transition: all 0.3s ease; +} + +button:hover { + background-color: #565350; /* Darker shade on hover */ +} + +/* Chat Box Styling */ +#chat-container { + display: flex; + width: 120%; + max-width: 800px; + margin: 0 auto; + background-color: #F0ECE8; /* Light, warm background for chat area */ + padding: 15px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +#chat-box { + flex-grow: 1; + padding: 10px; + height: 500px; + overflow-y: scroll; + background-color: #B5B9B2; /* Slightly darker chat background */ + margin-right: 20px; + border-radius: 8px; +} + +.message { + margin: 5px 0; + padding: 8px; + border-radius: 5px; + background-color: #A6A39F; /* Muted color for messages */ + color: #3E3A37; /* Darker text for contrast */ +} + +/* Input and Button Layout (Restored Layout) */ +.input-group { + display: flex; + align-items: center; + margin-top: 10px; +} + +#message-input, #answer-input { + flex: 1; /* Allows the input to grow */ + padding: 10px; + border: 1px solid #A6A39F; + border-radius: 8px; + background-color: #4A4848 !important; + color: #4B3C2D; +} + +#send-button, #check-answer { + width: auto; + padding: 10px 15px; + margin-left: 5px; + background-color: #565350; /* Button color */ + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + box-shadow: 0 0 10px #D5C6A1, 0 0 20px #D5C6A1, 0 0 30px #D5C6A1; /* Initial Lucent Yellow glow */ + animation: glow 1.5s ease-in-out infinite alternate; +} + +/* Glowing Effect */ +@keyframes glow { + from { + box-shadow: 0 0 10px #D5C6A1, 0 0 20px #D5C6A1, 0 0 30px #D5C6A1; /* Lucent Yellow */ + } + to { + box-shadow: 0 0 20px #D5C6A1, 0 0 30px #D5C6A1, 0 0 40px #D5C6A1; + } +} + +/* Riddle Styling */ +#riddle-container h4 { + color: #B5B9B2; /* Neutral shade for riddle title */ + font-size: 1.5em; +} + +#riddle-text { + font-size: 20px; + color: #B5B9B2; /* Minimalist, neutral tone */ + font-weight: bold; +} + +/* User List Styling */ +#users-list { + padding: 10px; + background-color: #D7D0C7; + border-radius: 8px; + color: #B5B9B2; +} \ No newline at end of file