diff --git a/.idea/config/applicationhost.config b/.idea/config/applicationhost.config
index a8fdd992d05675a6169cc9616744c29c0b5150d4..7d6c45fff07e0dc01762183d046f91439e920f44 100644
--- a/.idea/config/applicationhost.config
+++ b/.idea/config/applicationhost.config
@@ -156,7 +156,7 @@
<virtualDirectoryDefaults allowSubDirConfig="true" />
<site name="CI-ColorWebs" id="1">
<application path="/" applicationPool="CI-ColorWebs AppPool">
- <virtualDirectory path="/" physicalPath="C:\Users\aidan\OneDrive\Documents\GitHub\color-website2\CI-ColorWebs" />
+ <virtualDirectory path="/" physicalPath="C:\Users\Jagroop\Desktop\Ci IDE folder\color-website\CI-ColorWebs" />
</application>
<bindings>
<binding protocol="http" bindingInformation="*:23781:localhost" />
diff --git a/CI-ColorWebs/CI-ColorWebs.csproj b/CI-ColorWebs/CI-ColorWebs.csproj
index 6a46cf4ec4144831d4a88b30390e1484e058787c..a168467c316abc3698a0b3bc0ee2e8f7e94a6f68 100644
--- a/CI-ColorWebs/CI-ColorWebs.csproj
+++ b/CI-ColorWebs/CI-ColorWebs.csproj
@@ -11,6 +11,8 @@
<None Update="Pages\circlebackground.jpg">
<DependentUpon>Privacy.cshtml</DependentUpon>
</None>
+ <None Include="wwwroot\css\lock.png" />
+ <None Include="wwwroot\css\padlock-unlock.png" />
</ItemGroup>
</Project>
diff --git a/CI-ColorWebs/Pages/Index.cshtml b/CI-ColorWebs/Pages/Index.cshtml
index 46da5c854091eec94559acc2c2d7785c0e875e04..cf6f1ecf0cbc4a7207fb77d4250a43c9c7e80bd5 100644
--- a/CI-ColorWebs/Pages/Index.cshtml
+++ b/CI-ColorWebs/Pages/Index.cshtml
@@ -41,13 +41,13 @@ function copyHex(celement) {
<div class = "linkDiv">
<div>
- <p>Click Below for our random palette generator</p>
- <a asp-area="" asp-page="/Random Palette">Random Palette Link</a>
+ <p>Click below for our random palette generator:</p>
+ <a asp-area="" asp-page="/Random Palette">Random Palette Generator</a>
</div>
<div>
- <p>Click Below for our true palette generator</p>
- <a asp-area="" asp-page="/TruePalette">True Palette Link</a>
+ <p>Click below for our true palette generator:</p>
+ <a asp-area="" asp-page="/TruePalette">True Palette Generator</a>
</div>
</div>
diff --git a/CI-ColorWebs/Pages/Random Palette.cshtml b/CI-ColorWebs/Pages/Random Palette.cshtml
index afafb0fce43facf059a60dc796184d62373693ba..a259a1b7d493b9c494cd81ae7201ed6ced254f9a 100644
--- a/CI-ColorWebs/Pages/Random Palette.cshtml
+++ b/CI-ColorWebs/Pages/Random Palette.cshtml
@@ -38,7 +38,7 @@ function copyHex(celement) {
<h1>Random Palette Generator</h1>
</div>
<h2>
- <p class = "genPaletteInstructions">Click on the palette below to generate random colors</p>
+ <p class = "genPaletteInstructions">Click on the palette below or use the spacebar to generate random colors</p>
<button id="genNew" class="button"></button>
<br>
<br>
@@ -66,16 +66,16 @@ function copyHex(celement) {
</div>
<canvas width="1000" height="200"></canvas>
</h2>
- <h3>
- <button id="locked1">button yay</button>
- <button id="locked2">button yay</button>
- <button id="locked3">button yay</button>
- <button id="locked4">button yay</button>
- <button id="locked5">button yay</button>
- <button id="locked6">button yay</button>
- </h3>
+ <div class = "lockDiv">
+ <button onclick = "lockToggle()" id="locked1" class = "lockButton"></button>
+ <button onclick = "lockToggle2()" id="locked2" class = "lockButton"></button>
+ <button onclick = "lockToggle3()" id="locked3" class = "lockButton"></button>
+ <button onclick = "lockToggle4()" id="locked4" class = "lockButton"></button>
+ <button onclick = "lockToggle5()" id="locked5" class = "lockButton"></button>
+ <button onclick = "lockToggle6()" id="locked6" class = "lockButton"></button>
+ </div>
<h4>
- <p>View your pallete visualized through AI art:</p>
+ <p>View your palette visualized through AI art:</p>
<span id="linkai"></span>
</h4>
<h8>
diff --git a/CI-ColorWebs/Pages/TruePalette.cshtml b/CI-ColorWebs/Pages/TruePalette.cshtml
index 09022b91a6108eb09c5c87604e25acdc573e67e5..4b507040586743f549e0de72deee073f428418ef 100644
--- a/CI-ColorWebs/Pages/TruePalette.cshtml
+++ b/CI-ColorWebs/Pages/TruePalette.cshtml
@@ -3,13 +3,8 @@
@{
ViewData["Title"] = "True Palette";
}
-<style>
- body {
- background-image: url("https://c8.alamy.com/comp/2D1P4N9/background-with-dotted-pattern-at-the-cornerswhite-backdrop-with-black-dotscirclesraster-modern-optical-pop-art-texture-for-posters-business-cards-2D1P4N9.jpg");
- background-position: 50% 50%;
- background-repeat: repeat;
- }
-</style>
+
+
<script>
src = 'truepalette.js'
@@ -28,24 +23,30 @@ function copyHex(celement) {
<div class="text-center">
- <h1 class="display-4">Welcome</h1>
+ <h1>True Palette Generator</h1>
<h2>
- <button id="gsetNew">Generate New Set Palette</button>
+
+ <p class="genPaletteInstructions">Click on the palette below or use the spacebar to generate random palettes</p>
+
+ <button id="gsetNew" class=button></button>
<br>
<br>
<span id="palNameTrue" class="paletteNameTrue"></span>
<br>
<br>
- <button id="palColor" onclick="copyHex(palColor)" class="hexcodeStyle"></button>
- <button id="palColor2" onclick="copyHex(palColor2)" class="hexcodeStyle"></button>
- <button id="palColor3" onclick="copyHex(palColor3)" class="hexcodeStyle"></button>
- <button id="palColor4" onclick="copyHex(palColor4)" class="hexcodeStyle"></button>
- <button id="palColor5" onclick="copyHex(palColor5)" class="hexcodeStyle"></button>
- <button id="palColor6" onclick="copyHex(palColor6)" class="hexcodeStyle"></button>
+ <div class="hexDiv">
+ <button id="palColor" onclick="copyHex(palColor)" class="hexcodeStyle"></button>
+ <button id="palColor2" onclick="copyHex(palColor2)" class="hexcodeStyle"></button>
+ <button id="palColor3" onclick="copyHex(palColor3)" class="hexcodeStyle"></button>
+ <button id="palColor4" onclick="copyHex(palColor4)" class="hexcodeStyle"></button>
+ <button id="palColor5" onclick="copyHex(palColor5)" class="hexcodeStyle"></button>
+ <button id="palColor6" onclick="copyHex(palColor6)" class="hexcodeStyle"></button>
+ </div>
<canvas width="1000" height='200'></canvas>
+
</h2>
<h3>
- <p>View your pallete visualized through AI art:</p>
+ <p>View your palette visualized through AI art:</p>
<span id="Tlinkai"></span>
</h3>
<h8>
diff --git a/CI-ColorWebs/wwwroot/css/lock.png b/CI-ColorWebs/wwwroot/css/lock.png
new file mode 100644
index 0000000000000000000000000000000000000000..627e165e1d8beda6f6e682db6064535d60747f65
Binary files /dev/null and b/CI-ColorWebs/wwwroot/css/lock.png differ
diff --git a/CI-ColorWebs/wwwroot/css/padlock-unlock.png b/CI-ColorWebs/wwwroot/css/padlock-unlock.png
new file mode 100644
index 0000000000000000000000000000000000000000..4cf8a9d8beee6ce58dfe5995faa67aee7b6cd50f
Binary files /dev/null and b/CI-ColorWebs/wwwroot/css/padlock-unlock.png differ
diff --git a/CI-ColorWebs/wwwroot/css/site.css b/CI-ColorWebs/wwwroot/css/site.css
index 9ac6af7a6ba6a6ee3ddf50e7db7cff5b3201b6e9..9b0e9cb13c608df994205d2c48a7a4e11e535589 100644
--- a/CI-ColorWebs/wwwroot/css/site.css
+++ b/CI-ColorWebs/wwwroot/css/site.css
@@ -151,7 +151,7 @@ body {
}
.button{
- padding: 100px 100px;
+ padding: 80px 80px;
border-radius: 12px;
background-image: url("https://www.pngmart.com/files/9/Paint-Palette-PNG-Free-Download.png");
background-repeat: round;
@@ -170,8 +170,8 @@ body {
}
.genPaletteInstructions{
- margin-top: 100px;
- margin-bottom: 150px;
+ margin-top: 15px;
+ margin-bottom: 0px;
color: #30332E;
text-align: center;
font-size: 30px;
@@ -183,8 +183,8 @@ body {
font-weight: 500;
font-size: 35px;
color: #30332E;
- margin-top: 200px;
- margin-bottom: 200px;
+ margin-top: 30px;
+ margin-bottom: 40px;
text-align: center;
@@ -254,6 +254,45 @@ body {
}
+.lockDiv {
+
+ width: 1000px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-around;
+ border: solid 2px white;
+ margin-bottom: 15px;
+ margin-left: 150px;
+
+}
+
+.lockButton {
+ padding: 12px 12px;
+ margin-right: 8px;
+ border-radius: 12px;
+ background-image: url("padlock-unlock.png");
+ background-repeat: round;
+ color: black;
+ font-weight: bold;
+ text-align: center;
+ background-color: white;
+ border: 0 solid white;
+}
+
+.lockClose {
+ padding: 12px 12px;
+ margin-right: 8px;
+ border-radius: 12px;
+ background-image: url("lock.png");
+ background-repeat: round;
+ color: black;
+ font-weight: bold;
+ text-align: center;
+ background-color: white;
+ border: 0 solid white;
+}
+
diff --git a/CI-ColorWebs/wwwroot/js/site.js b/CI-ColorWebs/wwwroot/js/site.js
index e00fd6f4801ab0d96bd4e3acd7bf7bfde625d4fe..63f2e1f8624ea9c3052e0c901104026592811343 100644
--- a/CI-ColorWebs/wwwroot/js/site.js
+++ b/CI-ColorWebs/wwwroot/js/site.js
@@ -119,3 +119,35 @@ locked5.addEventListener("click",lockedf5);
locked6.addEventListener("click",lockedf6);
+function lockToggle() {
+ const btn = document.getElementById('locked1')
+ btn.classList.toggle('lockClose')
+ }
+
+function lockToggle2() {
+ const btn = document.getElementById('locked2')
+ btn.classList.toggle('lockClose')
+}
+
+function lockToggle3() {
+ const btn = document.getElementById('locked3')
+ btn.classList.toggle('lockClose')
+}
+
+function lockToggle4() {
+ const btn = document.getElementById('locked4')
+ btn.classList.toggle('lockClose')
+}
+
+function lockToggle5() {
+ const btn = document.getElementById('locked5')
+ btn.classList.toggle('lockClose')
+}
+
+function lockToggle6() {
+ const btn = document.getElementById('locked6')
+ btn.classList.toggle('lockClose')
+}
+
+
+