Mirrors/wg-portal
1
0
Fork 0
mirror of https://github.com/h44z/wg-portal.git synced 2025-10-04 15:36:18 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity
Files
1756eca2deb748cd0e1e2c37a9c7db71041780f3
wg-portal/master/index.html

348 lines
32 KiB
HTML
Raw Normal View History

Deployed 9e6ad98 to master with MkDocs 1.6.1 and mike 2.1.3
2025-10-04 12:18:05 +00:00
<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="Manage WireGuard Peers and Interface using a beautiful and simple web UI."><link href=https://wgportal.org/master/ rel=canonical><link href=documentation/overview/ rel=next><link rel=icon href=assets/images/favicon-large.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.6.21"><title>WireGuard Portal - WireGuard Portal</title><link rel=stylesheet href=assets/stylesheets/main.2a3383ac.min.css><link rel=stylesheet href=assets/stylesheets/palette.06af60db.min.css><link rel=stylesheet href=stylesheets/extra.css><link rel=stylesheet href=stylesheets/img-comparison-slider.css><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 property=og:type content=website><meta property=og:title content="WireGuard Portal"><meta property=og:description content="Manage WireGuard Peers and Interface using a beautiful and simple web UI."><meta property=og:image content=https://wgportal.org/master/assets/images/social/index.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://wgportal.org/master/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="WireGuard Portal"><meta name=twitter:description content="Manage WireGuard Peers and Interface using a beautiful and simple web UI."><meta name=twitter:image content=https://wgportal.org/master/assets/images/social/index.png><meta property=og:title content="WireGuard Portal"></head> <body dir=ltr data-md-color-scheme=default data-md-color-primary=white data-md-color-accent=indigo> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <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 class="md-header__inner md-grid" aria-label=Header> <a href=. title="WireGuard Portal" class="md-header__button md-logo" aria-label="WireGuard Portal" data-md-component=logo> <img src=assets/images/logo.svg alt=logo> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></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 xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><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"/></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 type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><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.
Deployed afcba8d to master with MkDocs 1.6.1 and mike 2.1.3 Signed-off-by: Dmytro Bondar <git@bonddim.com>
2024-11-28 16:54:59 +01: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);
}
Deployed 9e6ad98 to master with MkDocs 1.6.1 and mike 2.1.3
2025-10-04 12:18:05 +00:00
.before,
.after {
margin: 0;
}
.after figcaption {
background: #fff;
font-weight: bold;
border: 1px solid #c0c0c0;
color: #000000;
opacity: 0.9;
padding: 9px;
position: absolute;
top: 100%;
transform: translateY(-100%);
line-height: 100%;
}
.before figcaption {
background: #000;
font-weight: bold;
border: 1px solid #c0c0c0;
color: #ffffff;
opacity: 0.9;
padding: 9px;
position: absolute;
top: 100%;
transform: translateY(-100%);
line-height: 100%;
}
.before figcaption {
left: 0px;
}
.after figcaption {
right: 0px;
}
.custom-animated-handle {
transition: transform 0.2s;
}
.slider-with-animated-handle:hover .custom-animated-handle {
transform: scale(1.2);
}
.md-typeset img-comparison-slider figure {
margin: initial;
}
.first-overlay {
color: #000;
}
</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> </p> <a href=documentation/overview/ title="Get Started" class="md-button md-button--primary"> Get started <svg width=11 height=10 viewbox="0 0 11 10" fill=none style=margin-left:2px><path d="M1 5.16772H9.5M9.5 5.16772L6.5 1.66772M9.5 5.16772L6.5 8.66772" stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round></path></svg> </a> </div> </div> </div> </div> <div class=md-container> <div class=tx-hero__image> <div> <img-comparison-slider hover=hover> <figure slot=first class=before> <img src=https://wgportal.org/master/assets/images/wgportal_light.png alt="Light Mode"> <figcaption>Light Mode</figcaption> </figure> <figure slot=second class=after> <img src=https://wgportal.org/master/assets/images/wgportal_dark.png alt="Dark Mode"> <figcaption>Dark Mode</figcaption> </figure> <svg slot=handle class=custom-animated-handle xmlns=http://www.w3.org/2000/svg width=100 viewbox="-8 -3 16 6"> <!-- Left arrow (dark) --> <path d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2" stroke=#1a1a1a fill=#1a1a1a stroke-width=1 vector-effect=non-scaling-stroke> </path> <!-- Right arrow (white) --> <path d="M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke=#fff fill=#fff stroke-width=1 vector-effect=non-scaling-stroke> </path> </svg> </img-comparison-slider> </div> </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 src=https://wgportal.org/master/assets/images/wg-tool.png alt draggable=false> </div> </div> </div> <div class=component-wrapper style="display: block;"> <h4>Explore official documentation</h4> <!-- Arch as code --> <div class=responsive-grid> <a href=https://www.wireguard.com/ class=card-wrapper> <div class=card> <div class=logo> <span class=twemoji> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><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 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"/></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 href=https://www.wireguard.com/protocol/ class=card-wrapper> <div class=card> <div class=logo> <span class=twemoji> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 576 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: C
Reference in New Issue Copy Permalink