diff --git a/client/public/index.html b/client/public/index.html index 2264c69..e9ae4b9 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -8,7 +8,7 @@ /> <meta name="viewport" - content="width=device-width, initial-scale=1" + content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="theme-color" @@ -58,5 +58,19 @@ src="https://kit.fontawesome.com/7686f58a35.js" crossorigin="anonymous" ></script> + <script> + // Listen for the wheel event + window.addEventListener( + "wheel", + function (event) { + // Check if the Ctrl key is pressed + if (event.ctrlKey) { + // Prevent the default behavior (zooming) + event.preventDefault(); + } + }, + { passive: false } + ); // Add { passive: false } option + </script> </body> </html> diff --git a/client/src/App.css b/client/src/App.css index 58e8e28..943d13a 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -55,6 +55,11 @@ h4 { font-weight: normal; } +.link { + color: white; + text-decoration: none; +} + .input-icon-wrapper { position: relative; display: inline-flex; diff --git a/client/src/components/Council.jsx b/client/src/components/Council.jsx index 6c92f35..a26ec7a 100644 --- a/client/src/components/Council.jsx +++ b/client/src/components/Council.jsx @@ -9,11 +9,15 @@ function Council({ options }) { minHeight: "100vh", display: "flex", flexDirection: "column", - justifyContent: "space-around", + justifyContent: "end", alignItems: "center", }; - // Styles for the table container + const textAreaStyle = { + width: "90%", + transform: "translateY(-140px)", // Move the textarea up by 10px + }; + const foodsContainerStyle = { position: "absolute", top: "50%", @@ -68,11 +72,10 @@ function Council({ options }) { return ( <div style={councilStyle}> - <h1>Welcome to the council {name}</h1> <textarea className="text-input" rows="5" - style={{ width: "90%" }} + style={textAreaStyle} ></textarea> <div style={foodsContainerStyle}> {foods.map((food, index) => ( diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx index 5fb7c13..5615a57 100644 --- a/client/src/components/Navbar.jsx +++ b/client/src/components/Navbar.jsx @@ -12,7 +12,7 @@ function Navbar() { left: 0, right: 0, margin: "0 auto", - width: "90%", + width: "calc(90% + 40px)", // Adjusted width }; const navbarItemStyle = { @@ -21,17 +21,56 @@ function Navbar() { }; const linkItemStyle = { - marginLeft: "20px", + marginLeft: "25px", }; return ( <div style={navbarStyle}> - <h3 style={navbarItemStyle}>COUNCIL OF FOODS</h3> + <h3 style={navbarItemStyle}> + <a + className="link" + href="/" + > + COUNCIL OF FOODS + </a> + </h3> <div style={{ display: "flex" }}> - <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>ABOUT</h3> - <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>SETTINGS</h3> - <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>CONTACT</h3> - <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>SHARE</h3> + <h3 style={navbarItemStyle}> + <a + className="link" + href="#" + style={linkItemStyle} + > + ABOUT + </a> + </h3> + <h3 style={navbarItemStyle}> + <a + className="link" + href="#" + style={linkItemStyle} + > + SETTINGS + </a> + </h3> + <h3 style={navbarItemStyle}> + <a + className="link" + href="#" + style={linkItemStyle} + > + CONTACT + </a> + </h3> + <h3 style={navbarItemStyle}> + <a + className="link" + href="#" + style={linkItemStyle} + > + SHARE + </a> + </h3> </div> </div> );