Color palette stuff

Developer
Kyle Shanks
Size
8,024 Kb
Views
6,072
  1. Color palette stuff Previews
  2. Color palette stuff HTML Codes
  3. Color palette stuff CSS Codes
  4. Color palette stuff JS Codes

How do I make an color palette stuff?

Practicing stuff. What is a color palette stuff? How do you make a color palette stuff? This script and codes were developed by Kyle Shanks on 28 January 2023, Saturday.

Color palette stuff Previews
IQ Test

Color palette stuff - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Color palette stuff</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Comfortaa:400,700" rel="stylesheet">
<!-- PAGE STUFF -->
<div id="app"> <div class="nav-bar"> <div class="rela-block nav-container"> <div class="left logo" @click="current_view = 1; reset_new_palette();">Logo Title</div> <div class="right nav-link-container"> <div :class="['rela-inline', 'nav-link', (current_view === 1)?'active':'']" @click="current_view = 1; reset_new_palette();">Browse</div> <div :class="['rela-inline', 'nav-link', (current_view === 2)?'active':'']" @click="current_view = 2;">Create</div> <div :class="['rela-inline', 'nav-link', (current_view === 3)?'active':'']" @click="current_view = 3; reset_new_palette();">Likes</div> </div> </div> </div> <div class="rela-block content-container"> <div class="rela-block inner-container"> <div v-show="current_view === 1" class="left palette-container"> <palette v-for="pal in palettes" :info="pal" :key="pal.id"></palette> </div> <div v-show="current_view === 2" class="rela-block create-container"> <p>Create a Color Palette!</p> <!-- Inputs for the new color palette --> <input type="color" id="color0" v-model="new_palette_info.colors[0]" /> <input type="color" id="color1" v-model="new_palette_info.colors[1]" /> <input type="color" id="color2" v-model="new_palette_info.colors[2]" /> <input type="color" id="color3" v-model="new_palette_info.colors[3]" /> <div class="rela-block small-palette-container"> <div class="small-palette"> <label for="color0" class="color main-color" :style="{'background-color': new_palette_info.colors[0]}"><div class="color-hex">{{new_palette_info.colors[0]}}</div></label> <label for="color1" class="color second-color" :style="{'background-color': new_palette_info.colors[1]}"><div class="color-hex">{{new_palette_info.colors[1]}}</div></label> <label for="color2" class="color" :style="{'background-color': new_palette_info.colors[2]}"><div class="color-hex">{{new_palette_info.colors[2]}}</div></label> <label for="color3" class="color" :style="{'background-color': new_palette_info.colors[3]}"><div class="color-hex">{{new_palette_info.colors[3]}}</div></label> </div> </div> <input type="text" placeholder="New Palette Title" v-model="new_palette_info.title"/> <div class="rela-inline button" @click="create_palette">Done</div> </div> <div v-show="current_view === 3" class="rela-block likes-container"> <div v-show="!(liked_palettes.length)" class="rela-block"> <p class="lite">No liked palettes :(</p> <div @click="current_view = 1" class="rela-inline button">Explore Palettes</div> </div> <p v-show="liked_palettes.length">You liked {{liked_palettes.length}} palette<span v-show="liked_palettes.length !== 1">s</span></p> <sp v-for="sp in liked_palettes" :info="sp" :key="sp.id"></sp> </div> </div> </div> <div v-show="current_view === 1" class="horz-center fixed-container"> <div class="side-bar"> <p v-show="!(liked_palettes.length)">Like you favorite palettes!</p> <p v-show="liked_palettes.length" class="liked-palette-link" @click="current_view = 3">You liked {{liked_palettes.length}} palette<span v-show="liked_palettes.length !== 1">s</span></p> <div v-show="liked_palettes.length" class="rela-block liked-palette-container"> <sp v-for="sp in liked_palettes" :info="sp" :key="sp.id"></sp> </div> <div class="rela-block side-box">Box</div> <div class="rela-block side-box">Box</div> <div class="rela-block side-box tall">Big Box</div> <p class="lite">text and stuff</p> </div> </div> <!-- <div class="rela-block footer">Footer stuff</div> -->
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Color palette stuff - Script Codes CSS Codes

* { box-sizing: border-box; -webkit-transition: 0.3s cubic-bezier(0.6, 0, 0.2, 1); transition: 0.3s cubic-bezier(0.6, 0, 0.2, 1);
}
.abs-center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.vert-center { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.horz-center { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.rela-block { display: block; position: relative;
}
.rela-inline { display: inline-block; position: relative;
}
.left { position: relative; float: left;
}
.right { position: relative; float: right;
}
.lite { color: #bdcdde;
}
body { -webkit-transition: 0s; transition: 0s; font-family: 'Open Sans', Helvetica, sans-serif;
}
body::-webkit-scrollbar { display: none;
}
.button { border: 1px solid #bdcdde; margin-top: 20px; border-radius: 4px; cursor: pointer; padding: 8px 14px;
}
.button:hover { border: 1px solid #9dadbe; background-color: #f5fcff;
}
.nav-bar { z-index: 100; position: fixed; top: 0; left: 0; right: 0; height: 50px; background-color: #fff; box-shadow: 0 3px 8px -1px rgba(0,50,100,0.15);
}
.nav-container { height: 100%; margin: 0 auto; padding: 0 25px; max-width: 1710px; border-left: 1px solid #eee; border-right: 1px solid #eee; line-height: 50px; font-family: 'Comfortaa', Helvetica, sans-serif; font-weight: 700;
}
.logo { cursor: pointer;
}
.logo:hover { color: #2192cd;
}
.nav-link { font-size: 13px; margin-left: 20px; color: #bdcdde; cursor: pointer;
}
.nav-link:hover,
.nav-link.active { color: #2192cd;
}
.content-container { z-index: 10; padding: 50px 0 20px; border-bottom: 1px solid rgba(0,50,100,0.1); pointer-events: none; margin-bottom: 140px;
}
.inner-container { max-width: 1710px; overflow: hidden; margin: 0 auto;
}
.palette-container { min-height: 300px; width: calc(100% - 300px); padding: 30px 0 20px 10px; text-align: center; pointer-events: all;
}
.card { width: 260px; margin: 0 10px 20px; padding: 15px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 20px -1px rgba(0,50,100,0.15); text-align: left;
}
.palette { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 220px; width: 100%; border-radius: 4px; overflow: hidden; cursor: pointer;
}
.color { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; width: 100%;
}
.color.main-color { -webkit-box-flex: 3; -ms-flex: 3 1 0; flex: 3 1 0;
}
.color.second-color { -webkit-box-flex: 2; -ms-flex: 2 1 0; flex: 2 1 0;
}
.color:hover .color-hex { color: #fff; background-color: rgba(0,0,0,0.3);
}
.color-hex { position: absolute; bottom: 0; left: 0; padding: 6px 8px; font-size: 13px; background-color: rgba(0,0,0,0); color: rgba(255,255,255,0); -webkit-transition: 0.2s ease; transition: 0.2s ease; text-transform: uppercase;
}
.palette-info { width: 100%; padding: 20px 5px 10px; color: #bdcdde;
}
.palette-likes { position: absolute; top: 10px; bottom: 0px; right: 0; border: 1px solid #e9f2f9; border-radius: 3px; padding: 8px 10px 8px 35px; cursor: pointer; color: #444;
}
.palette-likes:hover { background-color: #f5fcff;
}
.palette-likes:hover .heart { fill: #778490;
}
.palette-likes.liked .heart { fill: #f33; -webkit-animation: pulse 0.7s; animation: pulse 0.7s;
}
.heart { position: absolute; top: 8px; left: 8px; height: 18px; width: 18px; -webkit-transition: 0s; transition: 0s; fill: #97a4b0;
}
.likes-container,
.create-container { padding: 30px; text-align: center; pointer-events: all;
}
.likes-container p,
.create-container p { font-size: 24px; line-height: 1.2; margin-bottom: 30px;
}
.likes-container .small-palette-container { height: 150px; width: 150px; margin: 0 10px 20px;
}
.likes-container .small-palette-container .color-hex { padding: 4px 6px; font-size: 11px;
}
.likes-container .small-palette-container .remove-button { height: 24px; width: 24px; top: 5px; right: 5px; font-size: 16px; line-height: 22px;
}
.create-container .small-palette-container { height: 360px; width: 360px; margin: 0 auto;
}
.create-container input[type="color"] { display: none;
}
.create-container input[type="text"] { padding: 6px 8px; border: none; border-bottom: 1px solid #bdcdde; margin-right: 20px;
}
.create-container input[type="text"]:focus { outline: none; border-bottom: 1px solid #2192cd;
}
.fixed-container { z-index: 5; position: fixed; top: 50px; width: 100%; height: 100%; max-width: 1710px; overflow: hidden;
}
.side-bar { position: absolute; top: 30px; right: 20px; bottom: 40px; width: 260px; padding: 0 0 0 10px;
}
.liked-palette-link { cursor: pointer;
}
.liked-palette-link:hover { color: #2192cd;
}
.liked-palette-container { margin-top: 5px; padding-bottom: 6px; height: auto; max-height: 130px; overflow-y: auto;
}
.liked-palette-container .color-hex { display: none !important;
}
.liked-palette-container .color { -webkit-box-flex: 1 !important; -ms-flex-positive: 1 !important; flex-grow: 1 !important;
}
.liked-palette-container::-webkit-scrollbar { width: 6px;
}
.liked-palette-container::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.14);
}
.liked-palette-container::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.4);
}
.small-palette-container { height: 50px; width: 50px; margin: 10px 10px 0 0; overflow: hidden; border-radius: 5px; cursor: pointer;
}
.small-palette-container:hover .remove-button { background-color: rgba(0,0,0,0.3); color: #fff;
}
.remove-button { position: absolute; top: 2px; right: 3px; height: 16px; width: 16px; line-height: 14px; text-align: center; border-radius: 5px; background-color: rgba(0,0,0,0); color: rgba(0,0,0,0); font-size: 12px;
}
.remove-button:hover { background-color: rgba(0,0,0,0.5) !important;
}
.small-palette { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.side-box { height: 40px; width: 100%; border-radius: 5px; margin: 10px 0 10px; padding: 12px 15px; background-color: #21cd92; text-align: center;
}
.side-box.tall { height: 120px; margin-top: 20px; background-color: #2192cd;
}
.footer { padding: 40px; text-align: center; color: rgba(0,50,100,0.15);
}
@media screen and (max-width: 1750px) { .inner-container, .nav-container, .fixed-container { max-width: 1440px; }
}
@media screen and (max-width: 1460px) { .inner-container, .nav-container, .fixed-container { max-width: 1160px; }
}
@media screen and (max-width: 1180px) { .inner-container, .nav-container, .fixed-container { max-width: 880px; }
}
@media screen and (max-width: 920px) { .inner-container, .nav-container, .fixed-container { max-width: 800px; } .palette-container { width: 100%; padding: 30px 10px 20px; } .side-bar { right: -260px; }
}
@-webkit-keyframes pulse { 30% { -webkit-transform: scale(1.18); transform: scale(1.18); }
}
@keyframes pulse { 30% { -webkit-transform: scale(1.18); transform: scale(1.18); }
}

Color palette stuff - Script Codes JS Codes

// --- Notes ---
// http://colorhunt.co/
/* --- To Do ---
- Create pop-up for alerts (e.g. palette creation)
- Add back to top button
- Create checks for the create_palette function
- Make a hamburger for small screen width
- Clean up the look and the code
- Work on page change animations
- Work on subtle UI animations
*/
// Palette and Small Palette Components
Vue.component('palette', { template: ` <div class="rela-inline card"> <div class="rela-block palette"> <div class="color main-color" :style="{\'background-color\': info.colors[0]}"><div class="color-hex">{{info.colors[0]}}</div></div> <div class="color second-color" :style="{\'background-color\': info.colors[1]}"><div class="color-hex">{{info.colors[1]}}</div></div> <div class="color" :style="{\'background-color\': info.colors[2]}"><div class="color-hex">{{info.colors[2]}}</div></div> <div class="color" :style="{\'background-color\': info.colors[3]}"><div class="color-hex">{{info.colors[3]}}</div></div> </div> <div class="rela-block palette-info"> {{info.title}} <div :class="[\'palette-likes\', (info.user_liked)?\'liked\':\'\']" @click="like_update"> <svg class="heart" viewBox="0 0 32 29.6"> <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/> </svg> {{info.likes||0}} </div> </div> </div>`, props: { info: { type: Object, default: {id: 1337, title: 'Test Palette', colors: ['#DDD','#AAA','#777','#444'], likes: 0, user_liked: false} }, }, methods: { like_update: function() { this.info.user_liked = !(this.info.user_liked); if(this.info.user_liked){ // Liked this.info.likes++; app.liked_palettes.unshift({ id: this.info.id, title: this.info.title, colors: this.info.colors }); } else { // Unliked this.info.likes--; for(var i in app.liked_palettes) { if(app.liked_palettes[i].id === this.info.id) { app.liked_palettes.splice(i,1); }; }; }; } }
});
Vue.component('sp', { template: ` <div class="rela-inline small-palette-container"> <div class="small-palette"> <div class="color main-color" :style="{\'background-color\': info.colors[0]}"><div class="color-hex">{{info.colors[0]}}</div></div> <div class="color second-color" :style="{\'background-color\': info.colors[1]}"><div class="color-hex">{{info.colors[1]}}</div></div> <div class="color" :style="{\'background-color\': info.colors[2]}"><div class="color-hex">{{info.colors[2]}}</div></div> <div class="color" :style="{\'background-color\': info.colors[3]}"><div class="color-hex">{{info.colors[3]}}</div></div> </div> <div class="remove-button" @click="remove">x</div> </div>`, props: { info: { type: Object, default: {id: 1337, title: 'Test Palette', colors: ['#444','#777','#AAA','#DDD']} }, }, methods: { remove: function() { // Remove this and unlike corresponding big palette for(var i in app.palettes) { if(app.palettes[i].id === this.info.id) { app.palettes[i].user_liked = false; app.palettes[i].likes--; }; }; for(var i in app.liked_palettes) { if(app.liked_palettes[i].id === this.info.id) { app.liked_palettes.splice(i,1); }; }; } }
});
// Vue App
var app = new Vue({ el: '#app', data: { current_view: 1, liked_palettes: [], palettes: [ { id: 0, title: 'Palette 1', colors: ['#FFDAA9','#3FA6A9','#5F72B2','#60366F'], likes: 53, user_liked: false }, { id: 1, title: 'Palette 2', colors: ['#222831','#393E46','#00ADB5','#EEEEEE'], likes: 142, user_liked: false }, { id: 2, title: 'Palette 3', colors: ['#BFF4ED','#280F34','#B30753','#F6C667'], likes: 11, user_liked: false }, { id: 3, title: 'Palette 4', colors: ['#FFFFC1','#FFD2A5','#FFA8B8','#D988BC'], likes: 259, user_liked: false }, { id: 4, title: 'Palette 5', colors: ['#E3D9CA','#95A792','#596C68','#403F48'], likes: 317, user_liked: false }, { id: 5, title: 'Palette 6', colors: ['#363333','#272121','#E16428','#F6E9E9'], likes: 374, user_liked: false }, { id: 6, title: 'Palette 7', colors: ['#A6E4E7','#F9F9F9','#EBCBAE','#8F8787'], likes: 505, user_liked: false }, { id: 7, title: 'Garnet', colors: ['#89257b','#121431','#2f0e38','#bf36a4'], likes: 100, user_liked: false }, { id: 8, title: 'Amethyst', colors: ['#dcd3f0','#b898ca','#232228','#eff0f4'], likes: 100, user_liked: false }, { id: 9, title: 'Pearl', colors: ['#fffff2','#92ead9','#ffdf7b','#ffd0ce'], likes: 100, user_liked: false }, { id: 10, title: 'Steven', colors: ['#331d01','#fe5a6d','#ffde48','#80b5ff'], likes: 100, user_liked: false }, { id: 11, title: 'Peridot', colors: ['#3DDF70','#0B3029','#FDFDA5','#91FE65'], likes: 100, user_liked: false }, { id: 12, title: 'Lapis', colors: ['#206cd9','#50f0f9','#101258','#13319b'], likes: 100, user_liked: false }, { id: 13, title: 'Finn', colors: ['#FFFFFF','#01bdef','#4ed612','#eccd3f'], likes: 50, user_liked: false }, { id: 14, title: 'Jake', colors: ['#f9c029','#f9c029','#f9c029','#f9c029'], likes: 50, user_liked: false }, { id: 15, title: 'PB', colors: ['#fe66cb','#ff00cd','#c126dc','#ebbee9'], likes: 50, user_liked: false }, { id: 16, title: 'Marcelline', colors: ['#070c20','#c1d6db','#162067','#5b1c2c'], likes: 50, user_liked: false }, { id: 17, title: 'Gameboy', colors: ['#9bbc0f','#8bac0f','#306230','#0f380f'], likes: 500, user_liked: false }, ], new_palette_info: { title: '', colors: ['#DDD','#AAA','#777','#444'] } }, methods: { create_palette: function() { var thyme = new Date(); var info = { id: thyme.getTime(), title: (this.new_palette_info.title||'Untitled'), colors: this.new_palette_info.colors, likes: 0, user_liked: false }; this.palettes.push(info); this.reset_new_palette(); }, reset_new_palette: function() { this.new_palette_info = {title: '', colors: ['#DDD','#AAA','#777','#444']}; } }
});
Color palette stuff - Script Codes
Color palette stuff - Script Codes
Home Page Home
Developer Kyle Shanks
Username mavrK
Uploaded January 28, 2023
Rating 4
Size 8,024 Kb
Views 6,072
Do you need developer help for Color palette stuff?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Shanks (mavrK) Script Codes
Name
Test design stuff
Choose your Starter
Idk yet
Book Cover
Food Stuff
Ableton Concept
Hexagon Stuff
New cube thingy
Just social stuff
Swirly dot thing
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!