From c461a005bdfe9c976c267c17d188ead9ac30a2cc Mon Sep 17 00:00:00 2001
From: jsg362 <127435625+jsg362@users.noreply.github.com>
Date: Mon, 22 May 2023 14:09:24 -0400
Subject: [PATCH] Made separate page for random palette.
---
CI-ColorWebs/Pages/Index.cshtml | 48 ++++---------
CI-ColorWebs/Pages/Random Palette.cshtml | 78 +++++++++++++++++++++
CI-ColorWebs/Pages/Random Palette.cshtml.cs | 11 +++
CI-ColorWebs/Pages/Shared/_Layout.cshtml | 5 +-
CI-ColorWebs/wwwroot/css/site.css | 17 ++++-
5 files changed, 120 insertions(+), 39 deletions(-)
create mode 100644 CI-ColorWebs/Pages/Random Palette.cshtml
create mode 100644 CI-ColorWebs/Pages/Random Palette.cshtml.cs
diff --git a/CI-ColorWebs/Pages/Index.cshtml b/CI-ColorWebs/Pages/Index.cshtml
index 38cb731..46da5c8 100644
--- a/CI-ColorWebs/Pages/Index.cshtml
+++ b/CI-ColorWebs/Pages/Index.cshtml
@@ -37,42 +37,20 @@ function copyHex(celement) {
<h1 class="introHeader">Welcome to Color Palette Generator!</h1>
<h2 class="introHeaderBelow">Inspiration Awaits!</h2>
</div>
- <h2>
- <p class = "genPaletteInstructions">Click on the palette below to generate random colors</p>
- <button id="genNew" class="button"></button>
- <br>
- <br>
- <span id="palName" class = "paletteName"></span>
- <br>
- <br>
- <div class="hexDiv">
- <script>
- $(".hexcodeStyle").on("click", function () {
-
- $(".hexCodeStyle").removeClass("active");
-
- $(this).addClass("active");
-
- });
-
- </script>
- <button id="color" onclick="copyHex(color)" class="hexcodeStyle"></button>
- <button id="color2" onclick="copyHex(color2)" class="hexcodeStyle"></button>
- <button id="color3" onclick="copyHex(color3)" class="hexcodeStyle"></button>
- <button id="color4" onclick="copyHex(color4)" class="hexcodeStyle"></button>
- <button id="color5" onclick="copyHex(color5)" class="hexcodeStyle"></button>
- <button id="color6" onclick="copyHex(color6)" class="hexcodeStyle"></button>
-
+
+
+ <div class = "linkDiv">
+ <div>
+ <p>Click Below for our random palette generator</p>
+ <a asp-area="" asp-page="/Random Palette">Random Palette Link</a>
</div>
- <canvas width="1000" height="200"></canvas>
- </h2>
- <h3>
- <p>View your pallete visualized through AI art:</p>
- <span id="linkai"></span>
- </h3>
- <h8>
- <p>(Keep in mind AI art is not perfect and it may take a couple of tries before you get a result you like)</p>
- </h8>
+
+ <div>
+ <p>Click Below for our true palette generator</p>
+ <a asp-area="" asp-page="/TruePalette">True Palette Link</a>
+ </div>
+ </div>
+
</div>
diff --git a/CI-ColorWebs/Pages/Random Palette.cshtml b/CI-ColorWebs/Pages/Random Palette.cshtml
new file mode 100644
index 0000000..a3a4b06
--- /dev/null
+++ b/CI-ColorWebs/Pages/Random Palette.cshtml
@@ -0,0 +1,78 @@
+@page
+@model Random_Palette
+
+@{
+ ViewData["Title"] = "Random Palette";
+}
+
+<!DOCTYPE html>
+
+
+<script>
+src = 'site.js'
+function copyHex(celement) {
+ let hexCopy = celement.innerText;
+ let input = document.createElement('input');
+ input.setAttribute('value', hexCopy);
+ document.body.appendChild(input);
+ input.select();
+
+ document.execCommand('copy');
+ document.body.removeChild(input);
+
+}
+
+
+</script>
+
+
+<html>
+<head>
+ <title>Random Pallete</title>
+</head>
+
+
+
+<div class="text-center">
+ <div class = "text-center">
+ <h1>Random Palette Generator</h1>
+ </div>
+ <h2>
+ <p class = "genPaletteInstructions">Click on the palette below to generate random colors</p>
+ <button id="genNew" class="button"></button>
+ <br>
+ <br>
+ <span id="palName" class = "paletteName"></span>
+ <br>
+ <br>
+ <div class="hexDiv">
+ <script>
+ $(".hexcodeStyle").on("click", function () {
+
+ $(".hexCodeStyle").removeClass("active");
+
+ $(this).addClass("active");
+
+ });
+
+ </script>
+ <button id="color" onclick="copyHex(color)" class="hexcodeStyle"></button>
+ <button id="color2" onclick="copyHex(color2)" class="hexcodeStyle"></button>
+ <button id="color3" onclick="copyHex(color3)" class="hexcodeStyle"></button>
+ <button id="color4" onclick="copyHex(color4)" class="hexcodeStyle"></button>
+ <button id="color5" onclick="copyHex(color5)" class="hexcodeStyle"></button>
+ <button id="color6" onclick="copyHex(color6)" class="hexcodeStyle"></button>
+
+ </div>
+ <canvas width="1000" height="200"></canvas>
+ </h2>
+ <h3>
+ <p>View your pallete visualized through AI art:</p>
+ <span id="linkai"></span>
+ </h3>
+ <h8>
+ <p>(Keep in mind AI art is not perfect and it may take a couple of tries before you get a result you like)</p>
+ </h8>
+</div>
+
+</html>
\ No newline at end of file
diff --git a/CI-ColorWebs/Pages/Random Palette.cshtml.cs b/CI-ColorWebs/Pages/Random Palette.cshtml.cs
new file mode 100644
index 0000000..fa0041b
--- /dev/null
+++ b/CI-ColorWebs/Pages/Random Palette.cshtml.cs
@@ -0,0 +1,11 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace CI_ColorWebs.Pages;
+
+public class Random_Palette : PageModel
+{
+ public void OnGet()
+ {
+
+ }
+}
\ No newline at end of file
diff --git a/CI-ColorWebs/Pages/Shared/_Layout.cshtml b/CI-ColorWebs/Pages/Shared/_Layout.cshtml
index 5a3b847..ec24fdb 100644
--- a/CI-ColorWebs/Pages/Shared/_Layout.cshtml
+++ b/CI-ColorWebs/Pages/Shared/_Layout.cshtml
@@ -23,13 +23,16 @@
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
- <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
+ <a class="nav-link text-dark" asp-area="" asp-page="/Random Palette">Random Palette</a>
</li>
<li>
<a class="nav-link text-dark" asp-area="" asp-page="/TruePalette">True Palette</a></li>
<li>
<a class="nav-link text-dark" asp-area="" asp-page="/About Us">About Us</a>
</li>
+ <li class="nav-item">
+ <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
+ </li>
</ul>
</div>
diff --git a/CI-ColorWebs/wwwroot/css/site.css b/CI-ColorWebs/wwwroot/css/site.css
index b0e297a..9ac6af7 100644
--- a/CI-ColorWebs/wwwroot/css/site.css
+++ b/CI-ColorWebs/wwwroot/css/site.css
@@ -127,8 +127,8 @@ body {
font-size: 95px;
letter-spacing: 3px;
font-weight: bold;
- margin-bottom: 105px;
- margin-top: 150px;
+ margin-bottom: 85px;
+ margin-top: 75px;
color: #30332E;
}
@@ -138,7 +138,7 @@ body {
font-size: 40px;
letter-spacing: 2px;
font-weight: normal;
- margin-bottom: 175px;
+ margin-bottom: 50px;
color: #30332E;
}
@@ -245,5 +245,16 @@ body {
+.linkDiv {
+
+ border: solid 0px black;
+ display: flex;
+ justify-content: space-evenly;
+
+
+}
+
+
+
--
GitLab