Skip to content

Web #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KrishLalakiya wants to merge 2 commits into
base: app
Choose a base branch
from
Open

Web #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e538689
add authentication for Youtube using google sign in
KrishLalakiya Sep 7, 2025
9f3b13b
hhhh
KrishLalakiya Sep 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
295 changes: 295 additions & 0 deletions Dictionary.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,295 @@
/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Lato:wght@400;700&display=swap');

/* --- Main Body and Container Styling --- */
body {
font-family: 'Lato', sans-serif;
background-color: #979797;
margin: 0;
padding: 20px;
}
.container {
background-color: #ffffff;
max-width: 800px;
margin: 0 auto;
padding: 20px 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* --- Search Box Styling --- */
.search-box { display: flex; gap: 10px; margin-bottom: 30px; }
#word-input { flex-grow: 1; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; }
#search-btn { padding: 12px 20px; border: none; background-color: #007bff; color: white; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.2s; }
#search-btn:hover { background-color: #0056b3; }

/* --- Result Header (Word and Pronunciation) --- */
.result-header { border-bottom: 1px solid #e0e0e0; padding-bottom: 15px; margin-bottom: 20px; }
.result-header h1 { font-family: 'Merriweather', serif; color: #d92727; font-size: 3rem; margin: 0; }
.phonetics-container { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 10px; }
.phonetic-item { display: flex; align-items: center; gap: 8px; }
.phonetic { font-size: 1.2rem; color: #555; }
.audio-btn { background: none; border: none; cursor: pointer; font-size: 1.5rem; }

/* --- Part of Speech & Definitions --- */
.part-of-speech-section { margin-bottom: 30px; }
.part-of-speech-section h2 { font-family: 'Merriweather', serif; font-size: 1.5rem; color: #333; border-bottom: 2px solid #e0e0e0; padding-bottom: 5px; margin-bottom: 15px; }
.definitions-list { list-style-type: decimal; padding-left: 20px; }
.definitions-list li { margin-bottom: 15px; }
.definitions-list p { margin: 0; line-height: 1.6; }
.example { color: #666; font-style: italic; margin-top: 5px; padding-left: 15px; border-left: 3px solid #d0e0ff; }

/* --- NEW: Synonyms/Antonyms Tags --- */
.related-words { margin-top: 20px; }
.related-words h3 { font-size: 1.1rem; color: #555; margin-bottom: 10px; }
.tags-container { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
background-color: #eef4ff;
color: #0056b3;
border: 1px solid #d0e0ff;
border-radius: 4px;
padding: 5px 10px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.tag:hover { background-color: #0056b3; color: white; }

/* --- NEW: Source Section --- */
.source-section {
border-top: 1px solid #e0e0e0;
padding-top: 15px;
margin-top: 20px;
font-size: 0.9rem;
color: #666;
}
.source-section a { color: #007bff; text-decoration: none; }
.source-section a:hover { text-decoration: underline; }

/* --- Utility --- */
.error { color: #d92727; text-align: center; font-size: 1.2rem; }

/* --- NEW: View Controls Styling --- */
.view-controls {
display: flex;
justify-content: flex-start; /* CHANGE THIS from flex-end */
gap: 10px;
margin-bottom: 15px;
}

.view-btn {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 5px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 0.9rem;
color: #555;
font-size: 1.2rem; /* Make icons a bit bigger */
padding: 2px 10px; /* Adjust padding for a squarer look */
}

.view-btn.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}


/* --- NEW: Grid Layout Rules --- */
#result-body-container.grid-view { /* <-- THIS LINE WAS CORRECTED */
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line if needed */
gap: 20px; /* Space between the columns */
}

#result-body-container.grid-view .part-of-speech-section { /* <-- THIS LINE WAS CORRECTED */
flex: 1; /* Each section will try to take up equal space */
min-width: 250px; /* Prevents columns from becoming too narrow */
margin-bottom: 0; /* Remove the bottom margin in grid view */
}

.synonym-section .tag {
background-color: #e6f9e6; /* Light green background */
color: #0d6b0d; /* Dark green text */
border-color: #b3e0b3; /* Green border */
}

.synonym-section .tag:hover {
background-color: #0d6b0d; /* Dark green background on hover */
color: white; /* White text on hover */
}


/* Style for Antonym tags (light red) */
.antonym-section .tag {
background-color: #ffe6e6; /* Light red background */
color: #b30000; /* Dark red text */
border-color: #ffb3b3; /* Red border */
}

.antonym-section .tag:hover {
background-color: #b30000; /* Dark red background on hover */
color: white; /* White text on hover */
}


/* body
{
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 500px;
}

h1 {
text-align: center;
color: #333;
}

.search-box {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

#word-input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

#search-btn {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

#search-btn:hover {
background-color: #0056b3;
}

#result-container {
margin-top: 20px;
}

.word-info h2 {
margin-bottom: 5px;
}

.word-info p {
color: #555;
margin: 5px 0;
}

.error {
color: red;
text-align: center;
}

.audio-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
margin-left: 10px;
padding: 0;
vertical-align: middle;
}body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 500px;
}

h1 {
text-align: center;
color: #333;
}

.search-box {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

#word-input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

#search-btn {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

#search-btn:hover {
background-color: #0056b3;
}

#result-container {
margin-top: 20px;
}

.word-info h2 {
margin-bottom: 5px;
}

.word-info p {
color: #555;
margin: 5px 0;
}

.error {
color: red;
text-align: center;
}

.audio-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
margin-left: 10px;
padding: 0;
vertical-align: middle;
}
*/
30 changes: 30 additions & 0 deletions Dictionary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dictionary</title>
<link rel="stylesheet" href="Dictionary.css">
</head>
<body>

<div class="container">
<h1>Dictionary</h1>
<div class="search-box">
<input type="text" id="word-input" placeholder="Enter a word...">
<button id="search-btn">Search</button>
</div>

<div class="view-controls">
<button id="stacked-view-btn" class="view-btn active" title="Stacked View">☰</button>
<button id="grid-view-btn" class="view-btn" title="Grid View">⊞</button>
</div>

<div id="result-header-container"></div>
<div id="result-body-container"></div>

<div id="wotd-container"></div>
</div>
<script src="Dictionary.js"></script>
</body>
</html>
Loading