diff --git a/src/components/Buttons/Button1.vue b/src/components/Buttons/Button1.vue index 33b300d7139220c9388160810541bafdf579332e..c5dfa9cfa37b8d1d047ae0a0dbb4ab2907b00a78 100644 --- a/src/components/Buttons/Button1.vue +++ b/src/components/Buttons/Button1.vue @@ -1,5 +1,5 @@ <template> - <button type="button" class="btn btn-success" id="buttonStyle">{{ buttonText }}</button> + <button type="button" class="btn btn-primary" id="buttonStyle">{{ buttonText }}</button> </template> <script> diff --git a/src/views/FeedbackView.vue b/src/views/FeedbackView.vue index 9095328987e0c5479f039dd59d667f0533d4cb71..37264535422ff7742a1e6e410d4e6338c0752598 100644 --- a/src/views/FeedbackView.vue +++ b/src/views/FeedbackView.vue @@ -1,3 +1,85 @@ <template> - Hallo -</template> \ No newline at end of file + <main> + <div class="wrapper"> + <div id="formFrame"> + <h1>Feedback</h1> + <form @submit.prevent="submitForm"> + <BaseInput v-model="email" label="Email" type="email" placeholder="Enter your email" inputId="email" required /> + <br> + <label for="feedback">Your feedback:</label> + <textarea v-model="message" placeholder="Write here" rows="5" name="comment[text]" id="comment_text" cols="33" + required></textarea> + <Button1 button-text="Send" @click="submitForm">Submit</Button1> + <p v-if="submissionStatus">{{ submissionStatus }}</p> + </form> + </div> + </div> + </main> + </template> + +<script setup lang="ts"> +import { ref } from 'vue'; +import BaseInput from '@/components/InputFields/BaseInput.vue'; +import Button1 from '@/components/Buttons/Button1.vue'; + +const email = ref(""); +const message = ref(""); +const submissionStatus = ref(""); + +const submitForm = async () => { + +}; +</script> + +<style scoped> +main { + display: flex; + flex-direction: column; + align-items: center; + font-family: 'Poppins', sans-serif; +} + +.wrapper { + width: 60%; + height: 100%; + margin: 30px; + margin-bottom: 4rem; + display: flex; + justify-content: center; + align-items: center; +} + +#formFrame { + width: 400px; + padding: 40px; + border-radius: 50px; + color: #101010; +} + +textarea { + padding: 10px; + max-width: 100%; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; +} + +textarea { + width: 500px; + height: 100px; + background: none repeat scroll 0 0 rgba(255, 255, 255, 0.151); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset; + color: #555555; + font-size: 0.9em; + line-height: 1.4em; + padding: 5px 8px; + transition: background-color 0.2s ease 0s; +} + + +textarea:focus { + background: none repeat scroll 0 0 #FFFFFF; + outline-width: 0; +} +</style> \ No newline at end of file