<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="favicon" href="/assets/favicon.ico" />
<meta property="description" content="Hiddify, Internet Freedom Solution" data-rh="true" />
<link data-rh="true" rel="canonical" href="https://hiddify.com/" />
<meta property="og:title" content="Hiddify | Hiddify" data-rh="true" />
<title>Hiddify | Internet Freedom Solution</title>
<link href="/assets/css/site.css" rel="stylesheet" />
<style>
html,
body {
margin: 0;
overflow-x: hidden;
}
body {
/* Set the background image */
background-image: url('/assets/background-color.png');
/* Cover the entire page */
background-size: cover;
/* Center the background image */
background-position: center;
/* Do not repeat the image */
background-repeat: no-repeat;
/* Fix the background (won't scroll with the content) */
background-attachment: scroll;
}
</style>
<style>
/* width */
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 20px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
border-radius: 20px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: white;
}
</style>
</head>
<body>
<header class="md:mb-10 lg:mb-24 px-3 md:px-10 lg:px-20">
<nav class="flex items-center justify-between py-10">
<div class="justify-start items-center w-full hidden md:flex">
<a href="/" class="items-center flex">
<img src="/assets/hiddify-logo.png" alt="Hiddify Logo" height="40" />
</a>
</div>
<div class="w-full hidden md:flex items-center justify-end gap-8 text-[#212529]">
<a href="/app" class="py-2 w-fit no-underline hover:text-primary">
App
</a>
<a href="/manager" class="py-2 w-fit no-underline hover:text-primary">
Manager
</a>
<a href="/about-us" class="py-2 w-fit no-underline hover:text-primary">
About Us
</a>
<a href="/fa/manager" class="py-2 w-fit px-2 no-underline hover:text-primary flex items-center gap-2">
<img style="display:inline"
src="https://user-images.githubusercontent.com/125398461/234186932-52f1fa82-52c6-417f-8b37-08fe9250a55f.png"
alt="Lang_farsi">
<span>فارسی</span>
</a>
</div>
<div class="flex justify-start items-center w-fit h-7 md:hidden">
<a href="/" class="flex items-center h-7">
<img src="/assets/hiddify-logo.png" alt="Hiddify Logo" height="28" class="h-7" />
</a>
</div>
<div id="menu-btn" class="flex justify-center items-center w-fit md:hidden cursor-pointer">
<img src="/assets/three-dots.svg" alt="hero" height="24" decoding="async" loading="lazy" />
</div>
</nav>
<div id="sidebar"
class="w-[250px] bg-[#e8cff1] hidden max-h-screen h-screen fixed right-0 top-0 px-10 py-20 flex-col gap-5 z-50">
<div id="close-sidebar-btn"
class="absolute top-5 left-5 flex justify-center items-center w-fit md:hidden cursor-pointer">
<img src="/assets/close-button.svg" alt="hero" height="24" decoding="async" loading="lazy" />
</div>
<div class="flex justify-start items-center w-fit h-7 md:hidden">
<a href="/" class="flex items-center h-7">
<img src="/assets/hiddify-logo.png" alt="Hiddify Logo" height="28" class="h-7" />
</a>
</div>
<a href="/app" class="py-2 w-fit no-underline hover:text-primary">
App
</a>
<a href="/manager" class="py-2 w-fit no-underline hover:text-primary">
Manager
</a>
<a href="/about-us" class="py-2 w-fit no-underline hover:text-primary">
About Us
</a>
<a href="/fa/manager" class="py-2 w-fit px-2 no-underline hover:text-primary flex items-center gap-2">
<img style="display:inline"
src="https://user-images.githubusercontent.com/125398461/234186932-52f1fa82-52c6-417f-8b37-08fe9250a55f.png"
alt="Lang_farsi">
<span>فارسی</span>
</a>
</div>
</header>
<main class="2xl:flex 2xl:justify-center">
<div class="px-3 md:px-10 lg:px-20 2xl:max-w-[1920px]">
<h1 class="text-primaryText title-font text-4xl">All tutorials and videos</h1>
<section class="flex flex-col gap-5 items-center justify-center py-10">
<section
class="relative w-full md:max-w-[900px] rounded-3xl border-2 border-white bg-white bg-opacity-20 shadow-lg">
<div class="flex flex-col md:flex-row h-full md:max-h-[450px]" id="section-1">
<div class="px-8 py-8 w-full md:w-2/3">
<img src="/assets/1.png" class="md:max-h-[183px] rounded-xl w-full md:max-w-[326px] mb-5" />
<div class="flex flex-col gap-2">
<h1 class="text-primaryText title-font text-lg mb-3">How to install Hiddify Manager</h1>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/guide" target="_blank"
class="text-secondaryText text-sm">Main
installation guide</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/Guide-for-setting-up-the-domain-and-finalizing-the-installation"
target="_blank" class="text-secondaryText text-sm">Guide for setting up the domain and finalizing
the
installation (Initial setting after installation)</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/Installation-prerequisites" target="_blank"
class="text-secondaryText text-sm">Installation prerequisites</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/How-to-connect-to-server-via-SSH" target="_blank"
class="text-secondaryText text-sm">How to
connect to server via SSH</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/How-to-install-different-versions-of-Hiddify-Manager"
target="_blank" class="text-secondaryText text-sm">How to install different versions of Hiddify
Manager</a>
</div>
<div class="flex flex-col gap-2 md:hidden" id="section-content-1">
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/Quick-installation-on-Hetzner-Servers" target="_blank"
class="text-secondaryText text-sm">
Quick and easy installation on Hetzner servers
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/Quick-installation-on-Vultr-Servers" target="_blank"
class="text-secondaryText text-sm">Main
Quick and easy installation on Vultr servers
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/Quick-Installation-on-Oracle-Cloud" target="_blank"
class="text-secondaryText text-sm">Quick and
easy installation on Oracle Cloud
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/Quick-Installation-on-OVH-Servers" target="_blank"
class="text-secondaryText text-sm">Quick and
easy installation on OVH servers
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/Quick-Installation-on-Microsoft-Azure" target="_blank"
class="text-secondaryText text-sm">Quick and easy installation on Microsoft Azure
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/Cloud-init-installation" target="_blank"
class="text-secondaryText text-sm">Easy installation
through the data center (Cloud-init)
</a>
</div>
</div>
</div>
</div>
<div
class="max-h-[500px] md:max-h-[unset] md:border-l-2 border-t-2 md:border-t-0 border-white px-2 py-2 w-full md:w-1/3">
<div class="px-6 overflow-y-auto overflow-x-hidden max-h-[400px] md:h-full">
<div class="pt-6">
<h1 class="text-secondaryText title-font text-base">Related videos</h1>
</div>
<div class="flex flex-col gap-3 md:gap-1">
<a href="https://www.youtube.com/watch?v=PcCfSkMjx4w">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/244041345-ed55040a-3239-450b-99d9-34b722cee1a9.png"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
<a href="https://www.youtube.com/watch?v=XSwCE35lqmU">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/235692699-f6cc0a42-3742-44d5-be20-783ac0e50fdc.png"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
</div>
</div>
</div>
</div>
<div id="section-bottom-1"
class="hidden md:flex bg-gradient-to-t from-white bg-opacity-80 h-24 rounded-b-3xl w-full absolute bottom-0 justify-center items-start py-3">
<button id="read-more-1" onclick="readMore(1)"
class="bg-[#E2E2E2] flex h-fit py-2 px-5 rounded-full items-center justify-center gap-2">
<span>Read more</span>
<svg id="arrow-1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path
d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor"
d="M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z" />
</g>
</svg>
</button>
</div>
</section>
<section
class="relative w-full md:max-w-[900px] rounded-3xl border-2 border-white bg-white bg-opacity-20 shadow-lg">
<div class="flex flex-col md:flex-row h-full md:max-h-[450px]" id="section-2">
<div class="px-8 py-8 w-full md:w-2/3">
<img src="/assets/image194.png" class="md:max-h-[183px] rounded-xl w-full md:max-w-[326px] mb-5" />
<div class="flex flex-col gap-2">
<h1 class="text-primaryText title-font text-lg mb-3">Configuration and advanced settings</h1>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-configure-Hiddify-panel-properly/"
target="_blank" class="text-secondaryText text-sm">How to configure Hiddify Manager properly
(Getting
familiar with its different parts)</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-connect-and-troubleshoot-via-SSH/"
target="_blank" class="text-secondaryText text-sm">How to connect and troubleshoot via SSH (working
with Hiddify Manager Menu)</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-use-Reality-on-Hiddify/" target="_blank"
class="text-secondaryText text-sm">How to use Reality on Hiddify Manager</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-set-up-and-use-Telegram-bot-on-Hiddify-panel/"
target="_blank" class="text-secondaryText text-sm">How to set up and use Telegram bot on Hiddify
Manager</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-set-up-Telegram-proxy-on-Hiddify/"
target="_blank" class="text-secondaryText text-sm">How to set up Telegram proxy on Hiddify
Manager</a>
</div>
<div class="flex flex-col gap-2 md:hidden" id="section-content-2">
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-activate-WARP-on-the-Hiddify-panel/"
target="_blank" class="text-secondaryText text-sm">
How to activate WARP on Hiddify Manager
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-backup-and-restore-panel-on-Hiddify/"
target="_blank" class="text-secondaryText text-sm">How to backup and restore Hiddify Manager
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-update-Hiddify-panel/" target="_blank"
class="text-secondaryText text-sm">How to update Hiddify Manager
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-Reset-Hiddify-panel-to-default/"
target="_blank" class="text-secondaryText text-sm">How to Reset Hiddify Manager to default
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/SSH-proxy-setting-on-Hiddify-panel/"
target="_blank" class="text-secondaryText text-sm">How to setup SSH proxy on Hiddify Manager
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-use-subdomains-of-a-website-in-Reality/"
target="_blank" class="text-secondaryText text-sm">How to use subdomains of a website in Reality
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="https://github.com/hiddify/Hiddify_Reality_Scanner/blob/main/README.md" target="_blank"
class="text-secondaryText text-sm">How to use Hiddify Reality Scanner
</a>
</div>
</div>
</div>
</div>
<div
class="max-h-[500px] md:max-h-[unset] md:border-l-2 border-t-2 md:border-t-0 border-white px-2 py-2 w-full md:w-1/3">
<div class="px-6 overflow-y-auto overflow-x-hidden max-h-[400px] md:h-full">
<div class="pt-6">
<h1 class="text-secondaryText title-font text-base">Related videos</h1>
</div>
<div class="flex flex-col gap-3 md:gap-1">
<a href="https://www.youtube.com/watch?v=nOe7FhajX3g">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/238177886-661b1164-aca9-4ef6-bce8-781ab2970040.png"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
<a href="https://www.youtube.com/watch?v=eFNPBSy8_to">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/261299658-59808c2f-3894-47f7-ab7b-b50c3dbb3d68.jpg"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
</div>
</div>
</div>
</div>
<div id="section-bottom-2"
class="hidden md:flex bg-gradient-to-t from-white bg-opacity-80 h-24 rounded-b-3xl w-full absolute bottom-0 justify-center items-start py-3">
<button id="read-more-2" onclick="readMore(2)"
class="bg-[#E2E2E2] flex h-fit py-2 px-5 rounded-full items-center justify-center gap-2">
<span>Read more</span>
<svg id="arrow-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path
d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor"
d="M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z" />
</g>
</svg>
</button>
</div>
</section>
<section
class="relative w-full md:max-w-[900px] rounded-3xl border-2 border-white bg-white bg-opacity-20 shadow-lg">
<div class="flex flex-col md:flex-row h-full md:max-h-[450px]" id="section-3">
<div class="px-8 py-8 w-full md:w-2/3">
<img src="/assets/image-195.png" class="md:max-h-[183px] rounded-xl w-full md:max-w-[326px] mb-5" />
<div class="flex flex-col gap-2">
<h1 class="text-primaryText title-font text-lg mb-3">Domain, Worker, CDN and tunneling</h1>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Domain-types-and-how-to-register-them/"
target="_blank" class="text-secondaryText text-sm">Domain types and how to register them</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/What-is-CDN-and-how-does-it-help-us%3F/"
target="_blank" class="text-secondaryText text-sm">What is CDN and how does it help us?</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/How-to-use-Cloudflare-CDN/" target="_blank"
class="text-secondaryText text-sm">How to use Cloudflare CDN</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/How-to-use-GCore-CDN-on-Cloudflare-registered-domain/"
target="_blank" class="text-secondaryText text-sm">How to use GCore CDN</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/How-to-use-Amazon-CDN/" target="_blank"
class="text-secondaryText text-sm">How to use Amazon CDN or Cloudfront</a>
</div>
<div class="flex flex-col gap-2 md:hidden" id="section-content-3">
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Get-Cloudflare-API/" target="_blank"
class="text-secondaryText text-sm">
Tutorial on automating subdomain registration on Cloudflare
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Guide-for-using-mode-Auto_CDN_IP-on-Hiddify/"
target="_blank" class="text-secondaryText text-sm">How to use AutoCDN IP domain
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Tutorial-for-using-wildcard-subdomains-on-Hiddify/"
target="_blank" class="text-secondaryText text-sm">How to use wildcard subdomains on Hiddify
Manager
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Guide-for-domain-fronting/" target="_blank"
class="text-secondaryText text-sm">How to use Domain Fronting
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="https://github-com.translate.goog/hiddify/Hiddify-Manager/discussions/332?_x_tr_sl=fa&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=wapp"
target="_blank" class="text-secondaryText text-sm">How to manage multiple CDN domains better on
Hiddify
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Guide-for-finding-a-clean-Cloudflare-IP/"
target="_blank" class="text-secondaryText text-sm">What is Cloudflare's clean IP and how to find
it
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/How-to-create-subscription-link-on-Hiddify/"
target="_blank" class="text-secondaryText text-sm">How to create subscription link on Hiddify
Manager
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/How-to-use-a-PHP-site-for-sub-links/"
target="_blank" class="text-secondaryText text-sm">Using PHP site for subscription link
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/How-to-use-the-Cloudflare-worker-domain-on-Hiddify/"
target="_blank" class="text-secondaryText text-sm">How to use the Cloudflare worker domain on
Hiddify Manager (Automated way)
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/How-to-set-up-and-use-Cloudflare-workers/"
target="_blank" class="text-secondaryText text-sm">How to setup and use Cloudflare workers (Manual
way)
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/How-to-setup-relay-server-using-Hiddify-Relay-Builder/"
target="_blank" class="text-secondaryText text-sm">How to setup relay server using Hiddify Relay
Builder (all in one app)
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Tutorial-for-setting-up-IP-Tables-tunnel-as-relay-server/"
target="_blank" class="text-secondaryText text-sm">How to setup a relay server using the IP-Tables
method
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Tutorial-for-setting-up-GOST-tunnel-as-relay-server/"
target="_blank" class="text-secondaryText text-sm">How to setup relay server using GOST method
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Tutorial-for-setting-up-WST-tunnel-as-relay-server/"
target="_blank" class="text-secondaryText text-sm">How to setup relay server using WST method
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Tutorial-for-setting-up-Dokodemo-Door-tunnel-as-relay-server/"
target="_blank" class="text-secondaryText text-sm">How to setup relay server using Dokodemo-Door
method
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Tutorial-for-setting-up-HA-Proxy-tunnel-as-relay-server/"
target="_blank" class="text-secondaryText text-sm">How to setup relay server using HA-proxy
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/Tutorial-for-setting-up-HA-Proxy-tunnel-as-relay-server/"
target="_blank" class="text-secondaryText text-sm">How to add a relay server (domain) to
Hiddify Manager
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/How-to-create-and-use-fake-domain/"
target="_blank" class="text-secondaryText text-sm">How How to create and use fake domain
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/domain-worker-cdn-and-tunneling/The-correct-format-of-admin-link/" target="_blank"
class="text-secondaryText text-sm">Explanations about admin link in Hiddify Manager and its
changes
from version 10
</a>
</div>
</div>
</div>
</div>
<div
class="max-h-[500px] md:max-h-[unset] md:border-l-2 border-t-2 md:border-t-0 border-white px-2 py-2 w-full md:w-1/3">
<div class="px-6 overflow-y-auto overflow-x-hidden max-h-[400px] md:h-full">
<div class="pt-6">
<h1 class="text-secondaryText title-font text-base">Related videos</h1>
</div>
<div class="flex flex-col gap-3 md:gap-1">
<a href="https://www.youtube.com/watch?v=ea5C93ynkUs">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/240580612-97edd880-89ee-4f57-9f8d-d9398a3ceea0.png"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
<a href="https://youtu.be/gAyfCJt0jXw?si=QSA8kNy_Ua79sN70">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/274807068-2e229b5d-4b3d-4588-8434-aff0b278c66a.jpg"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
</div>
</div>
</div>
</div>
<div id="section-bottom-3"
class="hidden md:flex bg-gradient-to-t from-white bg-opacity-80 h-24 rounded-b-3xl w-full absolute bottom-0 justify-center items-start py-3">
<button id="read-more-3" onclick="readMore(3)"
class="bg-[#E2E2E2] flex h-fit py-2 px-5 rounded-full items-center justify-center gap-2">
<span>Read more</span>
<svg id="arrow-3" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path
d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor"
d="M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z" />
</g>
</svg>
</button>
</div>
</section>
<section
class="relative w-full md:max-w-[900px] rounded-3xl border-2 border-white bg-white bg-opacity-20 shadow-lg">
<div class="flex flex-col md:flex-row h-full md:max-h-[450px]" id="section-4">
<div class="px-8 py-8 w-full md:w-2/3">
<img src="/assets/image-196.png" class="md:max-h-[183px] rounded-xl w-full md:max-w-[326px] mb-5" />
<div class="flex flex-col gap-2">
<h1 class="text-primaryText title-font text-lg mb-3">Basic concepts and troubleshooting</h1>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/How-to-make-sure-the-server's-IP-or-domain-is-clean/"
target="_blank" class="text-secondaryText text-sm">How to make sure the server's IP or domain is
clean</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/installation-and-setup/How-to-connect-to-server-via-SSH/" target="_blank"
class="text-secondaryText text-sm">How to connect to server via SSH</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/configuration-and-advanced-settings/How-to-connect-and-troubleshoot-via-SSH/"
target="_blank" class="text-secondaryText text-sm">How to connect and troubleshoot via SSH (Working
with Hiddify Menu)</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/How-to-set-DNS-server/" target="_blank"
class="text-secondaryText text-sm">How to set DNS server on Hiddify Manager</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="https://hiddify.com/manager/basic-concepts-and-troubleshooting/How-to-check-and-prevent-DNS-leaks/"
target="_blank" class="text-secondaryText text-sm">How to check and prevent DNS leaks</a>
</div>
<div class="flex flex-col gap-2 md:hidden" id="section-content-4">
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/Troubleshooting-connectivity-issues-with-HiddifyManager-and-proxies/"
target="_blank" class="text-secondaryText text-sm">
Troubleshooting connectivity issues with Hiddify Manager and proxies
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/How-to-setup-Firewall-on-Hiddify-panel/"
target="_blank" class="text-secondaryText text-sm">How to setup Firewall on Hiddify Manager
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/How-to-monitor-server-resources-on-Hiddify/"
target="_blank" class="text-secondaryText text-sm">How to monitor server resources on Hiddify
Manager
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/How-to-do-speed-test-on-server/"
target="_blank" class="text-secondaryText text-sm">How to do speed test on server
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/How-to-disable-IP-version-6-on-Hiddify/"
target="_blank" class="text-secondaryText text-sm">How to disable IP version 6 on Hiddify Manager
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/Disable-SSH-Password-Authentication/"
target="_blank" class="text-secondaryText text-sm">Disable SSH Password Authentication on SSH
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/How-to-change-SSH-port-on-your-server/"
target="_blank" class="text-secondaryText text-sm">How to change SSH port on your server
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/TLS-setting-for-increased-security/"
target="_blank" class="text-secondaryText text-sm">TLS setting for increased security
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/How-to-transfer-files-between-a-server-and-a-computer/"
target="_blank" class="text-secondaryText text-sm">How to transfer files between a server and a
computer
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/How-the-TLS-Trick-works-and-its-usage/"
target="_blank" class="text-secondaryText text-sm">How the TLS Trick works and its usage
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="https://hiddify.com/manager/basic-concepts-and-troubleshooting/How-MUX-works-and-its-usage/"
target="_blank" class="text-secondaryText text-sm">How MUX works and its usage
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/basic-concepts-and-troubleshooting/Basic-Concepts/" target="_blank"
class="text-secondaryText text-sm">Basic concepts related to the internet and using proxies
</a>
</div>
</div>
</div>
</div>
<!-- <div
class="max-h-[500px] md:max-h-[unset] md:border-l-2 border-t-2 md:border-t-0 border-white px-8 py-8 w-full md:w-1/3 overflow-y-auto overflow-x-hidden">
<h1 class="text-secondaryText title-font text-base">Related videos</h1>
</div> -->
</div>
<div id="section-bottom-4"
class="hidden md:flex bg-gradient-to-t from-white bg-opacity-80 h-24 rounded-b-3xl w-full absolute bottom-0 justify-center items-start py-3">
<button id="read-more-4" onclick="readMore(4)"
class="bg-[#E2E2E2] flex h-fit py-2 px-5 rounded-full items-center justify-center gap-2">
<span>Read more</span>
<svg id="arrow-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path
d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor"
d="M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z" />
</g>
</svg>
</button>
</div>
</section>
<section
class="relative w-full md:max-w-[900px] rounded-3xl border-2 border-white bg-white bg-opacity-20 shadow-lg">
<div class="flex flex-col md:flex-row h-full md:max-h-[450px] rounded-xl" id="section-5">
<div class="px-8 py-8 w-full md:w-2/3">
<img src="/assets/android_tutorials.jpg"
class="md:max-h-[183px] rounded-xl w-full md:max-w-[326px] mb-5" />
<div class="flex flex-col gap-2">
<h1 class="text-primaryText title-font text-lg mb-3">Client softwares on Android</h1>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-android/Tutorial-for-HiddifyNG-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for HiddifyNG app</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-android/Tutorial-for-HiddifyClashAndroid-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for HiddifyClashAndroid app</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-android/Tutorial-for-V2rayNG-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for V2rayNG app</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-ios/Tutorial-for-SingBox-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for Sing-box app</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-android/Tutorial-for-Nekobox-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for Nekobox app</a>
</div>
<div class="flex flex-col gap-2 md:hidden" id="section-content-5">
<!-- hidden links goes here-->
</div>
</div>
</div>
<div
class="max-h-[500px] md:max-h-[unset] md:border-l-2 border-t-2 md:border-t-0 px-2 py-2 border-white w-full md:w-1/3">
<div class="px-6 overflow-y-auto overflow-x-hidden max-h-[400px] md:h-full">
<div class="pt-6">
<h1 class="text-secondaryText title-font text-base">Related videos</h1>
</div>
<div class="flex flex-col gap-3 md:gap-1">
<a href="https://www.youtube.com/watch?v=hVcWJ8Qg1GQ">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/HiddifyNG_Tutorial_en.png"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
<a href="https://www.youtube.com/watch?v=mUTfYd1_UCM">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/HiddifyClashAndroid_Tutorial_en.png"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
<a href="https://www.youtube.com/watch?v=5AQgbCwHujk">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/V2rayNG_Tutorial_en.png"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
<a href="https://www.youtube.com/watch?v=Ml7XeYp70mM">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/V2flyng_Tutorial_en.png"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
</div>
</div>
</div>
</div>
<!-- read more button goes here-->
</section>
<section
class="relative w-full md:max-w-[900px] rounded-3xl border-2 border-white bg-white bg-opacity-20 shadow-lg">
<div class="flex flex-col md:flex-row h-full md:max-h-[450px]" id="section-6">
<div class="px-8 py-8 w-full md:w-2/3">
<img src="/assets/ios_tutorials.jpg" class="md:max-h-[183px] rounded-xl w-full md:max-w-[326px] mb-5" />
<div class="flex flex-col gap-2">
<h1 class="text-primaryText title-font text-lg mb-3">Client softwares on iOS</h1>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-ios/Tutorial-for-ShadowRocket-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for ShadowRocket app</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-ios/Tutorial-for-Stash-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for Stash app</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-ios/Tutorial-for-FoXray-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for FoXray app</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-ios/Tutorial-for-Fair-VPN-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for Fair VPN app</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-ios/Tutorial-for-V2Box-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for V2Box app</a>
</div>
<div class="flex flex-col gap-2 md:hidden" id="section-content-6">
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-ios/Tutorial-for-Streisand/"" target=" _blank"
class="text-secondaryText text-sm">
Tutorial for Streisand
</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-ios/Tutorial-for-SingBox-app/" target="_blank"
class="text-secondaryText text-sm">Tutorial for Sing-box app
</a>
</div>
</div>
</div>
</div>
<!-- <div
class="max-h-[500px] md:max-h-[unset] md:border-l-2 border-t-2 md:border-t-0 border-white px-8 py-8 w-full md:w-1/3 overflow-y-auto overflow-x-hidden">
<h1 class="text-secondaryText title-font text-base">Related videos</h1>
</div> -->
</div>
<div id="section-bottom-6"
class="hidden md:flex bg-gradient-to-t from-white bg-opacity-80 h-24 rounded-b-3xl w-full absolute bottom-0 justify-center items-start py-3">
<button id="read-more-6" onclick="readMore(6)"
class="bg-[#E2E2E2] flex h-fit py-2 px-5 rounded-full items-center justify-center gap-2">
<span>Read more</span>
<svg id="arrow-6" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path
d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor"
d="M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z" />
</g>
</svg>
</button>
</div>
</section>
<section
class="relative w-full md:max-w-[900px] rounded-3xl border-2 border-white bg-white bg-opacity-20 shadow-lg">
<div class="flex flex-col md:flex-row h-full md:max-h-[450px]" id="section-7">
<div class="px-8 py-8 w-full md:w-2/3">
<img src="/assets/desktop_tutorials.jpg"
class="md:max-h-[183px] rounded-xl w-full md:max-w-[326px] mb-5" />
<div class="flex flex-col gap-2">
<h1 class="text-primaryText title-font text-lg mb-3">Client softwares on Desktop</h1>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-desktop/Tutorial-for-HiddifyN-software/" target="_blank"
class="text-secondaryText text-sm">Tutorial for HiddifyN software</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-desktop/Tutorial-for-HiddifyClashDesktop-software/"
target="_blank" class="text-secondaryText text-sm">Tutorial for HiddifyClashDesktop software</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/client-software-on-desktop/Tutorial-for-QV2ray-software/" target="_blank"
class="text-secondaryText text-sm">Tutorial for QV2ray software</a>
</div>
<div class="flex flex-col gap-2 md:hidden" id="section-content-7">
<!-- hidden links goes here -->
</div>
</div>
</div>
<div
class="max-h-[500px] md:max-h-[unset] md:border-l-2 border-t-2 md:border-t-0 border-white px-2 py-2 w-full md:w-1/3">
<div class="px-6 overflow-y-auto overflow-x-hidden max-h-[400px] md:h-full">
<div class="pt-6">
<h1 class="text-secondaryText title-font text-base">Related videos</h1>
</div>
<div class="flex flex-col gap-3 md:gap-1">
<a href="https://www.youtube.com/watch?v=Jnnx1VWMlEs">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/HiddifyN_Tutorial_en.png"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
<a href="https://www.youtube.com/watch?v=L1VxAcG_7jg">
<div class="relative p-2 flex justify-center items-center">
<img src="/assets/HiddifyClashDesktop_tutorial_en.png"
class="md:max-h-[103px] w-full md:max-w-[184px] rounded-xl" />
<img src="/assets/play-icon.svg" class="absolute" decoding="async" loading="lazy" />
</div>
</a>
</div>
</div>
</div>
</div>
<!-- read more button goes here -->
</section>
<section
class="relative w-full md:max-w-[900px] rounded-3xl border-2 border-white bg-white bg-opacity-20 shadow-lg">
<div class="flex flex-col md:flex-row h-full md:max-h-[450px]" id="section-8">
<div class="px-8 py-8 w-full md:w-2/3">
<img src="/assets/contribution.jpg" class="md:max-h-[183px] rounded-xl w-full md:max-w-[326px] mb-5" />
<div class="flex flex-col gap-2">
<h1 class="text-primaryText title-font text-lg mb-3">Contribution</h1>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/contribution/How-to-contribute-to-this-project/" target="_blank"
class="text-secondaryText text-sm">How to contribute to this project</a>
</div>
<div class="flex items-center gap-2">
<div>
<div class="h-2 w-2 rounded-full bg-[#455FE9]"></div>
</div>
<a href="/manager/contribution/How-to-use-API-in-HiddifyManager-project/" target="_blank"
class="text-secondaryText text-sm">How to use API in Hiddify Manager project</a>
</div>
<div class="flex flex-col gap-2 md:hidden" id="section-content-8">
<!-- hidden links goes here-->
</div>
</div>
</div>
<!-- <div
class="max-h-[500px] md:max-h-[unset] md:border-l-2 border-t-2 md:border-t-0 border-white px-8 py-8 w-full md:w-1/3 overflow-y-auto overflow-x-hidden">
<h1 class="text-secondaryText title-font text-base">Related videos</h1>
</div> -->
</div>
<!-- read more button -->
</section>
</section>
</div>
</main>
<footer
class="body-font relative bg-transparent py-4 text-secondary border-t border-white px-3 md:px-16 lg:px-28 xl:px-36">
<div class="flex flex-col flex-wrap px-5 py-24 md:flex-row md:flex-nowrap md:items-center lg:items-start">
<div class="w-full md:w-64 flex-shrink-0 md:mx-0 px-4 text-left">
<div class="w-full flex flex-col sm:flex-row sm:items-center sm:justify-between gap-5">
<a class="title-font flex items-center font-medium text-white md:justify-start">
<img src="/assets/hiddify-logo.png" alt="hero" height="40" />
</a>
<div class="items-end justify-start gap-5 flex md:hidden">
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
<a href="https://www.youtube.com/@hiddify">
<img src="/assets/socials/youtube.svg" alt="linux" class="w-6" decoding="async" loading="lazy" />
</a>
</div>
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
<a href="https://twitter.com/hiddify_com">
<img src="/assets/socials/x.svg" alt="linux" class="w-6" decoding="async" loading="lazy" />
</a>
</div>
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
<a href="https://t.me/hiddify">
<img src="/assets/socials/telegram.svg" alt="linux" class="w-6" decoding="async" loading="lazy" />
</a>
</div>
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
<a href="https://github.com/hiddify/Hiddify-Manager">
<img src="/assets/socials/github.svg" alt="linux" class="w-6" decoding="async" loading="lazy" />
</a>
</div>
</div>
</div>
<p class="mt-5 mb-10 text-secondary text-sm">
To ensure everyone can access the unrestricted internet easily with a powerful and
professional anti-censorship tool
</p>
<div class="items-end justify-start gap-5 hidden md:flex">
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
<a href="https://www.youtube.com/@hiddify">
<img src="/assets/socials/youtube.svg" alt="linux" class="w-6" decoding="async" loading="lazy" />
</a>
</div>
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
<a href="https://twitter.com/hiddify_com">
<img src="/assets/socials/x.svg" alt="linux" class="w-6" decoding="async" loading="lazy" />
</a>
</div>
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
<a href="https://t.me/hiddify">
<img src="/assets/socials/telegram.svg" alt="linux" class="w-6" decoding="async" loading="lazy" />
</a>
</div>
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
<a href="https://github.com/hiddify/Hiddify-Manager">
<img src="/assets/socials/github.svg" alt="linux" class="w-6" decoding="async" loading="lazy" />
</a>
</div>
</div>
</div>
<div class="-mb-10 mt-10 flex flex-grow flex-wrap md:mt-0 md:pl-20 text-left">
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<h2 class="title-font mb-3 text-lg text-secondary">Download Client</h2>
<nav class="mb-10 list-none">
<li>
<a href="https://app.hiddify.com/" target="_blank" class="text-sm text-secondary"> Android </a>
</li>
<li>
<a href="https://app.hiddify.com/" target="_blank" class="text-sm text-secondary"> IOS </a>
</li>
<li>
<a href="https://app.hiddify.com/" target="_blank" class="text-sm text-secondary"> Windows </a>
</li>
<li>
<a href="https://app.hiddify.com/" target="_blank" class="text-sm text-secondary"> MacOS </a>
</li>
<li>
<a href="https://app.hiddify.com/" target="_blank" class="text-sm text-secondary"> Linux </a>
</li>
</nav>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<h2 class="title-font mb-3 text-lg text-secondary">Setup Hiddify Manager</h2>
<nav class="mb-10 list-none">
<li>
<a href="https://github.com/hiddify/Hiddify-Manager/wiki/Quick-Installation-On-Ubuntu"
class="text-sm text-secondary">
Ubuntu
</a>
</li>
<li>
<a href="https://github.com/hiddify/Hiddify-Manager/wiki/Install-Hiddify-using-Docker"
class="text-sm text-secondary">
Docker
</a>
</li>
<li>
<a class="text-sm text-secondary"
href="https://github.com/hiddify/Hiddify-Manager/wiki/Quick-installation-on-Hetzner-Servers">
Hetzner
</a>
</li>
<li>
<a href="https://github.com/hiddify/Hiddify-Manager/wiki/Quick-Installation-on-Oracle-Cloud"
class="text-sm text-secondary">
Oracle Cloud
</a>
</li>
<li>
<a href="https://github.com/hiddify/Hiddify-Manager/wiki/Quick-installation-on-Vultr-Servers"
class="text-sm text-secondary">
Vultr
</a>
</li>
<li>
<a href="https://github.com/hiddify/Hiddify-Manager/wiki/Quick-Installation-on-OVH-Servers"
class="text-sm text-secondary">
OVH
</a>
</li>
</nav>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<h2 class="title-font mb-3 text-lg text-secondary">Support</h2>
<nav class="mb-10 list-none">
<li>
<a class="text-sm text-secondary" href="https://github.com/hiddify/Hiddify-Manager/wiki/">
Visit GitHub Wiki
</a>
</li>
<li>
<a class="text-sm text-secondary" href="https://t.me/hiddify"> Join Telegram Group </a>
</li>
</nav>
</div>
</div>
</div>
<div>
<div class="flex justify-center">
<p class="text-center text-sm sm:text-left">
Powered by 2024 Hiddify team. All Rights Reserved.
</p>
</div>
</div>
</footer>
<script>
var menuBtn = document.getElementById("menu-btn");
var sideBar = document.getElementById("sidebar");
var closeSideBarBtn = document.getElementById("close-sidebar-btn")
menuBtn.addEventListener("click", function () {
sideBar.classList.remove("hidden");
sideBar.classList.add("flex");
});
closeSideBarBtn.addEventListener("click", function () {
sideBar.classList.remove("flex");
sideBar.classList.add("hidden");
});
function readMore(id) {
const readMoreBtn = document.getElementById(`read-more-${id}`)
const arrowIcon = document.getElementById(`arrow-${id}`)
const hiddenContent = document.getElementById(`section-content-${id}`)
const section = document.getElementById(`section-${id}`)
const sectionBottom = document.getElementById(`section-bottom-${id}`)
const btnText = readMoreBtn.getElementsByTagName('span')[0].innerText
if (btnText.includes('more')) {
readMoreBtn.getElementsByTagName('span')[0].innerText = 'Read less'
hiddenContent.style.display = 'flex'
sectionBottom.classList.remove('absolute')
const content = document.getElementById(`section-content-${id}`)
section.style.maxHeight = content.offsetHeight + 450 + 'px'
arrowIcon.style.transform = "rotate(180deg)";
} else {
readMoreBtn.getElementsByTagName('span')[0].innerText = 'Read more'
hiddenContent.style.display = 'none'
section.style.maxHeight = 450 + 'px'
arrowIcon.style.transform = "rotate(0deg)";
sectionBottom.classList.add('absolute')
}
}
</script>
</body>
</html>