Skip to content

F
front-ntflix
Commit 82fc1cb5 authored by Raul Silas's avatar Raul Silas
Browse files
Options

feat: home layout, plans and animes list, and footer layout

parent 143c4243
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3053 additions and 1375 deletions
.gitignore
View file @ 82fc1cb5
......@@ -11,4 +11,6 @@ yarn-error.log
*.njsproj
*.sln
.editorconfig
.babelrc
\ No newline at end of file
.babelrc
.env
data.json
\ No newline at end of file
package-lock.json
View file @ 82fc1cb5
This diff is collapsed.
src/App.vue
View file @ 82fc1cb5
This diff is collapsed.
src/componentes/AnimeList.vue 0 → 100644
View file @ 82fc1cb5
<template>
<div class="container">
<div v-if="pending" class="loader"></div>
<div v-else-if="error" class="error" role="alert">
Erro ao tentar carregar a lista de animes
</div>
<div class="card grow" v-else v-for="anime in animes" :key="anime.name">
<div class="card-header">
<img :src="anime.image" :alt="anime.name" />
</div>
<div class="card-body">
<span class="tag tag-teal">Tag</span>
<h4 class="card-title">{{ anime.name }}</h4>
<p>
{{ anime.description }}
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "AnimeList",
data() {
return {
animes: null,
pending: true,
error: false,
data: null,
};
},
mounted() {
this.getAnimesList();
},
methods: {
async getAnimesList() {
this.pending = true;
await fetch("https://www.mockachino.com/a5c0d330-8fb8-4a/animes")
.then((res) => res.json())
.then((data) => (this.animes = data.animes))
.catch(() => (this.error = true));
this.pending = false;
},
},
};
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: #f7f8fc;
font-family: "Roboto", sans-serif;
color: #10182f;
}
.grow {
transition: all 0.2s ease-in-out;
}
.grow:hover {
transform: scale(1.05);
}
.container {
margin-top: 40px;
margin-bottom: 40px;
display: flex;
max-width: 1040px;
justify-content: space-evenly;
flex-wrap: wrap;
}
.card {
margin: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 250px;
}
.card span {
margin-left: 0px;
}
.card-header img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 20px;
min-height: 250px;
}
.card-body p {
font-size: 13px;
margin: 0 0 40px;
}
.card-title {
margin: 10px 0;
}
.tag {
background: #cccccc;
border-radius: 50px;
font-size: 12px;
color: #fff;
padding: 2px 10px;
text-transform: uppercase;
cursor: pointer;
}
.tag-teal {
background-color: #47bcd4;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.error {
border: 1px solid;
margin: 10px 0px;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
color: #d8000c;
background-color: #ffbaba;
background-image: url("https://i.imgur.com/GnyDvKN.png");
}
</style>
src/componentes/Footer.vue 0 → 100644
View file @ 82fc1cb5
<template>
<footer class="footer-content">
<h3>
<a href="https://www.ntconsult.com.br" target="_blank"
>NTConsult &copy; 2022</a
>
</h3>
<!-- <ul class="socials">
<li>
<a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-google-plus"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-youtube"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-linkedin-square"></i></a>
</li>
</ul> -->
</footer>
</template>
<script>
export default {
name: "footer",
data() {
return {};
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #fcfcfc;
font-family: sans-serif;
}
footer {
bottom: 0;
left: 0;
right: 0;
background: #111;
height: auto;
width: auto;
padding-top: 20px;
color: #fff;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: #fff;
border: 1.1px solid white;
padding: 5px;
border-radius: 50%;
}
.socials a i {
font-size: 1.1rem;
width: 20px;
transition: color 0.4s ease;
}
.socials a:hover i {
color: aqua;
}
h3 a {
color: white;
text-decoration: none;
background-color: transparent;
}
</style>
src/componentes/Plans.vue 0 → 100644
View file @ 82fc1cb5
<template>
<div class="plans-container">
<h2>Planos</h2>
<div class="price-row">
<div v-if="pending" class="loader"></div>
<div v-else-if="error" class="error" role="alert">
Erro ao tentar carregar a lista de planos
</div>
<div class="price-col" v-else v-for="plan in plans" :key="plan.name">
<p>{{ plan.name }}</p>
<h3>R$ {{ plan.price }}<span>/ mês</span></h3>
<ul v-for="reason in plan.reasons" :key="reason.name">
<li>{{ reason }}</li>
</ul>
<button>Selecionar</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Plans",
data() {
return {
plans: null,
pending: true,
error: false,
data: null,
};
},
mounted() {
this.getAnimesList();
},
methods: {
async getAnimesList() {
this.pending = true;
await fetch("https://www.mockachino.com/a5c0d330-8fb8-4a/plans")
.then((res) => res.json())
.then((data) => (this.plans = data.plans))
.catch(() => (this.error = true));
this.pending = false;
},
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.plans-container {
width: 100%;
height: auto;
}
.plans-container h2 {
padding: 35px 0;
text-align: center;
}
.price-row {
width: 90%;
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 25px;
}
.price-col {
background: #1f283b;
padding: 10% 15%;
border-radius: 10px;
color: #fff;
text-align: center;
}
.price-col p {
font-size: 22px;
}
.price-col h3 {
font-size: 44px;
margin: 20px 0 40px;
font-weight: 500;
}
.price-col h3 span {
font-size: 16px;
}
.price-col ul {
/* text-align: left; */
display: flex;
flex-direction: column;
margin: 20px 0;
color: #ddd;
list-style: none;
}
.price-col ul li {
margin: 15px 0;
}
.price-col ul li::before {
content: "\2022";
color: #e33058;
font-weight: bold;
margin-right: 8px;
}
.price-col button {
width: 100%;
padding: 14px 0;
background: transparent;
color: #fff;
font-size: 15px;
border: 1px solid #e33058;
border-radius: 6px;
margin-top: 30px;
cursor: pointer;
transition: background 0.5s;
}
.price-col button:hover {
background: #e33058;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
display: flex;
}
.error {
border: 1px solid;
margin: 10px 0px;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
color: #d8000c;
background-color: #ffbaba;
background-image: url("https://i.imgur.com/GnyDvKN.png");
}
</style>
src/main.js
View file @ 82fc1cb5
import Vue from 'vue'
import App from './App.vue'
Vue.component('component-a', { /* */})
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
import Vue from "vue";
import App from "./App.vue";
Vue.component("component-a", {
/* */
});
Vue.component("component-b", {
/* ... */
});
Vue.component("component-c", {
/* ... */
});
new Vue({ el: "#app" });
new Vue({
el: '#app',
render: h => h(App)
})
el: "#app",
render: (h) => h(App),
});
new Vue({
el: '#app',
el: "#app",
components: {
'component-home': home,
'component-b': cadastro
}
})
var menu = vue.components ('menu-content', {
template: '#menuContent',
})
"component-home": home,
"component-b": cadastro,
},
});
var menu = vue.components("menu-content", {
template: "#menuContent",
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment