diff --git a/CI-ColorWebs/Pages/Index.cshtml b/CI-ColorWebs/Pages/Index.cshtml index 38cb731ea7ed25f114963f9ff817dac449730854..46da5c854091eec94559acc2c2d7785c0e875e04 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 0000000000000000000000000000000000000000..a3a4b06ed3cb593e0b3dd8a76a20bee64875293b --- /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 0000000000000000000000000000000000000000..fa0041b405af102636cc9b96647356bbfec5cd2e --- /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 5a3b8470d0629dd6439a829c7d0857877951cc07..ec24fdb584851fee34e66e86600425cff0fefb44 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 b0e297a6356dd1205f3bef08f5e43642ac4c34fb..9ac6af7a6ba6a6ee3ddf50e7db7cff5b3201b6e9 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; + + +} + + +