Skip to content

F
front-ntflix
Commit 1b403f80 authored by Daniela Olinda Catarina's avatar Daniela Olinda Catarina
Browse files
Options

adiciona tela home e cadastro

parents
Hide whitespace changes
Inline Side-by-side
Showing with 733 additions and 0 deletions
README.md 0 → 100644
View file @ 1b403f80
# ntflix-ntlabs
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
index.html 0 → 100644
View file @ 1b403f80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ntflix-ntlabs</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
package-lock.json 0 → 100644
View file @ 1b403f80
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 1b403f80
{
"name": "ntflix-ntlabs",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "Daniela Olinda",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"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 0 → 100644
View file @ 1b403f80
<template>
<div class= "home">
<div class="Menu-Principal">
<ul>
<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 - Copia.jpg"></div>
<div conteiner ="filmes">
<fieldset>
<div class="img">
<a target="_blank" href="https://animesonline.vip/power-rangers-dublado/">
<img src="./assets/09-Power-Rangers-1-Temporada.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
power rangers<br>
A jornada de cinco adolescentes que devem buscar algo extraordinário quando eles tomam consciência
que a sua pequena cidade Angel Grove - e o mundo - estão à beira de sofrer um ataque alienígena. Escolhidos
pelo destino, eles irão descobrir que são os únicos que poderão salvar
o planeta. Mas para isso, eles devem superar seus problemas pessoais e juntarem sua forças, antes que seja tarde demais.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonline.vip/os-cavaleiros-do-zodiaco-dublado/">
<img src="./assets/cavaleiros.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">
<p>cavaleiros de zodiaco</p>
conta a história de um grupo de cinco jovens guerreiros
cuja função era proteger Saori Kido, reencarnação de Atena, a deusa grega da sabedoria. Para lutar,
eles utilizam a energia interior e do cosmos, e suas armaduras que são inspiradas em constelações e
na mitologia grega.
</div>
</div>
<div class="img">
<a target="_blank" href="https://www.anitube.site/25883/">
<img src="./assets/04-Entenda-Melhor-SAILOR-MOON-1.jpg" alt="Sailon Moon" width="300" height="200">
</a>
<div class="desc">
Sailor Moon <br>
Usagi Tsukino, uma estudante do ensino médio de 14 anos, descobre por meio de uma gata falante
chamada Luna que é uma guerreira mágica, com habilidades especiais. Ela então se transforma em
Sailor Moon e, junto com suas amigas também superpoderosas, está destinada a proteger a Terra das forças do mal
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonline.vip/caverna-do-dragao/">
<img src="./assets/cavena-do-dragao.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Caverna do Dragão
conta a história de seis jovens que, durante uma brincadeira numa montanha-russa,
são transportados num portal para um Reino. Lá, com armas e roupas mágicas, eles contam
com dicas do Mestre dos Magos para se livrar dos vilões e voltar para suas casas
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesbr.biz/anime/dragon-ball/">
<img src="./assets/Dragon-Ball-Super-brasil.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">
Dragon Ball Z
A série segue as aventuras do protagonista, Son Goku, desde sua infância até a idade adulta enquanto ele
treina artes marciais e explora o mundo em busca de sete esferas conhecidas como as Esferas do Dragão,
que convocam um dragão que concede um desejo quando reunidas.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonline.cc/anime/samurai-x/">
<img src="./assets/samurai.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">
Samurai X
A série, ambientada nos primeiros anos da Era Meiji no Japão, conta a história de Kenshin Himura
um pacífico espadachim que prometeu nunca mais matar. Entretanto, seu passado como retalhador a
serviço da Ishin Shishi fará o jovem Himura brandir novamente sua espada contra velhos e novos inimigos.
</div>
</div>
<div class="img">
<a target="_blank" href="https://goyabu.org/animes/transformers-cyberverse">
<img src="./assets/transformes.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">transformers cyberverse
A recém-formada equipe de Autobots deve impedir que a Shockwave destrua toda a vida no planeta.
A equipe Autobot finalmente descobre a localização da Arca. A equipe Autobot deve lutar contra o
Shockwave e seus Decepticons para defender a Arca e despertar o Optimus Prime e os outros Autobots.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonlinen.com/legendados/532990">
<img src="./assets/naruto.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
Naruto<br>
Naruto é um jovem órfão habitante da Vila da Folha que sonha se tornar o quinto Hokage, o maior guerreiro
e governante da vila. Ao se graduar como ninja, descobre que tem um demônio raposa selado dentro de si.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonlinegames.com/animes/as-meninas-super-poderosas/a">
<img src="./assets/as-meninas-superpoderosas-hbo-max.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
meninas super poderosas
Desiludidas de que perderam a infância por estarem combatendo o crime,
as irmãs enfrentam vários dilemas em suas vidas pessoais e, quando o mundo precisa delas novamente, se
sentem divididas em voltarem ao papel de super-heroínas.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animefire.net/animes/ultraman-dublado-todos-os-episodios">
<img src="./assets/ultraman.jpg" alt="Forest" width="500" height="1500">
</a>
<div class="desc">
ultraman <br>
Um alienígena vindo da Galáxia M-78 a bordo de uma cúpula vermelha, ao perseguir o monstro Bemular,
choca-se com a nave do oficial Hayata da S.I.A Hayata não suporta a gravidade dos ferimentos e morre.
Para reparar o erro, o alienígena funde sua energia vital à de Hayata, trazendo-o de volta a vida
e entregando-lhe a Cápsula Beta. e agora Hayata pode se
transformar em Ultraman para defender a Terra de qualquer ameaça.
</div>
</div>
<div class="img">
<a target="_blank" href="https://www.anitube.site/6428/">
<img src="./assets/yu-gi-oh.png" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
yu-gi-oh<br>
O jovem estudante do ensino médio Yugi Muto derrota o campeão mundial, Seto Kaiba, em um duelo
de cartas com a misteriosa ajuda do quebra-cabeça Millenium. Em razão de sua vitória inesperada,
Yugi se torna famoso em todo o mundo e passa a participar de outros duelos para salvar os amigos e a
família.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonlinegames.com/animes/pica-pau/a">
<img src="./assets/Pica-Pau-.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
Pica Pal<br>
O pássaro falante Pica-Pau sempre tenta se dar bem em qualquer situação. Na companhia de seu amigo,
o cavalo medroso Pé de Pano, ele adora pregar peças em seus inimigos Zeca Urubu, Zé Jacaré, Meany
Ranheta, entre outros.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonlinegames.com/animes/he-man/a">
<img src="./assets/He-man.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
He-Man <br>
He-Man é o homem mais poderoso do universo. Ele enfrenta as forças do mal para salvar o planeta Eternia dos
planos de Esqueleto, e proteger os segredos do Castelo de Grayskull.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonline.vip/w-i-t-c-h-dublado/">
<img src="./assets/witch.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
Witch <br>
, o desenho animado conta a história de cinco meninas: Will, Irma, Taranee,
Cornélia e Hay Lin que ganharam poderes mágicos e se tornaram as "Guardians of
the Veil" (Guardiãs do Véu).
</div>
</div>
</fieldset>
</div>
<div class="Menu">
<h1>Cadastro </h1>
<!--Dados de Pessoais-->
<fieldset>
<legend>Dados Pessoais</legend>
<table cellspacing="10">
<tr>
<td>
<label for="nome">Nome: </label>
</td>
<td align="left">
<input type="text" name="nome">
</td>
<td>
<label for="sobrenome">Sobrenome: </label>
</td>
<td align="left">
<input type="text" name="sobrenome">
</td>
<td>
<label for="sobrenome">Sexo: </label>
</td>
<td>
<select name="sexo">
<option value="ac">Masculino</option>
<option value="al">Feminino</option>
<option value="am">Prefiro não informar</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Nascimento: </label>
</td>
<td align="left">
<input type="text" name="dia" size="2" maxlength="2" value="dd">
<input type="text" name="mes" size="2" maxlength="2" value="mm">
<input type="text" name="ano" size="4" maxlength="4" value="aaaa">
</td>
</tr>
<tr>
<td>
<label for="rg">E-mail: </label>
</td>
<td align="left">
<input type="text" name="rg" size="13" maxlength="13">
</td>
</tr>
<tr>
<td>
<label>CPF:</label>
</td>
<td align="left">
<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>
<div class="input-group">
Dados de Pagamento :
Cartão <input type="text" class="from-input" placeholder=""><br><br>
Boleto <input type="text" class="from-input" placeholder=" "><br><br>
PIX <input type="text" class="from-input" placeholder=""><br><br>
<button class="btn btn-primary input-group-btn">Confirma</button>
</div>
</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>
</div>
</template>
<script src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App',
}
},
}
</script>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
a{
display: block;
padding: 8px;
background-color: #199782;
}
#menu li {
border-right: 1px solid #bbb;height:1px; /* IE5.0 bug */
padding: 3px 1px;
margin:0;
border: 1px solid #f00;
background: #999;
text-decoration: none;
}
li:last-child {
border-right: none;
}
.blocologo{
text-align: center;
}
.img-blocologo{
size: 15px;
max-width: 25px;
margin-top: 50px;
text-align: center;
}
.menu{
height:1px; /* IE5.0 bug */
font-size: smaller;
size: 50px;
text-align: center;
background: rgb(7, 148, 96);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden
}
li{
float: left;
}
.input-groupdadospessoai{
text-align: left;
}
.input-groupdadospessoai{
text-align: height;
}
blocologo{
size: 50px;
text-align: center;
}
.filmes{
text-align: left;
max-width: 50px;
border-block-color: blue;
}
.menu{
background: rgb(12, 186, 220);
}
/*Menu - inicial */
.Menu-Principal{
width: 100%;
background: #199782;
float: left;
display: block;
font: medium;
color: hsl(154, 28%, 95%);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 2px solid transparent;
position: relative;
top: 0;
left: 0;
transform: none;
}
</style>
src/componentes/cadastro.vue 0 → 100644
View file @ 1b403f80
<template>
<h1>cadastro</h1>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
setup() {
},
})
</script>
<style >
</style>
\ No newline at end of file
src/main.js 0 → 100644
View file @ 1b403f80
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)
})
new Vue({
el: '#app',
components: {
'component-home': home,
'component-b': cadastro
}
})
var menu = vue.components ('menu-content', {
template: '#menuContent',
})
webpack.config.js 0 → 100644
View file @ 1b403f80
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