Windows 10 Concept

HTML

              
                <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">



<div class="desktop">
  <div class="start-menu-fade"></div>
  <div class="start-menu">
    <div class="start-menu__list">
      <div class="media">
        <a class="user-info" href="#">
        <img class="user-info__img media__img" src="https://i.imgur.com/KkCqvK9.png" alt="User image">
        <div class="user-info__name media__body">
          User Name
        </div>
        </a>
        <a class="user-info__power" href="#">
          <i class="fa fa-power-off"></i>
        </a>
      </div>
      

      <ul class="start-menu__recent">
        <li class="start-menu__explorer">
          <a href="#" data-window="explorer">
            <i class="fa fa-folder"></i>
            File Explorer
          </a>
        </li>
        <li class="start-menu__mail">
          <a href="#" data-window="mail">
            <i class="fa fa-envelope"></i>
            Mail
          </a>
        </li>
        <li class="start-menu__notepad">
          <a href="#" data-window="notepad">
            <i class="fa fa-pencil"></i>
            Notepad
          </a>
        </li>
        <li class="start-menu__explorer">
          <a href="#">
            <i class="fa fa-folder"></i>
            File Explorer
          </a>
        </li>
        <li class="start-menu__mail">
          <a href="#">
            <i class="fa fa-envelope"></i>
            Mail
          </a>
        </li>
        <li class="start-menu__notepad">
          <a href="#">
            <i class="fa fa-pencil"></i>
            Notepad
          </a>
        </li>
      </ul>
      
      <a class="all-apps" href="#">
        All apps
        <i class="fa fa-arrow-right"></i>
      </a>
      
      <input type="text" class="search" placeholder="Search files and folders">
    </div>
    <div class="start-screen-scroll">
    <div class="start-screen">
      <a class="start-screen__tile start-screen__tile--explorer masonry-item" href="#">
        <i class="fa fa-folder"></i>
        <span>File Explorer</span>
      </a>
      <a class="start-screen__tile masonry-item" href="#">
      </a>
      <a class="start-screen__tile start-screen__tile--wide masonry-item" href="#"  data-ss-colspan="2">
      </a>
      <div class="start-screen__smallgroup masonry-item">
      <a class="start-screen__tile start-screen__tile--small" href="#"></a>
        <a class="start-screen__tile start-screen__tile--small" href="#"></a>
        <a class="start-screen__tile start-screen__tile--small" href="#"></a>
      </div>
      <a class="start-screen__tile masonry-item" href="#">
      </a>
      <a class="start-screen__tile masonry-item" href="#">
      </a>
      <a class="start-screen__tile start-screen__tile--notepad masonry-item" href="#">
      </a>
      <a class="start-screen__tile start-screen__tile--large start-screen__tile--mail masonry-item" href="#" data-ss-colspan="2">
        <i class="fa fa-envelope"></i>
        <span>Mail</span>
      </a>
      <a class="start-screen__tile masonry-item" href="#">
      </a>
      <a class="start-screen__tile masonry-item" href="#">
      </a>
      <a class="start-screen__tile masonry-item" href="#">
      </a>
    </div>
    </div>
  </div>
  
  <div class="taskbar">
    <a class="taskbar__item taskbar__item--start" href="#" data-window="start">
      <i class="fa fa-windows"></i>
    </a>
    <a class="taskbar__item taskbar__item--explorer" href="#" data-window="explorer">
      <i class="fa fa-folder"></i>
    </a>
    <a class="taskbar__item taskbar__item--mail" href="#" data-window="mail">
      <i class="fa fa-envelope"></i>
    </a>
    <a class="taskbar__item taskbar__item--notepad" href="#" data-window="notepad">
      <i class="fa fa-pencil"></i>
    </a>
    
    <div class="taskbar__tray">
      <span class="time">
        <script>
          
         </script>
      </span>
    </div>
  </div>
  
  
  <div class="window window--explorer" data-window="explorer" style="width:640px;height:400px;top:5%;left:10%;">
    <div class="window__titlebar">
      <div class="window__controls window__controls--left">
        <a class="window__icon" href="#"><i class="fa fa-folder"></i></a>
        <a class="window__menutoggle" href="#"><i class="fa fa-bars"></i></a>
      </div>
      
      
      
      <span class="window__title">
        File Explorer
      </span>
      
      <div class="window__controls window__controls--right">
        <a class="window__minimize" href="#"><i class="fa fa-minus"></i></a>
        <a class="window__maximize" href="#"><i class="fa"></i></a>
        <a class="window__close" href="#"><i class="fa fa-close"></i></a>
      </div>
    </div>
    
    <ul class="window__menu">
        <li>
          <a href="#">
            <i class="menu__icon fa fa-search"></i>
            Search
          </a>
        </li>
        <li>
          <a href="#">
            <i class="menu__icon fa fa-share-alt"></i>
            Share
          </a>
        </li>
        <li>
          <a href="#">
            <i class="menu__icon fa fa-plug"></i>
            Devices
          </a>
        </li>
        <li class="divided">
          <a href="#">
            <i class="menu__icon fa fa-cog"></i>
            Settings
          </a>
        </li>
      </ul>
    
    <div class="window__body">
      <div class="window__side">
        
        <ul class="side__list">
          <li><a href="#">Home</a></li>
          <li>
            <a href="#">Favorites</a>
            <ul>
              <li><a href="#">Desktop</a></li>
              <li><a href="#">Downloads</a></li>
              <li><a href="#">Recent Places</a></li>
          </ul>
        </li>
          <li>
            <a href="#">This Device</a>
            <ul style="display:none">
              <li><a href="#">Desktop</a>
                <ul style="display:none">
                  <li>
                    <a href="#">Folder 1</a>
                  </li>
                </ul>
              </li>
              <li><a href="#">Documents</a></li>
              <li><a href="#">Downloads</a></li>
              <li><a href="#">Local Disk  (C:)</a></li>
        </ul>
      </div>
      <div class="window__main">
        main area
      </div>
    </div>
    
  </div>
    
     <div class="window window--mail" data-window="mail" style="display:none;width:400px;height:300px;top:40%;left:40%;">
    <div class="window__titlebar">
      <div class="window__controls window__controls--left">
        <a class="window__icon" href="#"><i class="fa fa-envelope"></i></a>
        <a class="window__menutoggle" href="#"><i class="fa fa-bars"></i></a>
      </div>
      
      
      
      <span class="window__title">
        Mail
      </span>
      
      <div class="window__controls window__controls--right">
        <a class="window__minimize" href="#"><i class="fa fa-minus"></i></a>
        <a class="window__maximize" href="#"><i class="fa"></i></a>
        <a class="window__close" href="#"><i class="fa fa-close"></i></a>
      </div>
    </div>
    
    <ul class="window__menu">
        <li>
          <a href="#">
            <i class="menu__icon fa fa-search"></i>
            Search
          </a>
        </li>
        <li>
          <a href="#">
            <i class="menu__icon fa fa-share-alt"></i>
            Share
          </a>
        </li>
        <li>
          <a href="#">
            <i class="menu__icon fa fa-plug"></i>
            Devices
          </a>
        </li>
        <li class="divided">
          <a href="#">
            <i class="menu__icon fa fa-cog"></i>
            Settings
          </a>
        </li>
      </ul>
    
    <div class="window__body">
      <div class="window__side">
        
      </div>
      <div class="window__main">
        
      </div>
    </div>
    
  </div>
    
    
 <div class="window window--notepad" data-window="notepad" style="displawidth:600px;height:300px;top:10%;left:30%;">
    <div class="window__titlebar">
      <div class="window__controls window__controls--left">
        <a class="window__icon" href="#"><i class="fa fa-pencil"></i></a>
        <a class="window__menutoggle" href="#"><i class="fa fa-bars"></i></a>
      </div>
      
      
      
      <span class="window__title">
        Notepad
      </span>
      
      <div class="window__controls window__controls--right">
        <a class="window__minimize" href="#"><i class="fa fa-minus"></i></a>
        <a class="window__maximize" href="#"><i class="fa"></i></a>
        <a class="window__close" href="#"><i class="fa fa-close"></i></a>
      </div>
    </div>
    
    <ul class="window__menu">
        <li>
          <a href="#">
            <i class="menu__icon fa fa-download"></i>
            Save
          </a>
        </li>
        <li>
          <a href="#">
            <i class="menu__icon fa fa-folder-open"></i>
            Open
          </a>
        </li>
        <li>
          <a href="#">
            <i class="menu__icon fa fa-print"></i>
            Print
          </a>
        </li>
      <li>
          <a href="#">
            <i class="menu__icon fa fa-share-alt"></i>
            Share
          </a>
        </li>
      
        <li class="divided">
          <a href="#">
            <i class="menu__icon fa fa-file"></i>
            Format
          </a>
      </li>
      <li>
          <a href="#">
            <i class="menu__icon fa fa-cog"></i>
            Settings
        </a>
      </li>
   </ul>
    
    <div class="window__body">
      <div class="window__main">
        <textarea class="full-textarea"></textarea>
      </div>
    </div>
    
  </div>

    
    
</div>

CSS

              
                $explorer-color: #0097A7;
$mail-color: #5C6BC0;
$notepad-color: #EC407A;

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
}

a {
  text-decoration: none;
  cursor: default;
}


.media {
  display: flex;
}
.media__img,
.media__body{
  flex: 0 1 auto;
}
.media__body {
  padding-left: 10px;
}


.desktop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translate3d(0,0,0);
}

.desktop,
.window__titlebar:after {
  background-image: url(https://i.imgur.com/K7ZTvoQ.png);
  background-size: cover;
  background-position: 50%;
  background-attachment: fixed;
}

.window {
  //overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 0;
  //background-color: white;
  box-shadow: 0 2px 4px rgba(black, 0.5), 0 1px 1px rgba(black, 0.1);
  filter: contrast(0.5)
          brightness(1.35);
  transform: scale(0.995);
  transition: all 250ms,
              z-index 1ms;
  z-index: 0;
  &.ui-draggable-dragging,
  &.ui-resizable-resizing {
    transition: none;
  }
}
.window--maximized {
  
}
.window--minimized {
  //top: 50% !important;
  //left: -50% !important;
  top: 100% !important;
  left: 0 !important;
  transform: 
             scale(0) translate(-100%, 0) !important;
  opacity: 0;
}
.window--active {
  filter: none;
  transform: none;
  box-shadow: 0 10px 30px rgba(black, 0.25), 0 0 1px rgba(black, 0.1);
  z-index: 1000;
}
.window--closing {
  transform: scale(0.9);
  opacity: 0;
}
.window--opening {
  transform: scale(1.1);
  opacity: 0;
}

.window__titlebar {
  position: absolute;
  overflow: hidden;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  cursor: default;
  background-color: rgba(#9FA8DA, 1);
  border-bottom: 1px solid #B0BEC5;
  &:after {
   // content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    filter: blur(5px);
    opacity: 0.35;
  }
}

.window__title {
  position: relative;
  line-height: 32px;
  z-index: 10;
  color: rgba(black, 0.75);
  //text-shadow: 0 0 7px white;
}

.window__controls {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  > a {
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    line-height: 32px;
    font-size: 12px;
    transition: all 100ms;
    cursor: default;
    color: rgba(black, 0.5);
    &:hover {
      background-color: rgba(white, 0.25);
    }
  }
  > .window__close {
      color: white;
      background-color: rgba(black, 0.2);
    &:hover {
      background-color: #e53935;
    }
  }
}
.window__controls--left {
  left: 0;
}
.window__controls--right {
  right: 0;
}

.window__maximize {
  position: relative;
  > i {
    box-sizing: content-box;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    border: 2px solid rgba(black, 0.6);
    .window--maximized & {
      margin-bottom: -1px;
      margin-left: -4px;
      width: 5px;
      height: 5px;
      transition: all 100ms 350ms;
      &:after {
        box-sizing: content-box;
        content: '';
        display: block;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 6px;
        height: 6px;
        border: inherit;
        border-radius: inherit;
        border-left: 0;
        border-bottom: 0;
        transition: all 100ms 350ms;
      }
    }
  }
}

.window__icon,
.window__icon:hover,
.window__menu {
  color: white !important;
  .window--explorer & {
    background-color: $explorer-color;
  }
  .window--mail & {
    background-color: $mail-color;
  }
  .window--notepad & {
    background-color: $notepad-color;
  }
}

.window__menutoggle {
  
}
.window__menutoggle--open,
.window__menutoggle--open:hover {
  color: white !important;
  background-color: #5C6BC0;
  .window--explorer & {
    background-color: $explorer-color;
  }
  .window--mail & {
    background-color: $mail-color;
  }
  .window--notepad & {
    background-color: $notepad-color;
  }
}


.window__menu {
  overflow: hidden;
  display: none;
  position: absolute;
  top: 31px;
  width: 25%;
  min-width: 200px;
  min-height: calc(100% - 31px);
  margin: 0;
  padding: 10px 0;
  //font-size: 20px;
  color: white;
  background-color: #5C6BC0;
  z-index: 100;
  .window--explorer & {
    background-color: $explorer-color;
  }
  > li {
    list-style: none;
    transform: translate(-50%, 0);
    transition: transform 500ms 100ms;
    > a {
      opacity: 0;
      position: relative;
      display: block;
      padding: 10px;
      padding-left: 45px;
      color: white;
      font-weight: 200;
      text-decoration: none;
      transition: all 100ms,
                  opacity 750ms 150ms;
      &:hover {
        background-color: rgba(white, 0.1);
      }
    }
    &.divided > a {
      border-top: 1px solid rgba(black, 0.1);
    }
  }
}
.window__menu--open {
  li {
    transform: none;
    > a {
      opacity: 1;
    }
  }
}

.menu__icon.menu__icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 16px
}


.window__body {
  display: flex;
  overflow: auto;
  padding-top: 32px;
  height: 100%;
  font-size: 14px;
}
.window__side,
.window__main {
  flex: 0 1 auto;
}
.window__side {
  overflow: auto;
  width: 25%;
  min-width: 200px;
  padding: 10px;
  background-color: #ECEFF1;
}
.window__main {
  padding: 10px;
  width: 100%;
  background-color: white;
}


.side__list {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 200;
  > li {
    margin-bottom: 10px;
  }
  li {
    list-style: none;
    a {
      position: relative;
      display: block;
      padding: 3px 5px 3px 32px;
      border: 1px solid transparent;
      color: #546E7A;
      transition: all 100ms;
      &:hover {
        color: #263238;
        border-color: rgba(black, 0.1);
        background-color: rgba(black, 0.05);
      }
      
    }
  }
  ul {
    padding: 0;
    font-size: 14px;
    li {
      > a {
        padding-left: 42px;
      }
      li {
        > a {
          padding-left: 52px;
        }
      }
    }
  }
}

.list__toggle {
  display: block;
        position: absolute;
        left: 0;
        top: 0;
        height: 32px;
        width: 32px;
        display: block;
  line-height: 32px;
  text-align: center;
  //background: rgba(red,0.1);
  &:hover {
    color: #1565C0;
    //background-color: rgba(black, 0.05);
  }
    &:before {
        display: block;
        content: '\f105';
        font-family: 'FontAwesome';
        margin-top: 1px;
        transform: none;
        transition: all 250ms;
   }
  .side__list--open > a &:before {
          transform: rotate(90deg);
        }
  li li & {
    width: 42px;
    height: 26px;
    line-height: 26px;
    &:before {
      margin-top: 2px;
    }
  }
}


.taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  //background-color: #263238;
  //box-shadow: 0 -2px 5px rgba(black, 0.15);
  background-image: linear-gradient(to top, rgba(black, 0.25), transparent);
  z-index: 10000;
}
.taskbar__item {
  display: inline-block;
  margin-right: 4px;
  text-align: center;
  width: 48px;
  height: 48px;
  font-size: 22px;
  color: white;
  border: 1px solid transparent;
  transition: all 100ms;
  &:hover {
    background-color: rgba(white, 0.1);
  }
  > i {
    display: inline-block;
    vertical-align: middle;
    margin-top: 6px;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
}
.taskbar__item--open {
  background-color: rgba(#78909C, 0.25);
}
.taskbar__item--active {
  //background: red !important;
  box-shadow: inset 0 -2px 0 rgba(white, 0.25);
}
.taskbar__item--explorer > i {
    background-color: $explorer-color;
  }
.taskbar__item--mail > i {
    background-color: $mail-color;
  }
.taskbar__item--notepad > i {
    background-color: $notepad-color;
  }

.taskbar__item--start {
  transition: background-color 250ms;
}
.taskbar__tray {
  color: white;
  padding: 0 10px;
  float: right;
  line-height: 48px;
  .time {
    cursor: default;
    padding: 5px;
    &:hover {
      background-color: rgba(white,0.1);
    }
  }
}


.start-menu-fade {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background-color: rgba(black, 0.5);
}
.start-menu {
  display: flex;
  //overflow: hidden;
  position: absolute;
  left: 0;
  bottom: 48px;
  padding: 10px;
  height: 85vh;
  min-height: 128px * 4;
  z-index: 9999;
  color: white;
  background-color: #0277BD;
}
.start-menu--open {
 
}
.start--open {
  background-color: #0277BD !important;
}
.start-menu__list,
.start-screen {
  flex: 0 1 auto;
}
.start-menu__list {
  position: relative;
  width: 248px;
  transform: translate(-100%, 0);
  opacity: 0;
  transition: all 500ms;
  .start-menu--open & {
    transform: none;
    opacity: 1;
  }
}

.user-info {
  display: flex;
  margin-bottom: 10px;
  padding: 10px;
  color: white;
  transition: all 100ms,
              transform 500ms;
  &:hover {
    background-color: rgba(white, 0.15);
  }
  .start-menu--open & {
    transform: none;
  }
}
.user-info__img {
  display: block;
  width: 40px;
  height: 40px;
}
.user-info__name {
  font-size: 20px;
  font-weight: 200;
  align-self: center;
}
.user-info__power {
  margin-left: auto;
  //line-height: 40px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  color: white;
  &:hover {
    background-color: rgba(white, 0.15);
  }
}
.start-menu__label {
  display: block;
  padding: 10px 20px;
  //margin-top: 5px;
  font-size: 20px;
}
.start-menu__recent {
 // position: relative;
  overflow: hidden;
  max-height: 65%;
  padding: 0;
  margin: 0;
  transform: translate(-100%, 0);
  opacity: 0;
  transition: all 500ms 100ms,
    opacity 1000ms 250ms;
  .start-menu--open & {
    transform: none;
    opacity: 1;
  }
  li {
    list-style: none;
    a {
      display: block;
      padding: 10px;
      color: white;
      transition: all 100ms;
      &:hover {
        background-color: rgba(white, 0.15);
        //box-shadow: inset 0 0 0 1px rgba(white, 0.15);
        > i {
          //box-shadow: none;
        }
      }
     > i {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 6px;
        font-size: 20px;
        line-height: 32px;
        text-align: center;
       box-shadow: inset 0 0 0 1px rgba(white, 0.15)
        //background-color: $explorer-color;
      }
    }
   
    &.start-menu__explorer a > i {
    //&.start-menu__explorer a:hover {
      background-color: $explorer-color;
    }
    &.start-menu__mail a > i {
    //&.start-menu__mail a:hover {
      background-color: $mail-color;
    }
    &.start-menu__notepad a > i {
    //&.start-menu__notepad a:hover {
      background-color: $notepad-color;
    }
  }
}

.all-apps {
  position: absolute;
  right: 0;
  bottom: 40px;
  display: block;
  margin-bottom: 10px;
  //float: right;
  color: white;
  transition: all 100ms;
  > i {
    margin-left: 5px;
    margin-right: 5px;
    border: 2px solid white;
    border-radius: 100px;
    width: 32px;
    height: 32px;
    line-height: 26px;
    text-align: center;
  }
  &:hover {
    > i {
      background-color: #37474F;
    }
  }
}

.search {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: block;
  padding: 10px;
  border: 0;
  font-size: 12px;
  color: #607D8B;
  background-color: white;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.start-screen-scroll {
  max-height: 85vh;
  min-height: calc(128px * 3 - 8px);
  overflow-y: auto;
  overflow-x: hidden;
  margin: -8px;
  padding: 4px;
  margin-left: 4px;
  transform: translate(-100%, 0);
  transition: transform 500ms,
              opacity 1000ms;
  opacity: 0;
  .start-menu--open & {
    transform: none;
    opacity: 1;
  }
}
.start-screen {
  position: relative;
  width: 128px * 2;
  word-spacing: -1em;
  //background-color: green;
  
  @media screen and ( min-width: 700px ) {
    min-width: 128px * 3;
  }
  @media screen and ( min-width: 800px ) {
    min-width: 128px * 4;
  }
  @media screen and ( min-width: 960px ) {
    min-width: 128px * 5;
  }
}
.start-screen__tile {
  position: relative;
  display: block;
  float: left;
  width: 120px;
  height: 120px;
  word-spacing: normal;
  margin: 4px;
  color: white;
  background-color: #D81B60;
  border: 2px solid rgba(white,0.1);
  //box-shadow: inset 0 0 0 1px rgba(white, 0.1);
  transform: scale(0.5);
  transition: all 250ms, transform 0s;
  .start-menu--open & {
    transform: none;
  }
  &.ui-sortable-helper {
    transform: scale(1.1);
    transition: none;
  }
  &:hover {
    //box-shadow: 0 0 0 1px rgba(#455A64, 1)
    border-color: rgba(white, 0.5);
  }
  &:active {
    transform: scale(0.9);
  }
  > i {
    font-size: 48px;
    position: absolute;
    top: calc(50% - 12px);
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
  }
  > span {
    position: absolute;
    left: 12px;
    bottom: 4px;
    font-size: 12px;
  }
}
.start-screen__tile--wide,
.start-screen__tile--large{
  width: 248px;
}
.start-screen__tile--large {
  height: 248px;
}
.start-screen__tile--small {
  width: 56px;
  height: 56px;
}
.start-screen__smallgroup {
  width: 120px;
  height: 120px;
  //float: left;
  margin: 4px;
  //background: white;
  > .start-screen__tile {
     margin: 0;
    &:nth-child(odd) {
      margin-right: 8px;
      margin-bottom: 8px;
    }
  }
}
.start-screen__tile--explorer {
  background-color: $explorer-color;
}
.start-screen__tile--mail {
  background-color: $mail-color;
}
.start-screen__tile--notepad {
  background-color: $notepad-color;
}


.full-textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  width: 100%;
  height: 100%;
}

JS

              
                $(window).load(function() {
  var $container = $('.start-screen');

  $container.masonry({
    itemSelector: '.masonry-item',
    columnWidth: 128
  });
  
  
  /*$container.sortable({
    items: '.start-screen__tile',
    start: function(e, ui) {
      ui.item.removeClass('masonry-item');
      $container.masonry('reloadItems');
      
      console.log('start drag');
    },
    change: function(e, ui) {
     $container.masonry('reload');
    },
    stop: function(e, ui) {
      ui.item.addClass('masonry-item');
      $container.masonry('reload');
      
      console.log('stop drag');
    }
  });
  $container.disableSelection();*/
  
  
  $('.start-menu').hide();
});

$(function() {
  //$('.start-screen-scroll').jScrollPane();
});

function resizeStart() {
    var startWidth = $('.start-screen').outerWidth();
    var startRound = Math.ceil(startWidth / 128.0) * 128;
  
  console.log('original: ' + startWidth);
  console.log('rounded: ' + startRound);
    
    $('.start-screen').css({
      'width' : startRound
    });
}

//$(window).load(resizeStart);
//$(window).resize(resizeStart);



$(function() {
  var zIndex = 1;

  var fullHeight = $(window).height() - 48,
      fullWidth  = $(window).width();
 
  
  $(window).resize(function() {
    fullHeight = $(window).height();
    fullWidth = $(window).width();
  });
  
  $(function() {
    $('.window:visible').each(function() {
      var appName = $(this).data('window');
      
      $('.taskbar__item[data-window="' + appName + '"]').addClass('taskbar__item--open');
    });
  });
  
  $(function() {
    var initialActive = $('.window').first();
    var appName = $(initialActive).data('window');
    
   $(initialActive).addClass('window--active').css({'z-index' : zIndex++});
   $('.taskbar__item[data-window="' + appName + '"]').addClass('taskbar__item--active');
  });

  
  $('.window').click(function() {
    $('.window').removeClass('window--active');
    
    $(this).addClass('window--active');
    $(this).css({'z-index' : zIndex++});
  });
  
  $('.window').resizable({
    stop: function() {
     var initialHeight = $(this).height(),
     initialWidth = $(this).width(),
     initialTop = $(this).position().top,
     initialLeft = $(this).position().left; }
   });

  $('.window').draggable({    
    handle: '.window__titlebar',
    stop: function() {
    var initialHeight = $(this).height(),
        initialWidth = $(this).width(),
        initialTop = $(this).position().top,
        initialLeft = $(this).position().left; 
    },
    start: function(event, ui) {
      $('.window').removeClass('window--active');
      
      $(this).addClass('window--active');
      $(this).css({'z-index' : zIndex++});

      if ( $(this).hasClass('window--maximized') ) {
        $(this).removeClass('window--maximized');
        
        $(this).css({ 'height' : initialHeight,
                      'width'  : initialWidth,
                      'top'    : 0,
                      'left'   : '50%' });                   
      }            
    }
  });

  function openApp(e) {
    var appName = $(this).data('window');
    var targetWindow = $('.window[data-window="' + appName + '"]');
    var targetTaskbar = $('.taskbar__item[data-window="' + appName + '"]');
    
    e.preventDefault();
    $('.taskbar__item').removeClass('taskbar__item--active');
    
    if ( targetWindow.is(':visible') ) {
      if ( targetWindow.hasClass('window--active') ) {
        $(targetWindow).toggleClass('window--minimized');

        if ( !targetWindow.hasClass('window--minimized') ) {
          var initialHeight = $(targetWindow).height(),
               initialWidth = $(targetWindow).width(),
               initialTop = $(targetWindow).position().top,
               initialLeft = $(targetWindow).position().left; 
          
          $('.window').removeClass('window--active');

         $(targetWindow).addClass('window--active').css({ 
            'z-index' : zIndex++
          });
          
          $(targetTaskbar).addClass('taskbar__item--active');
        }
      } else {
        $('.window').removeClass('window--active');
        $(targetWindow).addClass('window--active').css({'z-index' : zIndex++});
        
        $(targetTaskbar).addClass('taskbar__item--active');
      }
    } else {
      $('.window').removeClass('window--active');
      
      $('.window[data-window="' + appName + '"]').fadeIn().addClass('window--active').css({ 'z-index' : zIndex++ });
      
      setTimeout(function() {
        $('.window[data-window="' + appName + '"]').removeClass('window--opening');
      }, 0);
      
      $(targetTaskbar).addClass('taskbar__item--active').addClass('taskbar__item--open');
    } 
  }
  
  $('.taskbar__item').click(openApp);
  $('.start-menu__recent li a').click(openApp);
  $('.start-screen__tile').click(openApp);

  
  
  
  
  
  $('.window__controls').each(function() {
    var parentWindow = $(this).closest('.window'); 
    
    $(this).find('a').click(function(e) {
      e.preventDefault();
    });
    
    $(this).find('.window__icon').click(function(e) {
      $(this).siblings('.window__menutoggle').trigger('click');
    });
    
    $(this).find('.window__menutoggle').click(function(e) {
      $(parentWindow).find('.window__menu').fadeToggle(100).toggleClass('window__menu--open');
      $(this).toggleClass('window__menutoggle--open');
    });
    
    $(this).find('.window__close').click(function(e) {
      $(parentWindow).addClass('window--closing');
      
      setTimeout(function() {             $(parentWindow).hide().removeClass('window--closing').addClass('window--opening');
      }, 500);
      
      var appName = $(parentWindow).data('window');
      
      $('.taskbar__item[data-window="' + appName + '"]').removeClass('taskbar__item--open taskbar__item--active');
    });
    
    $(this).find('.window__minimize').click(function(e) {
      $(parentWindow).addClass('window--minimized');
    });
    
    $(this).find('.window__maximize').click(function(e) {

      $(parentWindow).toggleClass('window--maximized');

      if ( !$(parentWindow).hasClass('window--maximized') ) {
        $(parentWindow).css({ 'height' : initialHeight,
                              'width'  : initialWidth,
                              'top'    : initialTop,
                              'left'   : initialLeft });
      } else {
        initialHeight = $(parentWindow).height();
        initialWidth = $(parentWindow).width();
        initialTop = $(parentWindow).position().top;
        initialLeft = $(parentWindow).position().left;

        $(parentWindow).css({ 'height' : fullHeight,
                              'width'  : fullWidth,
                              'top'    : 0,
                              'left'   : 0 });
      }
    });
  });
}); 


// Unfocus windows when desktop is clicked
$('.desktop').click(function(e) {
  if ( $('.desktop').has(e.target).length === 0 ) {
  $('.window').removeClass('window--active');
  }
});


// Active taskbar icons 
$(function() {
  
});




$(function() {
  $('.side__list ul').each(function() {
    if ( $(this).find('ul').is(':visible') ) {
      $(this).children('li').addClass('side__list--open');
    }
  });
});



$(function() {
  $('.side__list li').each(function() {
    if ( $(this).children('ul').length ) {
      //$(this).addClass('list__sublist');
      $(this).children('a').append('<span class="list__toggle"></span>');
      
      
    }
    
    if ( $(this).children('ul').is(':visible') ) {
      $(this).addClass('side__list--open');
    }
  });
});

$(document).on('click', '.list__toggle',  function() {

 $(this).closest('li').children('ul').animate({
  'height' : 'toggle',
  'opacity' : 'toggle'
}, 250);

 $(this).closest('li').toggleClass('side__list--open');


});




function toggleStart(e) {
  $('.start-menu-fade').fadeToggle(500);
  $('.start-menu').fadeToggle(250).toggleClass('start-menu--open');
  $('.taskbar__item--start').toggleClass('start--open');
}
$('.taskbar__item--start').click(toggleStart);
$('.start-menu__recent li a').click(toggleStart);

// Prevent "open" class on start
$(function() {
  $('.taskbar__item--start').click(function() {
    $(this).removeClass('taskbar__item--open taskbar__item--active');
  });
});


$(document).mouseup(function(e) {
    var start = $('.start-menu');
    var startToggle = $('.taskbar__item--start');


    if (start.is(':visible') && !startToggle.is(e.target) && startToggle.has(e.target).length === 0 && !start.is(e.target) && start.has(e.target).length === 0 ) {
      toggleStart();
      //alert('clicked outside start');
    }
  
  

});




// Current time 
$(function() {
  var a_p = "";
  var d = new Date();

  var curr_hour = d.getHours();

  if (curr_hour < 12)
     {
     a_p = "AM";
     }
  else
     {
     a_p = "PM";
     }
  if (curr_hour == 0)
     {
     curr_hour = 12;
     }
  if (curr_hour > 12)
     {
     curr_hour = curr_hour - 12;
     }

  var curr_min = d.getMinutes();
  
  if ( curr_min < 10 ) {
    curr_min = '0' + curr_min;
  }

  $('.time').html(curr_hour + ':' + curr_min + ' ' + a_p);
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions