...
 
Commits (24)
.DS_Store
node_modules
/dist
# local env files
.env.local
......
# vue-app
# Recipes - Web Int
## Project setup
```
......@@ -8,22 +8,4 @@ npm install
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
```
\ No newline at end of file
module.exports = {
presets: [
'@vue/app'
]
}
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
\ No newline at end of file
.tab-container{width:100%}.invisible{visibility:hidden}.tabswiper{position:relative;overflow:hidden}.tabswiper-wrap{display:flex;display:inline-flex;width:100%;height:100%;transition:all .2s ease;flex-direction:row}.tabswiper-wrap.dragging{transition:none}.tabswiper-wrap>div{overflow-x:hidden;flex-shrink:0;width:100%;margin:0;padding:0;height:inherit}.tabswiper-wrap>.hide-height{height:0}::-webkit-scrollbar{width:0}.tab-title-container{-webkit-tap-highlight-color:rgba(0,0,0,0);margin:0 auto;list-style:none;border-bottom:1px solid #ddd;display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;width:100%}.tab-title,.tab-title-container{position:relative;-moz-appearance:none;appearance:none;-webkit-user-select:none;outline:none;-webkit-appearance:none;text-decoration:none}.tab-title{height:35px;line-height:35px;text-align:center;cursor:pointer;outline-style:none;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.tab-title.active,.tab-title:active{border-bottom:2px solid #36acf4;color:#36acf4}html{height:100%}*{margin:0;padding:0}.tab-content-container{width:99%;height:200px;margin:0 auto}#app1{color:#2c3e50;margin-top:50px;max-width:500px;width:100%;font-family:Source Sans Pro,Helvetica,sans-serif;margin:0 auto}img{width:98%}input[type=radio],select,textarea{padding:3px}input[type=password],input[type=radio],input[type=text],select,textarea{border:1px solid #ccc;border-radius:4px;margin-top:6px;margin-bottom:16px;resize:vertical}input[type=password],input[type=text],select,textarea{width:100%;padding:12px;box-sizing:border-box}input[type=reset],input[type=submit]{background-color:#4caf50;color:#fff;padding:12px 20px;border:none;border-radius:4px;margin:4px 2px;cursor:pointer}input[type=submit]:hover{background-color:#45a049}.container{border-radius:5px;background-color:#f2f2f2;padding:20px}.multiselect{width:200px}.selectBox{position:relative}.selectBox select{width:100%;font-weight:700}.overSelect{position:absolute;left:0;right:0;top:0;bottom:0}#checkboxes{display:none;border:1px solid #dadada}#checkboxes label{display:block}#checkboxes label:hover{background-color:#1e90ff}header.banner{background:#f2f2f2;z-index:999;position:fixed;top:0;left:0;width:100%;display:flex;align-items:center;height:70px;border-bottom:1px solid rgba(45,55,103,.2)}header .container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}header span{width:auto;margin:auto;display:table;font-family:Chalkduster,fantasy}header div{text-align:left;width:90%}header img{height:35px}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;justify-content:center;margin:0 auto}.content{padding-top:70px}main{padding:30px}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}.search-bar{margin:30px}.search-bar input{width:90%!important}#select .search-input{width:100%!important}#select div.cursor-pointer{display:none}.topics{width:100%;text-align:left;background:#f7f7f7}.topics .signup,.topics .topic{padding:15px}.social{max-width:200px;float:right}.social img{width:24px;height:auto;display:inline;margin-right:10px}.logo{float:left}footer input{width:200px}footer button{width:75px}footer .contact{padding:15px;background:#e0e0e0;overflow:auto}footer{padding-top:50px}.top-categories img{width:100px;height:100px;border-radius:50%;object-fit:cover}.recipe-item{padding:10px;width:300px}.recipe-item img{width:300px;height:200px;object-fit:cover}.recipe-item .title{font-weight:700}.recipe-item .desc{text-align:justify;font-size:.8em}.trend-recipes .row{max-width:1000px}.carousel-home img{object-fit:cover;height:300px}.home-content{max-width:1000px;margin:auto}button{padding:10px;border:1px solid #ccc;resize:vertical;width:60px;margin-top:10px;cursor:pointer;background-color:#d6d6d6}.greeting{display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column}.overviewRecipe{position:relative;top:0;width:200%}.carrousselRecipe{display:block;position:relative;width:30%;top:10%;left:25%}.ratingRecipe{position:absolute;width:900px;margin:10px;left:1000px;top:400px}.informationsRecipe{position:absolute;width:15%;margin:10px;left:55%;top:0}.Ingredients,.Tools{text-align:left;position:relative;left:0;width:30%;padding:10px}.Tools{bottom:37%}.Instructions{display:block;text-align:left;position:relative;bottom:37%;left:50%;width:45%;padding:10px}.uling{list-style-type:decimal;width:900px;margin:50}.texte{display:block;width:80%;font-size:25px}ul>li{position:relative;height:5%;margin:.5em 0;line-height:1.15}ol{color:#ccc;list-style-type:none}ol li{position:relative;font:700 italic 45px/1.5 Helvetica,Verdana,sans-serif;margin-bottom:20px}li p{font:12px/1.5 Helvetica,sans-serif;padding-left:60px;color:#555}.icone{position:relative;height:25px;width:25px}.star-container{position:relative;height:50px;width:50px}#app{max-width:100%}.suggestions img{width:100px;height:100px;border-radius:50%;object-fit:cover}.category-item{padding:10px}.User{position:absolute;text-align:left;top:30%;left:0}
\ No newline at end of file
This diff is collapsed.
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-app</title><link href=/css/app.25f0f7d6.css rel=preload as=style><link href=/css/chunk-vendors.9b7bd383.css rel=preload as=style><link href=/js/app.2b6bada2.js rel=preload as=script><link href=/js/chunk-vendors.357feddd.js rel=preload as=script><link href=/css/chunk-vendors.9b7bd383.css rel=stylesheet><link href=/css/app.25f0f7d6.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.357feddd.js></script><script src=/js/app.2b6bada2.js></script></body></html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
......@@ -5,22 +5,28 @@
"version": "0.1.0",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"start": "node server.js",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@chenfengyuan/vue-carousel": "^0.1.1",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"v-autocomplete": "^1.8.2",
"vue": "^2.5.22",
"vue-carousel": "^0.17.0",
"vue-dynamic-star-rating": "^1.0.7",
"vue-multiselect": "^2.1.3",
"vue-router": "^3.0.2",
"vue-single-select": "^1.0.29",
"vue-star-rating": "^1.6.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-service": "^3.2.0",
"vue-template-compiler": "^2.5.17"
"express": "^4.16.4",
"serve-static": "^1.13.2",
"vue-template-compiler": "^2.5.22"
}
}
const express = require('express');
const serveStatic = require("serve-static")
const path = require('path');
app = express();
app.use(serveStatic(path.join(__dirname, 'dist')));
const port = process.env.PORT || 3000;
app.listen(port);
\ No newline at end of file
<template>
<div id="app">
<header class="banner">
<div class="container row center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Eurecom.svg/2000px-Eurecom.svg.png" alt="Eurecom Logo">
<span>WebInt Project</span>
<div class="container row">
<!-- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Eurecom.svg/2000px-Eurecom.svg.png" alt="Eurecom Logo"> -->
<div>The Recipes </div>
<router-link to="/profile">Login</router-link>
</div>
</header>
<div class="content">
</div>
<main class="content">
<router-view></router-view>
</main>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
import VideoChild from './components/VideoChild.vue';
import VideoList from './components/VideoList.vue';
import VideoControls from './components/Controls.vue';
import ProfileSetup from './components/ProfileSetup.vue';
export default {
name: 'app',
components: {
VideoChild,
VideoList,
VideoControls
ProfileSetup
},
data: () => ({
......
header.banner {
background: #0083dc;
background: #f2f2f2;
z-index: 999;
position: fixed;
top: 0;
......@@ -26,6 +26,12 @@ header span {
font-family: Chalkduster, fantasy
}
header div {
text-align: left;
/* justify-content: left; */
width: 90%;
}
header img {
height: 35px;
/*position: absolute;*/
......@@ -43,7 +49,7 @@ header img {
padding-top: 70px;
}
footer {
/*footer {
position: fixed;
bottom: 0;
left: 0;
......@@ -55,7 +61,7 @@ footer {
}
footer p {
margin-left:10px;
}
}*/
main {
padding: 30px;
......
......@@ -9,14 +9,15 @@
.overviewRecipe{
position: relative;
top:0;
width: 2000px;
width: 200%;
}
.carrousselRecipe{
display: block;
position: relative;
width: 100%;
width: 30%;
top : 10%;
left: 25%;
}
.ratingRecipe{
......@@ -29,10 +30,11 @@
.informationsRecipe {
position: absolute;
width: 900px;
width: 15%;
margin: 10px;
left: 1000px;
left: 55%;
top:0;
/*background: #CD853F;*/
}
.Ingredients{
......@@ -41,6 +43,7 @@
left: 0%;
width: 30%;
padding : 10px;
/*background: #CD853F;*/
}
.Tools{
......@@ -49,6 +52,8 @@
bottom: 37%;
left: 0%;
padding: 10px;
/*background: #CD853F;*/
width: 30%;
}
.Instructions{
......@@ -57,8 +62,9 @@
position: relative;
bottom: 37%;
left:50%;
width: 30%;
width: 45%;
padding :10px;
/*background: #CD853F;*/
}
.uling {
......@@ -72,7 +78,11 @@
width: 80%;
font-size: 25px;
}
ul > li {
position: relative;
height: 5%;
margin: .5em 0;
line-height: 1.15;
}
......@@ -93,3 +103,39 @@ li p {
padding-left: 60px;
color: #555;
}
.icone {
position: relative;
height: 25px;
width: 25px;
}
.star-container {
position: relative;
height: 50px;
width: 50px;
}
#app{
max-width: 100%;
}
.suggestions img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
.category-item {
padding: 10px;
}
.User{
position: absolute;
text-align: left;
top:30%;
left: 0;
}
.content{
/*background-image: url("../../assets/logoModif.jpeg"),url("../../assets/logo2.jpeg");*/
}
<template>
<div>
<input v-model="url" placeholder="Insert URL here" type="text">
<button v-on:click="$emit('change-video-source', url)">OK</button>
&nbsp;
Controls:
<input type="checkbox"
checked
v-model="displayButton"
v-on:change="$emit('controls', displayButton);">
&nbsp;
<span>Seek at:</span>
<input type="number" v-model="offset">
<button v-on:click="$emit('change-offset', offset)">OK</button>
&nbsp;
<button id="rotateBtn" v-on:click="$emit('video-rotate')">Rotate &#8513;</button>&nbsp;
</div>
</template>
<script>
export default {
data: () => ({
url: "",
displayButton: true,
offset: 0
})
}
</script>
<style>
input{
padding: 10px;
border: 1px solid #ccc;
}
input[type=text] {
width: 250px;
}
input[type=number] {
width: 50px;
}
button, input[type=submit] {
padding: 10px;
border: 1px solid #ccc;
/*border-radius: 4px;*/
resize: vertical;
width: 60px;
margin-top: 10px;
cursor:pointer;
background-color: #d6d6d6
}
button:hover, input[type=submit]:hover{
background-color: #bdb8b8; /* Green */
font-weight: bold;
}
#rotateBtn {
width: 80px;
}
</style>
<template lang="html">
<div>
<footer>
<div class="topics row">
<div v-for="t in topics" class="topic ">
<h4>{{t.title}}</h4>
<div v-for="t in t.links">
<a href="#">{{t}}</a>
</div>
</div>
<div class="signup">
<h4>Sign up</h4>
<p>Your e-mail address</p>
<input type="e-mail"><br>
<button>Sign up</button>
</div>
</div>
<div class="contact">
<div class="logo">
<h4>The Recipes</h4>
</div>
<div class="social">
<div>
<img src="https://68ef2f69c7787d4078ac-7864ae55ba174c40683f10ab811d9167.ssl.cf1.rackcdn.com/facebook-icon_128x128.png">
<img src="https://68ef2f69c7787d4078ac-7864ae55ba174c40683f10ab811d9167.ssl.cf1.rackcdn.com/twitter-icon_128x128.png">
<img src="https://68ef2f69c7787d4078ac-7864ae55ba174c40683f10ab811d9167.ssl.cf1.rackcdn.com/youtube-icon_128x128.png">
<img src="https://68ef2f69c7787d4078ac-7864ae55ba174c40683f10ab811d9167.ssl.cf1.rackcdn.com/pinterest-icon_128x128.png">
</div>
<div>
<h4>The Recipes Contact</h4>
<p>(800) CALL REC</p>
<p>info@recipes.io</p>
</div>
</div>
</div>
</footer>
</div>
</template>
<script>
export default {
data: () => ({
message:"",
topics: [
{
title:"Cuisines",
links: ["American", "British", "Italian", "Mexican"]
},
{
title: "Ocasion",
links: ["Easter", "Halloween", "Christmas", "Hanukkah"]
},
{
title: "Diets",
links: ["Vegan", "Gluten free", "Vegetarian", "Low-sugar"]
},
{
title: "Ingredients",
links: ["Baking powder", "Ricotta", "Flour tortilla", "Egg"]
}
]
}),
}
</script>
<style>
.topics {
width: 100%;
text-align: left;
background: #f7f7f7;
}
.topics .topic {
padding: 15px;
}
.topics .signup {
padding: 15px;
/*width: 30%;*/
}
.social {
max-width: 200px;
float: right;
}
.social img{
width:24px;
height:auto;
display:inline;
margin-right:10px;
}
.logo {
float: left;
}
footer input {
width: 200px;
}
footer button {
width: 75px;
}
footer .contact {
padding: 15px;
background: #e0e0e0;
overflow: auto;
}
footer {
padding-top: 50px;
}
</style>
<template lang="html">
<div >
<h2>
Recipe
</h2>
<search-bar></search-bar>
<carousel :per-page="1">
<template>
<div>
<div class="home-content">
<h1>
The Recipes
</h1>
<search-bar id="home-search-bar"></search-bar>
<carousel :per-page="3" class="carousel-home" :autoplay="true" :loop="true" :autoplayTimeout="3000">
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/images/ic/1280xn/p060z50q.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/pennealarrabiatapast_83813_16x9.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/cumberland_sausage_59571_16x9.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_320/recipes/waffles_82356_16x9.jpg">
</router-link>
</slide>
<slide>
<img src="../assets/waffle.jpg">
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_320/recipes/spaghettivongole_88988_16x9.jpg">
</router-link>
</slide>
<slide>
<img src="../assets/cookie.jpg">
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/cumberland_sausage_59571_16x9.jpg">
</router-link>
</slide>
<slide>
<img src="../assets/cookie.jpg">
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_448/recipes/smokedsalmonandpotat_90568_16x9.jpg">
</router-link>
</slide>
<slide>
<img src="../assets/waffle.jpg">
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_448/recipes/christmas_roast_duck_83066_16x9.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/membrillo_and_stilton_28987_16x9.jpg">
</router-link>
</slide>
</carousel>
<br><br>
<div class="top-categories">
<h2>Top Categories</h2>
<div class="row" >
<div v-for="cat in categories">
<div class="category-item">
<img src="../assets/waffle.jpg">
<p>Name</p>
<img :src="cat.img">
<p>{{cat.title}}</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="trend-recipes">
<h2>Trending Recipes</h2>
<div class="row" >
<div v-for="cat in categories">
<div v-for="item in items">
<div class="recipe-item">
<img src="../assets/waffle.jpg">
<p>Content</p>
<router-link to="/recipe">
<img :src="item.img">
<p class="title">{{item.title}}</p>
<p class="desc">{{item.description}}</p>
</router-link>
</div>
</div>
</div>
</div>
</div>
<custom-footer></custom-footer>
</div>
</template>
<script>
import SearchBar from './SearchBar.vue';
import CustomFooter from './Footer.vue';
export default {
name: 'app',
components: {
SearchBar
SearchBar,
CustomFooter
},
data: () => ({
categories:["Cat1", "Cat2", "Cat3", "Cat", "2" ]
// categories:["Cat1", "Cat2", "Cat3", "Cat", "2" ],
categories:[{
title: "Desserts",
img: "https://ichef.bbci.co.uk/food/ic/food_16x9_320/recipes/low-fat_chocolate_sponge_79500_16x9.jpg"
},
{
title: "Italian",
img: "https://ichef.bbci.co.uk/food/ic/food_16x9_320/cuisines/italian_16x9.jpg"
},
{
title: "Low-sugar",
img: "https://ichef.bbci.co.uk/images/ic/320xn/p05w5zpr.jpg"
},
{
title: "Vegetarian",
img: "https://ichef.bbci.co.uk/images/ic/320xn/p05vftxg.jpg"
},
{
title: "Mexican",
img: "https://ichef.bbci.co.uk/food/ic/food_16x9_320/cuisines/mexican_16x9.jpg"
}],
items: [{
title:"Chicken Curry",
description: "From classic chicken tikka masala to Thai green curry. Take on your takeaway and spice up suppertime with our favourite chicken jalfrezi, chicken korma, Japanese katsu curry or quick coconut chilli chicken.",
img:"https://ichef.bbci.co.uk//food/ic/food_16x9_832/recipes/chickenjalfrezi_91772_16x9.jpg"
},
{
title:"Lemon Cake",
description: "Try one of our fresh and zesty lemon cake recipes, from the classic lemon drizzle to Delia’s ultimate lemon curd layer cake.",
img:"https://ichef.bbci.co.uk//food/ic/food_16x9_832/recipes/lemon_cake_29430_16x9.jpg"
},
{
title:"Pork Pie",
description: "Pork pie's are a British classic. Herby pork housed in hot water crust pastry, they're a brilliant addition to a picnic or party table. We have pork pie recipes from Paul Hollywood, Hairy Bikers and more.",
img:"https://ichef.bbci.co.uk//food/ic/food_16x9_832/recipes/small_pork_pies_with_11074_16x9.jpg"
},
{
title:"Opera Cake",
description: "A joconde sponge is a decorative almond-flavored sponge cake made in layers. Opéra gâteau is an elaborate version of it, here made with kirsch syrup and a chocolate ganache.",
img:"https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/opera_cake_04536_16x9.jpg"
},
{
title:"Stuffed Roast Turkey Breast",
description: "Less than 2 hours of roasting makes this stuffed turkey crown a relatively quick Christmas dinner. As well as lemon and thyme, the stuffing features tart dried cranberries, crunchy almonds and sweet leeks.",
img:"https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/roast_turkey_crown_10545_16x9.jpg"
},
{
title:"Chocolate Cupcakes",
description: "An easy chocolate cupcake recipe that's quick to prepare for birthdays, parties and bake sales.",
img:"https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/chocolate_cupcakes_14164_16x9.jpg"
},
],
carouselImgs: [
{
title: "Low-sugar Cake",
img: "https://ichef.bbci.co.uk/images/ic/1280xn/p060z50q.jpg"
},
{
title: "Penne al'arrabiata",
img: "https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/pennealarrabiatapast_83813_16x9.jpg"
},
{
title: "Easy chicken traybakes",
img: "https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/cumberland_sausage_59571_16x9.jpg"
},
{
title: "",
img: ""
},
]
}),
computed: {
......@@ -67,13 +179,6 @@ export default {
</script>
<style>
.greeting {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.top-categories img {
width: 100px;
height: 100px;
......@@ -86,13 +191,41 @@ export default {
.recipe-item {
padding: 10px;
width: 300px;
}
.recipe-item img {
width: 300px;
height: 200px;
object-fit: cover;
}
.recipe-item .title {
font-weight: bold;
}
.recipe-item .desc {
text-align: justify;
font-size: 0.8em;
}
.trend-recipes .row {
max-width: 1000px;
}
.carousel-home img {
object-fit: cover;
height: 300px;
}
.home-content {
max-width: 1000px;
margin: auto;
}
button {
padding: 10px;
border: 1px solid #ccc;
/*border-radius: 4px;*/
resize: vertical;
width: 60px;
margin-top: 10px;
cursor:pointer;
background-color: #d6d6d6
}
</style>
<template lang="html">
<div class="greeting">
<h2>
Wellcome to the Vue.js blog
</h2>
<img src="../assets/logo.png" alt="vuejs logo">
<div id="app1">
<tab :tabtitles="tabtitles"
:current-page="3">
<div class="tab-content-container">
<!-- <button onclick="alert(2)">click</button> -->
<div class="container">
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="lname">Gender </label>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
<br>
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="france">Frace</option>
<option value="unitedkingdom">United Kingdom</option>
</select>
<input type="submit" value="Save">
<input type="reset" value="Cancel">
</form>
</div>
</div>
<div class="tab-content-container">
<form>
<div>
<label class="typo__label">Target Diet</label>
<multiselect v-model="valuea" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="optionsa" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
<br><br>
<div>
<label class="typo__label">Cooking Styles</label>
<multiselect v-model="valueb" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="optionsb" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
<br><br>
<div>
<label class="typo__label">Kitchen Facilities</label>
<multiselect v-model="valuec" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="optionsc" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
<br><br><br><br>
<input type="submit" value="Save">
<input type="reset" value="Cancel">
</form>
</div>
<div class="tab-content-container">
<form>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Current Password</b></label>
<input type="password" placeholder="Current Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<input type="submit" value="Save">
<input type="reset" value="Cancel">
</form>
</div>
</tab>
<br>
<br>
<br>
</div>
</template>
<script>
import tab from './vue-tab'
import Multiselect from 'vue-multiselect'
export default {
components: {
tab,
Multiselect
},
data(){
return {
'tabtitles':['Basic information','References','Advanced Settings'],
valuea: [],
optionsa: [{ name: 'Low Carb', code: 'Low Carb' },
{ name: 'Vegan Foods', code: 'Vegan Foods' },
{ name: 'Gluten Free', code: 'Gluten Free' },
{ name: 'High FIber', code: 'High FIber' },
{ name: 'Low Cholesterols', code: 'Low Cholesterols' },
{ name: 'No Pork', code: 'No Pork' }],
valueb: [],
optionsb: [{ name: 'Slow Cook', code: 'Slow Cook' },
{ name: 'Quick & Easy', code: 'Quick & Easy' },
{ name: 'Gourmet', code: 'Gourmet' },
{ name: 'Cooking for Kids', code: 'Cooking for Kids' },
{ name: 'Cooking for Two', code: 'Cooking for Two' },
{ name: 'BBQ and Grilling ', code: 'BBQ and Grilling' }],
valuec: [],
optionsc: [{ name: 'Sous Vide', code: 'Sous Vide' },
{ name: 'Wok', code: 'Wok' },
{ name: 'Crepe Maker', code: 'Crepe Maker' },
{ name: 'Pressure Cooker', code: 'Pressure Cooker'}]
}
}
}
</script>
<style>
.greeting {
display: flex;
......@@ -15,4 +132,125 @@
text-align: center;
flex-direction: column;
}
/* for tabs */
html {
height: 100%;
}
*{
margin: 0px;
padding: 0px;
}
/* body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}*/
.tab-content-container{
width: 99%;
height: 200px;
margin: 0px auto;
}
#app1 {
color: #2c3e50;
margin-top: 50px;
max-width: 500px;
width: 100%;
font-family: Source Sans Pro, Helvetica, sans-serif;
/*text-align: center;*/
margin: 0 auto
}
img{
width: 98%
}
/* For forms */
input[type=radio], select, textarea {
padding: 3px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=text], input[type=password], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit], input[type=reset] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
margin: 4px 2px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
/*TO change the active color u like
.tab-title.active,.tab-title:active {
border-bottom: 2px solid #36acf4;
color: #36acf4;
}*/
/* for dropdown form */
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
</style>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<template lang="html">
<div class="greeting">
<h2>
The Recipes
</h2>
<search-bar></search-bar>
<a href=#/>
<h2>
The Recipes
</h2>
</a>
<!--
<div class="User">
<a href="#/profile">LOGIN</a>
</div> -->
<!-- <search-bar></search-bar> -->
<br>
<h2>{{title}}</h2>
<br>
<div class="overviewRecipe">
<div>
<carousel :per-page="1" class="carrousselRecipe">
<slide>
<img :src="imgSrc">
</slide>
<slide>
<img :src="imgSrc">
</slide>
<slide>
<img src="../assets/waffle.jpg">
</slide>
<slide>
<img src="../assets/cookie.jpg">
</slide>
<slide>
<img src="../assets/cookie.jpg">
</slide>
<slide>
<img src="../assets/waffle.jpg">
</slide>
</carousel>
</div>
<div class="ratingRecipe">
Rating : <star-rating :config="config" ref="myRating"></star-rating>
<img src="../assets/waffle.jpg">
</slide>
</carousel>
</div>
<div class="informationsRecipe">
<ol>
<li><img src="../assets/timer.png" height="42" width="42"><p>prep time : {{time}}</p></li>
<li><img src="../assets/calories.png" height="42" width="42"><p>Calories : {{calories}}</p></li>
<li><img src="../assets/people.jpg" height="42" width="42"><p>Serving : {{serving}}</p></li>
<li><img src="../assets/timer.png" class="icone"><p>prep time : {{time}}</p></li>
<li><img src="../assets/calories.png" class="icone"><p>Calories : {{calories}}</p></li>
<li><img src="../assets/people.jpg" class="icone"><p>Serving : {{serving}}</p></li>
<li><p>Rating : <star-rating v-model="rating"></star-rating></p></li>
</ol>
</div>
......@@ -73,6 +76,19 @@
</div>
</div>
<div class="suggestions">
<h2>You may also like...</h2>
<div class="row" >
<div v-for="recipe in otherRecipes">
<div class="category-item">
<img src="../assets/waffle.jpg">
<p>Name</p>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -86,7 +102,7 @@
<script>
import SearchBar from './SearchBar.vue';
import StarRating from 'vue-dynamic-star-rating';
import StarRating from 'vue-star-rating'
export default {
name: 'app',
......@@ -96,18 +112,12 @@ export default {
},
data: function() {
return {
config: {
rating: 2,
style: {
fullStarColor: '#ed8a19',
emptyStarColor: '#737373',
starWidth: 10,
starHeight: 10
}
},
otherRecipes:["Cat1", "Cat2", "Cat3", "Cat", "2" ],
recipeName:"The best chocolate cookies",
time: "30min",
calories: "2000",
serving: "3 people",
rating: 3,
Ingredients : [
"30g butter",
......@@ -124,13 +134,25 @@ export default {
"Do something else",
"put what you did in the oven for 30min",
"eat"
]
],
images:[{path:"../assets/waffle.jpg"},{path:"../assets/cookie.jpg"}]
}
},
computed: {
},
methods: {
},
props: {
title: {
default: "Waffle",
type: String,
},
imgSrc: {
default: "https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/waffles_82356_16x9.jpg",
type: String
}
}
}
......
<template lang="html">
<div class="greeting">
<input v-model="message" placeholder="What do you search for?">
<div class="search-bar">
<!-- <input v-model="message" placeholder="What do you search for?"> -->
<vue-single-select
id="select"
v-model="selected"
:options="options"
:required="true"
:max-results="5"
placeholder="What do you want to cook?"
></vue-single-select>
</div>
</template>
<script>
import Autocomplete from 'v-autocomplete'
import VueSingleSelect from "vue-single-select";
import 'v-autocomplete/dist/v-autocomplete.css'
export default {
components: {
VueSingleSelect
},
props: {
selected: String
},
data: () => ({
message:"",
options:["Cookie", "Waffle", "Italian", "Vegetarian", "Vegan", "Low-sugar", "American", "British", "Chocolate", "Chips" ]
}),
}
</script>
<style>
.search-bar {
/*width: 100%;*/
margin: 30px;
}
.search-bar input {
width: 90% !important;
}
#select .search-input {
width: 100% !important;
}
#select div.cursor-pointer {
display: none;
}
</style>
<template>
<div>
{{title}}
<video id="jkBxVideo" class="vdChild"
autoplay ref="videoComponent" controls
v-on:ended="$emit('video-ended')"
v-on:error="videoError"
:src="video">
</video>
</div>
</template>
<script>
export default {
props: {
video: {
type: String,
required: true
},
title: String,
displayButtons: Boolean,
},
methods: {
setOffset: function (offset){
let video = this.$refs.videoComponent;
if(offset > video.duration){
alert('Offset greater than the video duration');
return;
}
video.currentTime = offset;
if (video.paused){
video.play();
}
},
rotate: function(){
var v = this.$refs.videoComponent;
var properties = ['transform', 'WebkitTransform', 'MozTransform',
'msTransform', 'OTransform'];
var prop = properties[0];
for(var i=0,j=properties.length;i<j;i++){
if(typeof v.style[properties[i]] !== 'undefined'){
prop = properties[i];
break;
}
}
v.style.left = 0;
v.style.top = 0;
this.videoRotation += 15;
v.style[prop]='rotate('+this.videoRotation+'deg)';
},
videoError(){
alert('Error while playing the video');
}
},
watch: {
displayButtons: function (val){
this.$refs.videoComponent.controls = val;
},
},
data: () => ({
videoRotation: 0
}),
}
</script>
<style>
.vdChild {
width: 500px;
max-width: 100% !important;
}
</style>
<template>
<div>
<div v-for="(video, index) in list" :video="video"
v-on:click="$emit('click-video', index)">
<video class="vdList" v-bind:class="[index == activeIndex ? 'active' : '']">
<source :src="video">
</video>
</div>
</div>
</template>
<script>
export default {
props: {
'list': {
type: Array,
required: true
},
activeIndex: Number
}
}
</script>
<style>
.vdList {
width: 120px;
}
.active {
border-style: solid;
border-width: 7px;
border-color: #01c733d9;
}
</style>
This diff is collapsed.