Birthday
This commit is contained in:
parent
6cf4fd84d4
commit
8acedfc1cb
3
components/Birthday.vue
Normal file
3
components/Birthday.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template src="./Birthday.vue.html"></template>
|
||||
|
||||
<style scoped src="./Birthday.vue.css"></style>
|
||||
31
components/Birthday.vue.css
Normal file
31
components/Birthday.vue.css
Normal file
@ -0,0 +1,31 @@
|
||||
.birthday-form {
|
||||
margin: 40px 40px;
|
||||
min-width: 250px;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
font-size: inherit;
|
||||
margin: 15px 0;
|
||||
padding: 12px 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: blueviolet;
|
||||
border: 1px solid black;
|
||||
color: white;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
15
components/Birthday.vue.html
Normal file
15
components/Birthday.vue.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div class="birthday-form">
|
||||
<form netlify netlify-honeypot name="birthday" method="POST" action="/birthday-success">
|
||||
<p class="hidden">
|
||||
<label>
|
||||
Don't fill this out if you're human: <input name="bot-field" />
|
||||
</label>
|
||||
</p>
|
||||
<input type="hidden" name="form-name" value="birthday" />
|
||||
<label for="name">Name</label>
|
||||
<input id="name" type="text" name="name" required />
|
||||
<label for="birthday">birthday</label>
|
||||
<input id="birthday" type="date" name="birthday" required />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -1,58 +1,3 @@
|
||||
<template>
|
||||
<div class="feedback-form">
|
||||
<form
|
||||
netlify
|
||||
netlify-honeypot
|
||||
name="feedback"
|
||||
method="POST"
|
||||
action="/success"
|
||||
>
|
||||
<p class="hidden">
|
||||
<label>
|
||||
Don’t fill this out if you’re human: <input name="bot-field" />
|
||||
</label>
|
||||
</p>
|
||||
<input type="hidden" name="form-name" value="feedback" />
|
||||
<label for="name">Name</label>
|
||||
<input id="name" type="text" name="name" />
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" name="email" required />
|
||||
<label for="feedback">What is your feedback?</label>
|
||||
<textarea id="feedback" wrap="soft" name="feedback" required></textarea>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<template src="./FeedbackForm.vue.html"></template>
|
||||
|
||||
<style scoped>
|
||||
.feedback-form {
|
||||
margin: 40px 40px;
|
||||
min-width: 250px;
|
||||
width: 45%;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
font-size: inherit;
|
||||
margin: 15px 0;
|
||||
padding: 12px 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: teal;
|
||||
border: 1px solid black;
|
||||
color: white;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
<style scoped src="./FeedbackForm.vue.css"></style>
|
||||
|
||||
31
components/FeedbackForm.vue.css
Normal file
31
components/FeedbackForm.vue.css
Normal file
@ -0,0 +1,31 @@
|
||||
.feedback-form {
|
||||
margin: 40px 40px;
|
||||
min-width: 250px;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
font-size: inherit;
|
||||
margin: 15px 0;
|
||||
padding: 12px 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: teal;
|
||||
border: 1px solid black;
|
||||
color: white;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
17
components/FeedbackForm.vue.html
Normal file
17
components/FeedbackForm.vue.html
Normal file
@ -0,0 +1,17 @@
|
||||
<div class="feedback-form">
|
||||
<form netlify netlify-honeypot name="feedback" method="POST" action="/feedback-success">
|
||||
<p class="hidden">
|
||||
<label>
|
||||
Don't fill this out if you're human: <input name="bot-field" />
|
||||
</label>
|
||||
</p>
|
||||
<input type="hidden" name="form-name" value="feedback" />
|
||||
<label for="name">Name</label>
|
||||
<input id="name" type="text" name="name" />
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" name="email" required />
|
||||
<label for="feedback">What is your feedback?</label>
|
||||
<textarea id="feedback" wrap="soft" name="feedback" required></textarea>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -9,17 +9,6 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article>
|
||||
<blockquote>
|
||||
<p>{{ joke }}</p>
|
||||
</blockquote>
|
||||
</article>
|
||||
</template>
|
||||
<template src="./JokeBlock.vue.html"></template>
|
||||
|
||||
<style scoped>
|
||||
blockquote {
|
||||
border-left: 5px solid #ccc;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
<style scoped src="./JokeBlock.vue.css"></style>
|
||||
4
components/JokeBlock.vue.css
Normal file
4
components/JokeBlock.vue.css
Normal file
@ -0,0 +1,4 @@
|
||||
blockquote {
|
||||
border-left: 5px solid #ccc;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
5
components/JokeBlock.vue.html
Normal file
5
components/JokeBlock.vue.html
Normal file
@ -0,0 +1,5 @@
|
||||
<article>
|
||||
<blockquote>
|
||||
<p>{{ joke }}</p>
|
||||
</blockquote>
|
||||
</article>
|
||||
@ -1,9 +0,0 @@
|
||||
const { defineConfig } = require('cypress')
|
||||
|
||||
module.exports = defineConfig({
|
||||
e2e: {
|
||||
baseUrl: "http://localhost:8888/",
|
||||
supportFile: false,
|
||||
chromeWebSecurity: false,
|
||||
},
|
||||
});
|
||||
@ -18,10 +18,3 @@
|
||||
|
||||
[functions]
|
||||
node_bundler = "esbuild"
|
||||
|
||||
[[plugins]]
|
||||
package = "netlify-plugin-cypress"
|
||||
[plugins.inputs]
|
||||
enable = false
|
||||
[plugins.inputs.postBuild]
|
||||
enable = true
|
||||
|
||||
27816
package-lock.json
generated
27816
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -21,7 +21,8 @@
|
||||
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
|
||||
"lint:prettier": "prettier --check .",
|
||||
"lint": "npm run lint:js && npm run lint:prettier",
|
||||
"lintfix": "prettier --write --list-different . && npm run lint:js -- --fix"
|
||||
"lintfix": "prettier --write --list-different . && npm run lint:js -- --fix",
|
||||
"dev:netlify": "netlify dev"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.19.3",
|
||||
@ -40,6 +41,7 @@
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-nuxt": "^4.0.0",
|
||||
"eslint-plugin-vue": "^9.0.0",
|
||||
"netlify-cli": "^15.9.1",
|
||||
"prettier": "^2.5.1"
|
||||
}
|
||||
}
|
||||
|
||||
1
pages/birthday-success.vue
Normal file
1
pages/birthday-success.vue
Normal file
@ -0,0 +1 @@
|
||||
<template src="./birthday-success.vue.html"></template>
|
||||
4
pages/birthday-success.vue.html
Normal file
4
pages/birthday-success.vue.html
Normal file
@ -0,0 +1,4 @@
|
||||
<div>
|
||||
<h1>Thanks for your birthday!</h1>
|
||||
<NuxtLink to="/">Home</NuxtLink>
|
||||
</div>
|
||||
1
pages/feedback-success.vue
Normal file
1
pages/feedback-success.vue
Normal file
@ -0,0 +1 @@
|
||||
<template src="./feedback-success.vue.html"></template>
|
||||
4
pages/feedback-success.vue.html
Normal file
4
pages/feedback-success.vue.html
Normal file
@ -0,0 +1,4 @@
|
||||
<div>
|
||||
<h1>Thanks for your feedback!</h1>
|
||||
<NuxtLink to="/">Home</NuxtLink>
|
||||
</div>
|
||||
@ -1,37 +1,3 @@
|
||||
<template>
|
||||
<main>
|
||||
<div class="intro">
|
||||
<h1>Nuxt Toolbox</h1>
|
||||
<p>
|
||||
Hi 👋! This template gives you a
|
||||
<a href="https://nuxtjs.org/">Nuxt</a> app with the scaffolding for
|
||||
<a href="https://www.netlify.com/products/functions/"
|
||||
>Netlify Functions</a
|
||||
>, <a href="https://www.netlify.com/products/forms/">Forms</a>, and
|
||||
<a href="https://docs.netlify.com/routing/redirects/">Redirects</a>. Our
|
||||
aim was to give you the code you would need to hit the ground running
|
||||
with a few fun features.
|
||||
</p>
|
||||
<template src="./index.vue.html"></template>
|
||||
|
||||
<p>
|
||||
You can find the code for this project on GitHub at
|
||||
<a href="https://github.com/netlify-templates/nuxt-toolbox"
|
||||
>https://github.com/netlify-templates/nuxt-toolbox</a
|
||||
>! Happy coding!
|
||||
</p>
|
||||
</div>
|
||||
<FeedbackForm />
|
||||
<JokeBlock />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Helvetica', sans-serif;
|
||||
}
|
||||
.intro {
|
||||
min-width: 400px;
|
||||
padding: 10px 40px;
|
||||
width: 60%;
|
||||
}
|
||||
</style>
|
||||
<style src="./index.vue.css"></style>
|
||||
|
||||
9
pages/index.vue.css
Normal file
9
pages/index.vue.css
Normal file
@ -0,0 +1,9 @@
|
||||
* {
|
||||
font-family: 'Helvetica', sans-serif;
|
||||
}
|
||||
|
||||
.intro {
|
||||
min-width: 400px;
|
||||
padding: 10px 40px;
|
||||
width: 60%;
|
||||
}
|
||||
11
pages/index.vue.html
Normal file
11
pages/index.vue.html
Normal file
@ -0,0 +1,11 @@
|
||||
<main>
|
||||
<div class="intro">
|
||||
<h1>Phares</h1>
|
||||
<p>
|
||||
Hi 👋!
|
||||
</p>
|
||||
</div>
|
||||
<Birthday />
|
||||
<FeedbackForm />
|
||||
<JokeBlock />
|
||||
</main>
|
||||
@ -1,6 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Thanks for your feedback!</h1>
|
||||
<NuxtLink to="/">Home</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": [
|
||||
"local>netlify-templates/renovate-config"
|
||||
]
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user