Skip to content

Commit

Permalink
color palette added
Browse files Browse the repository at this point in the history
  • Loading branch information
@advika31
advika31 committed Jun 16, 2024
1 parent cdc27a0 commit 447e59a
Show file tree
Hide file tree
Showing 2 changed files with 344 additions and 3 deletions.
145 changes: 142 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
<link rel="stylesheet" href="styles-header.css">
<link rel="stylesheet" href="./styles-type.css">
<link rel="stylesheet" href="styles-footer.css">
<link rel="stylesheet" href="palette.css">
</head>

<body>
Expand All @@ -42,7 +43,7 @@
</div>
<div class="header-icons">
<div class="footer-item">
<a class="footer-icons" href="" target="_blank">
<a class="footer-icons" href="void:javascrpit(0)" >
<i class="fa fa-paint-brush"></i>
</a>
</div>
Expand All @@ -59,9 +60,147 @@

<!-- <img src="i-icon.svg" class=" alt="Icon 2"> -->
<!-- <img src="keyboard.svg" class=" alt="Icon 3"> -->

</div>
</div>

</div>
<!-- Colour palette by Advika and Pulak -->

<style>
.theme-selector {
display: none;
position: fixed;
top: 50px;
right: 20px;
width: 400px;
z-index: 1000;
background-color: #073642;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 20px;
}

.theme-selector.show {
display: block;
}
</style>

<div class="theme-selector">
<div class="container">
<div class="search-bar">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" placeholder="Search..." id="search-input">
</div>
<ul id="theme-list">
<li class="theme-item" data-theme-class="theme-bento">
<span class="theme-name"><b>bento</b></span>
<div class="color-palette">
<span class="color-button" style="background: #2d394d;"></span>
<span class="color-button" style="background: #ff7a90;"></span>
<span class="color-button" style="background: #fffaf8;"></span>
</div>
</li>

<li class="theme-item" data-theme-class="theme-blue-dolphin">
<span class="theme-name">blue dolphin</span>
<div class="color-palette">
<span class="color-button" style="background: #00e4ff;"></span>
<span class="color-button" style="background: #014961;"></span>
<span class="color-button" style="background: #ffcefb;"></span>
</div>
</li>

<li class="theme-item" data-theme-class="theme-monokai">
<span class="theme-name">monokai</span>
<div class="color-palette">
<span class="color-button" style="background: #a6e22e;"></span>
<span class="color-button" style="background: #e6db74;"></span>
<span class="color-button" style="background: #e2e2dc;"></span>
</div>
</li>

<li class="theme-item" data-theme-class="theme-fledling">
<span class="theme-name">fledling</span>
<div class="color-palette">
<span class="color-button" style="background: #fc6e83;"></span>
<span class="color-button" style="background: #474747;"></span>
<span class="color-button" style="background: #e6d5d3;"></span>
</div>
</li>

<li class="theme-item" data-theme-class="theme-lavender">
<span class="theme-name">lavender</span>
<div class="color-palette">
<span class="color-button" style="background: #ada6c2;"></span>
<span class="color-button" style="background: #e4e3e9;"></span>
<span class="color-button" style="background: #2f2a41;"></span>
</div>
</li>

<li class="theme-item" data-theme-class="theme-dark">
<span class="theme-name">dark</span>
<div class="color-palette">
<span class="color-button" style="background: #eee;"></span>
<span class="color-button" style="background: #444;"></span>
<span class="color-button" style="background: #191919;"></span>
</div>
</li>

<li class="theme-item" data-theme-class="theme-bushido">
<span class="theme-name">bushido</span>
<div class="color-palette">
<span class="color-button" style="background: #ec4c56;"></span>
<span class="color-button" style="background: #596172;"></span>
<span class="color-button" style="background: #f6f0e9;"></span>
</div>
</li>

<li class="theme-item" data-theme-class="theme-lime">
<span class="theme-name">lime</span>
<div class="color-palette">
<span class="color-button" style="background: #93c247;"></span>
<span class="color-button" style="background: #4b5257;"></span>
<span class="color-button" style="background: #bfcfdc;"></span>
</div>
</li>
</ul>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const themeItems = document.querySelectorAll('.theme-item');

themeItems.forEach(item => {
item.addEventListener('click', function() {
themeItems.forEach(item => item.classList.remove('selected'));
this.classList.add('selected');

const themeClass = this.getAttribute('data-theme-class');
document.body.className = themeClass;
});
});

const searchInput = document.getElementById('search-input');
if (searchInput) {
searchInput.addEventListener('input', function() {
const filter = searchInput.value.toLowerCase();
themeItems.forEach(item => {
const themeName = item.querySelector('.theme-name').textContent.toLowerCase();
if (themeName.includes(filter)) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
});
}

document.querySelector('.fa-paint-brush').addEventListener('click', function() {
document.querySelector('.theme-selector').classList.toggle('show');
});
});
</script>

<!-- Type started (Riya Ahlawat and Samriddhi) -->
<main>
Expand Down Expand Up @@ -152,7 +291,7 @@ <h3>AWS Lambda ⚡</h3>
consume.</p>
</li>
<li>
<h3>Amazon RDS 🗄️</h3>
<h3>Amazon RDS 🗄</h3>
<p>Amazon Relational Database Service (RDS) makes it easy to set up, operate, and scale a relational database in
the cloud. It provides cost-efficient and resizable capacity while automating time-consuming administration
tasks.</p>
Expand Down
202 changes: 202 additions & 0 deletions palette.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
/* Color palette by Advika and Pulak */
.theme-selector {
display: flex;
left: 35%;
top: 0%;
justify-content: center;
align-items: center;
height: auto;
margin: -20px;
padding: 10px;
background-color: var(--bg-color, #002b36);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-color, #eee);

}

.theme-selector.container {
width: 400px;
max-width: 100%;
background-color: var(--sub-alt-color, #073642);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 20px;
overflow-y: auto;
}

.theme-selector .search-bar {
display: flex;
align-items: center;
padding: 10px;
background-color: var(--sub-alt-color, #073642);
border-radius: 5px;
margin-bottom: 20px;
}

.theme-selector .search-bar i {
color: var(--text-color,#eee);
margin-right: 10px;
}

.theme-selector .search-bar input {
width: 100%;
padding: 5px;
border: none;
background: transparent;
color: var(--text-color, #eee);
font-size: 1rem;
outline: none;
}

.theme-selector #theme-list {
list-style-type: none;
padding: 0;
margin: 0;
}

.theme-selector .theme-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: var(--sub-alt-color, #002b36);
border-radius: 5px;
margin-bottom: 10px;
cursor: pointer;
transition: background-color 0.2s ease;
}

.theme-selector .theme-name {
font-size: 1rem;
color: var(--text-color, #eee);
}

.theme-selector .color-palette {
display: flex;
}

.theme-selector .color-button {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-left: 5px;
cursor: pointer;
border: 1px solid var(--sub-alt-color, #073642);
}


/* Color - theme options*/

.theme-bento {
--sub-alt-color:#30466d;
--bgColor: #2d394d;
--textColor: #fffaf8;
--black: #ff7a90;
--incorrect: #bc42ba;
--hover: #4a768d;
--correct: #263041;
--wrong-highlighted: #fc2032;
--neon: #f04040;
}

.theme-blue-dolphin {
--sub-alt-color:#689da3;
--bgColor: #003950;
--textColor: #82eaff;
--black: #ffcefb;
--incorrect: #ffbde6;
--hover: #00e4ff;
--correct: #014961;
--wrong-highlighted: #d1a5fd;
--neon: #ff8188;

}

.theme-monokai {
--sub-alt-color:#717f54;
--bgColor: #272822;
--black: #a6e22e;
--hover: #e6db74;
--correct: #1f201b;
--textColor: #e2e2dc;
--incorrect: #ad637e;
--neon: #fd971f;
--wrong-highlighted: #f92672;
}

.theme-fledling {
--bgColor: #3b363f;
--black: #fc6e83;
--hover: #8e5568;
--sub-alt-color: #fc6e83;
--textColor: #e6d5d3;
--incorrect: #f52443;
--neon: #bd001c;
--wrong-highlighted: #ff0a2f;
--correct: #c5cd54;
}

.theme-lavender {
--sub-alt-color:#a19bb9;
--bgColor: #ada6c2;
--black: #e4e3e9;
--hover: #e4e3e9;
--correct: #a19bb9;
--textColor: #2f2a41;
--incorrect: #ca4754;
--neon: #7e2a33;
--wrong-highlighted: #ca4754;
}

nav .textButton {
border-radius: 10rem !important;
background: var(--text-color);
color: var(--main-color);
}

nav .textButton:hover {
color: var(--bg-color);
background: var(--text-color);
}

body.crtmode nav .textButton {
box-shadow: 3px 0 1px var(--crt-text-color-glow),
-3px 0 var(--crt-text-color-glow), 0 0 3px;
}

.theme-dark {
--bgColor: #111;
--black: #eee;
--hover: #444;
--sub-alt-color: #191919;
--correct: #191919;
--textColor: #eee;
--inncorrect: #da3333;
--wrong-highlighted: #da3333;
--neon: #791717;
}

.theme-bushido {
--bgColor: #242933;
--black: #ec4c56;
--hover: #596172;
--sub-alt-color: #1c222d;
--textColor: #f6f0e9;
--incorrect: #ec4c56;
--wrong-highlighted: #9b333a;
--correct: #ecdc4c;
--neon: #bdb03d;
}

.theme-lime {
--bgColor: #7c878e;
--black: #93c247;
--hover: #4b5257;
--sub-alt-color: #737d82;
--textColor: #bfcfdc;
--incorrect: #ea4221;
--wrong-highlighted: #7e2a33;
--correct: #ea4221;
--neon: #7e2a33;
}

0 comments on commit 447e59a

Please sign in to comment.