ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Match home page buttons to studio app

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2023-11-22 06:54:26 -07:00
parent 28dfc0b7fd
commit 3e7caed55e
1 changed files with 53 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/home.vue
View File

@@ -8,24 +8,60 @@
<f7-nav-title sliding>A.L.V.I.N.N.</f7-nav-title> <f7-nav-title sliding>A.L.V.I.N.N.</f7-nav-title>
</f7-navbar> </f7-navbar>
<!-- Page content--> <!-- Page content-->
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;"> <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 0;">
<h2>Anatomy Lab Visual Identification Neural Network</h2> <h2 style="text-align: center; padding-left: 30px; padding-right: 30px;">Anatomy Lab Visual Identification Neural Network</h2>
<h4>Veterinary Anatomy Edition</h4> <h4>Veterinary Anatomy Edition</h4>
<p>Select a region to begin</p> <p>Select a region to begin</p>
<f7-segmented raised style="flex-wrap: wrap;"> <div class="region-menu">
<f7-button style="height: auto; width: auto;" href="/detect/thorax/"> <div class="region-group">
<img src="../assets/regions/thorax.svg" /> <f7-button class="region-button" href="/detect/thorax/">
<img style="object-fit: contain;" src="../assets/regions/thorax.svg" />
</f7-button> </f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/abdomen/"> <f7-button class="region-button" href="/detect/abdomen/">
<img src="../assets/regions/abdpel.svg" /> <img src="../assets/regions/abdpel.svg" />
</f7-button> </f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/limbs/"> </div>
<div class="region-group">
<f7-button class="region-button" href="/detect/limbs/">
<img src="../assets/regions/limb.svg" /> <img src="../assets/regions/limb.svg" />
</f7-button> </f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/head/"> <f7-button class="region-button" href="/detect/head/">
<img src="../assets/regions/headneck.svg" /> <img src="../assets/regions/headneck.svg" />
</f7-button> </f7-button>
</f7-segmented> </div>
</div>
</div> </div>
</f7-page> </f7-page>
</template> </template>
<style>
.region-menu {
display: flex;
justify-content: center;
align-items: stretch;
align-self: stretch;
flex-wrap: wrap;
gap: 15px;
padding: 30px;
}
.region-group {
display:flex;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
min-width: 0;
gap: 15px;
}
.region-button {
aspect-ratio: 1;
height: auto;
max-width: 250px;
max-height: 250px;
min-width: 0;
background-color: #BDBCAF;
flex-grow: 1;
flex-shrink: 1;
}
</style>