This commit is contained in:
pclatihan 2025-05-16 19:22:24 +07:00
parent b0a715918e
commit 8da3321074
3 changed files with 166 additions and 4 deletions

View File

@ -33,7 +33,7 @@ templ FormSatu() {
}
templ FormDua() {
@PageWrapper("HOME"){
@PageWrapper("Dua"){
<div class="bg-green-200 min-h-screen flex items-center">
<div class="bg-white p-10 md:w-2/3 lg:w-1/2 mx-auto rounded">
<form action="">
@ -57,7 +57,7 @@ templ FormDua() {
}
templ FormTiga() {
@PageWrapper("HOME"){
@PageWrapper("Satu"){
<div class="bg-purple-600 min-h-screen flex items-center text-lg">
<form action="" class="p-10 md:w-2/3 lg:w-1/2 mx-auto rounded">
@ -87,4 +87,4 @@ templ Try() {
}
}
}

View File

@ -8,7 +8,6 @@ templ PageWrapper(title string) {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<title>{title}</title>
</head>
<body>

163
vpn.drawio.svg Normal file
View File

@ -0,0 +1,163 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="721px" height="361px" viewBox="-0.5 -0.5 721 361" content="&lt;mxfile&gt;&lt;diagram id=&quot;y4W8NGUl77If_6CDtk-r&quot; name=&quot;Page-1&quot;&gt;xVhNc5swEP01PiaDEKHkGDtJc2g7nvFMP44KUkAzAlFZ2Li/vgsSGIzcJLWDLx70WIH27dsPPMOLrPqsSJF+lZSJme/RaobvZ74ffQrhtwZ2BkDBbWCQRHFqsT2w4n+YBT2Llpyy9cBQSyk0L4ZgLPOcxXqAEaXkdmj2IsXwrQVJ2AhYxUSM0R+c6tT6dePt8SfGk7R9M/LsnYy0xhZYp4TKbQ/CDzO8UFJqc5VVCyZq8lpezL7HI3e7gymW67ds8M2GDRGl9e0u1lLZw+ld6zGcs6gvy0wYAzzfMKU5cPKFPDOxlGuuuczB5FlqLbOewZ3gSX1DywLQVGcCFgguZakFz9mii5IHoD0Q7GXVUadQRxVojMmMabUDE7uhjYOVV0f2dh8rbKG0F6bQYsSqI+kevCcQLiyHbj5vR8wxCtKxy1zmbEiBMa9t/u0rPFKWKrZW2GqeqIRZq8jNiGKCaL4ZPv0UB9GnS3mIwolcxKOc+G6VDCiIVRMQrSNFtjwTpHF/m3LNVgVpvNlCDXRRcpLEb4cSRzdjifueQ+MdeJIG8Ds1AE6p3c/+4led7dc37fK+stlvVrtBLXivdoLLZUcwkk4iZSLYdQwVccSZENCwaqra6hoLWdJJ9BMe1MgrNBYQ8h0Cis6hn2CSGoKOUPDmqNutS8nhLR11XZ9o2ws+oMQIz+46YKU7xtuImqadROOECSZKmGhca5ffAFgxtalrbCjgQHPKN3CZ6MZZXQ95d/Ub/MdNkZvUMnaA9ExH3L2SVmRdmDHkhVeMnmkUORSLI8+ij0ozb0RuS1SKBsyEv8t64JxnoACeXzWDGjDseUXV0NDeb5l9YoTyPOnRXj+wZd2AhTti/XrY7S6OhgyY18MouYIoIUYvopmjU04pg2lzrmSZ0zqM55oqAzwMZeiomK5QdmX0pFj6/9tyvWt80HWjV7pus1oyxeGUkIOntOILVhaEHOo/oHCokY/vuhgdjG2OLxNn1z3HpwmKpum64Tjmk32chK/H/JJTFw6G8ccfN3TBcv8vghk99v/F4Ie/&lt;/diagram&gt;&lt;/mxfile&gt;">
<defs/>
<g>
<g>
<ellipse cx="15" cy="237.5" rx="7.5" ry="7.5" fill="#ffffff" stroke="#000000" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
<path d="M 15 245 L 15 270 M 15 250 L 0 250 M 15 250 L 30 250 M 15 270 L 0 290 M 15 270 L 30 290" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 297px; margin-left: 15px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
<div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: nowrap; ">
Actor
</div>
</div>
</div>
</foreignObject>
<text x="15" y="309" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
Actor
</text>
</switch>
</g>
</g>
<g>
<path d="M 240 260 L 503.63 260" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
<path d="M 508.88 260 L 501.88 263.5 L 503.63 260 L 501.88 256.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<path d="M 240 174.29 L 308.33 115.72" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
<path d="M 312.31 112.3 L 309.28 119.51 L 308.33 115.72 L 304.72 114.2 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<path d="M 40 183 L 40 160 L 240 160 L 240 183" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
<path d="M 40 183 L 40 360 L 240 360 L 240 183" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
<path d="M 40 183 L 240 183" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 172px; margin-left: 41px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
<div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
Vertical Container
</div>
</div>
</div>
</foreignObject>
<text x="140" y="175" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
Vertical Container
</text>
</switch>
</g>
</g>
<g>
<path d="M 647.55 79.13 L 591.93 253.93" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
<path d="M 590.34 258.93 L 589.13 251.2 L 591.93 253.93 L 595.8 253.33 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<path d="M 630 20 C 606 20 600 40 619.2 44 C 600 52.8 621.6 72 637.2 64 C 648 80 684 80 696 64 C 720 64 720 48 705 40 C 720 24 696 8 675 16 C 660 4 636 4 630 20 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 40px; margin-left: 601px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
<div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
google.com
</div>
</div>
</div>
</foreignObject>
<text x="660" y="44" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
google.com
</text>
</switch>
</g>
</g>
<g>
<path d="M 278.75 190 L 215.15 236.25" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
<path d="M 210.9 239.34 L 214.51 232.39 L 215.15 236.25 L 218.62 238.06 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<path d="M 570 220 L 638.18 83.64" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
<path d="M 640.53 78.95 L 640.53 86.77 L 638.18 83.64 L 634.27 83.64 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<rect x="510" y="220" width="80" height="80" fill="#ffffff" stroke="#000000" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 260px; margin-left: 511px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
<div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
VPN Server
<div>
https://vpn.com
</div>
</div>
</div>
</div>
</foreignObject>
<text x="550" y="264" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
VPN Server...
</text>
</switch>
</g>
</g>
<g>
<rect x="380" y="70" width="180" height="120" fill="none" stroke="none" pointer-events="all"/>
</g>
<g>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 178px; height: 1px; padding-top: 77px; margin-left: 382px;">
<div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 116px; overflow: hidden; color: #000000; ">
<div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
<h1 style="margin-top: 0px;">
Heading
</h1>
<p>
https://google.com
</p>
</div>
</div>
</div>
</foreignObject>
<text x="382" y="89" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px">
Heading...
</text>
</switch>
</g>
</g>
<g>
<path d="M 567.8 220 L 634.61 69.82" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
<path d="M 636.75 65.02 L 637.1 72.84 L 634.61 69.82 L 630.7 69.99 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<rect x="260" y="130" width="120" height="60" fill="#ffffff" stroke="#000000" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<path d="M 385.71 112.14 L 505.27 219.74" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
<path d="M 509.17 223.25 L 501.62 221.17 L 505.27 219.74 L 506.31 215.97 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
<g>
<path d="M 320 60 C 296 60 290 80 309.2 84 C 290 92.8 311.6 112 327.2 104 C 338 120 374 120 386 104 C 410 104 410 88 395 80 C 410 64 386 48 365 56 C 350 44 326 44 320 60 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
</g>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Text is not SVG - cannot display
</text>
</a>
</switch>
</svg>

After

Width:  |  Height:  |  Size: 15 KiB