Skip to content

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

refactor: dependencies and structure refactor

parent ed4fde40
Hide whitespace changes
Inline Side-by-side
Showing with 12181 additions and 14887 deletions
.gitignore
View file @ ddaefd9b
...@@ -4,6 +4,16 @@ dist/ ...@@ -4,6 +4,16 @@ dist/
npm-debug.log npm-debug.log
yarn-error.log yarn-error.log
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files # Editor directories and files
.idea .idea
*.suo *.suo
...@@ -12,5 +22,4 @@ yarn-error.log ...@@ -12,5 +22,4 @@ yarn-error.log
*.sln *.sln
.editorconfig .editorconfig
.babelrc .babelrc
.env
data.json data.json
\ No newline at end of file
babel.config.js 0 → 100644
View file @ ddaefd9b
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
jsconfig.json 0 → 100644
View file @ ddaefd9b
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
package-lock.json
View file @ ddaefd9b
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ ddaefd9b
...@@ -6,31 +6,17 @@ ...@@ -6,31 +6,17 @@
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "serve": "vue-cli-service serve",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"cli": "^1.0.1", "core-js": "^3.8.3",
"router": "^1.3.7", "vue": "^3.2.13",
"vue": "^2.5.11" "vue-router": "^4.0.3"
}, },
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0",
"babel-core": "^6.26.0", "@vue/cli-service": "~5.0.0"
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.2.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
} }
} }
src/App.vue
View file @ ddaefd9b
<template> <template>
<div class="home"> <Navbar />
<div class="Menu-Principal"> <router-view />
<ul> <Footer />
<li><a href="#home">Home</a></li>
<li><a href="#news">Cadastro</a></li>
<li><a href="#contact">Planos</a></li>
<li><a href="#about">Login</a></li>
</ul>
</div>
<br /><br /><br /><br />
<div class="blocologo">
<img
class="img-responsive img-logo"
alt="Vue logo"
src="./assets/NTFLIXLogo.png"
/>
<h2 class="title">NTFlix - Lorem Ipsum</h2>
</div>
<div class="filmes">
<AnimeList />
</div>
<div class="planos">
<Plans />
</div>
<Footer />
</div>
</template> </template>
<script> <script>
import AnimeList from "./componentes/AnimeList.vue"; import Navbar from "./components/Navbar.vue";
import Plans from "./componentes/Plans.vue"; import Footer from "./components/Footer.vue";
import Footer from "./componentes/Footer.vue";
export default { export default {
name: "app",
components: { components: {
AnimeList, Navbar,
Plans,
Footer, Footer,
}, },
data() {
return {
msg: "Welcome to Your Vue.js App",
};
},
}; };
</script> </script>
...@@ -55,61 +21,6 @@ export default { ...@@ -55,61 +21,6 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} font-family: "Roboto", sans-serif;
.home {
width: 100%;
}
a {
display: block;
padding: 8px;
color: white;
text-decoration: none;
}
a:hover {
color: #e33058;
transition: ease-in-out 0.5s;
}
.blocologo {
height: 70%;
text-align: center;
}
.title {
padding: 25px 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display: inline-block;
}
.filmes {
display: flex;
justify-content: center;
background-color: #1f283b;
}
.planos {
margin-bottom: 35px;
}
/*Menu - inicial */
.Menu-Principal {
width: 100%;
background: #111;
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
} }
</style> </style>
src/componentes/AnimeList.vue → src/components/AnimeList.vue
View file @ ddaefd9b
...@@ -49,20 +49,6 @@ export default { ...@@ -49,20 +49,6 @@ export default {
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); @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 { .grow {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
......
src/componentes/Footer.vue → src/components/Footer.vue
View file @ ddaefd9b
<template> <template>
<footer class="footer-content"> <footer class="footer-content">
<h3> <h3>
<a href="https://www.ntconsult.com.br" target="_blank"
>NTConsult &copy; 2022</a <a href="https://www.ntconsult.com.br" target="_blank">
> NTConsult &copy; 2022
</a>
</h3> </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> </footer>
</template> </template>
<script> <script>
...@@ -35,17 +24,6 @@ export default { ...@@ -35,17 +24,6 @@ export default {
</script> </script>
<style> <style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #fcfcfc;
font-family: sans-serif;
}
footer { footer {
bottom: 0; bottom: 0;
left: 0; left: 0;
...@@ -67,39 +45,15 @@ footer { ...@@ -67,39 +45,15 @@ footer {
padding-bottom: 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 { h3 a {
color: white; color: white;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
} }
a:hover {
color: #e33058;
transition: ease-in-out 0.5s;
}
</style> </style>
src/components/Navbar.vue 0 → 100644
View file @ ddaefd9b
<template>
<div class="nav">
<router-link to="/" class="logo-url">Home</router-link>
<router-link to="/cadastro">Cadastro</router-link>
</div>
</template>
<script>
export default {
name: "Navbar",
};
</script>
<style scoped>
.nav {
background-color: #222;
border-bottom: 1px solid #111;
padding: 15px 50px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.nav a {
display: block;
padding: 8px;
color: white;
text-decoration: none;
}
.nav a:hover {
color: #e33058;
transition: ease-in-out 0.5s;
}
</style>
src/componentes/Plans.vue → src/components/Plans.vue
View file @ ddaefd9b
...@@ -48,12 +48,6 @@ export default { ...@@ -48,12 +48,6 @@ export default {
</script> </script>
<style> <style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.plans-container { .plans-container {
width: 100%; width: 100%;
height: auto; height: auto;
......
src/components/cadastro.vue deleted 100644 → 0
View file @ ed4fde40
<template>
<div id="cadastro">
<router-view></router-view>
<h1>cadastro</h1>
</div>
</template>
<script>
//import { defineComponent } from '@vue/composition-api'
import {currentView} from "@vue/cli-plugin-router"
export default ({
cadastro() {
},
})
</script>
<style >
</style>
\ No newline at end of file
src/components/home.vue deleted 100644 → 0
View file @ ed4fde40
<template>
<router-view>
<h1>OI PAGINA HOME</h1>
</router-view>
</template>
<script>
import {currentView} from "@vue/cli-plugin-router"
export default ({
name : "home"
})
</script>
<style >
</style>
\ No newline at end of file
src/main.js
View file @ ddaefd9b
import Vue from "vue"; import { createApp } from 'vue'
import App from "./App.vue"; import App from './App.vue'
import router from './router'
Vue.component("component-a", { createApp(App).use(router).mount('#app')
/* */
});
Vue.component("component-b", {
/* ... */
});
Vue.component("component-c", {
/* ... */
});
new Vue({ el: "#app" });
new Vue({
el: "#app",
render: (h) => h(App),
});
new Vue({
el: "#app",
components: {
"component-home": home,
"component-b": cadastro,
},
});
var menu = vue.components("menu-content", {
template: "#menuContent",
});
src/router/index.js 0 → 100644
View file @ ddaefd9b
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/cadastro",
name: "Cadastro",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "pedidos" */ "../views/Cadastro.vue"),
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
src/views/Cadastro.vue 0 → 100644
View file @ ddaefd9b
<template>
<div class="cadastro">
<h2 class="title">Cadastro</h2>
<!--Dados de Pessoais-->
<fieldset>
<legend>Dados Pessoais</legend>
<table cellspacing="10">
<tr>
<label for="nome">Seu Nome:</label>
<input
type="text"
id="nome"
name="nome"
placeholder="Digite seu nome*"
required
/>
<label for="nome">Sobrenome:</label>
<input
type="text"
id="nome"
name="nome"
placeholder="Digite seu sobrenome*"
required
/>
<br />
<br />
</tr>
<tr>
<td>
Data de nascimento:
<input type="datetime-local" name="bdaytime" />
</td>
</tr>
<td>
Sexo:
<select name="sexo">
<option value="ac">Masculino</option>
<option value="al">Feminino</option>
<option value="am">Prefiro não informar</option>
</select>
</td>
<tr>
<label for="email">Seu E-Mail:</label>
<input
type="email"
id="email"
name="email"
placeholder="Digite seu E-Mail*"
required
/>
</tr>
<tr>
<td>
CPF
<input type="text" name="cpf" size="9" maxlength="9" />
-
<input type="text" name="cpf2" size="2" maxlength="2" />
</td>
</tr>
</table>
</fieldset>
<!--Dados de Endereço-->
<fieldset>
<legend>Dados de Endereço</legend>
<table cellspacing="10">
<tr>
<td>
<label for="rua">Rua:</label>
</td>
<td align="left">
<input type="text" name="rua" />
</td>
<td>
<label for="numero">Numero:</label>
</td>
<td align="left">
<input type="text" name="numero" size="4" />
</td>
</tr>
<tr>
<td>
<label for="bairro">Bairro: </label>
</td>
<td align="left">
<input type="text" name="bairro" />
</td>
</tr>
<tr>
<td>
<label for="estado">Estado:</label>
</td>
<td align="left">
<select name="estado">
<option value="ac">Acre</option>
<option value="al">Alagoas</option>
<option value="am">Amazonas</option>
<option value="ap">Amapá</option>
<option value="ba">Bahia</option>
<option value="ce">Ceará</option>
<option value="df">Distrito Federal</option>
<option value="es">Espírito Santo</option>
<option value="go">Goiás</option>
<option value="ma">Maranhão</option>
<option value="mt">Mato Grosso</option>
<option value="ms">Mato Grosso do Sul</option>
<option value="mg">Minas Gerais</option>
<option value="pa">Pará</option>
<option value="pb">Paraíba</option>
<option value="pr">Paraná</option>
<option value="pe">Pernambuco</option>
<option value="pi">Piauí</option>
<option value="rj">Rio de Janeiro</option>
<option value="rn">Rio Grande do Norte</option>
<option value="ro">Rondônia</option>
<option value="rs">Rio Grande do Sul</option>
<option value="rr">Roraima</option>
<option value="sc">Santa Catarina</option>
<option value="se">Sergipe</option>
<option value="sp">São Paulo</option>
<option value="to">Tocantins</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="cidade">Cidade: </label>
</td>
<td align="left">
<input type="text" name="cidade" />
</td>
</tr>
<tr>
<td>
<label for="cep">CEP: </label>
</td>
<td align="left">
<input type="text" name="cep" size="5" maxlength="5" />
-
<input type="text" name="cep2" size="3" maxlength="3" />
</td>
</tr>
</table>
</fieldset>
<!--Dados de Pagamento-->
<fieldset>
<h3>Escolha seu meio de Pagamento</h3>
<div class="cartao">
<!--Dados de cartão-->
<!--modo de pagamento-->
<div class="modo-pagamento">
Modo de Pagamento
<h3>cartão</h3>
<fieldset>
<legend> Pagamento em Cartão: </legend>
<form>
Debito:
<input type="radio" checked name="Sex" value="male" />
<br />
Credito:
<input type="radio" name="Sex" value="female" />
</form>
<br />
<div class="input-group-cartao">
Dados de Cartão :
<br />
numero cartão
<br />
<input type="text" class="from-input" placeholder="" />
<br />
<br />
Expiração:
<select>
<option value="mes">Mês</option>
<option value="jan">Janeiro</option>
<option value="fev">Fevereiro</option>
<option value="mar">Março</option>
<option value="abr">Abril</option>
<option value="mai">Maio</option>
<option value="jun">Junho</option>
<option value="jul">Julho</option>
<option value="ago">Agosto</option>
<option value="Sept">Setembro</option>
<option value="out">Outubro</option>
<option value="nov">Novembro</option>
<option value="dev">Dezembro</option>
</select>
<select>
<option value="ano">Ano</option>
<option value="ano">2015</option>
<option value="ano">2016</option>
<option value="ano">2017</option>
<option value="ano">2018</option>
<option value="ano">2019</option>
<option value="ano">2020</option>
<option value="ano">2021</option>
<option value="ano">2022</option>
<option value="ano">2023</option>
<option value="ano">2024</option>
<option value="ano">2025</option>
<option value="ano">2026</option>
<option value="ano">2027</option>
<option value="ano">2028</option>
<option value="ano">2029</option>
<option value="ano">2030</option>
</select>
<br />
<br />
CVV
<input type="text" class="from-input" placeholder="" />
<br />
<br />
Nome Titular:
<input type="text" class="from-input" placeholder="" />
<br />
</div>
<!--fim Dados de cartão-->
</fieldset>
<fieldset>
<legend> Boleto: </legend>
<form>
Banco
<input type="text" size="12" />
Ag
<input type="text" size="3" />
</form>
</fieldset>
<fieldset>
<legend> PIX: </legend>
<form>
Chave Pix
<input type="text" size="15" />
</form>
</fieldset>
</div>
<!-- fim modo de pagamento-->
<br />
</div>
<button class="btn btn-primary input-group-btn">Confirma</button>
</fieldset>
<!--Dados de Login-->
<fieldset>
<legend>Dados de login</legend>
<table cellspacing="10">
<tr>
<td>
<label for="email">E-mail: </label>
</td>
<td align="left">
<input type="text" name="email" />
</td>
</tr>
<tr>
<td>
<label for="imagem">Imagem de perfil:</label>
</td>
<td>
<input type="file" name="imagem" />
</td>
</tr>
<tr>
<td>
<label for="login">Login de usuário: </label>
</td>
<td align="left">
<input type="text" name="login" />
</td>
</tr>
<tr>
<td>
<label for="pass">Senha: </label>
</td>
<td align="left">
<input type="password" name="pass" />
</td>
</tr>
<tr>
<td>
<label for="passconfirm">Confirme a senha: </label>
</td>
<td align="left">
<input type="password" name="passconfirm" />
</td>
</tr>
</table>
<input type="submit" />
<input type="reset" value="Limpar" />
</fieldset>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
msg: "Welcome to Your Vue.js App",
};
},
};
</script>
<style>
.input-groupdadospessoai {
text-align: left;
}
.input-groupdadospessoai {
text-align: height;
}
.title {
padding: 25px 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
</style>
src/views/Home.vue 0 → 100644
View file @ ddaefd9b
<template>
<div>
<div class="blocologo">
<img
class="img-responsive img-logo"
alt="Vue logo"
src="../assets/NTFLIXLogo.png"
/>
<h2 class="title">NTFlix - Lorem Ipsum</h2>
</div>
<div class="filmes">
<AnimeList />
</div>
<div class="planos">
<Plans />
</div>
</div>
</template>
<script>
import AnimeList from "@/components/AnimeList.vue";
import Plans from "@/components/Plans.vue";
export default {
name: "Home",
components: {
AnimeList,
Plans,
},
};
</script>
<style>
.blocologo {
height: 70%;
text-align: center;
margin: 25px 0;
}
.title {
padding: 25px 0;
}
.filmes {
display: flex;
justify-content: center;
background-color: #1f283b;
}
.planos {
margin-bottom: 35px;
}
</style>
vue.config.js 0 → 100644
View file @ ddaefd9b
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
webpack.config.js deleted 100644 → 0
View file @ ed4fde40
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
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