cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html ng-app='mirror'>
<head>
  <meta charset="UTF-8">
  <title>Smart Mirror Layout</title>
  <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
  <div id="weather" ng-controller='weather'>
    <p id="summary">
      <span id='city'>{{city}}</span>
    </p>
    <span id="current-weather"><skycon icon="todayicon.forecast.icon" size="todayicon.forecast.iconSize" color="todayicon.forecast.color"></skycon>{{current}}</span>
    <br>
    <div class="item" id="forecast">
      <p>{{day1}}
        <skycon icon="icon1.forecast.icon" size="icon1.forecast.iconSize" color="icon1.forecast.color"></skycon><span class="min">{{tempMin1}}</span> <span class="max">{{tempMax1}}</span></p>
      <p>{{day2}}
        <skycon icon="icon2.forecast.icon" size="icon2.forecast.iconSize" color="icon2.forecast.color"></skycon><span class="min">{{tempMin2}}</span> <span class="max">{{tempMax2}}</span></p>
      <p>{{day3}}
        <skycon icon="icon3.forecast.icon" size="icon3.forecast.iconSize" color="icon3.forecast.color"></skycon><span class="min">{{tempMin3}}</span> <span class="max">{{tempMax3}}</span></p>
      <p>{{day4}}
        <skycon icon="icon4.forecast.icon" size="icon4.forecast.iconSize" color="icon4.forecast.color"></skycon><span class="min">{{tempMin4}}</span> <span class="max">{{tempMax4}}</span></p>
      <p>{{day5}}
        <skycon icon="icon5.forecast.icon" size="icon5.forecast.iconSize" color="icon5.forecast.color"></skycon><span class="min">{{tempMin5}}</span> <span class="max">{{tempMax5}}</span></p>
    </div>
  </div>
  <div id="calendar" ng-controller='calendar'>
    <span class="item" id="date">{{day}} {{date | date: format: 'EEEE, MMMM d, y'}}</span>
    <br>
    <span class="item" id="time">{{time}}</span>
    <br>
    <div class="item" id="upcoming">
      Upcoming dates from Node.js
      <br>iCalendar parser go here
      <p ng-repeat='date in dates'>{{date}}</p>
    </div>
  </div>
  <div id="compliments" ng-controller='compliments'>
    <span ng-if="compliment != undefined" class="item"> {{compliment}}
  </span>
  </div>
  <div class="item" id="news" ng-controller='news'>
    <span ng-if="headline != undefined" class="item" animate-on-change='headline'>{{headline}}</span>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular-animate.js'></script>
  <script type="text/javascript" src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.js'></script>
  <script src="JS/index.js"></script>
</body>

</html>
            
          
!
            
              html {
  background: #000;
  color: #FFF;
}

#weather {
  position: fixed;
  top: 20px;
  right: 30px;
}

#summary {
  font-size: 25px;
  text-align: center;
  margin-bottom: 5px;
  margin-top: 0px;
}

#current-weather {
  margin-top: 20px;
  font-size: 50px;
}

skycon {
  margin-left: 10px;
}

.min {
  margin-right: 10px;
  margin-left: 15px;
}

.max {
  margin-left: 10px;
}

#forecast {
  text-align: center;
}

#calendar {
  position: fixed;
  top: 20px;
  left: 30px;
}

#date,
#time {
  margin-top: 10px;
  font-size: 20px;
}

#upcoming,
#forecast {
  background: -webkit-linear-gradient(#FFF, #444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#time {
  font-size: 45px;
}

#compliments {
  position: fixed;
  font-size: 30px;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#news {
  position: fixed;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.item.ng-move,
.item.ng-enter,
.item.ng-leave {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}

.item.ng-leave.ng-leave-active,
.item.ng-move,
.item.ng-enter {
  opacity: 0;
}

.item.ng-leave,
.item.ng-move.ng-move-active,
.item.ng-enter.ng-enter-active {
  opacity: 1;
}
            
          
!
            
              (function() {
  angular.module('mirror', ['ngAnimate'])

  .controller('weather', function($http, $scope, $interval) {

      var weatherURL,
        lat,
        lon,
        city,
        state;
   
  function weatherUpdate(){ 
    var currentDate = new Date(),
   n = currentDate.getDay(),
          days = ["Sun", "Mon", "Tu", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tu", "Wed", "Thu", "Fri", "Sat"];

        $scope.day1 = days[n+1];
        $scope.day2 = days[n+2];
        $scope.day3 = days[n+3];
        $scope.day4 = days[n+4];
        $scope.day5 = days[n+5];
    $http.get('http://api.ipinfodb.com/v3/ip-city/?key=86be52d35c2a9476eae382805a6161756a0b2fd47514dcb31121e889bf4c53b5&format=json').success(function(data) {
      $scope.city = data.cityName;
        lat = data.latitude;
        lon = data.longitude;
        weatherURL = 'https://api.forecast.io/forecast/c760978036a761dc66bf1a05e6958a09/' + lat + "," + lon + '?callback=JSON_CALLBACK';
        $http.jsonp(weatherURL).success(function(forecast) {
          $scope.current = Math.round(forecast.currently.temperature) + '°';
          $scope.todayicon = {
            forecast: {
            icon: forecast.currently.icon,
            iconSize: 60,
            color: "white"
        }
          };
          $scope.icon1 = {
            forecast: {
            icon: forecast.daily.data[1].icon,
            iconSize: 30,
            color: "white"
        }
          };
          $scope.tempMax1 = Math.round(forecast.daily.data[1].temperatureMax)+'°';
          $scope.tempMin1 = Math.round(forecast.daily.data[1].temperatureMin)+'°';
          $scope.icon2 = {
            forecast: {
            icon: forecast.daily.data[2].icon,
            iconSize: 30,
            color: "azure"
        }
          };
          $scope.tempMax2 = Math.round(forecast.daily.data[2].temperatureMax)+'°';
          $scope.tempMin2 = Math.round(forecast.daily.data[2].temperatureMin)+'°';
          $scope.icon3 = {
            forecast: {
            icon: forecast.daily.data[3].icon,
            iconSize: 30,
            color: "azure"
        }
          };
          $scope.tempMax3 = Math.round(forecast.daily.data[3].temperatureMax)+'°';
          $scope.tempMin3 = Math.round(forecast.daily.data[3].temperatureMin)+'°';
          $scope.icon4 = {
            forecast: {
            icon: forecast.daily.data[4].icon,
            iconSize: 30,
            color: "gray"
        }
          };
          $scope.tempMax4 = Math.round(forecast.daily.data[4].temperatureMax)+'°';
          $scope.tempMin4 = Math.round(forecast.daily.data[4].temperatureMin)+'°';
          $scope.icon5 = {
            forecast: {
            icon: forecast.daily.data[5].icon,
            iconSize: 30,
            color: "gray"
        }
          };
          $scope.tempMax5 = Math.round(forecast.daily.data[5].temperatureMax)+'°';
          $scope.tempMin5 = Math.round(forecast.daily.data[5].temperatureMin)+'°';
          
        })
      });
                          }
    $interval(function() {
        weatherUpdate();
      console.log('weather updated');
      }, 120000);
      weatherUpdate();
    })
    .controller('compliments', function($http, $scope, $interval) {

      var d = new Date,
        morning = ['Good Morning, Beautiful', 'I hope you slept well!', 'Good luck today', 'Surrender to what is. Let go of what was. Have faith in what will be.', 'See the bright opportunity in each new day', 'Even the darkest night will end and the Sun will rise', 'Have an amazing day!', 'Time for some coffee'],
        midday = ["Hope you're having a productive day", "You look absolutely gorgeous today!", "Could you be any cuter?", "Your best friend misses you", "You're looking radiant today!", "You will never have this day again, so make it count <3", "Your loving spirit helped me find my own", "A day without laughter is a day wasted", "Work hard and be nice!", "Women are the real architects of society", "Life doesn't come with a Meeseeks box, so get to work!"],
        afternoon = ['Take a little break, you deserve it', 'Looking good!', "Spend the afternoon. You can't take it with you.", "Have a great afternoon!", "Take a nap, you know you want to...", "Any guy would be lucky to have a girl like you", "So pretty!", "Hope you're being productive!"],
        night = ["Day is over, night has come. Today is gone, what's done is done", "Time to wind down the day", "It's starting to get late, but you're still looking good!", "Time to relax!", "You are truly gorgeous", "Your boyfriend misses you, text him"],
        lateNight = ["Goodnight Kat", "Sweet dreams love", "Don't work too hard, you deserve a break", "Tonight, I'll fall asleep with you in my heart", "Good night and sweet dreams", "The very last person you think about before you sleep. That's who your heart belongs to", "Goodnight gorgeous!", "That's enough internet for one day"];

      function compliments() {
        function quoteGen(arr) {
          var random = arr[Math.floor(Math.random() * arr.length)];
          $scope.compliment = random;
        }
        if ((d.getHours() >= 4) && (d.getHours() < 10)) {
          quoteGen(morning);
        }
        if ((d.getHours() >= 10) && (d.getHours() < 18)) {
          quoteGen(midday);
        }
        if ((d.getHours() >= 18) && (d.getHours() < 20)) {
          quoteGen(afternoon);
        }
        if ((d.getHours() >= 20) && (d.getHours() < 22)) {
          quoteGen(night);
        } else if ((d.getHours() >= 22) || (d.getHours() < 4)) {
          quoteGen(lateNight);
        }
      }
      $interval(function() {
        compliments();
      }, 120000);
      compliments();
    })
    .controller('calendar', function($http, $scope, $interval) {
      function updateTime() {
        var currentDate = new Date(),
          realTime,
          currentSec = currentDate.getSeconds(),
          currentMillisec = currentDate.getMilliseconds(),
          currentMin = currentDate.getMinutes(),
          currentHr = currentDate.getHours(),
          n = currentDate.getDay(),
          days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        $scope.date = currentDate;

        $scope.day = days[n];
        if (currentHr == 00) { //if midnight (00 hours) hour = 12
          currentHr = 12;
        } else if (currentHr >= 13) { //convert military hours at and over 1300 (1pm) to regular hours by subtracting 12. 
          currentHr -= 12;
        }
        if (currentMin < 10) {
          currentMin = "0" + currentMin;
        }
        if (currentDate.getHours() < 12) {
          realTime = currentHr + ':' + currentMin + " am";
        } else {
          realTime = currentHr + ':' + currentMin + " pm";
        }
        return realTime;

      }
      $interval(function() {
        $scope.time = updateTime();
      }, 1000);

    })
    .controller('news', function($http, $scope, $interval, $animate) {

      function newsUpdate() {
        $http.get("https://www.reddit.com/r/news/.json").success(function(data) {

          var random = Math.floor(Math.random() * 25);

          $scope.headline = data.data.children[random].data.title;
        });
      }
      newsUpdate();
      var count = 0;
      $interval(function() {
        newsUpdate();
      }, 30000);

      $scope.$watch('headline', function(newValue, oldValue) {
        if (newValue !== oldValue) {

          count += 1;
          /*console.log("data changed " + count + " time(s)"); */

        }
      })
    })
    .directive("skycon", function() {
      return {
        restrict: "E",
        replace: true,
        scope: {
          icon: "=",
          size: "=",
          animated: "=",
          color: "="
        },
        link: function(scope, element, attrs) {

          // make a canvas for our icon
          var canvas = document.createElement("canvas");

          // set the CSS class from attribute
          if (!attrs.class) {
            canvas.className = "";
          } else {
            canvas.className = attrs.class;
          }

          // set default color if "color" attribute not present
          var config = {
            color: scope.color || "white"
          };

          var skycons = new Skycons(config);

          // watch the size property from the controller
          scope.$watch("size", function(newVal, oldVal) {
            if (newVal) {
              canvas.height = newVal;
              canvas.width = newVal;
            } else {
              canvas.height = scope.size || 64;
              canvas.width = scope.size || 64;
            }
          }, true);

          // add the animation
          skycons.add(canvas, scope.icon);

          // watch the icon property from the controller for changes
          scope.$watch("icon", function() {
            skycons.set(canvas, scope.icon);
          }, true);

          // watch the color property from the controller for changes
          scope.$watch("color", function() {
            skycons.color = scope.color;
          }, true);

          if (scope.animated === "false" || scope.animated === false) {
            skycons.pause();
          } else {
            skycons.play();
          }

          if (element[0].nodeType === 8) {
            element.replaceWith(canvas);
          } else {
            element[0].appendChild(canvas);
          }

          scope.$on("$destroy", function() {
            skycons.remove(canvas);
            if (skycons.list.length === 0) {
              skycons.pause(canvas);
            }
          });
        }
      };
    });

})();
            
          
!
999px
Loading ..................

Console