<!-- 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>* { box-sizing: border-box; transition: 0.3s cubic-bezier(0.6,0,0.2,1); }
.abs-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.vert-center { position: absolute; top: 50%; transform: translateY(-50%); }
.horz-center { position: absolute; left: 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 { transition: 0s; font-family: 'Open Sans', Helvetica, sans-serif; }
body::-webkit-scrollbar { display: none; } // Going avant garde
.button
border 1px solid #BDCDDE
margin-top 20px
border-radius 4px
cursor pointer
padding 8px 14px
&: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
&:hover
color #2192CD
.nav-link
font-size 13px
margin-left 20px
color #BDCDDE
cursor pointer
&:hover, &.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 flex
flex-direction column
height 220px
width 100%
border-radius 4px
overflow hidden
cursor pointer
.color
position relative
flex 1 1 0
width 100%
&.main-color { flex: 3 1 0; }
&.second-color { flex: 2 1 0; }
&:hover .color-hex
color rgba(255,255,255,1)
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)
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
&:hover
background-color #F5FCFF
& .heart
fill #778490
&.liked .heart
fill #F33
animation pulse 0.7s
@keyframes pulse { 30% {transform: scale(1.18)} }
.heart
position absolute
top 8px
left 8px
height 18px
width 18px
transition 0s
fill #97A4B0
.likes-container, .create-container
padding 30px
text-align center
pointer-events all
& p
font-size 24px
line-height 1.2
margin-bottom 30px
.likes-container .small-palette-container
height 150px
width 150px
margin 0 10px 20px
// box-shadow 0 3px 12px -2px rgba(0,50,100,0.2)
& .color-hex
padding 4px 6px
font-size 11px
& .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
&: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
&:hover
color #2192CD
.liked-palette-container
margin-top 5px
padding-bottom 6px
height auto
max-height 130px
overflow-y auto
& .color-hex
display none !important
& .color
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
&:hover .remove-button
background-color rgba(0,0,0,0.3)
color #FFFFFF
.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
&:hover
background-color rgba(0,0,0,0.5) !important
.small-palette
display flex
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
&.tall
height 120px
margin-top 20px
background-color #2192CD
.footer
padding 40px
text-align center
color rgba(0,50,100,0.15)
// --- MEDIA QUERIES ---
@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; }
}// --- 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']};
}
}
});
External CSS
This Pen doesn't use any external CSS resources.