/
index.html
108 lines (84 loc) · 3.71 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta name="theme-color" content="#1976d2">
<link rel="icon" type="image/x-icon" href="http://bobd.me/pets/favicon.png" />
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>Adopt A Pet Finder - Bob Dempsey</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-card flat>
<v-toolbar color="primary" dark extended flat>
<v-toolbar-title class="white--text pt-3">Adopt A Pet Finder - Bob Dempsey</v-toolbar-title>
<!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
</v-toolbar>
<v-layout row pb-2>
<v-flex xs10 offset-xs1 md6 offset-md3>
<v-card class="card--flex-toolbar">
<v-toolbar card prominent>
<v-toolbar-title class="body-2 grey--text">Search for Pet Adoptions in Your Area</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-form ref="form" v-model="valid" lazy-validation id="petForm">
<v-select v-model="select" :items="animals" :rules="[v => !!v || 'Animal is required']" label="Animal" required id="animal"></v-select>
<v-text-field v-model="zip" :counter="5" label="Zip Code" required clearable :mask="mask" :rules="[v => !!v || 'Zip Code is required']"
id="zip" v-on:keyup.enter="fetchAnimals"></v-text-field>
<v-btn :disabled="!valid" @click="fetchAnimals" color="primary" style="letter-spacing: 1.25px">
Find Pets!
</v-btn>
<v-btn @click="clear">clear</v-btn>
</v-form>
</v-card>
<v-alert :value="true" type="error" class="mt-3" id="alert">
Please Enter a Valid Zip Code
</v-alert>
</v-layout>
<v-layout row pb-2>
<v-flex xs10 offset-xs1 md10 offset-md1>
<div id="results" class="mt-4"></div>
</v-flex>
</v-layout>
</v-content>
<v-footer height="auto" color="primary">
<v-layout justify-center row wrap>
<v-flex primary text-xs-center white--text xs12>
©2018 —
<strong>
<a href="https://bobd.me" style="color:#fff;text-decoration: none;">BobD.me</a>
</strong>
<v-dialog v-model="dialog" width="500">
<v-btn slot="activator" dark fab>
<v-icon>info</v-icon>
</v-btn>
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>
About This Web Application
</v-card-title>
<v-card-text>
This web application is built with the PetFinder public data api, Vue JS, Vuetify, & fetchJsonP.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click="dialog = false">
Awesome!
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-flex>
</v-layout>
</v-footer>
</v-app>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script src="main.js"></script>
</body>
</html>