oleg
/
Puppertino
mirror da https://github.com/codedgar/Puppertino.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
							<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home - Puppertino Framework</title>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <link rel="stylesheet" href="./index-assets/bootstrap-utilities.css">
    <link rel="stylesheet" href="./index-assets/bootstrap-grid.min.css">
    <meta
      name="description"
      content="Have you ever thought: Man, I would love a macOS based Framework? Fear not, Puppertino is here!"
    />
    <link rel="icon" type="image/png" href="landing-images/doggo.png" />
    <style type="text/css">
      @import url('https://rsms.me/inter/inter.css');
      html { font-family: 'Inter', sans-serif; }
      @supports (font-variation-settings: normal) {
        html { font-family: 'Inter var', sans-serif; }
      }

      :root {
        --text_color: #252525;
        --bg_page_color: #f5f5f5;
      }
      .p-dark-mode, [data-p-theme=darkmode]{
        --bg_page_color: #0e0e0e;
        --text_color: #f5f5f5;
      }
      body {
        margin: 0px;
        --font:  -apple-system, "Inter", sans-serif;
        background: var(--bg_page_color);
        transition: .5s ease;
      }

      h1,
      h2,
      h3,
      h4,
      a,
      p {
        font-family: -apple-system, "Inter", sans-serif;
        color: var(--text_color);
        transition: .5s ease;
      }

      h1{
        font-size: 70px;
        font-weight: 700;
        margin:0;
      }

      .main-cta{
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 80vh;
          background: url('./landing-images/Puppertino_Main_Image.jpg'), rgba(0,0,0,0.3);
          background-blend-mode: overlay;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: bottom center;
      }

      .main-cta h2{
        font-weight: 400;
        margin-bottom: 20px;
        font-size: 30px;
        color: #fff;
      }

      .main-cta img{
          margin-top: 100px;
      }
      
      .main-cta h1{
        color: #fff;
      }

      .p-link{
          text-decoration: none;
          
      }

      .mt-20px{
          margin-top: 10px;
          display: inline-block;
      }

      .mt-100{
        margin-top: 100px;
      }

      .mb-100{
        margin-bottom: 100px;
      }

      .b-25{
        border-radius: 25px;
      }

      .p-btn{
        font-size: 20px;
      }

      .learn-more-link{
          margin:0;
      }

      sup{
        font-size: 1.5rem;
      }

      .dark-mode-show{
        width:100%;
        height: 473px;
        position: relative;
        overflow: hidden;
      }

      .dark-mode-show::before{
        content: '';
        background: url('https://images.unsplash.com/photo-1518155317743-a8ff43ea6a5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top:0;
        bottom: 0;
        width: 100%;
        height: 100%;
      }

      .dark-mode-show::after{
        content: '';
        background: url('https://images.unsplash.com/photo-1609699068536-72103600c53e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top:0;
        bottom: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: .5s ease;
      }

      .p-dark-mode .dark-mode-show::after{
        opacity: 1;
      }

      .p-dark-mode .p-white-darkmode, [data-p-theme=darkmode] .p-white-darkmode{
        color: #fff;
      }

      #puppertino_speed{
        background: url('./landing-images/Fast Loading Puppertino.jpg'),  rgba(0,0,0,0.3);
        background-blend-mode: overlay;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center ;
        padding: 0px;
        padding: 100px 0px;
      }

      .puppertino-footer{
        background: var(--p-slate-700);
        color: #fff;
      }

      .puppertino-footer p,
      .puppertino-footer a{
        color: #fff;
      }

      p sup{
        font-size: 10px;
      }

      .p-form-switch span{
        border: 1px solid var(--p-bd-card);
      }

      .puppertino-footer .footer-links a{
        width: fit-content;
        margin-top: 5px;
      }

      @media (max-width: 768px){
        h1{
          font-size: 34px;
        }

        .container{
          padding: 0;
        }
        .row{
          margin-left:0;
          margin-right:0;
        }

        .dark-mode-show{
          height: 273px;
        }

        .main-cta{
          padding: 20px;
          height: 70vh;
          background-position: bottom right;
        }

        .mt-100{
          margin-top: 50px;
        }
        .main-cta h2{
          font-size: 20px;
        }

        .main-cta h1{
          font-size: 47px;
        }
      }

      @media (min-width: 1919px){
        .container{
          max-width: 1600px;
        }
      }

      .mw-780{
        max-width: 780px;
      }

    </style>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-176821843-1');
    </script>
  </head>
<body>
  <div class="main-cta">
    <div class="container">
      <div class="row">
          <div class="col-md-10">
            <div class="mw-780">
              <h1>Puppertino Siberian: <br> Frosted Precision</h1>
              <h2>A new era of web design, blending speed and style with Apple's human guidelines.</h2>
              <div class="d-block d-md-flex align-items-center text-center">
                <a href="https://github.com/codedgar/Puppertino" class="d-block d-md-inline-block p-btn p-prim-col">Download</a>
                <a href="examples" class="d-block d-md-inline-block p-link p-silver-100-color p-white-darkmode p-footnote learn-more-link">Read the docs</a>
              </div>
          </div>
          </div>
      </div>
    </div>
  </div>


    <div class="container mt-100">
      <div class="row align-items-center justify-content-around">
        <div class="col-md-5">
          <h1>All about Style<sup>(css)</sup> </h1>
          <p>Welcome to <strong>Puppertino Siberian</strong>, a CSS framework designed to bridge the gap between the web and native macOS apps, delivering stunning interfaces that blend seamlessly into Apple's design language.
            <br><br>
            With Puppertino, developers and designers can effortlessly craft pixel-perfect websites and apps that look and feel like native experiences on macOS. Its curated design system simplifies your workflow, allowing you to focus on functionality while giving you the freedom to personalize every element to fit your brand.
          </p>
        </div>
        <div class="col-md-5 mt-4 mt-md-0">
          <img class="w-100 b-25" src="https://images.unsplash.com/photo-1606818855637-f637cdb124b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="">
        </div>
      </div>
    </div>

    <div class="container mt-100">
      <div class="row align-items-center justify-content-around">
        <div class="col-md-5">
          <img class="w-100 b-25" src="https://images.unsplash.com/photo-1494947665470-20322015e3a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
        </div>
        <div class="col-md-5 mt-4 mt-md-0">
          <h1>It's Modular</h1>
          <p>
            With Puppertino Siberian, you’re in complete control. It’s designed to be fully modular, allowing you to import only the components you need. Don’t need the Layout CSS? Simply leave it out! Customize your app’s design with precision and efficiency, integrating only the styles that matter to your project.
            <br><br>
            By using only what’s essential, your app will load faster, perform better, and—most importantly—look incredible throughout the process. 
          </p>
        </div>
      </div>
    </div>

    <div class="container mt-100">
      <div class="row align-items-center justify-content-around"  id="darkmode-enter">
        <div class="col-md-5">
          <label class="p-form-switch toggles_dark_mode">
            <input type="checkbox">
            <span></span>
          </label>
          <h1>Dark Mode?<br> Of course.</h1>
          <p>Puppertino comes ready with theming options, offering both dark and light versions using pure CSS. This allows you to seamlessly reuse colors and elements across both themes.
            <br><br>
            Easily integrate dark mode into your websites and apps with Puppertino's built-in Dark Mode Manager. It includes features like tab synchronization, user preference detection, and more, making it effortless to enhance the user experience across different environments.
          </p>
        </div>
        <div class="col-md-5 mt-4 mt-md-0">
          <div class="dark-mode-show b-25"></div>
        </div>
      </div>
    </div>

    <div class="container-fluid mt-100 p-0">
      <div class="row m-0" id="puppertino_speed">
        <div class="col-md-5 offset-md-1">
          <h1 class="p-white-color">Your users won't see it coming</h1>
          <p class="p-white-color mt-4">Puppertino is built for speed. Like, really fast. Every line of CSS is carefully crafted to ensure maximum efficiency, so your website or app runs as smoothly as a Siberian Husky sprinting through the snow. Puppertino keeps your project fast and sleek, delivering stunning visuals without compromising performance.          </p>
        </div>
      </div>
    </div>

    <div class="container mt-100 mb-100">
      <div class="row align-items-center justify-content-center text-center">
        <div class="col-md-7">
          <h1>What are you waiting for? Let's get to it!</h1>
          <p class="mt-5">Husky references aside, Puppertino is the CSS framework that simplifies bringing that Apple-inspired style to your project. Updated monthly, it’s packed with everything you need to make your website or app look stunning from the get-go.</p>
          <div class="d-block d-md-flex align-items-center justify-content-center">
            <a href="https://github.com/codedgar/Puppertino" class="d-block d-md-inline-block p-btn p-prim-col">Download</a>
            <a href="examples" class="d-block d-md-inline-block p-link p-slate-700-color p-white-darkmode p-footnote learn-more-link">Read the docs</a>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid p-0 m-0">
      <div class="row m-0">
        <div class="puppertino-footer pt-5">
          <div class="container">
            <div class="row footer-links justify-content-around">
              <div class="col-md-3">
                <p><strong>The basics</strong></p>
                <a href="examples/getting-started.html" class="d-block">Getting Started</a>
                <a href="examples/buttons.html" class="d-block">Buttons</a>
                <a href="examples/forms.html" class="d-block">Forms</a>
              </div>
              <div class="col-md-3">
                <p><strong>Interactive Elements</strong></p>
                <a href="examples/modals.html" class="d-block">Modals</a>
                <a href="examples/tabs.html" class="d-block">Tabs</a>
                <a href="examples/actions.html" class="d-block">Actions</a>
                <a href="examples/segmented_controls.html" class="d-block">Segmented Controls</a>
              </div>
              <div class="col-md-3">
                <p><strong>Decorative Elements</strong></p>
                <a href="examples/layout.html" class="d-block">Layout</a>
                <a href="examples/icons.html" class="d-block">Icons</a>
                <a href="examples/shadows.html" class="d-block">Shadows & Blur</a>
                <a href="examples" class="d-block">View All</a>
              </div>
              <div class="col-md-3">
                <p><strong>Theming</strong></p>
                <a href="examples/colors.html" class="d-block">Colors</a>
                <a href="examples/dark_mode.html" class="d-block">Dark Mode</a>
                <a href="examples/theming.html" class="d-block">Theming</a>
                <a href="#" class="d-block">Advanced Theming</a>
              </div>
            </div>
          </div>
          <div class="text-center mt-5">
            <p>Puppertino is not associated in any way with Apple Inc. <sup>(But could be, hmu Apple)</sup></p>
            <p>Created by <a href="//codedgar.com" class="p-blueberry-100-color">Codedgar</a>.</p>
          </div>
        </div>
      </div>
    </div>
</body>
  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
  <script defer>

    document.querySelector('.toggles_dark_mode input').addEventListener('change',function(){
      puppertinoThemeMan.toggle();
    });

    puppertinoThemeMan.init({autoDetect: true});
    
    const isDarkActive = puppertinoThemeMan.isDarkThemeActive();
    console.log(isDarkActive);
    if(isDarkActive){
      document.querySelector('.toggles_dark_mode input').checked = true 
    }

   </script>
</html>