Untitled

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>My App</title>
  <!-- Path to Framework7 Library CSS-->
  <link rel="stylesheet" href="../../dist/css/framework7.ios.min.css">
  <!-- Path to your custom app styles-->
  <link rel="stylesheet" href="css/my-app.css">
</head>

<body>
  <!-- Status bar overlay for fullscreen mode-->
  <div class="statusbar-overlay"></div>

  <!-- Views, and they are tabs-->
  <!-- We need to set "toolbar-through" class on it to keep space for our tab bar-->
  <div class="views tabs toolbar-through">
    <!-- Your first view, it is also a .tab and should have "active" class to make it visible by default-->
    <div id="view-1" class="view view-main tab active">
      <!-- Pages-->
      <div class="pages">
        <!-- Page, data-page contains page name-->
        <div data-page="index-1" class="page">
          <!-- Scrollable page content-->
          <div class="page-content">
            <div class="content-block-title"> Welcome </div>
            <div class="content-block">
              <html>

              <head>

                <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="true" data-auto-logout-link="true" data-use-continue-as="true"></div>

              </head>

              <body>

                <!-- My old Fb login simple to work on  -->

                <!-- <div id="fb-root"></div>
                <script>(function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.10&appId=1905510656375444';
                fjs.parentNode.insertBefore(js, fjs);
              }(document, 'script', 'facebook-jssdk'));</script> -->

              <!-- This other fb login methods allows me to get user details such as their user ID to which we will need further down the code -->
              <!-- facebook login starts -->
              <script>

               var userId; //creating variable user ID that will be ised later

              // This is called with the results from from FB.getLoginStatus().
              function statusChangeCallback(response) {
                console.log('statusChangeCallback');
                console.log(response);
                // The response object is returned with a status field that lets the
                // app know the current login status of the person.
                // Full docs on the response object can be found in the documentation
                // for FB.getLoginStatus().
                if (response.status === 'connected') {
                  // Logged into your app and Facebook.
                  testAPI();
                  $(".loginIn").hide();
                  $(".loginOut").show();
                } else {
                  // The person is not logged into your app or we are unable to tell.
                  document.getElementById('status').innerHTML = 'Please log ' +
                  'into this app.';
                  $(".loginIn").show();
                  $(".loginOut").hide();
                }
              }

              // This function is called when someone finishes with the Login
              // Button.  See the onlogin handler attached to it in the sample
              // code below.
              function checkLoginState() {
                FB.getLoginStatus(function(response) {
                  statusChangeCallback(response);


                });
              }

              window.fbAsyncInit = function() {
                FB.init({
                  appId      : '1079006898900009',
                  cookie     : true,  // enable cookies to allow the server to access
                  // the session
                  xfbml      : true,  // parse social plugins on this page
                  version    : 'v2.10' // use graph api version 2.8
                });

                // Now that we've initialized the JavaScript SDK, we call
                // FB.getLoginStatus().  This function gets the state of the
                // person visiting this page and can return one of three states to
                // the callback you provide.  They can be:
                //
                // 1. Logged into your app ('connected')
                // 2. Logged into Facebook, but not your app ('not_authorized')
                // 3. Not logged into Facebook and can't tell if they are logged into
                //    your app or not.
                //
                // These three cases are handled in the callback function.

                FB.getLoginStatus(function(response) {
                  statusChangeCallback(response);

                });

              };

              // Load the SDK asynchronously
              (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/sdk.js";
                fjs.parentNode.insertBefore(js, fjs);
              }(document, 'script', 'facebook-jssdk'));

              // Here we run a very simple test of the Graph API after login is
              // successful.  See statusChangeCallback() for when this call is made.
              function testAPI() {

                console.log('Welcome!  Fetching your information.... ');

                FB.api('/me', function(response) {
                  console.log('Successful login for: ' + response.id);

                  document.getElementById('status').innerHTML =
                  response.id;

                  userId = response.id;
                  // voce pode usar essa variavel fbid pra colocar dentro de uma div ou na part pra mandar pro db,
                  //pois ela se torna uma variavel global na pagina inteira


                });
              }

              </script>

              <script>
              function logoutPerson(){

                FB.logout(function(response) {
                  // Person is now logged out

                  window.location.reload();
                  //and the page is refreshed
                });


              }


              </script>
              <!-- facebook login ends -->
              <div id="facebook"></div>
            </body>


            </html>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Second view (for second wrap)-->
  <div id="view-2" class="view tab">
    <!-- We can make with view with navigation, let's add Top Navbar-->
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center sliding">Sports News</div>
      </div>
    </div>
    <div class="pages navbar-through">
      <div data-page="index-2" class="page">

        <div class="page-content">
          <!-- REMEMBER YOU NEED TO SHOW THE FEED ON VAR DESC  -->
          <div id="sports">
            <br>
          </div>
          <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
          <script>

          $.getJSON( "https://newsapi.org/v1/articles?source=espn&sortBy=top&apiKey=4fc83d88b81845b8a492e394a36d82dd", function( data ) {

            console.log(data.articles)
            var arrayOfData = data.articles
            for (var i = 0; i < 10; i++) {
              var desc = arrayOfData[i].description;
              var img = arrayOfData[i].urlToImage;
              document.getElementById('sports').innerHTML += '<img height="40px" width="40px" src="'+img+'"/>' + desc + '<br>' ;
            }

          });
          </script>
        </div>

      </div>
    </div>
  </div>

  <div id="view-3" class="view tab">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center sliding">Business News</div>
      </div>
    </div>
    <div class="pages navbar-through">
      <div data-page="index-3" class="page">

        <div class="page-content">

          <div id="business">
            <br>
            <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
            <script>

            $.getJSON( "https://newsapi.org/v1/articles?source=bloomberg&sortBy=top&apiKey=4fc83d88b81845b8a492e394a36d82dd", function( data ) {

              console.log(data.articles)
              var arrayOfData = data.articles
              for (var i = 0; i < 10; i++) {
                var desc = arrayOfData[i].description;
                var img = arrayOfData[i].urlToImage;
                document.getElementById('business').innerHTML += '<img height="40px" width="40px" src="'+img+'"/>' + desc + '<br>' ;
              }

            });
            </script>
          </div>

        </div>

      </div>
    </div>
  </div>

  <div id="view-4" class="view tab">
    <div class="pages navbar-fixed">
      <div data-page="index-4" class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="center">Finance News</div>
          </div>
        </div>
        <div class="page-content">

          <div id="finance">
            <br>
            <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
            <script>

            $.getJSON( "https://newsapi.org/v1/articles?source=financial-times&sortBy=latest&apiKey=4fc83d88b81845b8a492e394a36d82dd", function(data) {

              console.log(data.articles)
              var arrayOfData = data.articles
              for (var i = 0; i < 10; i++) {
                var desc = arrayOfData[i].description;
                var img = arrayOfData[i].urlToImage;
                document.getElementById('finance').innerHTML += '<img height="40px" width="40px" src="'+img+'"/>' + desc + '<br>' ;
              }

            });
            </script>
          </div>

        </div>
      </div>

    </div>
  </div>

  <div id="view-5" class="view tab">
    <div class="pages navbar-fixed">
      <div data-page="index-5" class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="center">Your Personal News</div>
          </div>
        </div>
        <div class="page-content">

          <div id="top10stories">
            <div class="content-block">
              <p>Breaking News</p>
            </div>

            <div id="kylestop">
              kyles top
            </div>
            <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
            <script>
            $.get( "http://52.48.79.163/db.php", { type: "top10stories" } )
            .done(function( data ) {

              // parse json
              var obj = jQuery.parseJSON(data);
              // print out a story
              //console.log(obj.news.story);


              var news = obj.news.story
              for (var i = 0 ; i < 10; i++) {
                var desc = news[i];
                document.getElementById('top10stories').innerHTML += desc + '<br>' ;
              }
            });
            </script>
          </div>

          <div id="getmystories">
            <div class="content-block">
              <p>My Breaking News</p>
            </div>
                <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
                    <script>

                        $.get( "http://52.48.79.163/db.php?type=getmystories&id=1079006898900009")
                        .done(function( res ) {

                        var myJSON = JSON.stringify('Now on the news: <br>' + res + '<br> that is the end of it for now' ); // That's my personal JSON format text

                         // console.log( "get my stories"+ userId )
                          document.getElementById('getmystories').innerHTML += myJSON + '<br>' ;


                        });
                </script>
          </div>

          <div id="stories">
                <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
                <script>

                function saveStory(){

                  var data = document.getElementById('story').value;
                  var res = encodeURIComponent(data);

                  $.get( "http://52.48.79.163/db.php", { type: "newstory", id:"1079006898900009", data:res } )
                  .done(function( res ) {
                  });

                }
                </script>
            <div class="content-block">
              <p> Write your Breaking News Here: </p> <br>
              <input type="text" id="story" size="35"/>
            </div>
            <div class="content-block">
              <button onclick="saveStory()" style="height: 20px; width:150px">Send</button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <!-- Bottom Tabbar-->
  <div class="toolbar tabbar tabbar-labels">
    <div class="toolbar-inner"><a href="#view-1" class="tab-link active"> <i class="icon tabbar-demo-icon-2"></i><span class="tabbar-label">Login</span></a><a href="#view-2" class="tab-link"><i class="icon tabbar-demo-icon-2"></i><span class="tabbar-label"> Sports</span></a><a href="#view-3" class="tab-link"> <i class="icon tabbar-demo-icon-2"></i><span class="tabbar-label"> Business</span></a><a href="#view-4" class="tab-link"> <i class="icon tabbar-demo-icon-2"></i><span class="tabbar-label"> Financial</span></a></a><a href="#view-5" class="tab-link"> <i class="icon tabbar-demo-icon-2"></i><span class="tabbar-label">Personal News </span></a></div>
  </div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="../../dist/js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>