2025-01-17 20:48:36 +00:00
<!DOCTYPE html>
2025-02-17 07:04:19 +00:00
< html class = "no-js" lang = "en" > < head > < meta charset = "utf-8" / > < meta content = "width=device-width,initial-scale=1" name = "viewport" / > < meta content = "Manage WireGuard Peers and Interface using a beautiful and simple web UI." name = "description" / > < link href = "https://wgportal.org/master/" rel = "canonical" / > < link href = "documentation/overview/" rel = "next" / > < link href = "assets/images/favicon-large.png" rel = "icon" / > < meta content = "mkdocs-1.6.1, mkdocs-material-9.6.4" name = "generator" / > < title > WireGuard Portal - WireGuard Portal< / title > < link href = "assets/stylesheets/main.8608ea7d.min.css" rel = "stylesheet" / > < link href = "assets/stylesheets/palette.06af60db.min.css" rel = "stylesheet" / > < link href = "stylesheets/extra.css" rel = "stylesheet" / > < script > _ _md _scope = new URL ( "." , location ) , _ _md _hash = e => [ ... e ] . reduce ( ( ( e , _ ) => ( e << 5 ) - e + _ . charCodeAt ( 0 ) ) , 0 ) , _ _md _get = ( e , _ = localStorage , t = _ _md _scope ) => JSON . parse ( _ . getItem ( t . pathname + "." + e ) ) , _ _md _set = ( e , _ , t = localStorage , a = _ _md _scope ) => { try { t . setItem ( a . pathname + "." + e , JSON . stringify ( _ ) ) } catch ( e ) { } } < / script > < meta content = "website" property = "og:type" / > < meta content = "WireGuard Portal" property = "og:title" / > < meta content = "Manage WireGuard Peers and Interface using a beautiful and simple web UI." property = "og:description" / > < meta content = "https://wgportal.org/master/assets/images/social/index.png" property = "og:image" / > < meta content = "image/png" property = "og:image:type" / > < meta content = "1200" property = "og:image:width" / > < meta content = "630" property = "og:image:height" / > < meta content = "https://wgportal.org/master/" property = "og:url" / > < meta content = "summary_large_image" name = "twitter:card" / > < meta content = "WireGuard Portal" name = "twitter:title" / > < meta content = "Manage WireGuard Peers and Interface using a beautiful and simple web UI." name = "twitter:description" / > < meta content = "https://wgportal.org/master/assets/images/social/index.png" name = "twitter:image" / > < meta content = "WireGuard Portal" property = "og:title" / > < / head > < body data-md-color-accent = "indigo" data-md-color-primary = "white" data-md-color-scheme = "default" dir = "ltr" > < input autocomplete = "off" class = "md-toggle" data-md-toggle = "drawer" id = "__drawer" type = "checkbox" / > < input autocomplete = "off" class = "md-toggle" data-md-toggle = "search" id = "__search" type = "checkbox" / > < label class = "md-overlay" for = "__drawer" > < / label > < div data-md-component = "skip" > < / div > < div data-md-component = "announce" > < / div > < div data-md-color-scheme = "default" data-md-component = "outdated" hidden = "" > < / div > < header class = "md-header" data-md-component = "header" > < nav aria-label = "Header" class = "md-header__inner md-grid" > < a aria-label = "WireGuard Portal" class = "md-header__button md-logo" data-md-component = "logo" href = "." title = "WireGuard Portal" > < img alt = "logo" src = "assets/images/logo.svg" / > < / a > < label class = "md-header__button md-icon" for = "__drawer" > < svg viewbox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < path d = "M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" > < / path > < / svg > < / label > < div class = "md-header__title" data-md-component = "header-title" > < div class = "md-header__ellipsis" > < div class = "md-header__topic" > < span class = "md-ellipsis" > WireGuard Portal < / span > < / div > < div class = "md-header__topic" data-md-component = "header-topic" > < span class = "md-ellipsis" > WireGuard Portal < / span > < / div > < / div > < / div > < label class = "md-header__button md-icon" for = "__search" > < svg viewbox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < path d = "M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5" > < / path > < / svg > < / label > < div class = "md-search" data-md-component = "search" role = "dialog" > < label class = "md-search__overlay" for = "__search" > < / label > < div class = "md-search__inner" role = "search" > < form class = "md-search__form" name = "search" > < input aria-label = "Search" autocapitalize = "off" autocomplete = "off" autocorrect = "off" class = "md-search__input" data-md-component = "search-query" name = "query" placeholder = "Search" required = "" spellcheck = "false" type = "text" / > < label class = "md-search__icon md-ico
2024-11-28 15:54:59 +00:00
/* Apply box shadow on smaller screens that don't display tabs */
@media only screen and (max-width: 1220px) {
.md-header {
box-shadow: 0 0 .2rem rgba(0,0,0,.1),0 .2rem .4rem rgba(0,0,0,.2);
transition: color 250ms,background-color 250ms,box-shadow 250ms;
}
}
/* Hide main content for now */
.md-content {
display: none;
}
/* Hide table of contents */
@media screen and (min-width: 60em) {
.md-sidebar--secondary {
display: none;
}
}
/* Hide navigation */
@media screen and (min-width: 76.25em) {
.md-sidebar--primary {
display: none;
}
}
/* Get started button */
.md-typeset .md-button--primary {
color: var(--md-primary-fg-color);
background-color: var(--md-primary-bg-color);
border-color: var(--md-primary-bg-color);
}
.md-typeset .md-button--primary:hover {
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
border-color: var(--md-primary-bg-color);
}
.tx-hero {
max-width: 700px;
display: flex;
padding: .4rem;
margin: 0 auto;
text-align: center;
}
.tx-hero h1 {
font-weight: 700;
font-size: 38px;
line-height: 46px;
color: rgb(38, 38, 38);
}
.tx-hero p {
color: rgb(92, 92, 92);
font-weight: 400;
font-size: 20px;
line-height: 32px;
}
.tx-hero__image {
max-width: 1000px;
min-width: 600px;
width: 100%;
height: auto;
margin: 0 auto;
display: flex;
align-items: stretch;
}
.tx-hero__image img {
width: 100%;
height: 100%;
min-width: 0;
}
/* Secondary content styles */
.secondary-section {
background: rgb(245, 245, 245) none repeat scroll 0% 0%;
border-top: 1px solid rgb(222, 222, 222);
border-bottom: 1px solid rgb(222, 222, 222)
}
@media screen and (max-width: 1012px) {
.secondary-section {
display: block;
}
}
.secondary-section .g {
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px 40px;
max-width: 1280px;
}
.secondary-section .g .section {
font-size: 18px;
font-weight: 400;
line-height: 30px;
letter-spacing: normal;
padding: 88px 0px 116px;
}
.secondary-section .g .section.follow {
padding-top: 0px;
}
.secondary-section .g .section .component-wrapper {
display: flex;
-moz-box-align: center;
align-items: center;
}
@media screen and (max-width: 1012px) {
.secondary-section .g .section .component-wrapper {
display: block;
}
}
.secondary-section .g .section .component-wrapper h3 {
color: rgb(38, 38, 38);
font-size: 36px;
font-weight: 700;
line-height: 46px;
letter-spacing: normal;
margin-bottom: 12px;
}
.secondary-section .g .section .component-wrapper h4 {
color: rgb(38, 38, 38);
}
.secondary-section .g .section .component-wrapper p {
color: rgb(92, 92, 92);
font-size: 18px;
font-weight: 400;
line-height: 30px;
letter-spacing: normal;
margin-bottom: 16px;
}
.secondary-section .g .section .component-wrapper .image-wrapper {
margin-bottom: 12px;
overflow: hidden;
border-radius: 8px;
margin-top: 48px;
border: 1px solid rgb(222, 222, 222);
box-shadow: rgba(202, 202, 202, 0.15) 0px 0px 0px 6px;
max-width: 600px;
width: 100%;
height: auto;
margin: 0 auto;
display: flex;
align-items: stretch;
}
.image-wrapper img {
width: 100%;
height: 100%;
min-width: 0;
}
.secondary-section .g .section .component-wrapper .first-column {
padding-right: 100px;
flex: 0 1 auto;
height: auto;
width: 50%;
}
@media screen and (max-width: 1012px) {
.secondary-section .g .section .component-wrapper .first-column {
padding-right: 0px;
width: 100%;
margin-bottom: 32px;
}
}
.secondary-section .g .section .component-wrapper .second-column {
flex: 0 1 auto;
height: auto;
width: 50%;
}
@media screen and (max-width: 1012px) {
.secondary-section .g .section .component-wrapper .second-column {
width: 100%;
margin-bottom: 32px;
}
}
.secondary-section .g .section .component-wrapper .responsive-grid {
display: grid;
width: 100%;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
@media screen and (min-width: 64rem) {
.secondary-section .g .section .component-wrapper .responsive-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.secondary-section .g .section .component-wrapper .responsive-grid a.card-wrapper {
text-decoration: none;
transition: none;
background: none;
padding: 0;
}
.secondary-section .g .section .component-wrapper .responsive-grid .card {
position: relative;
background-color: #fff none repeat scroll 0% 0%;
padding: 1.5rem;
display: flex;
flex-direction: row;
-moz-box-align: center;
align-items: center;
height: 100%;
-moz-box-pack: start;
justify-content: flex-start;
box-shadow: rgba(0, 0, 0, 0.09) 0.3125rem 0.3125rem 0px -0.0625rem, rgba(0, 0, 0, 0.15) 0px 0.25rem 0.5rem 0px;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.secondary-section .g .section .component-wrapper .responsive-grid .card:hover {
box-shadow: rgba(0, 0, 0, 0.2) 0.3125rem 0.3125rem 0px -0.0625rem, rgba(0, 0, 0, 0.26) 0px 0.25rem 0.5rem 0px;
}
@media screen and (min-width: 75rem) {
.secondary-section .g .section .component-wrapper .responsive-grid .card {
padding: 2rem 2.5rem;
}
}
@media screen and (min-width: 36rem) {
.secondary-section .g .section .component-wrapper .responsive-grid .card {
padding: 1rem 1.5rem;
}
}
.secondary-section .g .section .component-wrapper .responsive-grid .card .logo {
margin-right: 0.75rem;
width: 1.2rem;
min-width: 1.2rem;
}
.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content {
display: flex;
flex: 1 1 0%;
flex-direction: column;
width: 100%;
}
.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content h5 {
color: rgb(61, 61, 61);
margin: 0;
}
.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content p {
margin-top: 0.25em;
margin-bottom: 0;
color: rgb(92, 92, 92);
font-size: 0.65rem;
font-weight: 300;
line-height: normal;
}
.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content code {
background: rgba(0, 0, 0, 0.05) none repeat scroll 0% 0%;
padding: 2px 6px;
border-radius: 4px;
}
.component-wrapper span.em {
color: rgb(61, 61, 61);
}
.component-wrapper a {
transition: color 125ms;
color: rgb(61, 61, 61);
background: rgba(0, 0, 0, 0.05) none repeat scroll 0% 0%;
padding: 2px 6px;
margin: 0px 1px;
border-radius: 4px;
display: inline;
cursor: pointer;
font-weight: 600;
}
.component-wrapper a:hover {
color: var(--md-typeset-a-color);
background: var(--md-accent-fg-color--transparent);
}
2025-02-07 17:00:36 +00:00
< / style > <!-- Hero for landing page --> < div class = "md-container tx-hero" > < div class = "md-grid md-typeset" > < div class = "md-main__inner" > < div > < h1 > A beautiful and simple UI to manage your WireGuard peers and interfaces< / h1 > < p > WireGuard Portal is an open source web-based user interface that makes it easy to setup and manage WireGuard VPN connections. It's built on top of WireGuard's official < span class = "em" > wgctrl< / span > library.< / p > < a class = "md-button md-button--primary" href = "documentation/overview/" title = "Get Started" > Get started < svg fill = "none" height = "10" style = "margin-left:2px" viewbox = "0 0 11 10" width = "11" > < path d = "M1 5.16772H9.5M9.5 5.16772L6.5 1.66772M9.5 5.16772L6.5 8.66772" stroke = "currentColor" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" > < / path > < / svg > < / a > < / div > < / div > < / div > < / div > < div class = "md-container" > < div class = "tx-hero__image" > < img alt = "" draggable = "false" src = "https://wgportal.org/master/assets/images/screenshot.png" / > < / div > < / div > < div class = "md-container secondary-section" > < div class = "g" > <!-- Architecture as building blocks --> < div class = "section" > < div class = "component-wrapper" > < div class = "first-column" > < h3 > More information about WireGuard< / h3 > < p > WireGuard® is an extremely < span class = "em" > simple< / span > yet < span class = "em" > fast< / span > and modern VPN that utilizes < span class = "em" > state-of-the-art cryptography< / span > . < / p > < p > WireGuard uses state-of-the-art < a href = "https://www.wireguard.com/protocol/" > cryptography< / a > and still manages to be as easy to configure and deploy as SSH. A combination of extremely high-speed cryptographic primitives and the fact that WireGuard lives inside the Linux kernel means that secure networking can be very high-speed. It is suitable for both small embedded devices like smartphones and fully loaded backbone routers. < / p > < / div > < div class = "second-column" > < div class = "image-wrapper" > < img alt = "" draggable = "false" src = "https://wgportal.org/master/assets/images/wg-tool.png" / > < / div > < / div > < / div > < div class = "component-wrapper" style = "display: block;" > < h4 > Explore official documentation< / h4 > <!-- Arch as code --> < div class = "responsive-grid" > < a class = "card-wrapper" href = "https://www.wireguard.com/" > < div class = "card" > < div class = "logo" > < span class = "twemoji" > < svg viewbox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < path d = "M3 3a2 2 0 0 1 2-2h9.982a2 2 0 0 1 1.414.586l4.018 4.018A2 2 0 0 1 21 7.018V21a2 2 0 0 1-2 2H4.75a.75.75 0 0 1 0-1.5H19a.5.5 0 0 0 .5-.5V8.5h-4a2 2 0 0 1-2-2v-4H5a.5.5 0 0 0-.5.5v6.25a.75.75 0 0 1-1.5 0Zm12-.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0-.146-.336l-4.018-4.018A.5.5 0 0 0 15 2.5" > < / path > < path d = "M4.53 12.24a.75.75 0 0 1-.039 1.06l-2.639 2.45 2.64 2.45a.75.75 0 1 1-1.022 1.1l-3.23-3a.75.75 0 0 1 0-1.1l3.23-3a.75.75 0 0 1 1.06.04m3.979 1.06a.75.75 0 1 1 1.02-1.1l3.231 3a.75.75 0 0 1 0 1.1l-3.23 3a.75.75 0 1 1-1.021-1.1l2.639-2.45-2.64-2.45Z" > < / path > < / svg > < / span > < / div > < div class = "card-content" > < h5 > Official Website< / h5 > < p > If you'd like a general conceptual overview of what WireGuard is about, read onward here. < / p > < / div > < / div > < / a > <!-- Networking --> < a class = "card-wrapper" href = "https://www.wireguard.com/protocol/" > < div class = "card" > < div class = "logo" > < span class = "twemoji" > < svg viewbox = "0 0 640 512" xmlns = "http://www.w3.org/2000/svg" > <!-- Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --> < path d = "M256 64h128v64H256zM240 0c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h48v32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96v32H80c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h160c26.5 0 48-21.5 48-48v-96c0-26.5-21.5-48-48-48h-48v-32h256v32h-48c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h160c26.5 0 48-21.5 48-48v-96c0-26.5-21.5-48-48-48h-48v-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352v-32h48c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM96 448v-64h128v64zm320-64h128v64H416z" > < / path > < / svg > < / span > < / div > < div class = "card-content" > < h5 > Protocol &
2025-01-17 20:48:36 +00:00
window.update_swagger_ui_iframe_height = function (id) {
var iFrameID = document.getElementById(id);
if (iFrameID) {
full_height = (iFrameID.contentWindow.document.body.scrollHeight + 80) + "px";
iFrameID.height = full_height;
iFrameID.style.height = full_height;
}
}
let iframe_id_list = []
var iframes = document.getElementsByClassName("swagger-ui-iframe");
for (var i = 0; i < iframes.length ; i + + ) {
iframe_id_list.push(iframes[i].getAttribute("id"))
}
let ticking = true;
document.addEventListener('scroll', function(e) {
if (!ticking) {
window.requestAnimationFrame(()=> {
let half_vh = window.innerHeight/2;
for(var i = 0; i < iframe_id_list.length ; i + + ) {
let element = document.getElementById(iframe_id_list[i])
if(element==null){
return
}
let diff = element.getBoundingClientRect().top
if(element.contentWindow.update_top_val){
element.contentWindow.update_top_val(half_vh - diff)
}
}
ticking = false;
});
ticking = true;
}
});
const dark_scheme_name = "slate"
window.scheme = document.body.getAttribute("data-md-color-scheme")
const options = {
attributeFilter: ['data-md-color-scheme'],
};
function color_scheme_callback(mutations) {
for (let mutation of mutations) {
if (mutation.attributeName === "data-md-color-scheme") {
scheme = document.body.getAttribute("data-md-color-scheme")
var iframe_list = document.getElementsByClassName("swagger-ui-iframe")
for(var i = 0; i < iframe_list.length ; i + + ) {
var ele = iframe_list.item(i);
if (ele) {
if (scheme === dark_scheme_name) {
ele.contentWindow.enable_dark_mode();
} else {
ele.contentWindow.disable_dark_mode();
}
}
}
}
}
}
observer = new MutationObserver(color_scheme_callback);
observer.observe(document.body, options);
})< / script > < / body > < / html >
