index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Kivy: Cross-platform Python Framework for GUI apps Development</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="description" content="Open source Python framework for rapid development of applications
        that make use of innovative user interfaces, such as multi-touch apps." />
<meta name="twitter:site" content="@kivyframework" />
<meta name="google-site-verification" content="kfZL1Qs64GvRmH9L944D8lbmb-aVuSSb-toeOEGTxPY" />

<meta property="og:title" content="Kivy: Cross-platform Python Framework for NUI" />
<meta property="og:description" content="Open source Python framework for rapid development of applications
        that make use of innovative user interfaces, such as multi-touch apps." />
<meta property="og:url" content="https://www.kivy.org/" />
<meta property="og:image" content="https://www.kivy.org/static/images/kivy-colorwheel-examples.jpg" />
<meta property="og:locale" content="en_US" />

<link rel="icon" href="./static/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="./static/images/favicon.ico" />
<link rel="stylesheet" href="./static/css/main.css?v=34237339-b1ff-4eaf-a3ea-2859d998352c" type="text/css" media="screen" />

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet" />
</head>
<body>
  <header class="fixed left-0 right-0 top-0 z-10">
    <div class="flex flex-wrap px-5 md:h-20 justify-between bg-[#202326] items-center text-white">
        <a class="h-12 md:w-auto my-2 shrink-0 " href="index.html">
            <img class="h-full" alt="Kivy logo" title="Kivy" src="./static/images/logo_kivy_white.png" />
        </a>
        <div class="flex items-center py-2 md:order-last">
            <a class="px-2" href="https://github.com/kivy">
                <img class="w-4 md:w-6 invert" src="./static/images/icons/github.svg" />
            </a>
            <a class="px-2" href="https://www.youtube.com/user/kivyframework">
                <img class="w-4 md:w-6 invert" src="./static/images/icons/youtube.svg" />
            </a>
            <a class="px-2" href="https://www.facebook.com/kivyframework">
                <img class="w-4 md:w-6 invert" src="./static/images/icons/facebook.svg" />
            </a>
            <a class="px-2" href="https://twitter.com/kivyframework">
                <img class="w-4 md:w-6 invert" src="./static/images/icons/twitter.svg" />
            </a>
            <a class="px-2" href="https://chat.kivy.org/" class="icon-discord">
                <img class="w-4 md:w-6 invert" src="./static/images/icons/discord.svg" />
            </a>
        </div>
        <div class="flex w-full md:w-auto items-center text-sm lg:text-lg py-2 md:ml-auto justify-center">
            <a class="px-2" href="https://www.kivy.org/doc/stable/">Docs</a>
            <a class="px-2" href="gallery.html">Gallery</a>
            <a class="px-2" href="about.html">About</a>
            <a class="px-2 whitespace-nowrap" href="#donate">Sponsor Us</a>
            <a class="px-2" href="https://www.kivy.org/planet">Blog</a>
        </div>
        <div class="hidden md:block h-full py-4 px-4">
            <div class="w-px h-full bg-slate-100"></div>
        </div>
    </div>
    <!-- Start: Announce header -->
    <div class="h-8 flex px-2 sm:px-5 justify-between bg-gradient-to-r from-sky-500 to-fuchsia-500 items-center">
        <p class="font-bold text-white text-sm whitespace-nowrap">
            Kivy 2.1.0 has been released!
        </p>
        <a href="https://github.com/kivy/kivy/releases/tag/2.1.0" class="bg-white rounded-lg text-xs sm:text-sm px-1 sm:px-2 py-0.5 text-bold whitespace-nowrap">
            LEARN MORE
        </a>
    </div>
    <!-- End: Announce header-->
</header>
  <div class="mt-32 container py-4 px-5 sm:px-10 md:mx-auto">
    <div class="flex flex-wrap">
      <div class="w-full lg:w-1/2">
        <h1>
          <span class="text-6xl font-extrabold">Kivy:</span>
          <p class="text-4xl font-extrabold">
            The Open Source Python App development Framework.
          </p>
        </h1>
        <h2 class="text-lg font-bold mt-2">
          Build and distribute beautiful Python cross-platform GUI apps with ease.
        </h2>
        <p class="text-sm my-3">
          Kivy runs on Android, iOS, Linux, macOS and Windows.
        </p>
        <div class="flex">
          <img class="h-5" src="./static/images/icons/scale-balanced.svg" />
          <p class="px-3">MIT License</p>
          <img class="h-5" src="./static/images/icons/star.svg" />
          <p class="px-3">14.8K Stars</p>
        </div>
      </div>
      <div class="hidden lg:flex lg:w-1/2">
        <img class="object-cover h-full w-full rounded-lg" src="./static/images/kivy-colorwheel-examples.jpg">
      </div>
      <div class="w-full flex justify-center py-6">
        <a href="https://kivy.org/doc/stable/gettingstarted/intro.html"
          class="px-6 py-4 bg-gradient-to-br from-sky-500 to-fuchsia-500 rounded-md text-3xl font-bold text-white">
          Get started!
        </a>
      </div>
    </div>
  </div>
  <div class="bg-[#f8f8f8]">
    <div class="container mx-auto py-10 px-2">
      <p class="text-3xl md:text-4xl font-light text-center pb-5">
        <b>Kivy</b> has been built to be <b>easy to use</b>,
        <b>cross-platform</b> and <b>fast</b>.
      </p>
      <p class="text-lg md:text-xl font-light text-center">
        With a <b>single codebase</b>, you will be able to deploy apps on
        <b>Windows</b>, <b>Linux</b>, <b>macOS</b>, <b>iOS</b> and <b>Android</b>.
      </p>
    </div>
  </div>
  <div class="bg-[#c8c8c8] h-20 sm:h-28 md:h-36 lg:h-60">
    <picture>
      <source type="image/webp" srcset="./static/images/homepage-fast.webp">
      <img src="./static/images/homepage-fast.jpg" class="object-cover h-full w-full">
    </picture>
  </div>
  <div class="bg-[#f8f8f8]">
    <div class="container mx-auto py-10 flex items-center flex-wrap">
      <div class="w-full sm:w-2/3 sm:pr-10 px-2">
        <p class="text-3xl md:text-4xl font-light text-center pb-5">
          <b>Business Friendly</b>
        </p>
        <p class="text-lg md:text-xl font-light text-center">
          <b>Kivy</b> is released under the <b>MIT License</b> and is
          <b>100%</b> free to use and is professionally developed, backed and
          mantained.<br /><br />
          <b>Companies</b> and <b>individual</b> are using Kivy for their
          projects <b>everyday</b>.
        </p>
      </div>
      <div class="w-full sm:w-1/3 pt-4 sm:pt-0">
        <picture>
          <source type="image/webp" srcset="./static/images/homepage-company.webp">
          <img src="./static/images/homepage-company.jpg" class="object-cover rounded-lg h-40 sm:h-80 w-full">
        </picture>
      </div>
    </div>
  </div>

  <div class="container mx-auto">
    <p class="text-3xl font-light text-center pt-10 pb-5 px-2">
      <b>Kivy</b> is kept <b>open source</b> thanks to its <b>contributors</b> and
      <b>backers</b>.
    </p>
    <div id="opencollective_app" class="flex px-5 flex-wrap justify-center">
      <p class="w-full text-xl font-light text-center pb-5">
        {{organizations.length}} <b>organizations</b> are <b>supporting Kivy</b>
      </p>
      <a v-bind:href="organization.profile" class="w-1/2 md:w-1/3 lg:w-1/5 p-2 xl:p-5"
        v-for="organization in organizations.slice(0, 5)">
        <div class="bg-[#e8e8e8] shadow-xl rounded-lg w-full p-4">
          <div class="flex justify-center">
            <img class="w-24 h-24" v-bind:src="organization.account.imageUrl" />
          </div>
          <div class="flex justify-center items-center h-14">
            <p class="text-center text-lg font-bold">
              {{ organization.account.name }}
            </p>
          </div>
          <div class="flex justify-center h-10 items-center">
            <p class="text-lg text-lime-600 uppercase">
              <span v-if="organization.tier">{{organization.tier.name}}</span>
            </p>
          </div>
          <div class="flex flex-col justify-center items-center">
            <p class="text-2xl">
              ${{organization.totalDonations.value}}
            </p>
            <p class="text-xs">
              Amount contributed
            </p>
          </div>
        </div>
      </a>
      <div class="w-full flex text-center justify-end">
        <a href="https://opencollective.com/kivy"
          class="text-sm md:text-base font-light md:pr-2 xl:pr-5 pt-3 pb-5 underline">
          <b>See all the {{organizations.length}} organizations supporting Kivy on OpenCollective</b>
        </a>
      </div>

      <p class="w-full text-xl font-light text-center pt-10 pb-5">
        {{individuals.length}} <b>individuals</b> are <b>supporting Kivy</b>
      </p>
      <a v-bind:href="'https://www.opencollective.com/' + individual.account.slug"
        v-bind:title="individual.account.name + ', Total contributed: ' + individual.totalDonations.value + ' ' + individual.totalDonations.currency"
        v-for="individual in individuals">
        <div class="bg-[#e8e8e8] w-8 h-8 rounded-full flex justify-center items-center">
          <img class="h-full w-full object-cover rounded-full" v-bind:src="individual.account.imageUrl" />
        </div>
      </a>
      <div class="w-full flex text-center justify-end">
        <a href="https://opencollective.com/kivy"
          class="text-sm md:text-base font-light md:pr-2 xl:pr-5 pt-3 pb-5 underline">
          <b>See all the {{individuals.length}} individuals supporting Kivy on OpenCollective</b>
        </a>
      </div>
    </div>
  </div>

  <div id="donate" class="bg-[#f8f8f8]">
    <div class="container mx-auto flex px-5 sm:px-10 py-10 md:mx-auto items-center flex-wrap">
        <div class="flex flex-col w-full sm:w-2/3 px-5">
            <p class="text-3xl md:text-4xl font-light text-center pb-5">
                <b>Start supporting Kivy from $5</b>
            </p>
            <p class="text-lg md:text-xl font-light text-center">
                <b>Kivy</b> is a <b>free</b> and <b>open source</b> software and is <b>mantained by the
                    community</b>.<br>
                Sometimes, a small contribution, could help to keep the wheel spinning flawlessly.<br>
            </p>
            <div class="flex flex-wrap justify-center">
                <a href="https://opencollective.com/kivy/contribute/backer-6729/checkout"
                    class="m-4 flex flex-col justify-center items-center text-center rounded-lg p-4 bg-sky-500 text-xl text-white">
                    <p>Support Kivy as a <b>Backer</b></p>
                    <p class="text-base">(Starts from $5/mo)</p>
                </a>
                <a href="https://opencollective.com/kivy/contribute/sponsor-6730/checkout"
                    class="m-4 flex flex-col justify-center items-center text-center rounded-lg p-4 bg-fuchsia-500  text-xl text-white">
                    <p>Support Kivy as a <b>Sponsor</b></p>
                    <p class="text-base">(Starts from $100/mo)</p>
                </a>
            </div>
        </div>
        <div class="w-full sm:w-1/3 pt-4 sm:pt-0">
            <picture>
                <source type="image/webp" srcset="./static/images/contribute_coffee.jpg">
                <img src="./static/images/contribute_coffee.jpg" class="object-cover rounded-xl h-40 sm:h-80 w-full">
            </picture>
        </div>
    </div>
</div>
  <div class="bg-[#e9e9e9] flex flex-wrap">
    <div class="w-full sm:w-1/3">
        <picture>
            <source type="image/webp" srcset="./static/images/help.webp">
            <img src="./static/images/help.jpg" class="object-cover h-40 sm:h-80 w-full">
        </picture>
    </div>
    <div class="w-full sm:w-2/3 py-8">
        <p class="text-3xl md:text-4xl font-light text-center pb-1">
            <b>Need help?</b>
        </p>
        <p class="text-lg md:text-xl font-light text-center pb-5">
            The Kivy community will love ❤️ to help.
        </p>
        <div class="flex flex-wrap justify-center">
            <a href="https://chat.kivy.org"
                class="m-4 flex w-full md:w-1/2 justify-center items-center text-center rounded-lg p-4 bg-[#7289DA] text-xl text-white">
                <span class="px-2">Join us on Discord</span>
                <img class="invert h-8" src="./static/images/icons/discord.svg" />
            </a>
            <a href="https://groups.google.com/g/kivy-users"
                class="m-4 flex w-full md:w-1/2 justify-center items-center text-center rounded-lg p-4 bg-amber-400 text-xl text-black">
                <span class="px-2">Join us on kivy-users group</span>
                <img class="h-8" src="./static/images/icons/envelope.svg" />
            </a>
        </div>

    </div>
</div>
  <div class="bg-[#202326] flex items-center justify-between px-5 h-20 py-5">
    <div class="flex flex-col w-2/3">
        <p class="text-white text-xs sm:text-sm py-1">
            <a href="https://github.com/kivy"><img class="h-3 sm:h-5 inline invert pr-2"
                    src="./static/images/icons/github.svg" />Source
                code hosted on Github</a>
        </p>
        <p class="text-white text-xs sm:text-sm py-1">
            <a href="https://www.kivy.org/docs/contact.html"><img class="h-3 sm:h-5 inline invert pr-2"
                    src="./static/images/icons/envelope.svg" />Contact us</a>
        </p>
    </div>
    <a class="w-1/3 h-full flex justify-end" href="https://m.do.co/c/bba66856dc94" target="_blank">
        <img class="h-full object-contain" src="./static/images/DO_Badge.png" />
    </a>
</div>

  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./static/js/opencollective_app.js"></script>
  <script>
    
  </script>
</body>

</html>