Comments do not merge

README.md

@@ -1,2 +1,29 @@
-# cloudnv
-Web app to identify pictures of clouds
+# CloudNV
+
+>Emery Cho, Alyssa Keimach, Vu Vuong, Anders Sajbel
+
+## Purpose
+
+CloudNV acquires an image of a cloud, identifies the type of cloud and provides a short description on said cloud.
+
+## Deployed Site
+[CloudNV](http://alyssakeimach.com/cloudnv/)
+
+## How To Use
+
+Simply either drag and drop an image, use the file explorer and select an image or enter an image link URL. The process should run automatically at that point and return the description at the bottom of the app. 
+
+## How It Works
+
+After submitting something, it is first verified as an image. If it is over 4MB we send it to Imgur to store it for the Vision API to examine. Then it is sent to the Google Cloud Vision API. This analyzes the image and returns related tags. These tags first determine whether the image falls under clouds or not. They are then cross referenced with our hard coded cloud arrays. Depending on what tags match, the key words are then sent to the Wikipedia API where it then retrieves the summary section to append to the page for the user to read.
+
+## APIs Used
+1. Imgur API
+2. Google Vision API
+3. Wikipedia Search API
+4. Wikipedia Parse API
+
+## Libraries Used
+1. jQuery
+2. Bootstrap
+3. Load-Image https://github.com/blueimp/JavaScript-Load-Image

assets/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

assets/css/style.css

@@ -0,0 +1,140 @@
+.container-fluid {
+    width: 90%;
+    height: auto;
+}
+
+.row {
+    margin: 2rem;
+}
+
+.customBox {
+    border: .5rem solid #66aede;
+    border-radius: .5rem;
+    padding: 1rem;
+    background-color: rgba(255, 255, 255, 0.4);
+}
+
+.infobox-aside {
+    border: .3rem solid #66aede;
+    border-radius: .5rem;
+    padding: 1rem;
+}
+
+.toggle {
+    text-decoration: none;
+    color: #31708f;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.toggle:hover {
+    text-decoration: none;
+    color: #173848;
+    font-weight: 700;
+}
+
+.panel {
+    background-color: #66aede;
+    color: white;
+    height: 80px;
+    text-align: center;
+}
+
+.drag {
+    margin: auto;
+    border: 2px dotted #66aede;
+    color: #31708f;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    font-size: 200%;
+    background-color: rgba(255, 255, 255, 0.4);
+    width: 100%;
+}
+
+.drag:hover {
+    background-color: rgba(255, 255, 255, 0.6);
+}
+
+
+.uploadWanted {
+    height: 300px;
+}
+
+.dropInfo {
+    margin: auto;
+    padding: 1rem;
+    font-weight: 700;
+}
+
+.upload {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+.uploadLabel {
+    font-size: 32px;
+    font-weight: 700;
+    margin: auto;
+    width: 80%;
+    height: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.upload:focus+label,
+.uploadLabel:hover {
+    color: #173848;
+}
+
+.uploadBox {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.imageCloud {
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.linkBtn {
+    background-color: rgba(102, 174, 222, 0.6);
+}
+
+.linkBtn:hover {
+    background-color: rgba(102, 174, 222, 0.8);
+}
+
+#cloud-type {}
+
+#cloud-fact {}
+
+#cloudDesc {}
+
+#cloud-gif {}
+
+.img-center {
+    display: block;
+    margin: 0 auto;
+}
+
+body {
+    min-width: 320px;
+    background: url(../images/weather.png) no-repeat center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+
+}
+
+h3 {
+    margin-left: 2rem;
+}