webui-dev/webui
1
1
Fork 0
mirror of https://github.com/webui-dev/webui.git synced 2024-11-05 01:01:52 +03:00
Code Issues Packages Projects Releases Wiki Activity
d870c5b2cb
webui/website/index.html
Hassan DRAGA 5fc7fb2455 v2.0.2 With full Linux support
2022-10-24 22:35:05 -04:00

283 lines
17 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebUI</title>
<meta name="description" content="Use web browser as GUI">
<meta name="keywords" content="ui, gui, webui, browser">
<meta name="author" content="Hassan Draga">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="./data/tailwind.min.css">
<link href="./data/main.css" rel="stylesheet">
<style>
.gradient {
background: linear-gradient(90deg, #4b2669ff 0%, #a486bcff 100%);
}
.gradient-button {
background: linear-gradient(90deg, #4b2669ff 0%, rgb(88, 47, 122) 100%);
}
.st0 {
fill: #A486BC;
}
.st1 {
fill: #4B2669;
}
.st2 {
fill: #713E90;
}
.text-white .st3 {
fill: #FFFFFF;
}
.text-gray-800 .st3 {
fill: #000000;
}
</style>
</head>
<body class="leading-normal tracking-normal text-white gradient" style="font-family: Source Sans Pro, sans-serif;">
<!--Nav-->
<nav id="header" class="fixed w-full z-30 top-0 text-white">
<div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2">
<div class="pl-4 flex items-center">
<a class="toggleColour text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="https://webui.me/">
WebUI
</a>
</div>
<div class="block lg:hidden pr-4">
<button id="nav-toggle" class="flex items-center p-1 text-white-800">
<svg class="fill-current h-6 w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</button>
</div>
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 lg:bg-transparent text-black p-4 lg:p-0 z-20 bg-gray-100" id="nav-content">
<ul class="list-reset lg:flex justify-end flex-1 items-center my-4">
<li class="mr-3">
<a class="inline-block py-2 px-4 text-black no-underline" href="https://webui.me/">Home</a>
</li>
<li class="mr-3">
<a class="inline-block py-2 px-4 text-black no-underline" href="#features">Features</a>
</li>
</ul>
<a href="#download" id="navAction" class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold mt-4 lg:mt-0 py-2 px-4 shadow opacity-75">Download</a>
</div>
</div>
</nav>
<!--Hero-->
<div class="relative pt-24 main-page-hero" style="z-index: 1">
<div class="container px-3 mx-auto flex flex-wrap flex-col md:flex-row items-center">
<!--Left Col-->
<div class="flex flex-col w-full md:w-2/5 justify-center items-start text-center md:text-left">
<h1 class="my-4 text-5xl font-bold leading-tight">Use any web browser as GUI. With your preferred language in the backend</h1>
<p class="leading-normal text-2xl mb-8">Portable, Lightweight, And full OS API's access</p>
<!-- <p class="tracking-loose w-full">Written in Pure C, Independent, Lightweight and small memory footprint.</p>-->
<a href="#download" class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold mt-4 lg:mt-0 py-2 px-4 shadow opacity-75">Download</a>
</div>
<!--Right Col-->
<div class="w-full md:w-3/5 py-6 text-right" style="text-align:right;">
<div><img src="./data/webui2.png"></div>
</div>
</div>
</div>
<!-- Waves -->
<div class="relative -mt-12 lg:-mt-24">
<svg viewBox="0 0 1428 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
<path d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z" opacity="0.100000001"></path>
<path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" id="Path-4" opacity="0.200000003"></path>
</g>
<g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path d="M0.457,34.035 C57.086,53.198 98.208,65.809 123.822,71.865 C181.454,85.495 234.295,90.29 272.033,93.459 C311.355,96.759 396.635,95.801 461.025,91.663 C486.76,90.01 518.727,86.372 556.926,80.752 C595.747,74.596 622.372,70.008 636.799,66.991 C663.913,61.324 712.501,49.503 727.605,46.128 C780.47,34.317 818.839,22.532 856.324,15.904 C922.689,4.169 955.676,2.522 1011.185,0.432 C1060.705,1.477 1097.39,3.129 1121.236,5.387 C1161.703,9.219 1208.621,17.821 1235.4,22.304 C1285.855,30.748 1354.351,47.432 1440.886,72.354 L1441.191,104.352 L1.121,104.031 L0.457,34.035 Z"></path>
</g>
</g>
</svg>
</div>
<section class="bg-white border-b py-8">
<div class="container max-w-5xl mx-auto m-8">
<h1 id="features" class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">Features</h1>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">Multi-language Backend</h3>
<p class="text-gray-600 mb-8" style="text-align: justify">You can easily embed and use the WebUI library in your project using your preferred programming languages, which gives you straightforward and easy-to-use APIs to create UI using web technologies.</p>
<p class="text-gray-600 mb-8" style="text-align: justify">Think of WebUI like a WebView controller, but instead of embedding the WebView controller in your program, which makes it big, and non-portable as it needs the WebView runtimes. Instead, using WebUI, you use a tiny static/dynamic library to run any installed web browser and use it as GUI, making your program small, fast and portable. All it needs is a web browser.</p>
<p class="text-gray-600 mb-8" style="text-align: justify">WebUI support many popular programming languages, like C, C++, Python, Golang, Rust, JavaScript, TypeScript, and more...</p>
</div>
<div class="w-full sm:w-1/2 p-6 text-right" style="text-align:right;">
<div style="text-align:right;"><img src="./data/webui_multi_languages.png"></div>
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row">
<div class="w-full sm:w-1/2 p-6 mt-6 text-left" style="text-align:left;">
<div style="text-align:left;"><img src="./data/webui_multi_browsers.png"></div>
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">Multi-browser Frontend</h3>
<p class="text-gray-600 mb-8">WebUI support many different web browsers, like Chrome, Firefox, Edge, Safari, and more..., Additionally, you can also use any other tool or an external program as a web browser by a simple function call. That means your program will always run on all machines, as all it needs is an installed web browser.</p>
</div>
</div>
</div>
</div>
</section>
<section id="download" class="bg-white border-b py-8">
<div class="container mx-auto flex flex-wrap pt-4 pb-12">
<h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">Download</h1>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
<div class="gradient">
<img class="border-gray-200 border mb-4" src="./data/windows.png">
</div>
<div class="w-full font-bold text-2xl text-gray-800 px-6">Windows</div>
<p class="text-gray-800 text-base px-6 mb-5">
This download include the WebUI prebuilt Windows x64 Static & Dynamic lib binaries.<br><br>
- MSVC 2019 (v142)<br>
- MSVC 2022 (v143)<br>
- GCC <a class="underline" href="https://jmeubank.github.io/tdm-gcc/" target="_blank">TDM</a>(v10.3.0)<br>
- TCC <a class="underline" href="https://github.com/TinyCC/tinycc" target="_blank">MobDev</a>(v0.9.27)<br>
</p>
</div>
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow p-6">
<div class="flex items-center justify-center">
<a href="#" target="_blank" class="mx-auto lg:mx-0 hover:underline gradient-button text-white font-bold my-6 py-2 px-4 shadow-lg no-underline">
Download Windows WebUI v2.0.2
</a>
</div>
</div>
</div>
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
<div class="gradient">
<img class="border-gray-200 border mb-4" src="./data/linux.png">
</div>
<div class="w-full font-bold text-2xl text-gray-800 px-6">Linux</div>
<p class="text-gray-800 text-base px-6 mb-5">
This download include the WebUI prebuilt Linux x64 Static & Dynamic lib binaries.<br><br>
- GCC<br>
- TCC<br>
- Clang<br>
</p>
</div>
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow p-6">
<div class="flex items-center justify-center">
<a href="#" target="_blank" class="mx-auto lg:mx-0 hover:underline gradient-button text-white font-bold my-6 py-2 px-4 shadow-lg no-underline">
Download Linux WebUI v2.0.2
</a>
</div>
</div>
</div>
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
<div class="gradient">
<img class="border-gray-200 border mb-4" src="./data/macos.png">
</div>
<div class="w-full font-bold text-2xl text-gray-800 px-6">macOS</div>
<p class="text-gray-800 text-base px-6 mb-5">
This download include the WebUI prebuilt macOS Static & Dynamic lib binaries.<br><br>
- Clang<br>
</p>
</div>
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow p-6">
<div class="flex items-center justify-center">
<a href="#" target="_blank" class="mx-auto lg:mx-0 hover:underline gradient-button text-white font-bold my-6 py-2 px-4 shadow-lg no-underline">
Coming Soon
</a>
</div>
</div>
</div>
</div>
</section>
<svg class="wave-top" viewBox="0 0 1439 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
<g class="wave" fill="#f8fafc">
<path d="M1440,84 C1383.555,64.3 1342.555,51.3 1317,45 C1259.5,30.824 1206.707,25.526 1169,22 C1129.711,18.326 1044.426,18.475 980,22 C954.25,23.409 922.25,26.742 884,32 C845.122,37.787 818.455,42.121 804,45 C776.833,50.41 728.136,61.77 713,65 C660.023,76.309 621.544,87.729 584,94 C517.525,105.104 484.525,106.438 429,108 C379.49,106.484 342.823,104.484 319,102 C278.571,97.783 231.737,88.736 205,84 C154.629,75.076 86.296,57.743 0,32 L0,0 L1440,0 L1440,84 Z"></path>
</g>
<g transform="translate(1.000000, 15.000000)" fill="#FFFFFF">
<g transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) ">
<path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
<path d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z" opacity="0.100000001"></path>
<path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" opacity="0.200000003"></path>
</g>
</g>
</g>
</g>
</svg>
<section id="contact" class="container mx-auto text-center pt-6 mb-12">
<h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-white">Open Source</h1>
<div class="w-full mb-4">
<div class="h-1 mx-auto bg-white w-1/6 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<h3 class="m-4 text-3xl leading-tight">Contribute to the WebUI project using your preferred programming language!</h3>
</section>
<section class="container mx-auto mb-12 text-center">
<p class="text-center">
WebUI is written in pure C, and the wrappers are written in multiple different language.<br>
This means you can contribute to the WebUI project using your main programming language, we need your expertise.<br>
<a class="underline" href="https://github.com/alifcommunity/webui" target="_blank">GitHub</a><br>
</p>
</section>
<footer class="bg-white">
<div class="container mx-auto">
<div class="w-full flex flex-col md:flex-row p-4 py-6 text-gray-500">
<p>
&copy;2022 <a href="https://github.com/hassandraga" class="text-gray-500">Hassan Draga</a>. <br>
Maintained by <a href="https://github.com/alifcommunity" class="text-gray-500">Alif Community</a>.
</p>
</div>
</div>
</footer>
<script>
var s = document.getElementById("header"),
c = document.getElementById("nav-content"),
u = document.getElementById("navAction"),
l = (document.getElementById("brandname"), document.querySelectorAll(".toggleColour")),
h = function() {
s.classList.add("bg-white"), u.classList.remove("bg-white"), u.classList.add("gradient-button"), u.classList.remove("text-gray-800"), u.classList.add("text-white");
for (var e = 0; e < l.length; e++) l[e].classList.add("text-gray-800"), l[e].classList.remove("text-white");
s.classList.add("shadow"), c.classList.remove("bg-gray-100"), c.classList.add("bg-white"), v.classList.remove("text-white-800"), v.classList.add("text-gray-900")
},
f = function() {
window.scrollY >10 ? h() : function() {
s.classList.remove("bg-white"), u.classList.remove("gradient-button"), u.classList.add("bg-white"), u.classList.remove("text-white"), u.classList.add("text-gray-800");
for (var e = 0; e < l.length; e++) l[e].classList.add("text-white"), l[e].classList.remove("text-gray-800");
s.classList.remove("shadow"), c.classList.remove("bg-white"), c.classList.add("bg-gray-100"), v.classList.remove("text-gray-900"), v.classList.add("text-white-800")
}()
};
window.addEventListener("load", (function() {
document.querySelector(".main-page-hero") ? (document.addEventListener("scroll", (function() {
f()
})), f()) : h()
}));
var d = document.getElementById("nav-content"),
v = document.getElementById("nav-toggle");
function p(e, t) {
for (; e.parentNode; ) {
if (e == t) return !0;
e = e.parentNode;
}
return !1;
}
(document.onclick = function (e) {
var t = (e && e.target) || (event && event.srcElement);
p(t, d) || (p(t, v) && d.classList.contains("hidden") ? d.classList.remove("hidden") : d.classList.add("hidden"));
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink