Skip to content
Snippets Groups Projects
Commit c461a005 authored by jsg362's avatar jsg362
Browse files

Made separate page for random palette.

parent ddbd4d54
Branches main
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
CI-ColorWebs/Pages/Index.cshtml
+ 13
− 35
View file @ c461a005
......@@ -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>
<div>
<p>Click Below for our true palette generator</p>
<a asp-area="" asp-page="/TruePalette">True Palette Link</a>
</div>
</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>
......
CI-ColorWebs/Pages/Random Palette.cshtml 0 → 100644
+ 78
− 0
View file @ c461a005
@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
CI-ColorWebs/Pages/Random Palette.cshtml.cs 0 → 100644
+ 11
− 0
View file @ c461a005
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace CI_ColorWebs.Pages;
public class Random_Palette : PageModel
{
public void OnGet()
{
}
}
\ No newline at end of file
CI-ColorWebs/Pages/Shared/_Layout.cshtml
+ 4
− 1
View file @ c461a005
......@@ -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>
......
CI-ColorWebs/wwwroot/css/site.css
+ 14
− 3
View file @ c461a005
......@@ -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;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment