|
@ -0,0 +1,51 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
|
||||
.bg-img{
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
/*background-image: url("../image/loginimg.png");*/
|
||||
}
|
||||
.form-control{
|
||||
border-radius: 5px;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
.form-control:focus{
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-color: orange;
|
||||
}
|
||||
.forgot-link{
|
||||
/*text-decoration: none;*/
|
||||
color: grey;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.login-btn{
|
||||
background-color: #e9c046;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: bolder;
|
||||
padding: 10px 10px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
transition: .1s ease-in-out;
|
||||
}
|
||||
.login-ins-btn{
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
font-weight: bolder;
|
||||
padding: 10px 10px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
border: 1px solid black;
|
||||
transition: .1s ease-in-out;
|
||||
}
|
||||
.login-btn:hover{
|
||||
background-color: #e9c059;
|
||||
}
|
||||
.signup-link{
|
||||
color: #e9c046;
|
||||
text-decoration: underline;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 5.2 KiB |
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 52 KiB |
After Width: | Height: | Size: 53 KiB |
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 53 KiB |
|
@ -1,18 +1,35 @@
|
|||
<template>
|
||||
<div>
|
||||
<header class="shadow-sm bg-white">
|
||||
<nav class="container mx-auto p-4 justify-between flex">
|
||||
<NuxtLink to="/" class="text-bold">Crave Teck</NuxtLink>
|
||||
<ul class="flex gap-4">
|
||||
<li><NuxtLink to="/">Home</NuxtLink></li>
|
||||
<li><NuxtLink to="/about">About</NuxtLink></li>
|
||||
<li><NuxtLink to="/products/1122">Product 1122</NuxtLink></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="container p-4 mx-auto">
|
||||
<div class="">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
useHead({
|
||||
title:'MindBoost',
|
||||
link:[
|
||||
{
|
||||
href:'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css',
|
||||
rel:'stylesheet',
|
||||
},
|
||||
// { rel: 'stylesheet', href: '../assets/css/style.css' },
|
||||
],
|
||||
script:[
|
||||
{
|
||||
src:'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js',
|
||||
},
|
||||
{
|
||||
src:'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js',
|
||||
}
|
||||
]
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*@import "assets/css/style.css";*/
|
||||
</style>
|
|
@ -1,11 +1,18 @@
|
|||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@nuxtjs/tailwindcss',
|
||||
'nuxt-headlessui'
|
||||
|
||||
],
|
||||
headlessui: {
|
||||
prefix: 'Headless'
|
||||
}
|
||||
|
||||
css:[
|
||||
'~/assets/css/style.css'
|
||||
]
|
||||
// modules: [
|
||||
// '@nuxtjs/tailwindcss',
|
||||
// 'nuxt-headlessui'
|
||||
//
|
||||
// ],
|
||||
// headlessui: {
|
||||
// prefix: 'Headless'
|
||||
// },
|
||||
|
||||
|
||||
})
|
||||
|
|
|
@ -12,5 +12,9 @@
|
|||
"@nuxtjs/tailwindcss": "^6.1.3",
|
||||
"nuxt": "3.0.0",
|
||||
"nuxt-headlessui": "^1.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/vue": "^2.0.13",
|
||||
"bootstrap": "^5.2.3"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,64 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<!--
|
||||
This example requires some changes to your config:
|
||||
|
||||
```
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
// ...
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
],
|
||||
}
|
||||
```
|
||||
-->
|
||||
<div class="bg-white">
|
||||
<div class="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
<h2 class="sr-only">Products</h2>
|
||||
|
||||
<div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
|
||||
<a href="#" class="group">
|
||||
<div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
|
||||
<img src="https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-01.jpg" alt="Tall slender porcelain bottle with natural clay textured body and cork stopper." class="h-full w-full object-cover object-center group-hover:opacity-75">
|
||||
</div>
|
||||
<h3 class="mt-4 text-sm text-gray-700">Earthen Bottle</h3>
|
||||
<p class="mt-1 text-lg font-medium text-gray-900">$48</p>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group">
|
||||
<div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
|
||||
<img src="https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg" alt="Olive drab green insulated bottle with flared screw lid and flat top." class="h-full w-full object-cover object-center group-hover:opacity-75">
|
||||
</div>
|
||||
<h3 class="mt-4 text-sm text-gray-700">Nomad Tumbler</h3>
|
||||
<p class="mt-1 text-lg font-medium text-gray-900">$35</p>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group">
|
||||
<div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
|
||||
<img src="https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg" alt="Person using a pen to cross a task off a productivity paper card." class="h-full w-full object-cover object-center group-hover:opacity-75">
|
||||
</div>
|
||||
<h3 class="mt-4 text-sm text-gray-700">Focus Paper Refill</h3>
|
||||
<p class="mt-1 text-lg font-medium text-gray-900">$89</p>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group">
|
||||
<div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
|
||||
<img src="https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-04.jpg" alt="Hand holding black machined steel mechanical pencil with brass tip and top." class="h-full w-full object-cover object-center group-hover:opacity-75">
|
||||
</div>
|
||||
<h3 class="mt-4 text-sm text-gray-700">Machined Mechanical Pencil</h3>
|
||||
<p class="mt-1 text-lg font-medium text-gray-900">$35</p>
|
||||
</a>
|
||||
|
||||
<!-- More products... -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1 class="display-4">{{ text }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data(){
|
||||
return{
|
||||
text : "Helo World",
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-5 col-lg-4 bg-img" :style="{ backgroundImage: `url(${backgroundImagePath})` }" >
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-lg-8 pt-5 ">
|
||||
<div class="pb-3 text-center">
|
||||
<img src="~/assets/image/Logo.png" style="width: 200px" />
|
||||
</div>
|
||||
<div class="text-center pt-1">
|
||||
<h2 class="fw-bolder display-6 text-center" >Log In</h2>
|
||||
<span class="fs-5 pt-1 text-muted">Welcome back, <span class="fw-bolder text-dark">Morris!</span></span>
|
||||
</div>
|
||||
<div class="row pt-4 pb-5">
|
||||
<div class="col-12">
|
||||
<form class=" ">
|
||||
<div class="row pt-3 justify-content-center">
|
||||
<div class="col-12 col-sm-8 col-md-8 col-lg-5">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" placeholder="JohnDoe@gmail.com" class="form-control" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center pt-3">
|
||||
<div class="col-12 col-sm-8 col-md-8 col-lg-5">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" placeholder="Password" class="form-control" >
|
||||
<span class="float-end pt-2"><a class="forgot-link" href="#">Forgot Password</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center pb-5">
|
||||
<div class="col-12 col-sm-8 col-md-8 col-lg-5 pt-4 text-center">
|
||||
<button type="submit" class=" login-btn col-12" >Sign Up</button>
|
||||
<h4 class="text-center">or</h4>
|
||||
<button type="submit" class=" login-ins-btn col-12" >Institution Login</button>
|
||||
<h5 class="text-center pt-3">Don’t have an Account? <a class="signup-link" href="#">Sign Up</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import backgroundImagePath from '~/assets/image/login4.png'
|
||||
export default {
|
||||
|
||||
name:'LoGin',
|
||||
data(){
|
||||
return{
|
||||
backgroundImagePath:backgroundImagePath,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-5 col-lg-4 bg-img" :style="{ backgroundImage: `url(${backgroundImagePath})` }" >
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-lg-8 pt-5 ">
|
||||
<div class="py-3 text-center">
|
||||
<img src="~/assets/image/Logo.png" style="width: 200px" />
|
||||
</div>
|
||||
<div class="text-center pt-1">
|
||||
<h2 class="fw-bolder display-6 text-center" >Log In</h2>
|
||||
<span class="fs-5 pt-1 text-muted">Welcome back, <span class="fw-bolder text-dark">Morris!</span></span>
|
||||
</div>
|
||||
<div class="row pt-4 pb-5">
|
||||
<div class="col-12 pb-5">
|
||||
<form class=" pb-5 ">
|
||||
<div class="row pt-3 justify-content-center">
|
||||
<div class="col-12 col-sm-8 col-md-8 col-lg-5">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" placeholder="JohnDoe@gmail.com" class="form-control" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center pt-3">
|
||||
<div class="col-12 col-sm-8 col-md-8 col-lg-5">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" placeholder="Password" class="form-control" >
|
||||
<span class="float-end pt-2"><a class="forgot-link" href="#">Forgot Password</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center pb-5">
|
||||
<div class="col-12 col-sm-8 col-md-8 col-lg-5 pt-4 text-center">
|
||||
<button type="submit" class=" login-btn col-12" >Sign Up</button>
|
||||
<h5 class="text-center pt-3">Don’t have an Account? <NuxtLink class="signup-link" href="signup">Sign Up</NuxtLink></h5>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import backgroundImagePath from '~/assets/image/login4.png'
|
||||
export default {
|
||||
|
||||
name:'LoGin',
|
||||
data(){
|
||||
return{
|
||||
backgroundImagePath:backgroundImagePath,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-4 bg-img" :style="{ backgroundImage: `url(${backgroundImagePath})` }" >
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5 ">
|
||||
<div class="pb-2 text-center">
|
||||
<img src="~/assets/image/Logo.png" style="width: 200px" />
|
||||
</div>
|
||||
<div class="text-center pt-1">
|
||||
<h2 class="fw-bolder display-6 text-center" >Sign Up</h2>
|
||||
<span class="fs-5 pt-2 text-muted">Helo , <span class="fw-bolder text-dark">Beautiful!</span></span>
|
||||
<p class="text-muted pt-2 text-center fs-5 pb-0 mb-0">Mindboost helps you block out distracting noise with concentration-boosting music, increasing your productivity by up to 35%.</p>
|
||||
</div>
|
||||
<div class="row pt-3 pb-5">
|
||||
<div class="col-12">
|
||||
<form>
|
||||
<div class="row px-0 px-md-4 pb-2">
|
||||
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
||||
<label class="form-label">First Name</label>
|
||||
<input type="text" placeholder="First Name" class="form-control">
|
||||
</div>
|
||||
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
||||
<label class="form-label">Surname</label>
|
||||
<input type="text" placeholder="Surname" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row px-0 px-md-4 pb-2">
|
||||
<div class="col-12 col-md-6 pt-2 col-lg-6 ">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="text" placeholder="Email" class="form-control">
|
||||
</div>
|
||||
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" placeholder="Password" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row px-4 pt-3 pb-2">
|
||||
<div class="col-10">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
|
||||
<label class="form-check-label" for="flexCheckIndeterminate">
|
||||
I agree to Mindboost's terms and conditions. You can read about how we use and protect your information in our Privacy Policy.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row px-4 pt-3">
|
||||
<div class="col-12">
|
||||
<button type="button" class="login-btn col-4">Signup</button>
|
||||
<p class="pt-3">Already have an Account? <NuxtLink class="signup-link" href="login">Log In</NuxtLink></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import backgroundImagePath from '~/assets/image/login4.png'
|
||||
export default {
|
||||
|
||||
name:'LoGin',
|
||||
data(){
|
||||
return{
|
||||
backgroundImagePath:backgroundImagePath,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<nav class="navbar">
|
||||
<div class="container-fluid pt-3 ps-4">
|
||||
<a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-6 pt-2">
|
||||
<h3 class="text-center fs-2">We’re About to Get Started</h3>
|
||||
<p class="text-center text-muted fs-5 col-8 mx-auto">Please answer a few questions while we analyze the acoustics in your room.</p>
|
||||
<div class="text-center">
|
||||
<img src="~/assets/image/Delivery.png">
|
||||
</div>
|
||||
<form>
|
||||
<div class="row pt-4 justify-content-center">
|
||||
<div class="col-7 ">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
|
||||
<label class="form-check-label" for="flexCheckIndeterminate">
|
||||
I give the app permission to use my microphone
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-3">
|
||||
<div class="col-12 text-center pt-3">
|
||||
<button type="button" class="login-btn col-4">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
|
@ -1,35 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<HeadlessCombobox v-model="selectedPerson">
|
||||
<HeadlessComboboxInput class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0" @change="query = $event.target.value" />
|
||||
<HeadlessComboboxOptions class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
<HeadlessComboboxOption class="mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" v-for="person in filteredPeople" :key="person" :value="person">
|
||||
{{ person }}
|
||||
</HeadlessComboboxOption>
|
||||
</HeadlessComboboxOptions>
|
||||
</HeadlessCombobox>
|
||||
<h1>Home Page</h1>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const people = [
|
||||
'Wade Cooper',
|
||||
'Arlene McCoy',
|
||||
'Devon Webb',
|
||||
'Tom Cook',
|
||||
'Tanya Fox',
|
||||
'Hellen Schmidt',
|
||||
]
|
||||
const selectedPerson = ref(people[0])
|
||||
const query = ref('')
|
||||
|
||||
const filteredPeople = computed(() =>
|
||||
query.value === ''
|
||||
? people
|
||||
: people.filter((person) => {
|
||||
return person.toLowerCase().includes(query.value.toLowerCase())
|
||||
})
|
||||
)
|
||||
</script>
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Login Page</h1>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
|
||||
</script>
|