22 files changed, 449 insertions, 0 deletions
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 0000000..a28e8d2
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { Platform } from 'ionic-angular';
+import { StatusBar } from '@ionic-native/status-bar';
+import { SplashScreen } from '@ionic-native/splash-screen';
+
+import { TabsPage } from '../pages/tabs/tabs';
+
+@Component({
+  templateUrl: 'app.html'
+})
+export class MyApp {
+  rootPage:any = TabsPage;
+
+  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
+    platform.ready().then(() => {
+      // Okay, so the platform is ready and our plugins are available.
+      // Here you can do any higher level native things you might need.
+      statusBar.styleDefault();
+      splashScreen.hide();
+    });
+  }
+}
diff --git a/src/app/app.html b/src/app/app.html
new file mode 100644
index 0000000..7b88c96
--- /dev/null
+++ b/src/app/app.html
@@ -0,0 +1 @@
+<ion-nav [root]="rootPage"></ion-nav>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
new file mode 100644
index 0000000..e2c9d8d
--- /dev/null
+++ b/src/app/app.module.ts
@@ -0,0 +1,40 @@
+import { NgModule, ErrorHandler } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
+import { MyApp } from './app.component';
+
+import { AboutPage } from '../pages/about/about';
+import { ContactPage } from '../pages/contact/contact';
+import { HomePage } from '../pages/home/home';
+import { TabsPage } from '../pages/tabs/tabs';
+
+import { StatusBar } from '@ionic-native/status-bar';
+import { SplashScreen } from '@ionic-native/splash-screen';
+
+@NgModule({
+  declarations: [
+    MyApp,
+    AboutPage,
+    ContactPage,
+    HomePage,
+    TabsPage
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(MyApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    MyApp,
+    AboutPage,
+    ContactPage,
+    HomePage,
+    TabsPage
+  ],
+  providers: [
+    StatusBar,
+    SplashScreen,
+    {provide: ErrorHandler, useClass: IonicErrorHandler}
+  ]
+})
+export class AppModule {}
diff --git a/src/app/app.scss b/src/app/app.scss
new file mode 100644
index 0000000..1392a6e
--- /dev/null
+++ b/src/app/app.scss
@@ -0,0 +1,16 @@
+// http://ionicframework.com/docs/theming/
+
+
+// App Global Sass
+// --------------------------------------------------
+// Put style rules here that you want to apply globally. These
+// styles are for the entire app and not just one component.
+// Additionally, this file can be also used as an entry point
+// to import other Sass files to be included in the output CSS.
+//
+// Shared Sass variables, which can be used to adjust Ionic's
+// default Sass variables, belong in "theme/variables.scss".
+//
+// To declare rules for a specific mode, create a child rule
+// for the .md, .ios, or .wp mode classes. The mode class is
+// automatically applied to the <body> element in the app.
diff --git a/src/app/main.ts b/src/app/main.ts
new file mode 100644
index 0000000..6af7a5b
--- /dev/null
+++ b/src/app/main.ts
@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/src/assets/icon/favicon.ico b/src/assets/icon/favicon.ico
new file mode 100644
index 0000000..d76fa29
--- /dev/null
+++ b/src/assets/icon/favicon.ico
diff --git a/src/assets/imgs/logo.png b/src/assets/imgs/logo.png
new file mode 100644
index 0000000..80f631d
--- /dev/null
+++ b/src/assets/imgs/logo.png
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..e254871
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic App</title>
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="format-detection" content="telephone=no">
+  <meta name="msapplication-tap-highlight" content="no">
+
+  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
+  <link rel="manifest" href="manifest.json">
+  <meta name="theme-color" content="#4e8ef7">
+
+  <!-- add to homescreen for ios -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+  <!-- cordova.js required for cordova apps (remove if not needed) -->
+  <script src="cordova.js"></script>
+
+  <!-- un-comment this code to enable service worker
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('service-worker.js')
+        .then(() => console.log('service worker installed'))
+        .catch(err => console.error('Error', err));
+    }
+  </script>-->
+
+  <link href="build/main.css" rel="stylesheet">
+
+</head>
+<body>
+
+  <!-- Ionic's root component and where the app will load -->
+  <ion-app></ion-app>
+
+  <!-- The polyfills js is generated during the build process -->
+  <script src="build/polyfills.js"></script>
+
+  <!-- The vendor js is generated during the build process
+       It contains all of the dependencies in node_modules -->
+  <script src="build/vendor.js"></script>
+
+  <!-- The main bundle js is generated during the build process -->
+  <script src="build/main.js"></script>
+
+</body>
+</html>
diff --git a/src/manifest.json b/src/manifest.json
new file mode 100644
index 0000000..f6456bb
--- /dev/null
+++ b/src/manifest.json
@@ -0,0 +1,13 @@
+{
+  "name": "Ionic",
+  "short_name": "Ionic",
+  "start_url": "index.html",
+  "display": "standalone",
+  "icons": [{
+    "src": "assets/imgs/logo.png",
+    "sizes": "512x512",
+    "type": "image/png"
+  }],
+  "background_color": "#4e8ef7",
+  "theme_color": "#4e8ef7"
+}
+\ No newline at end of file
diff --git a/src/pages/about/about.html b/src/pages/about/about.html
new file mode 100644
index 0000000..ea76b88
--- /dev/null
+++ b/src/pages/about/about.html
@@ -0,0 +1,17 @@
+
+<ion-header>
+  <ion-navbar>
+    <ion-title>
+      About
+    </ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding>
+  <h3>About News App</h3>
+            <p>Developed by <strong>Kumar Priyansh</strong> for Phones</p>
+            <p><strong>App Version: </strong> 1.0.0<br>
+            <strong>API Used: </strong> NewsAPI<br>
+            <strong>Framework: </strong> Ionic<br>
+            <strong>JS Library: </strong> JQuery<br>
+</ion-content>
diff --git a/src/pages/about/about.scss b/src/pages/about/about.scss
new file mode 100644
index 0000000..639956d
--- /dev/null
+++ b/src/pages/about/about.scss
@@ -0,0 +1,3 @@
+page-about {
+
+}
diff --git a/src/pages/about/about.ts b/src/pages/about/about.ts
new file mode 100644
index 0000000..a7ee80a
--- /dev/null
+++ b/src/pages/about/about.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { NavController } from 'ionic-angular';
+
+@Component({
+  selector: 'page-about',
+  templateUrl: 'about.html'
+})
+export class AboutPage {
+
+  constructor(public navCtrl: NavController) {
+
+  }
+
+}
diff --git a/src/pages/contact/contact.html b/src/pages/contact/contact.html
new file mode 100644
index 0000000..b1dfb59
--- /dev/null
+++ b/src/pages/contact/contact.html
@@ -0,0 +1,19 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>
+      Feedback
+    </ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding>
+  <!--<ion-list>
+    <ion-list-header>Send your feedback on Twitter</ion-list-header>
+    <ion-item>
+      <ion-icon name="ionic" item-start></ion-icon>
+      @LuciferCReeves
+    </ion-item>
+  </ion-list>-->
+  <h3>Feedback sending is supported only via email.</h3>
+  <p>Send your feedbacks to <a href="mailto:[email protected]">[email protected]</a></p>
+</ion-content>
diff --git a/src/pages/contact/contact.scss b/src/pages/contact/contact.scss
new file mode 100644
index 0000000..13d4440
--- /dev/null
+++ b/src/pages/contact/contact.scss
@@ -0,0 +1,3 @@
+page-contact {
+
+}
diff --git a/src/pages/contact/contact.ts b/src/pages/contact/contact.ts
new file mode 100644
index 0000000..3ccadc9
--- /dev/null
+++ b/src/pages/contact/contact.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { NavController } from 'ionic-angular';
+
+@Component({
+  selector: 'page-contact',
+  templateUrl: 'contact.html'
+})
+export class ContactPage {
+
+  constructor(public navCtrl: NavController) {
+
+  }
+
+}
diff --git a/src/pages/home/home.html b/src/pages/home/home.html
new file mode 100644
index 0000000..c7830bb
--- /dev/null
+++ b/src/pages/home/home.html
@@ -0,0 +1,18 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>News App</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <!--<h2>Welcome to Ionic!</h2>
+  <p>
+    This starter project comes with simple tabs-based layout for apps
+    that are going to primarily use a Tabbed UI.
+  </p>
+  <p>
+    Take a look at the <code>src/pages/</code> directory to add or change tabs,
+    update any existing page or create new pages.
+  </p>-->
+  <div id="showNews"></div>
+</ion-content>
diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss
new file mode 100644
index 0000000..900c9ec
--- /dev/null
+++ b/src/pages/home/home.scss
@@ -0,0 +1,32 @@
+.article {
+    height: 400px;
+    width: 100%;
+    background-position: center;
+    background-size: cover;
+    display: block;
+    margin: 5px;
+}
+.overlayart {
+    background-color: rgba(0, 0, 0, 0.568);
+    position: relative;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.art {
+    position: absolute;
+    bottom: 50px;
+    width: 100%;
+}
+
+.art h3 {
+    color: white;
+    padding: 0px 20px;
+    width: 100%;
+}
+.art p {
+    color: white;
+    padding: 0px 20px;
+}
+\ No newline at end of file
diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
new file mode 100644
index 0000000..df3af8f
--- /dev/null
+++ b/src/pages/home/home.ts
@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { NavController } from 'ionic-angular';
+import * as $ from 'jquery';
+
+@Component({
+  selector: 'page-home',
+  templateUrl: 'home.html'
+})
+export class HomePage {
+
+  constructor(public navCtrl: NavController) {
+    
+  }
+  ngAfterViewInit(){
+    $(document).ready(function(){
+      var url = 'https://newsapi.org/v2/top-headlines?country=in&apiKey=f449ba44714842379f423215072370dd';
+      $.getJSON(url).then(function(res){
+        //console.log(res);
+        var count;
+        for (count = 0; count<20; count++) {
+          var article = res.articles[count];
+          var ImageURL = res.articles[count].urlToImage;
+          //console.log(article);
+          $('#showNews').append('<div id="'+count+'" class="article"><div class="overlayart"><div class="art"><h3>'+article.title+'</h3><p>'+article.description+'<br><br><a target="_blank" href="'+article.url+'">Follow Link</a></p></div></div></div>');
+          $("#"+count).css('background-image','url(' + ImageURL + ')');
+        }
+      })
+      //$.getJSON(url).then(function(res){
+      //     console.log(res)
+          // var count;
+          // for(count = 0; count < 20; count++){
+          //     var article = res.articles[count]
+          //     var ImageURL = res.articles[count].urlToImage
+          //     //console.log(ImageURL)
+          //     $('#showNews').append('<div id="'+count+'" class="article"><div class="overlayart"><div class="art"><h3>'+article.title+'</h3><p>'+article.description+'<br><a href="'+article.url+'">Follow Link</a></p></div></div></div>');
+          //     $("#"+count).css('background-image','url(' + ImageURL + ')');
+         //}
+      })
+    }
+  }
+\ No newline at end of file
diff --git a/src/pages/tabs/tabs.html b/src/pages/tabs/tabs.html
new file mode 100644
index 0000000..bed91a4
--- /dev/null
+++ b/src/pages/tabs/tabs.html
@@ -0,0 +1,5 @@
+<ion-tabs>
+  <ion-tab [root]="tab1Root" tabTitle="Read" tabIcon="book"></ion-tab>
+  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
+  <ion-tab [root]="tab3Root" tabTitle="Feedback" tabIcon="megaphone"></ion-tab>
+</ion-tabs>
diff --git a/src/pages/tabs/tabs.ts b/src/pages/tabs/tabs.ts
new file mode 100644
index 0000000..f80301b
--- /dev/null
+++ b/src/pages/tabs/tabs.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+import { AboutPage } from '../about/about';
+import { ContactPage } from '../contact/contact';
+import { HomePage } from '../home/home';
+
+@Component({
+  templateUrl: 'tabs.html'
+})
+export class TabsPage {
+
+  tab1Root = HomePage;
+  tab2Root = AboutPage;
+  tab3Root = ContactPage;
+
+  constructor() {
+
+  }
+}
diff --git a/src/service-worker.js b/src/service-worker.js
new file mode 100644
index 0000000..ffbbb06
--- /dev/null
+++ b/src/service-worker.js
@@ -0,0 +1,31 @@
+/**
+ * Check out https://googlechromelabs.github.io/sw-toolbox/ for
+ * more info on how to use sw-toolbox to custom configure your service worker.
+ */
+
+
+'use strict';
+importScripts('./build/sw-toolbox.js');
+
+self.toolbox.options.cache = {
+  name: 'ionic-cache'
+};
+
+// pre-cache our key assets
+self.toolbox.precache(
+  [
+    './build/main.js',
+    './build/vendor.js',
+    './build/main.css',
+    './build/polyfills.js',
+    'index.html',
+    'manifest.json'
+  ]
+);
+
+// dynamically cache any other local assets
+self.toolbox.router.any('/*', self.toolbox.fastest);
+
+// for any other requests go to the network, cache,
+// and then only use that cached resource if your user goes offline
+self.toolbox.router.default = self.toolbox.networkFirst;
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
new file mode 100644
index 0000000..18276a4
--- /dev/null
+++ b/src/theme/variables.scss
@@ -0,0 +1,88 @@
+// Ionic Variables and Theming. For more info, please see:
+// http://ionicframework.com/docs/theming/
+
+// Font path is used to include ionicons,
+// roboto, and noto sans fonts
+$font-path: "../assets/fonts";
+
+
+// The app direction is used to include
+// rtl styles in your app. For more info, please see:
+// http://ionicframework.com/docs/theming/rtl-support/
+$app-direction: ltr;
+
+
+@import "ionic.globals";
+
+
+// Shared Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass variables found in Ionic's source scss files.
+// To view all the possible Ionic variables, see:
+// http://ionicframework.com/docs/theming/overriding-ionic-variables/
+
+
+
+
+// Named Color Variables
+// --------------------------------------------------
+// Named colors makes it easy to reuse colors on various components.
+// It's highly recommended to change the default colors
+// to match your app's branding. Ionic uses a Sass map of
+// colors so you can add, rename and remove colors as needed.
+// The "primary" color is the only required color in the map.
+
+$colors: (
+  primary:    #488aff,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222
+);
+
+
+// App iOS Variables
+// --------------------------------------------------
+// iOS only Sass variables can go here
+
+
+
+
+// App Material Design Variables
+// --------------------------------------------------
+// Material Design only Sass variables can go here
+
+
+
+
+// App Windows Variables
+// --------------------------------------------------
+// Windows only Sass variables can go here
+
+
+
+
+// App Theme
+// --------------------------------------------------
+// Ionic apps can have different themes applied, which can
+// then be future customized. This import comes last
+// so that the above variables are used and Ionic's
+// default are overridden.
+
+@import "ionic.theme.default";
+
+
+// Ionicons
+// --------------------------------------------------
+// The premium icon font for Ionic. For more info, please see:
+// http://ionicframework.com/docs/ionicons/
+
+@import "ionic.ionicons";
+
+
+// Fonts
+// --------------------------------------------------
+
+@import "roboto";
+@import "noto-sans";