index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="ears">
<div class="ear left_ear">
<div class="inner_ear left_inner_ear"></div>
</div>
<div class="ear right_ear">
<div class="inner_ear left_inner_ear"></div>
</div>
</div>
<div class="face">
<div class="eyes">
<span class="eye">
<div class="pupils">
<div class="reflection1"></div>
<div class="reflection2"></div>
</div>
</span>
<span class="eye">
<div class="pupils">
<div class="reflection1"></div>
<div class="reflection2"></div>
</div>
</span>
</div>
<div class="nose"></div>
<div class="mouth">
<div class="teeth left_teeth"></div>
<div class="teeth right_teeth"></div>
<div class="tongue"></div>
</div>
<div class="spots">
<div class="spot spot1"></div>
<div class="spot spot2"></div>
<div class="spot spot3"></div>
</div>
<div class="whiskers">
<div class="whisker_left whisker1"></div>
<div class="whisker_left whisker2"></div>
<div class="whisker_left whisker3"></div>
<div class="whisker_right whisker4"></div>
<div class="whisker_right whisker5"></div>
<div class="whisker_right whisker6"></div>
</div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnateeth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationColor"></span>
<span id="dnaanimation"></span>
<!-- <span id="dnaspecial"></span> -->
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Teeth</b><span class="badge badge-dark ml-2" id="teethcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="teethcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eye shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
<input type="range" min="1" max="3" class="form-control-range" id="eyeshape">
</div>
<div class="form-group">
<label for="formControlRange"><b>Decoration</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
<input type="range" min="1" max="3" class="form-control-range" id="decoration">
</div>
<div class="form-group">
<label for="formControlRange"><b>Decoration color</b><span class="badge badge-dark ml-2" id="decorationColorCode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="decorationcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
<input type="range" min="1" max="4" class="form-control-range" id="animation">
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>tommahawk25 on January 2023</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
cats.css
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;
}
.face {
background-color: rgb(255 245 185);
width: 200px;
height: 180px;
border-radius: 50%;
position: relative;
}
.eyes {
position: relative;
top: 40px;
display: flex;
}
.eye {
background-color: white;
border-radius: 50%;
width: 50px;
height: 50px;
margin: 25px;
position: relative;
}
.pupils {
background-color: black;
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: 10px;
left: 10px;
}
.reflection1 {
background-color: white;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
top: 8px;
left: 5px;
}
.reflection2 {
background-color: white;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
top: 18px;
left: 4px;
}
.ears {
position: relative;
}
.ear {
border-radius: 90% 0 90% 0;
background-color: #ffcc80;
height: 100px;
width: 100px;
position: absolute;
}
.left_ear {
transform: scale(1,-1) rotate(0deg);
left: 0;
}
.right_ear {
left: 100px;
}
.inner_ear {
border-radius: 90% 0 90% 0;
background-color: pink;
height: 70px;
width: 70px;
position: absolute;
}
.left_inner_ear {
left: 15px;
top: 15px;
}
.right_inner_ear {
transform: scale(1,-1) rotate(0deg);
left: 100px;
}
.nose {
background-color: black;
height: 15px;
width: 20px;
border-radius: 50%;
position: relative;
left: 93px;
top: 18px;
}
.mouth {
height: 10px;
width: 50px;
border-width: 3px;
border-radius: 100% 100% 100% 100%;
border-style: solid;
border-top: none;
border-left: none;
border-right: none;
position: relative;
left: 78px;
top: 20px;
}
.teeth {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: black transparent transparent transparent;
position: absolute;
top: 9px;
left: 4px;
}
.left_teeth {
transform: rotate(8deg);
}
.right_teeth {
left: 36px;
transform: rotate(-8deg);
}
.tongue {
width: 10px;
height: 10px;
border-radius: 0% 0% 100% 100%;
background-color: pink;
border-color: black;
position: absolute;
top: 10px;
left: 23px;
}
.spots {
position: relative;
}
.spot {
width: 50px;
height: 15px;
border-radius: 40%;
background-color: rgb(158, 146, 129);
position: absolute;
left: 76px;
}
.spot1 {
top: -119px;
}
.spot2 {
width: 38px;
height: 13px;
top: -102px;
left: 83px;
}
.spot3 {
width: 26px;
height: 11px;
top: -87px;
left: 90px;
}
.whisker_left {
width: 30px;
height: 4px;
background-color: rgb(70, 70, 70);
margin: 8px;
position: relative;
top: -20px;
left: -5px;
}
.whisker1 {
transform: rotate(10deg);
}
.whisker2 {
transform: rotate(0deg);
}
.whisker3 {
transform: rotate(-10deg);
}
.whisker_right {
width: 30px;
height: 4px;
background-color: rgb(70, 70, 70);
margin: 8px;
position: relative;
top: -57px;
left: 160px;
}
.whisker4 {
transform: rotate(-10deg);
}
.whisker5 {
transform: rotate(0deg);
}
.whisker6 {
transform: rotate(10deg);
}
/* .cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
border-radius: 50%;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */
animations.css
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;
}
.face {
background-color: rgb(255 245 185);
width: 200px;
height: 180px;
border-radius: 50%;
position: relative;
}
.eyes {
position: relative;
top: 40px;
display: flex;
}
.eye {
background-color: white;
border-radius: 50%;
width: 50px;
height: 50px;
margin: 25px;
position: relative;
}
.pupils {
background-color: black;
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: 10px;
left: 10px;
}
.reflection1 {
background-color: white;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
top: 8px;
left: 5px;
}
.reflection2 {
background-color: white;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
top: 18px;
left: 4px;
}
.ears {
position: relative;
}
.ear {
border-radius: 90% 0 90% 0;
background-color: #ffcc80;
height: 100px;
width: 100px;
position: absolute;
}
.left_ear {
transform: scale(1,-1) rotate(0deg);
left: 0;
}
.right_ear {
left: 100px;
}
.inner_ear {
border-radius: 90% 0 90% 0;
background-color: pink;
height: 70px;
width: 70px;
position: absolute;
}
.left_inner_ear {
left: 15px;
top: 15px;
}
.right_inner_ear {
transform: scale(1,-1) rotate(0deg);
left: 100px;
}
.nose {
background-color: black;
height: 15px;
width: 20px;
border-radius: 50%;
position: relative;
left: 93px;
top: 18px;
}
.mouth {
height: 10px;
width: 50px;
border-width: 3px;
border-radius: 100% 100% 100% 100%;
border-style: solid;
border-top: none;
border-left: none;
border-right: none;
position: relative;
left: 78px;
top: 20px;
}
.teeth {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: black transparent transparent transparent;
position: absolute;
top: 9px;
left: 4px;
}
.left_teeth {
transform: rotate(8deg);
}
.right_teeth {
left: 36px;
transform: rotate(-8deg);
}
.tongue {
width: 10px;
height: 10px;
border-radius: 0% 0% 100% 100%;
background-color: pink;
border-color: black;
position: absolute;
top: 10px;
left: 23px;
}
.spots {
position: relative;
}
.spot {
width: 50px;
height: 15px;
border-radius: 40%;
background-color: rgb(158, 146, 129);
position: absolute;
left: 76px;
}
.spot1 {
top: -119px;
}
.spot2 {
width: 38px;
height: 13px;
top: -102px;
left: 83px;
}
.spot3 {
width: 26px;
height: 11px;
top: -87px;
left: 90px;
}
.whisker_left {
width: 30px;
height: 4px;
background-color: rgb(70, 70, 70);
margin: 8px;
position: relative;
top: -20px;
left: -5px;
}
.whisker1 {
transform: rotate(10deg);
}
.whisker2 {
transform: rotate(0deg);
}
.whisker3 {
transform: rotate(-10deg);
}
.whisker_right {
width: 30px;
height: 4px;
background-color: rgb(70, 70, 70);
margin: 8px;
position: relative;
top: -57px;
left: 160px;
}
.whisker4 {
transform: rotate(-10deg);
}
.whisker5 {
transform: rotate(0deg);
}
.whisker6 {
transform: rotate(10deg);
}
/* .cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
border-radius: 50%;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"teethColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationColor" : 13,
// "decorationSidescolor" : 13,
"animation" : 1,
// "lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headcolor);
$('#dnateeth').html(defaultDNA.teethColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
$('#dnashape').html(defaultDNA.eyesShape)
$('#dnadecoration').html(defaultDNA.decorationPattern)
$('#dnadecorationColor').html(defaultDNA.decorationColor)
// $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
$('#dnaanimation').html(defaultDNA.animation)
// $('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnateeth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationColor').html()
// dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
// dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
teethColor(colors[dna.teethColor],dna.teethColor)
$('#teethcolor').val(dna.teethColor)
eyesColor(colors[dna.eyeColor],dna.eyesColor)
$('#eyesdolor').val(dna.eyesColor)
earsColor(colors[dna.earsColor],dna.earsColor)
$('#earscolor').val(dna.earsColor)
eyeVariation(dna.eyesShape)
$('#eyeshape').val(dna.eyesShape)
decorationVariation(dna.decorationPattern)
$('#decoration').val(dna.decorationPattern)
decorationColor(colors[dna.decorationColor],dna.decorationColor)
$('#decorationcolor').val(dna.decorationColor)
animation(dna.animation)
$('#animation').val(dna.animation)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#teethcolor').change(()=>{
var colorVal = $('#teethcolor').val()
teethColor(colors[colorVal],colorVal)
})
$('#eyescolor').change(()=>{
var colorVal = $('#eyescolor').val()
eyesColor(colors[colorVal],colorVal)
})
$('#earscolor').change(()=>{
var colorVal = $('#earscolor').val()
earsColor(colors[colorVal],colorVal)
})
$('#eyeshape').change(()=>{
var shape = parseInt($('#eyeshape').val())
eyeVariation(shape)
})
$('#decoration').change(()=>{
var decoration = parseInt($('#decoration').val())
decorationVariation(decoration)
})
$('#decorationcolor').change(()=>{
var colorVal = $('#decorationcolor').val()
decorationColor(colors[colorVal],colorVal)
})
$('#animation').change(()=>{
var animationVal = parseInt($('#animation').val())
animation(animationVal)
})
catFactory.js
//Random color
function getColor() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
return randomColor
}
function genColors(){
var colors = []
for(var i = 10; i < 99; i ++){
var color = getColor()
colors[i] = color
}
return colors
}
//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
$('.face').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function teethColor(color,code) {
$('.teeth').css('border-color', '#' + color + ' transparent transparent transparent') //This changes the color of the cat
$('#teethcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnateeth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
$('.pupils').css('background', '#' + color) //This changes the color of the cat
$('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earsColor(color,code) {
$('.ear').css('background', '#' + color) //This changes the color of the cat
$('#earscode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function decorationColor(color,code) {
$('.spot').css('background', '#' + color) //This changes the color of the cat
$('#decorationColorCode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnadecorationColor').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
$('#eyeName').html('Basic')
break
case 2:
normalEyes()
$('#eyeName').html('Chill')
eyesType1()
break
case 3:
normalEyes()
$('#eyeName').html('Looking right')
eyesType2()
break
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
case 2:
$('#decorationName').html('One')
decorationType2()
break
case 3:
$('#decorationName').html('None')
decorationType3()
break
}
}
function animation(num) {
$('#dnaanimation').html(num)
switch (num) {
case 1:
$('#animationName').html('Moving head')
animationType1()
break
case 2:
$('#animationName').html('Moving eyes')
animationType2()
break
case 3:
$('#animationName').html('Crazy')
animationType3()
break
case 4:
$('#animationName').html('None')
resetAnimation()
break
}
}
async function normalEyes() {
await $('.eyes').find('span').css('border', 'none')
}
async function eyesType1() {
await $('.eyes').find('span').css('border-top', '8px solid')
}
async function eyesType2() {
await $('.eyes').find('span').css('border-left', '8px solid')
}
async function normaldecoration() {
//Remove all style from other decorations
//In this way we can also use normalDecoration() to reset the decoration style
$('.spot').css({ "width": "50px", "height": "15px", "border-radius": "40%", "background-color": "rgb(158, 146, 129)", "position": "absolute", "left": "76px", "Transform": "rotate(0deg)", "top": "-119px"})
$('.spot2').css({ "width": "38px", "height": "13px", "top": "-102", "left": "83px", "Transform": "rotate(0deg)"})
$('.spot3').css({ "width": "26px", "height": "11px", "top": "-87", "left": "90px", "Transform": "rotate(0deg)"})
}
async function decorationType2() {
//Remove all style from other decorations
//In this way we can also use normalDecoration() to reset the decoration style
$('.spot').css({ "width": "50px", "height": "15px", "border-radius": "40%", "background-color": "rgb(158, 146, 129)", "position": "absolute", "left": "76px", "Transform": "rotate(90deg)", "top": "-105px"})
$('.spot2').css({ "width": "0px", "height": "0px", "top": "-102", "left": "83px"})
$('.spot3').css({ "width": "0px", "height": "0px", "top": "-87", "left": "90px"})
}
async function decorationType3() {
//Remove all style from other decorations
//In this way we can also use normalDecoration() to reset the decoration style
$('.spot').css({ "width": "0px", "height": "0px", "border-radius": "40%", "background-color": "rgb(158, 146, 129)", "position": "absolute", "left": "76px", "Transform": "rotate(90deg)"})
$('.spot2').css({ "width": "0px", "height": "0px", "top": "-102", "left": "83px"})
$('.spot3').css({ "width": "0px", "height": "0px", "top": "-87", "left": "90px"})
}
function animationType1() {
resetAnimation()
$('.face').addClass("movingHead")
}
function animationType2() {
resetAnimation()
$('.eye').addClass("movingEyes")
}
function animationType3() {
resetAnimation()
$('.eye').addClass("movingEyes")
$('.face').addClass("movingHead")
}
function resetAnimation() {
$('.face').removeClass('movingHead')
$('.eye').removeClass('movingEyes')
}
