Skip to content

Commit

Permalink
Change background image
Browse files Browse the repository at this point in the history
  • Loading branch information
@elirehema
elirehema committed Jan 2, 2022
1 parent e4df66f commit 21470cb
Show file tree
Hide file tree
Showing 3 changed files with 279 additions and 138 deletions.
336 changes: 257 additions & 79 deletions layouts/home.vue
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,168 @@
<template>
<v-app dark>
<v-main class="ma-0 pa-0 welcome" >
<v-card style="background-color: white;" flat rounded fluid class="ma-4 px-xs-0 ml-xs-1 px-md-6">
<v-app-bar color="white" elevation="0" dark>
<v-toolbar-title>
<v-icon large color="green"> mdi-text-box-check-outline </v-icon
>OspicDocs</v-toolbar-title
<v-app dark>
<v-main class="ma-0 pa-0 welcome">
<v-card
style="background-color: white"
flat
rounded
fluid
class="ma-4 px-xs-0 ml-xs-1 px-md-6"
>
<v-spacer></v-spacer>
<nuxt-link class="links" to="/">Home</nuxt-link>
<v-menu offset-y v-if="$vuetify.breakpoint.smAndUp">
<template v-slot:activator="{ on, attrs }" >
<a class="links" v-on="on" v-bind="attrs"
>Docs
<v-icon medium color="green"> mdi-chevron-down</v-icon>
</a>
</template>

<v-list v-if="$vuetify.breakpoint.mdAndDown">
<v-list-item
v-for="(page, index) in pages"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>


<v-row v-else no-gutters class="white">
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in firstPart"
:key="index"
:to="page.slug"
<v-app-bar color="white" elevation="0" dark>
<v-toolbar-title>
<v-icon large color="green"> mdi-text-box-check-outline </v-icon
>OspicDocs</v-toolbar-title
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in secondPart"
:key="index"
:to="page.slug"
>
<v-list-item-title >{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in thirdPart"
:key="index"
:to="page.slug"
<v-spacer></v-spacer>
<nuxt-link class="links" to="/">Home</nuxt-link>
<v-menu offset-y v-if="$vuetify.breakpoint.smAndUp">
<template v-slot:activator="{ on, attrs }">
<a class="links" v-on="on" v-bind="attrs"
>Docs
<v-icon medium color="green"> mdi-chevron-down</v-icon>
</a>
</template>

<v-list v-if="$vuetify.breakpoint.mdAndDown">
<v-list-item
v-for="(page, index) in pages"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>

<v-row v-else no-gutters class="white">
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in firstPart"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in secondPart"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in thirdPart"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-menu>
<a
class="links"
href="https://github.com/ospic"
target="_blank"
v-if="$vuetify.breakpoint.mdAndUp"
>Github</a
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-menu>
<a class="links" href="https://github.com/ospic" target="_blank" v-if="$vuetify.breakpoint.mdAndUp"
>Github</a
>

<a class="links" v-if="$vuetify.breakpoint.mdAndUp">FAQ</a>
<a class="links" v-if="$vuetify.breakpoint.mdAndUp">FAQ</a>

<v-spacer></v-spacer>
<v-spacer></v-spacer>

<v-btn class="ma-2 colored" color="green" v-if="$vuetify.breakpoint.mdAndUp"> Changelogs </v-btn>
<v-btn class="ma-2" outlined color="green" to="/contacts" v-if="$vuetify.breakpoint.mdAndUp"> Contacts </v-btn>
</v-app-bar>
<v-container class=" ma-0 pa-0" fluid>
<nuxt class=" ma-0 pa-0" />
</v-container>
</v-card>
<v-btn
class="ma-2 colored"
color="green"
v-if="$vuetify.breakpoint.mdAndUp"
>
Changelogs
</v-btn>
<v-btn
class="ma-2"
outlined
color="green"
to="/contacts/#form"
v-if="$vuetify.breakpoint.mdAndUp"
>
Contacts
</v-btn>
</v-app-bar>
<v-container class="ma-0 pa-0" fluid>
<section>
<v-parallax
dark
height="840"
src="https://images.unsplash.com/photo-1538108149393-fbbd81895907?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8aG9zcGl0YWwlMjBiZWR8ZW58MHx8MHx8&w=1500&q=80"
>
<v-row align="center" justify="center">
<v-col class="text-center" cols="12">
<h1
class="
black--text
mb-4
display-1
d-flex
align-center
justify-end
flex-column
"
style="font-weight: 900; #000000"
>
Hospital Management System documentation (Ospic HMS)
</h1>
<h3
class="
black--text
subheading
mb-3
d-flex
align-center
justify-end
flex-column
"
style="font-weight: 400; #000000; opacity: 90%;"
>
Medical data is our own data's
</h3>
<v-btn
class="primary mt-5 font-weight-black headline white--text"
dark
x-large
style="text-transform: none !important"
elevation="1"
flat
to="/home"
>
Get started
<v-icon right dark> mdi-chevron-right </v-icon>
</v-btn>
</v-col>
</v-row>
</v-parallax>
</section>
</v-container>
<nuxt class="ma-0 mt-6 pa-0" />
</v-card>
</v-main>
<v-footer class="primary" fixed :absolute="!$vuetify.breakpoint.mdAndUp" padless app>
<v-flex xs12 class="d-flex align-center justify-end flex-column">

<v-footer
class="primary"
fixed
:absolute="!$vuetify.breakpoint.mdAndUp"
padless
app
>
<v-flex xs12 class="d-flex align-center justify-end flex-column">
<div class="white--text ml-3">
Made by
<a
Expand All @@ -93,7 +173,7 @@
</a>
as official documentation for
<a
style="color: blue; text-decoration: underline;"
style="color: blue; text-decoration: underline"
href="https://app.ospicx.com/"
target="_blank"
>Ospic HMS</a
Expand All @@ -102,4 +182,102 @@
</v-flex>
</v-footer>
</v-app>
</template>
</template>
<script>
export default {
name: "App",
layout: "home",
data: function () {
return {
title: "Ospic",
imageLink: {
main: "https://cdn2.hubspot.net/hubfs/3790014/hospital-data.jpg",
sub_main:
"https://besthqwallpapers.com/Uploads/22-12-2019/116958/thumb2-white-3d-polygons-background-geometric-abstraction-white-background-3d-honeycomb-white-honeycomb-background.jpg",
logo: "@/static/cherry.png",
social_cover:
"https://www.pymnts.com/wp-content/uploads/2020/01/hospitals-healthcare-data.jpg",
},
subscribed: false,
topics: [
{
icon: "account",
to: "/",
title: "Patient Management",
subtitle:
"Learn how to manage patients information in Ospic. How to register new patient, update, assign to medical services or personel etc.",
},
{
icon: "store-cog-outline",
to: "/inventory",
title: "Inventory management",
subtitle:
"Ospic Inventory management module help you to manage the medicine inventory in real time from medicines provided to patients",
},
{
icon: "bank",
to: "/finance",
title: "Finance",
subtitle:
"Manage revenue collection, bill payment, and financial record overview. View bills, service transactions, reverse or pay bills.",
},
{
icon: "lock",
to: "/security",
title: "System security",
subtitle:
"View users, create new users and manage their roles and permissions. Enable and disable selfservice accounts etc",
},
],
};
},
methods: {
subscribe: function () {
this.subscribed = !this.subscribed;
},
},
async asyncData({ $content, params, app }) {
const pages = await $content(`${app.i18n.locale}`)
.only(["title", "description", "img", "slug", "author"])
.sortBy("createdAt", "asc")
.fetch();
const threePartIndex = Math.ceil(pages.length / 3);
const thirdPart = pages.splice(-threePartIndex);
const secondPart = pages.splice(-threePartIndex);
const firstPart = pages;
return { pages, firstPart, secondPart, thirdPart };
},
computed: {
imgHeight: function () {
var offset = 320;
console.log("new image height is " + (this.pageHeight - offset));
return this.pageHeight - offset;
},
isgithubpage() {
return window.location.hostname === "ospic.github.io";
},
},
mounted: function () {
//this.calculateHeight();
},
};
</script>

<style scoped>
.finedTitle {
font-weight: 900;
text-shadow: 2px 2px #000000;
}
.social-icon {
font-size: 21px;
color: white;
}
</style>
11 changes: 7 additions & 4 deletions pages/contacts.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>

<v-container fill-height grid-list-md text-xs-center class="pb-8 pt-8">
<section>
<v-container grid-list-xl fluid class="ma-0 pa-0">
<p class="headline font-weight-black ma-2 text-h4">
Contact Us
</p>
<v-layout row wrap align-center>
<v-flex shrink xs12 sm12 md5 order-md1 order-sm1>
<address-component></address-component>
Expand All @@ -11,7 +14,7 @@
<v-card tile>
<v-card-text color="white">
<v-container>
<v-form ref="form" color="white" v-model="valid" :lazy-validation="lazy">
<v-form ref="form" color="white" id="form" v-model="valid" :lazy-validation="lazy">
<v-text-field
v-model="subject"
:rules="subjectRules"
Expand Down Expand Up @@ -43,7 +46,7 @@
</v-flex>
</v-layout>
</v-container>

</section>
</template>
<script>
import AddressComponent from "~/components/ContactAddress.vue";
Expand Down
Loading

0 comments on commit 21470cb

Please sign in to comment.