li0nhunter/Website-template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Ari Yeger
2025-07-23 11:29:35 -04:00
parent d104d37a27
commit 5e9654728e
67 changed files with 7956 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
client/src/views/MainPage.vue Normal file
View File

@ -0,0 +1,93 @@
<script setup lang="ts">
import BaseDiv from "@components/baseComponents/BaseDiv.vue";
import BaseButton from "@components/baseComponents/BaseButton.vue";
</script>
<template>
<div class="container text-center">
<h1 class="display-1 fw-normal">Main Page</h1>
<div class="row justify-content-center">
<div class="col">These are the palettes for this site:</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col">Primary:</div>
</div>
<div class="row justify-content-center">
<BaseDiv class="col-md-1 primary">Main</BaseDiv>
<BaseDiv class="col-md-1 primary hover">Hover</BaseDiv>
<BaseDiv class="col-md-1 primary active">Active</BaseDiv>
<BaseDiv class="col-md-1 primary disabled">Disabled</BaseDiv>
</div>
<div class="row justify-content-center">
<BaseDiv class="col">Secondary:</BaseDiv>
</div>
<div class="row justify-content-center">
<BaseDiv class="col-md-1 secondary">Main</BaseDiv>
<BaseDiv class="col-md-1 secondary hover">Hover</BaseDiv>
<BaseDiv class="col-md-1 secondary active">Active</BaseDiv>
<BaseDiv class="col-md-1 secondary disabled">Disabled</BaseDiv>
</div>
<div class="row justify-content-center">
<BaseDiv class="col">Buttons:</BaseDiv>
</div>
<div class="row justify-content-center">
<div class="col">
<div class="btn-group">
<BaseButton class="btn btn-primary">Primary Button</BaseButton>
<BaseButton class="btn btn-secondary">Secondary Button</BaseButton>
<BaseButton class="btn btn-submit">Submit Button</BaseButton>
<BaseButton class="btn btn-danger">Danger Button</BaseButton>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.row {
padding-top: 0.5rem;
}
.col-md-1 {
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
align-content: center;
padding: 0.5rem;
margin-right: 0.5rem;
height: 100px;
}
.col-md-1.primary {
background-color: var(--color-primary);
}
.col-md-1.primary.hover {
background-color: var(--color-primary-hover);
}
.col-md-1.primary.active {
background-color: var(--color-primary-active);
}
.col-md-1.primary.disabled {
background-color: var(--color-primary-disabled);
}
.col-md-1.secondary {
background-color: var(--color-secondary);
}
.col-md-1.secondary.hover {
background-color: var(--color-secondary-hover);
}
.col-md-1.secondary.active {
background-color: var(--color-secondary-active);
}
.col-md-1.secondary.disabled {
background-color: var(--color-secondary-disabled);
}
</style>