Skip to content

Commit

Permalink
feat: rearange the button
Browse files Browse the repository at this point in the history
  • Loading branch information
@tuanngocptn
tuanngocptn committed Dec 17, 2024
1 parent 47d0869 commit 92859bc
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 5 deletions.
11 changes: 7 additions & 4 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,13 +127,16 @@ body::before {
/* Responsive adjustments */
@media (max-width: 768px) {
.social-links {
flex-direction: column;
align-items: center;
flex-direction: row;
justify-content: center;
gap: 0.5rem;
padding: 0 1rem;
}

.button {
width: 200px;
justify-content: center;
width: auto;
padding: 0.4em 0.8em;
font-size: 0.9rem;
}
}

Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Nport is a Node.js-based tool that tunnels HTTP connections through socket.io streams, enabling secure and straightforward access to local servers via public URLs."><meta name="keywords" content="nodejs, npm, socket-io, ngrok-alternative, http tunnel"><meta property="og:title" content="NPort - HTTP Tunneling Tool"><meta property="og:description" content="Expose your local servers via public URLs easily and securely using Socket.IO streams"><meta property="og:type" content="website"><meta property="og:url" content="https://nport.link"><link rel="icon" href="./favicon.ico"><title>NPort - Secure HTTP Tunneling Tool</title><link rel="preload" href="https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc9.ttf" as="font" type="font/ttf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;height:100vh;display:flex;justify-content:center;align-items:center;color:#fff;position:relative;overflow:hidden}body::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#1e1e1e;filter:brightness(40%);z-index:-1}.content{text-align:center}.content h1{font-size:4rem;font-weight:700;text-transform:uppercase;letter-spacing:5px;margin-bottom:10px}.content h2{margin-top:4rem;font-size:2rem;font-weight:400;letter-spacing:3px;opacity:.8}.content h2 code{background-color:#1e1e1e;padding:.4em .6em;border-radius:6px;font-family:Consolas,Monaco,"Andale Mono",monospace;cursor:pointer;border:1px solid #454545;font-size:.9em;color:#d4d4d4;box-shadow:0 2px 4px rgba(0,0,0,.2);display:inline-block;position:relative;min-width:200px}.content h2 code::before{content:"$";color:#858585;margin-right:.8em;user-select:none}.content h2 code:hover{background-color:#2d2d2d;border-color:#666}@media (max-width:768px){.content h1{font-size:2.5rem}.content h2{font-size:1.5rem}}.social-links{display:flex;gap:1rem;justify-content:center}.button{display:flex;align-items:center;gap:.5rem;padding:.6em 1.2em;border-radius:6px;text-decoration:none;font-size:1rem;font-weight:500;transition:all .2s ease;color:#d4d4d4}.button img{width:20px;height:20px}.button:hover{background-color:#2d2d2d;border-color:#666;transform:translateY(-1px)}.button:active{transform:translateY(0)}@media (max-width:768px){.social-links{flex-direction:column;align-items:center}.button{width:200px;justify-content:center}}.logo{position:fixed;top:40px;left:40px;z-index:10;display:flex;align-items:center;gap:1rem}.logo img{object-fit:contain;height:60px;width:60px}.logo span{font-size:3rem;color:#fff}@media (max-width:768px){.logo{top:20px;left:20px;gap:.5rem}.logo img{height:30px;width:30px}.logo span{font-size:2rem;color:#fff}}.description{font-size:1.2rem;color:#d4d4d4;max-width:800px;margin:1.5rem auto;line-height:1.6;opacity:.8}@media (max-width:768px){.description{font-size:1rem;padding:0 20px;margin:1rem auto}}.footer{position:fixed;bottom:20px;left:0;width:100%;text-align:center;color:#d4d4d4;font-size:.9rem;opacity:.8}.footer a{color:#fff;text-decoration:none;transition:opacity .2s ease}.footer a:hover{opacity:.8}@media (max-width:768px){.footer{bottom:10px;font-size:.8rem}}.commands{margin-top:2rem;text-align:center}.show-more{background:0 0;border:0 solid #000;color:#d4d4d4;padding:.5em 1em;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.show-more:hover{background-color:#2d2d2d;border-color:#1e1e1e}.copy-feedback{position:absolute;background-color:#2d2d2d;color:#d4d4d4;padding:.4em .8em;border-radius:6px;font-size:.9em;pointer-events:none;opacity:0;transform:translateY(-40px);top:-25px;left:50%;transform:translateX(-20%);transition:all .2s ease;border:1px solid #454545;box-shadow:0 2px 4px rgba(0,0,0,.2);white-space:nowrap}.copy-feedback.show{opacity:1;transform:translateY(-20px)}</style></head><body><div class="logo"><img src="./assets/imgs/nport-logo-dark.png" alt="NPort logo" height="30" width="30"> <span>NPort</span></div><div class="content"><h1>nport.link</h1><p class="description">A tool that tunnels HTTP(s) connections straightforward access to localhost via public URLs.</p><div class="social-links"><a href="https://github.com/tuanngocptn/nport" target="_blank" class="button github"><img src="./assets/github.png" alt=""> <span>GitHub</span> </a><a href="https://www.npmjs.com/package/nport" target="_blank" class="button npm"><img src="./assets/npm.png" alt=""> <span>npm</span></a></div><h2><code>npm i -g nport</code></h2><div class="commands"><button class="show-more">Show usage examples 🚀</button></div></div><footer class="footer"><p>Created by <a href="https://github.com/tuanngocptn" target="_blank">Nick - Ngoc Pham</a> 🇻🇳</p></footer><script>document.querySelector(".content h2 code").addEventListener("click",async n=>{try{let e=document.querySelector(".content h2 code"),t=e.textContent.replace("$ ",""),o=(await navigator.clipboard.writeText(t),document.createElement("div"));o.className="copy-feedback",o.textContent="Copied! 📋",document.body.appendChild(o),o.style.left=n.clientX+10+"px",o.style.top=n.clientY-20+"px",requestAnimationFrame(()=>o.classList.add("show")),e.style.backgroundColor="#2d2d2d",setTimeout(()=>{e.style.backgroundColor="#1e1e1e",o.classList.remove("show"),setTimeout(()=>o.remove(),200)},1e3)}catch(n){console.error("Failed to copy text: ",n)}}),document.querySelector(".show-more").addEventListener("click",e=>{var t=document.querySelector(".content h2 code"),e=e.target;"npm i -g nport"===t.textContent?(t.textContent="nport -s myapp -p 3000",e.textContent="Show install command 📦"):(t.textContent="npm i -g nport",e.textContent="Show usage examples 🚀")})</script></body></html>
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Nport is a Node.js-based tool that tunnels HTTP connections through socket.io streams, enabling secure and straightforward access to local servers via public URLs."><meta name="keywords" content="nodejs, npm, socket-io, ngrok-alternative, http tunnel"><meta property="og:title" content="NPort - HTTP Tunneling Tool"><meta property="og:description" content="Expose your local servers via public URLs easily and securely using Socket.IO streams"><meta property="og:type" content="website"><meta property="og:url" content="https://nport.link"><link rel="icon" href="./favicon.ico"><title>NPort - Secure HTTP Tunneling Tool</title><link rel="preload" href="https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc9.ttf" as="font" type="font/ttf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;height:100vh;display:flex;justify-content:center;align-items:center;color:#fff;position:relative;overflow:hidden}body::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#1e1e1e;filter:brightness(40%);z-index:-1}.content{text-align:center}.content h1{font-size:4rem;font-weight:700;text-transform:uppercase;letter-spacing:5px;margin-bottom:10px}.content h2{margin-top:4rem;font-size:2rem;font-weight:400;letter-spacing:3px;opacity:.8}.content h2 code{background-color:#1e1e1e;padding:.4em .6em;border-radius:6px;font-family:Consolas,Monaco,"Andale Mono",monospace;cursor:pointer;border:1px solid #454545;font-size:.9em;color:#d4d4d4;box-shadow:0 2px 4px rgba(0,0,0,.2);display:inline-block;position:relative;min-width:200px}.content h2 code::before{content:"$";color:#858585;margin-right:.8em;user-select:none}.content h2 code:hover{background-color:#2d2d2d;border-color:#666}@media (max-width:768px){.content h1{font-size:2.5rem}.content h2{font-size:1.5rem}}.social-links{display:flex;gap:1rem;justify-content:center}.button{display:flex;align-items:center;gap:.5rem;padding:.6em 1.2em;border-radius:6px;text-decoration:none;font-size:1rem;font-weight:500;transition:all .2s ease;color:#d4d4d4}.button img{width:20px;height:20px}.button:hover{background-color:#2d2d2d;border-color:#666;transform:translateY(-1px)}.button:active{transform:translateY(0)}@media (max-width:768px){.social-links{flex-direction:row;justify-content:center;gap:.5rem;padding:0 1rem}.button{width:auto;padding:.4em .8em;font-size:.9rem}}.logo{position:fixed;top:40px;left:40px;z-index:10;display:flex;align-items:center;gap:1rem}.logo img{object-fit:contain;height:60px;width:60px}.logo span{font-size:3rem;color:#fff}@media (max-width:768px){.logo{top:20px;left:20px;gap:.5rem}.logo img{height:30px;width:30px}.logo span{font-size:2rem;color:#fff}}.description{font-size:1.2rem;color:#d4d4d4;max-width:800px;margin:1.5rem auto;line-height:1.6;opacity:.8}@media (max-width:768px){.description{font-size:1rem;padding:0 20px;margin:1rem auto}}.footer{position:fixed;bottom:20px;left:0;width:100%;text-align:center;color:#d4d4d4;font-size:.9rem;opacity:.8}.footer a{color:#fff;text-decoration:none;transition:opacity .2s ease}.footer a:hover{opacity:.8}@media (max-width:768px){.footer{bottom:10px;font-size:.8rem}}.commands{margin-top:2rem;text-align:center}.show-more{background:0 0;border:0 solid #000;color:#d4d4d4;padding:.5em 1em;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.show-more:hover{background-color:#2d2d2d;border-color:#1e1e1e}.copy-feedback{position:absolute;background-color:#2d2d2d;color:#d4d4d4;padding:.4em .8em;border-radius:6px;font-size:.9em;pointer-events:none;opacity:0;transform:translateY(-40px);top:-25px;left:50%;transform:translateX(-20%);transition:all .2s ease;border:1px solid #454545;box-shadow:0 2px 4px rgba(0,0,0,.2);white-space:nowrap}.copy-feedback.show{opacity:1;transform:translateY(-20px)}</style></head><body><div class="logo"><img src="./assets/imgs/nport-logo-dark.png" alt="NPort logo" height="30" width="30"> <span>NPort</span></div><div class="content"><h1>nport.link</h1><p class="description">A tool that tunnels HTTP(s) connections straightforward access to localhost via public URLs.</p><div class="social-links"><a href="https://github.com/tuanngocptn/nport" target="_blank" class="button github"><img src="./assets/github.png" alt=""> <span>GitHub</span> </a><a href="https://www.npmjs.com/package/nport" target="_blank" class="button npm"><img src="./assets/npm.png" alt=""> <span>npm</span></a></div><h2><code>npm i -g nport</code></h2><div class="commands"><button class="show-more">Show usage examples 🚀</button></div></div><footer class="footer"><p>Created by <a href="https://github.com/tuanngocptn" target="_blank">Nick - Ngoc Pham</a> 🇻🇳</p></footer><script>document.querySelector(".content h2 code").addEventListener("click",async n=>{try{let e=document.querySelector(".content h2 code"),t=e.textContent.replace("$ ",""),o=(await navigator.clipboard.writeText(t),document.createElement("div"));o.className="copy-feedback",o.textContent="Copied! 📋",document.body.appendChild(o),o.style.left=n.clientX+10+"px",o.style.top=n.clientY-20+"px",requestAnimationFrame(()=>o.classList.add("show")),e.style.backgroundColor="#2d2d2d",setTimeout(()=>{e.style.backgroundColor="#1e1e1e",o.classList.remove("show"),setTimeout(()=>o.remove(),200)},1e3)}catch(n){console.error("Failed to copy text: ",n)}}),document.querySelector(".show-more").addEventListener("click",e=>{var t=document.querySelector(".content h2 code"),e=e.target;"npm i -g nport"===t.textContent?(t.textContent="nport -s myapp -p 3000",e.textContent="Show install command 📦"):(t.textContent="npm i -g nport",e.textContent="Show usage examples 🚀")})</script></body></html>

0 comments on commit 92859bc

Please sign in to comment.