Nels.Koops
/
Project-XR-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsiveness update + login page

Browse Source
main
0MJN0 2 weeks ago
parent a9bdbf97f8
commit b8f69acc10
14 changed files with 701 additions and 303 deletions
Show Stats Download Patch File Download Diff File

86
docs/.vuepress/components/About.vue
Unescape View File

@ -1,57 +1,73 @@
<template> <template>
<section id="about"> <section id="about" class="grid-container">
<div class="textContainer"> <div class="TextContainer grid-item">
<h1>About Project XR</h1> <h1>About Project XR</h1>
<p>Lorem ipsum dolor sit amet. Cum dolorem blanditiis sit enim officia et voluptates aliquam. Eum maxime eligendi et perferendis vitae non vitae consequatur.</p> <p>
Lorem ipsum dolor sit amet. Cum dolorem blanditiis sit enim officia et voluptates aliquam.
Eum maxime eligendi et perferendis vitae non vitae consequatur.
</p>
</div> </div>
<div class="imgContainer"> <div class="ImgContainer grid-item">
<img src="/img/DemoFoto.png" alt="Demo Image" id="DemoImg" />
<img src="/img/DemoFoto.png" alt="" id="DemoImg" >
</div> </div>
</section> </section>
</template> </template>
<script> <script>
export default { export default {
name: 'about', name: 'about',
}; };
</script> </script>
<style scoped> <style scoped>
#about {
display: flex;
margin-top: 10%;
margin-bottom: 20%;
}
.textContainer { .grid-container {
padding: 10%; display: grid;
grid-template-columns: 40% 60%;
gap: 20px;
align-items: start;
margin: 10% 0;
overflow: hidden;
}
.grid-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
/* gap: 80px; */
width: 40%;
} }
/* Text Container Styling */
.TextContainer {
padding: 10%;
}
.TextContainer h1 {
/* font-size: 2.5rem; */
margin-bottom: 20px;
}
.imgContainer { .TextContainer p {
height: 80%; /* font-size: 1.2rem; */
width: 60%; line-height: 1.6;
position: absolute; }
right: 0;
/* Image Container Styling */
.ImgContainer {
display: flex;
justify-content: center;
align-items: center;
} }
.imgContainer #DemoImg {
height: 100%; .ImgContainer #DemoImg {
width: 100%; width: 80%;
height: auto;
mask-image: url(/img/union.svg); mask-image: url(/img/union.svg);
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: right; mask-position: center;
-webkit-mask-image: url(/img/union.svg);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
} }
</style> </style>

10
docs/.vuepress/components/Footer.vue
Unescape View File

@ -4,8 +4,7 @@
<div class="TextContainer"> <div class="TextContainer">
<h2 id="h2">Questions or remarks? Or do you want to work together? Let us know! </h2> <h2 id="h2">Questions or remarks? Or do you want to work together? Let us know! </h2>
<p id="p">Lorem ipsum dolor sit amet. Cum dolorem blanditiis sit enim officia et voluptates aliquam. Eum maxime eligendi et perferendis vitae non vitae consequatur.</p> <p id="p">Lorem ipsum dolor sit amet. Cum dolorem blanditiis sit enim officia et voluptates aliquam. Eum maxime eligendi et perferendis vitae non vitae consequatur.</p>
</div>
<div>
<form action="" class="Form"> <form action="" class="Form">
<input type="email" name="email" id="Email" placeholder="Email address" required> <input type="email" name="email" id="Email" placeholder="Email address" required>
<button type="submit" class="submit">Send</button> <button type="submit" class="submit">Send</button>
@ -71,6 +70,7 @@ export default {
#Footer { #Footer {
height: 60vw; height: 60vw;
margin-bottom: 0; margin-bottom: 0;
margin-top: 50px
} }
@ -86,9 +86,7 @@ export default {
} }
.Contact .TextContainer { .Contact .TextContainer {
position: absolute; padding-left: 50px;
left: 10%;
bottom: 40%;
width: 30%; width: 30%;
} }
@ -108,7 +106,7 @@ export default {
/* justify-content: space-between; */ /* justify-content: space-between; */
align-items: center; align-items: center;
gap: 20px; gap: 20px;
position: absolute; /* position: absolute; */
left: 10%; left: 10%;
bottom: 20%; bottom: 20%;
width: 40%; width: 40%;

230
docs/.vuepress/components/Projects.vue
Unescape View File

@ -1,142 +1,117 @@
<script setup> <script setup>
const config1 = { const config1 = {
dir: 'ttb', // This makes the carousel vertical dir: 'ttb', // This makes the carousel vertical
// wrapAround: true, itemsToShow: 4,
itemsToShow: 3,
snapAlign: 'center', snapAlign: 'center',
height: '700px', height: '600px',
wrapAround: true, wrapAround: true,
// touchDrag: false,
gap: 50, gap: 50,
// mouseDrag: false,
breakpoints: { breakpoints: {
// 300px and up
300: { 300: {
itemsToShow: 1,
snapAlign: 'center',
height: '100px',
gap: 20,
},
// 400px and up
400: {
itemsToShow: 2, itemsToShow: 2,
snapAlign: 'start', snapAlign: 'center',
height: '200px', height: '200px',
gap: 20, gap: 20,
}, },
// 500px and up 419: {
500: {
itemsToShow: 3, itemsToShow: 3,
snapAlign: 'start', snapAlign: 'start',
height: '300px', height: '400px',
gap: 20, gap: 20,
}, },
600: { 768: {
height: '500px', itemsToShow: 4,
snapAlign: 'center',
height: '800px',
gap: 100,
},
1440: {
itemsToShow: 4,
snapAlign: 'center',
height: '1000px',
gap: 100,
}, },
}
}
}
}
</script> </script>
<template> <template>
<section id="Projects"> <section id="projects">
<div class="TextContainer"> <div class="text-container">
<h1>Projects</h1> <h1>Projects</h1>
<p>Nisi anim occaecat aliqua sunt sint elit commodo sit consequat ullamco mollit commodo.</p> <p>Nisi anim occaecat aliqua sunt sint elit commodo sit consequat ullamco mollit commodo.</p>
</div> </div>
<div class="Container"> <div class="grid-container">
<div class="CarouselContainer"> <div class="carousel-container">
<!-- Vue Slick Carousel Integration --> <Carousel v-bind="config1" class="carousel" ref="mainCarousel" @beforeChange="updateTitleCarousel">
<Carousel v-bind="config1" class="Carousel" ref="mainCarousel" @beforeChange="updateTitleCarousel">
<Slide v-for="slide in img" :key="slide" class="slide"> <Slide v-for="slide in img" :key="slide" class="slide">
<!-- <div class="carousel__item">{{ slide }}</div> --> <img :src="slide" alt="l" class="carousel-item" style="width: 100%;">
<img :src="slide" alt="l" class="carousel__item" style="width: 100%;">
<!-- <img src="../public/img/Home-Adress - Wit.svg" alt="l" class="carousel__item"> -->
</Slide> </Slide>
<template #addons> <template #addons>
<Navigation /> <Navigation />
<!-- <Pagination /> -->
</template> </template>
</Carousel> </Carousel>
</div> </div>
<div class="TitleContainer" > <div class="title-container">
<div class="ProjectContainer"> <div class="project-container">
<div v-for="test in 4" :key="test" class="title" @click="test2(test)" tabindex="0"> <div v-for="test in projects" :key="test" class="title" @click="test2(1)" tabindex="0">
<img :src="test.image" alt="l" class="carousel__item" style="width: 100%;"> <div class="img-container">
<img :src="test.image[0]" alt="l" class="carousel-item">
</div> </div>
<div class="title-text">
<h1>{{ test.name }}</h1>
<!-- <h3>zzzz</h3> -->
<span id="line"></span>
<p>{{ test.text[0] }}</p>
<!-- <h3>lllll</h3> -->
</div> </div>
<div class="TitleText">
<div v-for="title in Projects" :key="title" class="Text" @click="test2(title)" tabindex="0">
<h3>{{title.name}}</h3>
<span id="Line"></span>
<h3>In cillum veniam dolore in irure amet voluptate.</h3>
</div> </div>
</div> </div>
<!-- <button @click="Detail()"></button> -->
</div> </div>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import { Carousel, Slide, Navigation, Pagination } from 'vue3-carousel'; import { Carousel, Slide, Navigation } from 'vue3-carousel';
import { ref } from 'vue'; import Data from '../data/projects.json';
import Data from '../data/Projects.json';
import 'vue3-carousel/dist/carousel.css'; import 'vue3-carousel/dist/carousel.css';
// Detail(0)
export default { export default {
components: { Carousel, Slide, Navigation, Pagination }, components: { Carousel, Slide, Navigation },
data() { data() {
return { return {
config: { config: {},
// Your slick config
},
currentSlide: 0, currentSlide: 0,
Projects: Data, projects: Data,
img: null, img: null,
Detail: null detail: null
}; };
}, },
methods: { methods: {
test2(p) { test2(p) {
const id = p - 1; const id = p - 1;
console.log(id); console.log(id);
this.img = this.projects[id]?.image;
this.img = this.Projects[id]?.image;
}, },
detail(T) {
Detail(T) {
const id = T - 1; const id = T - 1;
this.Detail = this.Projects[id]?.text; this.detail = this.projects[id]?.text;
console.log(Detail); console.log(this.detail);
} }
}, },
}; };
</script> </script>
<style scoped> <style scoped>
#Projects { .projects {
margin-bottom: 0vw; margin-bottom: 800px;
}
#projects {
margin-bottom: 0vw;
} }
.carousel .carousel__pagination { .carousel .carousel__pagination {
@ -147,16 +122,16 @@ export default {
} }
.carousel__pagination-button { .carousel__pagination-button {
background-color: aqua; /* background-color: aqua; */
width: 0; width: 0;
} }
#Projects>.TextContainer { #projects>.text-container {
width: 40%; width: 40%;
padding: 10%; padding: 10%;
} }
#Line { #line {
display: block; display: block;
background-color: black; background-color: black;
width: 40%; width: 40%;
@ -166,90 +141,123 @@ export default {
.title { .title {
border-radius: 5px; border-radius: 5px;
background-color: var(--light-pink);
height: 10vw;
width: 15vw;
transition: all 0.2s ease-in;
display: grid;
grid-template-columns: 1fr 1fr;
/* height: 15%; */
/* width: 100%; */
transition: all 0.2s ease-in;
gap: 5%;
} }
.Text { .text {
border-radius: 5px; border-radius: 5px;
height: 10vw; width: 100%;
width: 30vw; height: 15%;
} }
.Text #h3 { .text h3 {
font-size: 1.5vw; font-size: 16px;
font-weight: 100; font-weight: 100;
} }
.Container { .grid-container {
width: 100%; width: 100%;
display: flex; display: grid;
flex-direction: row; grid-template-columns: 1fr 1fr;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 60vw; /* height: 60vw; */
gap: 5px;
} }
.TitleContainer { .title-container {
cursor: pointer; cursor: pointer;
display: flex; /* display: grid; */
/* grid-template-columns: 1fr 1fr; */
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
height: 100%; height: 100%;
width: 50%; /* max-width: 70%; */
gap: 1vw; gap: 1vw;
} }
.title:focus { .title:focus {
border-bottom: solid 5px; border-bottom: solid 5px;
/* border: ; */
border-color: black; border-color: black;
border-radius: 0;
} }
.ProjectContainer { .project-container {
height: 100%; height: 100%;
width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
/* justify-content: space-between; */ justify-content: start;
gap: 5%; gap: 5%;
flex-direction: column; flex-direction: column;
} }
.TitleText {
.title-text {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; /* align-items: center; */
justify-content: start;
gap: 5%; gap: 5%;
} }
.CarouselContainer { .carousel-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
height: 100%;
width: 50%;
}
}
.Carousel { .carousel {
/* scroll-behavior: smooth; */
width: 50%; width: 50%;
min-width: 50%;
height: 100%; height: 100%;
} }
.slide { .slide {
background-color: var(--cool-gray); background-color: var(--cool-gray);
width: 100%; /* width: 100%; */
height: 300px; /* height: 500px; */
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
} }
.img-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
background-color: var(--light-pink);
}
.carousel-item {
max-width: 80%;
overflow: hidden;
/* height: 100%; */
}
@media (max-width: 425px) {
.title {
/* background-color: aqua; */
grid-template-rows: 1fr 1fr;
grid-template-columns: none;
}
.carousel-item {
max-width: 50%;
}
}
</style> </style>

63
docs/.vuepress/components/Service.vue
Unescape View File

@ -1,24 +1,24 @@
<template> <template>
<section id="Service"> <section id="service">
<div class="textContainer"> <div class="text-container">
<h1>Our Service</h1> <h1>Our Service</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, quod voluptatibus sed rem quibusdam, iste <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, quod voluptatibus sed rem quibusdam, iste
at vitae ducimus quidem nam beatae doloremque libero qui corporis corrupti earum suscipit a dolores?</p> at vitae ducimus quidem nam beatae doloremque libero qui corporis corrupti earum suscipit a dolores?</p>
</div> </div>
<div class="Options"> <div class="options">
<div class="Option"> <div class="option">
<h2>Create</h2> <h1>Create</h1>
<span id="Line"></span> <span id="line"></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div> </div>
<div class="Option"> <div class="option">
<h2>Share</h2> <h1>Share</h1>
<span id="Line"></span> <span id="line"></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div> </div>
<div class="Option"> <div class="option">
<h2>Experience</h2> <h1>Experience</h1>
<span id="Line"></span> <span id="line"></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div> </div>
</div> </div>
@ -30,51 +30,46 @@
</script> </script>
<style scoped> <style scoped>
#Service { #service {
/* height: 80vh; */ height: 80vh;
display: flex; display: grid;
flex-direction: column; grid-template-rows: 1fr 1.5fr;
gap: 100px;
margin-bottom: 15vw;
margin-bottom: 15%;
} }
.textContainer {
.text-container {
width: 40%; width: 40%;
padding: 5%; padding: 5%;
/* gap: 10px; */
} }
.Options { .options {
display: flex; display: grid;
grid-template-columns: 1fr 1fr 1fr;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10%; gap: 10%;
} }
.Option h2 {
font-size: 2vw;
}
.Option { .option {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 1.5vw;
border-radius: 5px; border-radius: 5px;
padding: 20px 20px; padding: 20px 20px;
height: 30vw; height: 100%;
} }
.Option:nth-of-type(2) { .option:nth-of-type(2) {
background-color: #bdb0bc; background-color: #bdb0bc;
} }
#Line { #line {
background-color: black; background-color: black;
width: 25%; width: 25%;
height: 3px; height: 3px;
} }
</style> </style>

172
docs/.vuepress/components/Title.vue
Unescape View File

@ -1,21 +1,17 @@
<template> <template>
<section id="Title"> <section id="title" class="grid-container">
<div class="textContainer"> <div class="text-container grid-item">
<h1>Hét platform voor VR belevingen</h1> <h1>Hét platform voor VR belevingen</h1>
<h3>Create, Share & Experience</h3> <h3>Create, Share & Experience</h3>
<button @click="goToOtherPage(1)" class="my-button">Start with VR</button> <button @click="goToOtherPage(1)" class="my-button">Start with VR</button>
<!-- <iframe src="http://localhost:80"></iframe> --> <h3></h3>
</div> </div>
<div class="imgContainer" > <div class="img-container grid-item">
<img src="/img/VR-man.png" alt="VR Man" id="VR-man" /> <img src="/img/VR-man.png" alt="VR Man" id="vr-man" />
<div class="DesingElemnts"> <div class="design-elements">
<img src="/img/VR-element-1.svg" alt="" class="vrDesingelement" /> <img src="/img/VR-element-1.svg" alt="" class="vr-design-element" />
<img src="/img/VR-element-2.svg" alt="" class="vrDesingelement" /> <img src="/img/VR-element-2.svg" alt="" class="vr-design-element" />
<img src="/img/VR-element-3.svg" alt="" class="vrDesingelement" /> <img src="/img/VR-element-3.svg" alt="" class="vr-design-element" />
</div> </div>
</div> </div>
</section> </section>
@ -25,92 +21,146 @@
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
name: 'Title', name: 'title',
methods: { methods: {
goToOtherPage() { goToOtherPage() {
this.$router.push({ this.$router.push({
path: '/context', path: '/context',
query: { someData: '1' } query: { someData: '1' },
}); });
}, },
},
}
}; };
</script> </script>
<style scoped> <style scoped>
/* Grid System Styles */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
height: 100vh;
align-items: center;
}
.grid-item {
.cls-btn {
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
color: rgb(255, 0, 0);
z-index: 1;
cursor: pointer;
height: 5%;
margin: 1%;
font-size: 4vw;
} }
/* Text Container Styling */
.text-container {
padding: 10%;
gap: 30px;
max-width: 400px;
}
.text-container h1 {
font-size: 40px;
}
.text-container h3 {
font-size: 1.5rem;
}
#Title { .my-button {
display: flex;
flex-direction: row; /* padding: 10px 20px; */
height: 100vh; font-size: 16px;
cursor: pointer;
} }
.imgContainer { /* Image Container Styling */
z-index: 0; .img-container {
background-color: transparent; position: relative;
position: absolute; display: flex;
right: 0; justify-content: center;
height: 50vw; align-items: center;
width: 60%;
} }
#VR-man { #vr-man {
height: 100%; z-index: 1;
width: 100%; max-width: 100%;
height: auto;
} }
.DesingElemnts { .design-elements {
height: 100%;
width: 100%;
display: flex;
position: absolute; position: absolute;
display: flex;
justify-content: center; justify-content: center;
z-index: -1; gap: 20%;
top: 0; top: 0;
gap: 10%; /* width: 100%; */
max-width: 30%;
} }
.DesingElemnts img:nth-of-type(1) { .design-elements img:nth-of-type(1) {
position: relative; position: relative;
bottom: -100px; bottom: -100px;
} }
.DesingElemnts img:nth-of-type(3) { .design-elements img:nth-of-type(3) {
position: relative; position: relative;
bottom: -60px; bottom: -60px;
} }
@media (max-width: 768px) {
.text-container h1 {
font-size: 25px;
}
.text-container h3 {
font-size: 15px;
}
.text-container {
.textContainer { max-width: 300px;
padding: 10%; }
display: flex;
flex-direction: column; .my-button {
justify-content: center;
gap: 30px; width: 100px;
width: 30%; height: 50px;
font-size: 10px;
cursor: pointer;
}
.grid-container {
height: 80vh;
}
.design-elements img:nth-of-type(1) {
position: relative;
bottom: -10px;
} }
/* .textContainer h3 { .design-elements img:nth-of-type(3) {
font-size: 20px; position: relative;
} */ bottom: -30px;
}
}
@media (max-width: 320px) {
.text-container h1 {
font-size: 15px;
}
.text-container h3 {
font-size: 10px;
}
.text-container {
gap: 10px;
max-width: 400px;
}
.grid-container {
height: 50vh;
}
.my-button {
font-size: 16px;
}
}
</style> </style>

144
docs/.vuepress/components/login.vue
Unescape View File

@ -0,0 +1,144 @@
<template>
<section>
<div class="grid-container">
<div class="form-container">
<div>
<h1>Please fill in your login details</h1>
</div>
<form @submit="login" class="login-form">
<input type="email" name="email" id="email" placeholder="Email" required>
<input type="password" name="password" id="password" placeholder="Password" required>
<div class="login-msg"></div>
<a href="#">Forgot password?</a>
<button type="submit">Login</button>
</form>
</div>
<div class="message-container" v-if="msg">
<h4 v-if="msg">{{ msg }}</h4>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'Login',
data() {
return {
msg: null
};
},
methods: {
login(event) {
event.preventDefault();
console.log("Submitted, bro! 🤙");
this.msg = "Unknown e-mail address or wrong password";
}
}
};
</script>
<style scoped>
section {
display: flex;
align-items: center;
justify-content: center;
padding: 100px;
margin-bottom: 0%;
}
.grid-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
width: 50%;
max-width: 800px;
background-color: var(--cool-gray);
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
gap: 5%;
}
.form-container {
flex: 1 1 60%;
display: grid;
gap: 20px;
}
.message-container {
background-color: lightcoral;
border: solid 2px red;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
h1 {
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
h4 {
/* background-color: lightcoral;
border: solid 2px red; */
margin-top: 0;
}
.login-form {
display: flex;
flex-direction: column;
gap: 15px;
}
input {
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.2s ease;
}
input:focus {
outline: none;
border-color: var(--vp-c-accent-hover);
}
a {
/* text-align: right; */
font-size: 14px;
color: var(--vp-c-text);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--vp-c-accent-hover);
}
button {
padding: 12px;
font-size: 18px;
font-weight: 600;
color: var(--vp-c-text);
border: 2px solid var(--vp-c-text);
background-color: transparent;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
button:hover {
background-color: var(--vp-c-accent-hover);
color: #fff;
}
</style>

13
docs/.vuepress/config.js
Unescape View File

@ -10,7 +10,7 @@ export default defineUserConfig({
preprocessorOptions: { preprocessorOptions: {
scss: { scss: {
// Uncomment if using SCSS variables // Uncomment if using SCSS variables
// additionalData: '@import "layouts/styles/index.scss";', // additionalData: 'import stylesindex.scss',
}, },
}, },
}, },
@ -19,7 +19,7 @@ export default defineUserConfig({
// Site meta and styles // Site meta and styles
head: [ head: [
["link", { rel: "stylesheet", href: "/styles/index.scss" }], ["link", { rel: "stylesheet", href: "/styles/index.css" }],
["link", { rel: "icon", href: "/icon/logo.svg" }], ["link", { rel: "icon", href: "/icon/logo.svg" }],
["link", { rel: "icon", href: "/icon/logo.svg" }], ["link", { rel: "icon", href: "/icon/logo.svg" }],
], ],
@ -44,10 +44,10 @@ export default defineUserConfig({
}, },
navbar: [ navbar: [
{ text: "About Project XR", link: "#about", class: "button" }, { text: "About Project XR", link: "#about", class: "button" },
{ text: "Our Service", link: "#Service" }, { text: "Our Service", link: "#service" },
{ text: "Projects", link: "#Projects" }, { text: "Projects", link: "#projects" },
// { text: "Plans & Pricing", link: "#StepsContainer" }, // { text: "Plans & Pricing", link: "#StepsContainer" },
{ text: "Log In", link: "/config/README.md" }, { text: "Log In", link: "/login.md" },
], ],
sidebar: false, sidebar: false,
logo: "/icon/logo.svg", logo: "/icon/logo.svg",
@ -57,6 +57,9 @@ export default defineUserConfig({
disableSwitch: true, // Hide the dark mode toggle disableSwitch: true, // Hide the dark mode toggle
respectPrefersColorScheme: false, // Don't care about system settings respectPrefersColorScheme: false, // Don't care about system settings
}, },
lastUpdated: false,
contributors: false,
editLink: false,
}), }),

8
docs/.vuepress/data/Projects.json
Unescape View File

@ -5,7 +5,7 @@
"img/Mail - wit.svg", "img/Mail - wit.svg",
"img/circle_user_icon.svg" "img/circle_user_icon.svg"
], ],
"name": "Porject 1", "name": "project 1",
"text": [ "text": [
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?" "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?"
], ],
@ -20,7 +20,7 @@
"img/Samsung Wallpaper_01.jpg", "img/Samsung Wallpaper_01.jpg",
"img/Samsung Wallpaper_01.jpg" "img/Samsung Wallpaper_01.jpg"
], ],
"name": "Porject 2", "name": "project 2",
"text": [ "text": [
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?" "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?"
@ -33,7 +33,7 @@
"image": [ "image": [
"img/Mail - wit.svg" "img/Mail - wit.svg"
], ],
"name": "Porject 3", "name": "project 3",
"text": [ "text": [
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?" "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?"
@ -47,7 +47,7 @@
"img/Mail - wit.svg", "img/Mail - wit.svg",
"img/Mail - wit.svg" "img/Mail - wit.svg"
], ],
"name": "Porject 3", "name": "project 4",
"text": [ "text": [
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?" "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?"

1
docs/.vuepress/layouts/layout.vue
Unescape View File

@ -13,6 +13,7 @@
import Footer from "../components/Footer.vue"; import Footer from "../components/Footer.vue";
// Import the default theme layout // Import the default theme layout
import Layout from "@vuepress/theme-default/lib/client/layouts/Layout.vue"; import Layout from "@vuepress/theme-default/lib/client/layouts/Layout.vue";
import "./styles/index.scss"
export default { export default {
components: { components: {

61
docs/.vuepress/public/styles/index.scss → docs/.vuepress/layouts/styles/index.scss
Unescape View File

@ -1,12 +1,5 @@
@font-face {
font-family: 'Open Sans';
src: url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff2'),
url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff');
font-weight: 600;
font-style: normal;
}
@ -20,12 +13,26 @@
--light-pink: #bdb0bc; --light-pink: #bdb0bc;
--px-bg-color: #ecebec; --px-bg-color: #ecebec;
--cool-gray: #8e98a4; --cool-gray: #8e98a4;
--content-width: 1400px;
// --vp-c-bg: #ecebec; // --vp-c-bg: #ecebec;
} }
// $content-width: 50px;
@font-face {
font-family: 'Open Sans';
src: url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff2'),
url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff');
font-weight: 600;
font-style: normal;
}
.vp-page .theme-default-content { .vp-page .theme-default-content {
max-width: 100% max-width: 100%;
; display: grid;
// max-width: 1200px;
margin: 0;
padding: 0;
// border: solid black 5px;
// margin-top: 0 !important;
} }
@ -39,11 +46,13 @@ html {
body { body {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
background-color: var(--px-bg-color); background-color: var(--px-bg-color);
// overflow: hidden; // overflow: hidden;
} }
section { section {
margin-bottom: 30%; margin-bottom: 30%;
@ -58,15 +67,11 @@ section {
} }
.vp-page { .vp-page {
display: flex;
justify-content: center;
padding-bottom: 0; padding-bottom: 0;
} }
.vp-page .theme-default-content {
max-width: 100%;
margin: 0;
padding: 0;
// margin-top: 0 !important;
}
button.vp-toggle-color-mode-button { button.vp-toggle-color-mode-button {
display: none ; display: none ;
@ -74,7 +79,7 @@ button.vp-toggle-color-mode-button {
.theme-default-content h1, .theme-default-content h2, .theme-default-content h3 { .theme-default-content h1, .theme-default-content h2, .theme-default-content h3 {
margin-top: 0 !important; margin-top: 0 !important;
;
} }
h1, h2, h3, p { h1, h2, h3, p {
@ -87,7 +92,7 @@ h1, h2, h3, p {
} }
h1 { h1 {
font-size: 3vw; font-size: 35px;
} }
h3 { h3 {
font-size: 1.5vw; font-size: 1.5vw;
@ -98,9 +103,9 @@ a {
} }
button { button {
color: black; color: black;
width: 20vw; width: 15vw;
height: 5vw; height: 5vw;
font-size: 1.5vw; font-size: 20px;
font-weight: 600; font-weight: 600;
background-color: #ecebec; background-color: #ecebec;
@ -116,10 +121,28 @@ button:active {
@media (max-width: 768px) { @media (max-width: 768px) {
h1 {
font-size: 20px;
}
p {
font-size: 10px;
}
// h1, h2, h3, p { // h1, h2, h3, p {
// font-size: 1vw; // font-size: 1vw;
// } // }
} }
@media (max-width: 419px) {
.theme-default-content h1 {
font-size: 15px;
}
p {
font-size: 10px;
}
.my-button {
font-size:10px;
}
}

150
docs/.vuepress/public/styles/index.css
Unescape View File

@ -0,0 +1,150 @@
:root {
--vp-c-text: #171923;
--vp-c-accent: #171923 ;
--back-to-top-c-icon: #171923;
--navbar-height: 5rem;
--navbar-padding-l: 5rem;
--vp-c-accent-bg: #171923;
--vp-c-accent-hover: #0f1117;
--light-pink: #bdb0bc;
--px-bg-color: #ecebec;
--cool-gray: #8e98a4;
--content-width: 1200px;
/* // --vp-c-bg: #ecebec; */
--content-width: 50px;
}
@font-face {
font-family: 'Open Sans';
src: url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff2'),
url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff');
font-weight: 600;
font-style: normal;
}
.vp-page .theme-default-content {
width: 100%;
display: grid;
/* // max-width: 1200px; */
margin: 0;
padding: 0;
/* // border: solid black 5px; */
/* // margin-top: 0 !important; */
}
::-webkit-scrollbar {
display: none;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: var(--px-bg-color);
/* // overflow: hidden; */
}
section {
margin-bottom: 30%;
}
.vp-navbar {
background-color: #ecebec;
}
.vp-page-meta {
position: absolute;
}
.vp-page {
display: flex;
justify-content: center;
padding-bottom: 0;
}
button.vp-toggle-color-mode-button {
display: none ;
}
.theme-default-content h1, .theme-default-content h2, .theme-default-content h3 {
margin-top: 0 !important;
;
}
h1, h2, h3, h4, p {
/* // margin-top: 0 !important; */
margin-bottom: 0px !important;
padding: 0 !important;
border: 0;
color: var(--vp-c-text);
}
h1 {
font-size: 20px;
}
h2 {
font-size: 14px
;
}
a {
font-weight: 600;
}
button {
color: black;
width: 15vw;
height: 5vw;
font-size: 20px;
font-weight: 600;
background-color: #ecebec;
border-radius: 5px;
transition: scale 0.2s ease;
}
button:active {
background-color: #d0d0d0;
scale: 0.95;
}
@media (max-width: 768px) {
h1 {
font-size: 20px;
}
p {
font-size: 10px;
}
/* // h1, h2, h3, p {
// font-size: 1vw;
// } */
}
@media (max-width: 425) {
.theme-default-content h1 {
font-size: 15px;
}
p {
font-size: 10px;
}
.my-button {
font-size:10px;
}
}

6
docs/context.md
Unescape View File

@ -22,9 +22,9 @@ title: Project XR
} }
if (!page) { // if (!page) {
router.push({ name: '404' }); // router.push({ name: '404' });
} // }
</script> </script>

2
docs/index.md
Unescape View File

@ -15,8 +15,6 @@ import Footer from '../../components/Footer.vue'
</script> </script>
<Title /> <Title />
<About /> <About />
<Service /> <Service />
<Projects /> <Projects />

12
docs/login.md
Unescape View File

@ -0,0 +1,12 @@
---
title: project-XR
lang: en-US
darkMode: disable
# smoothScroll: true
---
<script setup>
import login from '../../components/login.vue'
</script>
<login />
Write Preview
Loading…
Cancel
Save