DEV Community

Clément Gaudinière
Clément Gaudinière

Posted on • Edited on

Mac window in HTML CSS and jQuery

#webdev #html #css #javascript

The macOs system, however, is one of the most popular operating systems on the design side. Today, I propose you to create a MacOs window thanks to the PUG (language to compile in HTML), the SCSS (language to compile in CSS), and the famous javascript framework: jQuery.

Here you can see an image of the final rendering:
Alt Text

The code :

Else, you can copy this code in a HTML document :

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Mac window</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <style>
      body {
        padding: 0px;
        margin: 0px;
      }

      #gradient {
        width: 100%;
        height: 150%;
        padding: 0px;
        margin: 0px;
      }

      .hidden {
        opacity: 0;
        display: none;
      }

      .contentMac {
        display: none;
      }
      .contentMac p {
        color: white;
      }
      .contentMac h1 {
        color: white;
      }

      .sectionMac {
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        text-align: center;
      }
      .sectionMac .contentMac h1 {
        font-family: " Helvetica Neue", helvetica, arial, sans-serif;
        margin: 0;
      }
      .sectionMac .openModal {
        display: inline-block;
        margin-top: 10px;
        border: solid #029173 2px;
        padding: 10px 20px;
        border-radius: 10px;
        transition: all 0.25s;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        color: white;
      }
      .sectionMac .openModal:hover {
        color: white;
        background: #03BF94;
        transition: all 0.25s;
      }
      .sectionMac.one {
        background: transparent;
      }

      .mac-window {
        border-radius: 5px;
        overflow: hidden;
        height: 100%;
        max-height: 80%;
        width: 100%;
        min-width: 400px;
        max-width: 90%;
        box-shadow: 0 15px 20px rgba(0, 0, 0, 0.25);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%) scale(0);
        opacity: 0;
        transition: all 0.25s;
      }
      .mac-window.active {
        transform: translateY(-50%) translateX(-50%) scale(1);
        opacity: 1;
      }
      .mac-window.minimize {
        top: 125%;
        transform: translateY(-50%) translateX(-50%) scale(1);
        opacity: 1;
        transition: all 0.5s;
      }
      .mac-window.minimize:hover {
        top: 120%;
        transition: all 0.5s;
      }
      .mac-window.maximize {
        height: 100%;
        max-height: 100%;
        width: 100%;
        max-width: 100%;
        transform: translateY(-50%) translateX(-50%) scale(1);
      }
      .mac-window .title-bar {
        background: #00000080;
        height: 20px;
        border-bottom: 1px solid #b4b4b4;
        width: 100%;
        overflow: hidden;
        clear: both;
      }
      .mac-window .title-bar .buttons {
        height: 100%;
        width: 51px;
        float: left;
        margin-left: 9px;
      }
      .mac-window .title-bar .buttons .close, .mac-window .title-bar .buttons .maximize, .mac-window .title-bar .buttons .minimize {
        float: left;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        margin-top: 5px;
        background: #fb4948;
        border: solid 1px rgba(214, 46, 48, 0.15);
        position: relative;
      }
      .mac-window .title-bar .buttons .close:before, .mac-window .title-bar .buttons .maximize:before, .mac-window .title-bar .buttons .minimize:before {
        content: "";
        position: absolute;
        height: 1px;
        width: 8px;
        background: #360000;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%) rotate(45deg);
        opacity: 0;
      }
      .mac-window .title-bar .buttons .close:after, .mac-window .title-bar .buttons .maximize:after, .mac-window .title-bar .buttons .minimize:after {
        content: "";
        position: absolute;
        height: 1px;
        width: 8px;
        background: #360000;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%) rotate(-45deg);
        opacity: 0;
      }
      .mac-window .title-bar .buttons .minimize {
        background: #fdb225;
        margin-left: 8.5px;
        border-color: rgba(213, 142, 27, 0.15);
        position: relative;
      }
      .mac-window .title-bar .buttons .minimize:before {
        content: "";
        position: absolute;
        height: 1px;
        width: 8px;
        background: #864502;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
      }
      .mac-window .title-bar .buttons .minimize:after {
        display: none;
      }
      .mac-window .title-bar .buttons .maximize {
        float: right;
        background: #2ac833;
        border-color: rgba(30, 159, 32, 0.15);
      }
      .mac-window .title-bar .buttons .maximize:before {
        width: 6px;
        height: 6px;
        background: #0b5401;
        transform: translateY(-50%) translateX(-50%);
        border: solid #2ac833 1px;
        border-radius: 2px;
      }
      .mac-window .title-bar .buttons .maximize:after {
        width: 10px;
        height: 2px;
        background: #2ac833;
        transform: translateY(-50%) translateX(-50%) rotate(45deg);
      }
      .mac-window .title-bar .buttons:hover .close:before, .mac-window .title-bar .buttons:hover .minimize:before, .mac-window .title-bar .buttons:hover .maximize:before {
        opacity: 1;
      }
      .mac-window .title-bar .buttons:hover .close:after, .mac-window .title-bar .buttons:hover .minimize:after, .mac-window .title-bar .buttons:hover .maximize:after {
        opacity: 1;
      }
      .mac-window .title-bar .title {
        overflow: hidden;
        height: 100%;
        text-align: center;
        font-family: " Helvetica Neue", helvetica, arial, sans-serif;
        line-height: 21px;
        font-size: 13px;
        font-weight: light;
        color: white;
      }
      .mac-window .window {
        background: rgba(4, 4, 4, 0.27);
        height: 100%;
        color: white;
        font-size: 1rem;
        text-align: justify;
        padding: 30px;
      }
    </style>
  </head>

  <body>
    <div id="gradient">
      <div class="sectionMac one">
        <div class="contentMac">
          <h1>Mac Window Module </h1>
          <p>This modal attempts to replicate the look and feel of Mac windows. <br/>It includes functioning buttons for closing, maximizing, and minimizing.<br/> It does not prevent interaction with the rest of the page.</p>
          <div class="openModal">Open Modal</div>
      </div>
      <div class="mac-window active">
        <div class="title-bar">
          <div class="buttons">
            <div class="close"></div>
            <div class="minimize"></div>
            <div class="maximize"></div>
          </div>
          <div class="title">NotePad</div>
        </div>
          <div class="window">&quot;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?&quot;    </div>
        </div>
      </div>
    </div>
      <script>
    // Gradient Background----------------------------------
    var colors = new Array(
      [62,35,255],
      [60,255,60],
      [255,35,98],
      [45,175,230],
      [255,0,255],
      [255,128,0]
    );

    var step = 0;
    //color table indices for:
    // current color left
    // next color left
    // current color right
    // next color right
    var colorIndices = [0,1,2,3];

    //transition speed
    var gradientSpeed = 0.002;

    function updateGradient()
    {

      if ( $===undefined ) return;

      var c0_0 = colors[colorIndices[0]];
      var c0_1 = colors[colorIndices[1]];
      var c1_0 = colors[colorIndices[2]];
      var c1_1 = colors[colorIndices[3]];

      var istep = 1 - step;
      var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
      var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
      var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
      var color1 = "rgb("+r1+","+g1+","+b1+")";

      var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
      var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
      var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
      var color2 = "rgb("+r2+","+g2+","+b2+")";

      $('#gradient').css({
      background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
      background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

      step += gradientSpeed;
      if ( step >= 1 ){
        step %= 1;
        colorIndices[0] = colorIndices[1];
        colorIndices[2] = colorIndices[3];

        //pick two new target color indices
        //do not pick the same as the current one
        colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
        colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
      }
    }
    setInterval(updateGradient,10);

    // Mac Window
    $(document).ready(function(){
      $('.openModal').click(function(){
        $('.mac-window').addClass('active');
        $('.contentMac').css("display","none");
      });
      $('.close').click(function(){
        $('.mac-window').removeClass('active');
        $('.mac-window').removeClass('maximize');
        $('.mac-window').removeClass('minimize');
        $('.contentMac').css("display","block");
      });
      $('.minimize').click(function(){
        $('.mac-window').toggleClass('minimize');
        $('.mac-window').removeClass('maximize');
      });
      $('.maximize').click(function(){
        $('.mac-window').toggleClass('maximize');
        $('.mac-window').removeClass('minimize');
      });
    });
  </script> 
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

satya_prakash profile image

A Beginner’s Guide to Component Testing with Playwright

satyaprakash behera -

gladiatorsbattle profile image

Building a 3D AR Profile Card with Real-Time Face Detection

Gladiators Battle -

estifanos_ameha_e94b23bd2 profile image

Express or NestJS? Choosing the Best Framework for Your Backend

Estifanos Ameha -

sergi_web3 profile image

Getting Started with Web3 Development: A Beginner’s Guide to Skills and Tools

Sergi Mamedov -