ashlynn/TBHFileSharingBotPublic · Bot Template
Share files quickly and securely with @TBHFileSharingBot. Send files up to 4 GB and receive instant sharing links for Telegram or direct sharing. With secure encryption, inline mode, and a simple workflow, sharing files from any Telegram chat is fast and effortless.
Utilityfile-sharinginline-modetelegram-linkschannel-storagedocumentsvideos
11 commands0 envUpdated 2d agoCreated Sep 26, 2025
commands/index.html
html · 1486 lines
1/**#command2name: index.html3answer: 4keyboard: 5parse_mode: markdown6aliases: 7allow_only_group: false8need_reply: false9is_web: 010#command**/11 12<!DOCTYPE html>13<html lang="en">14<head>15 <meta charset="UTF-8">16 <meta name="viewport" content="width=device-width, initial-scale=1.0">17 <meta name="theme-color" content="#050914">18 <meta name="description" content="TBH File Sharing Bot lets you share files securely through Telegram with instant links, inline mode, and support for files up to 4 GB.">19 <title>TBH File Sharing Bot — Share files in seconds</title>20 <style>21 :root {22 --bg: #050914;23 --bg-soft: #09111f;24 --card: rgba(11, 20, 36, 0.72);25 --card-solid: #0c1627;26 --line: rgba(255, 255, 255, 0.09);27 --line-bright: rgba(255, 255, 255, 0.16);28 --text: #f7fbff;29 --muted: #91a2ba;30 --blue: #2aabee;31 --blue-bright: #60cbff;32 --cyan: #40e0d0;33 --green: #52e29d;34 --violet: #8b7cff;35 --shadow: 0 26px 80px rgba(0, 0, 0, 0.42);36 }37 38 * {39 box-sizing: border-box;40 }41 42 html {43 scroll-behavior: smooth;44 }45 46 body {47 margin: 0;48 min-width: 320px;49 color: var(--text);50 background:51 radial-gradient(circle at 12% 12%, rgba(42, 171, 238, 0.13), transparent 26rem),52 radial-gradient(circle at 88% 30%, rgba(139, 124, 255, 0.1), transparent 24rem),53 radial-gradient(circle at 52% 90%, rgba(64, 224, 208, 0.07), transparent 27rem),54 var(--bg);55 font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;56 line-height: 1.5;57 overflow-x: hidden;58 }59 60 body::before {61 content: "";62 position: fixed;63 inset: 0;64 z-index: -2;65 pointer-events: none;66 opacity: 0.28;67 background-image:68 linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),69 linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);70 background-size: 46px 46px;71 mask-image: radial-gradient(circle at center, black 28%, transparent 84%);72 }73 74 a {75 color: inherit;76 text-decoration: none;77 }78 79 button, a {80 -webkit-tap-highlight-color: transparent;81 }82 83 button {84 font: inherit;85 }86 87 .container {88 width: min(1160px, calc(100% - 40px));89 margin: 0 auto;90 }91 92 .nav-wrap {93 position: sticky;94 top: 0;95 z-index: 50;96 padding-top: 14px;97 }98 99 .nav {100 min-height: 68px;101 display: flex;102 align-items: center;103 justify-content: space-between;104 gap: 20px;105 padding: 12px 14px 12px 16px;106 border: 1px solid var(--line);107 border-radius: 20px;108 background: rgba(5, 9, 20, 0.76);109 box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);110 backdrop-filter: blur(18px);111 }112 113 .brand {114 display: inline-flex;115 align-items: center;116 gap: 11px;117 min-width: 0;118 }119 120 .brand-mark {121 position: relative;122 width: 42px;123 height: 42px;124 flex: 0 0 auto;125 display: grid;126 place-items: center;127 border-radius: 13px;128 color: #fff;129 background: linear-gradient(145deg, var(--blue-bright), #2188e9 62%, var(--violet));130 box-shadow: 0 8px 28px rgba(42, 171, 238, .28);131 transform: rotate(-3deg);132 }133 134 .brand-mark::after {135 content: "";136 width: 17px;137 height: 20px;138 border: 2px solid #fff;139 border-radius: 4px;140 box-shadow: 5px 4px 0 -2px rgba(255,255,255,.5);141 }142 143 .brand-name {144 display: block;145 font-size: 14px;146 font-weight: 800;147 letter-spacing: -.01em;148 white-space: nowrap;149 }150 151 .brand-handle {152 display: block;153 color: var(--muted);154 font-size: 10px;155 white-space: nowrap;156 }157 158 .nav-links {159 display: flex;160 align-items: center;161 gap: 25px;162 margin-left: auto;163 }164 165 .nav-links a {166 color: #a7b4c8;167 font-size: 12px;168 font-weight: 700;169 letter-spacing: .06em;170 text-transform: uppercase;171 transition: color .2s ease;172 }173 174 .nav-links a:hover {175 color: #fff;176 }177 178 .status {179 display: inline-flex;180 align-items: center;181 gap: 7px;182 padding: 7px 10px;183 border: 1px solid rgba(82, 226, 157, .18);184 border-radius: 999px;185 color: #7aefb5;186 background: rgba(82, 226, 157, .07);187 font-size: 10px;188 font-weight: 800;189 letter-spacing: .06em;190 text-transform: uppercase;191 }192 193 .status-dot {194 width: 7px;195 height: 7px;196 border-radius: 50%;197 background: var(--green);198 box-shadow: 0 0 0 0 rgba(82, 226, 157, .5);199 animation: pulse 2s infinite;200 }201 202 .nav-cta {203 display: inline-flex;204 align-items: center;205 justify-content: center;206 gap: 8px;207 min-height: 42px;208 padding: 0 16px;209 border-radius: 12px;210 background: #fff;211 color: #07101d;212 font-size: 12px;213 font-weight: 850;214 transition: transform .2s ease, background .2s ease;215 }216 217 .nav-cta:hover {218 transform: translateY(-1px);219 background: #eaf8ff;220 }221 222 .menu-button {223 display: none;224 width: 42px;225 height: 42px;226 border: 1px solid var(--line);227 border-radius: 12px;228 color: #fff;229 background: rgba(255,255,255,.04);230 cursor: pointer;231 }232 233 .mobile-menu {234 display: none;235 padding: 8px 4px 2px;236 }237 238 .mobile-menu.open {239 display: grid;240 grid-template-columns: 1fr 1fr;241 gap: 8px;242 }243 244 .mobile-menu a {245 padding: 10px 12px;246 border: 1px solid var(--line);247 border-radius: 10px;248 color: var(--muted);249 background: rgba(255,255,255,.025);250 font-size: 12px;251 font-weight: 700;252 text-align: center;253 }254 255 .hero {256 position: relative;257 display: grid;258 grid-template-columns: 1.03fr .97fr;259 gap: clamp(40px, 7vw, 88px);260 align-items: center;261 min-height: calc(100vh - 96px);262 padding: 92px 0 84px;263 }264 265 .eyebrow {266 display: inline-flex;267 align-items: center;268 gap: 8px;269 padding: 7px 11px;270 border: 1px solid rgba(42, 171, 238, .17);271 border-radius: 999px;272 color: #96dbff;273 background: rgba(42, 171, 238, .075);274 font-size: 11px;275 font-weight: 800;276 letter-spacing: .04em;277 text-transform: uppercase;278 }279 280 .eyebrow-spark {281 color: var(--blue-bright);282 filter: drop-shadow(0 0 7px rgba(96, 203, 255, .6));283 }284 285 h1 {286 max-width: 760px;287 margin: 23px 0 0;288 font-size: clamp(48px, 6.8vw, 82px);289 line-height: .98;290 letter-spacing: -.062em;291 }292 293 .gradient-text {294 display: block;295 color: transparent;296 background: linear-gradient(95deg, #fff 5%, #a9e4ff 48%, #8f82ff 95%);297 -webkit-background-clip: text;298 background-clip: text;299 }300 301 .hero-copy {302 max-width: 590px;303 margin: 25px 0 0;304 color: var(--muted);305 font-size: clamp(15px, 1.6vw, 18px);306 line-height: 1.75;307 }308 309 .hero-actions {310 display: flex;311 flex-wrap: wrap;312 gap: 12px;313 margin-top: 31px;314 }315 316 .button {317 min-height: 52px;318 display: inline-flex;319 align-items: center;320 justify-content: center;321 gap: 10px;322 padding: 0 20px;323 border: 1px solid transparent;324 border-radius: 14px;325 font-size: 14px;326 font-weight: 800;327 transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;328 }329 330 .button:hover {331 transform: translateY(-2px);332 }333 334 .button-primary {335 color: #fff;336 background: linear-gradient(115deg, #179fe8, #2aabee 58%, #557bf5);337 box-shadow: 0 16px 38px rgba(42, 171, 238, .24);338 }339 340 .button-primary:hover {341 box-shadow: 0 18px 46px rgba(42, 171, 238, .36);342 }343 344 .button-secondary {345 color: #dceaff;346 border-color: var(--line);347 background: rgba(255,255,255,.035);348 }349 350 .button-secondary:hover {351 border-color: var(--line-bright);352 }353 354 .plane {355 display: inline-block;356 font-size: 17px;357 transform: rotate(-18deg);358 }359 360 .trust-row {361 display: flex;362 flex-wrap: wrap;363 gap: 10px;364 margin-top: 28px;365 }366 367 .trust-item {368 display: inline-flex;369 align-items: center;370 gap: 7px;371 padding: 8px 11px;372 border: 1px solid var(--line);373 border-radius: 999px;374 color: #9baac0;375 background: rgba(255,255,255,.025);376 font-size: 11px;377 font-weight: 700;378 }379 380 .trust-item i {381 color: var(--green);382 font-style: normal;383 }384 385 .phone-stage {386 position: relative;387 display: grid;388 place-items: center;389 min-height: 585px;390 isolation: isolate;391 }392 393 .phone-stage::before {394 content: "";395 position: absolute;396 width: 390px;397 height: 390px;398 border-radius: 50%;399 background: conic-gradient(from 210deg, rgba(42,171,238,.25), rgba(139,124,255,.22), rgba(64,224,208,.12), rgba(42,171,238,.25));400 filter: blur(50px);401 opacity: .42;402 animation: breathe 6s ease-in-out infinite;403 }404 405 .phone {406 position: relative;407 width: min(390px, 100%);408 padding: 12px;409 border: 1px solid rgba(255,255,255,.14);410 border-radius: 36px;411 background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025));412 box-shadow: 0 45px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);413 transform: rotate(1.5deg);414 animation: float 7s ease-in-out infinite;415 }416 417 .phone-screen {418 overflow: hidden;419 padding: 18px;420 border: 1px solid rgba(255,255,255,.06);421 border-radius: 27px;422 background:423 radial-gradient(circle at 100% 0, rgba(42,171,238,.13), transparent 44%),424 #07111e;425 }426 427 .chat-head {428 display: flex;429 align-items: center;430 gap: 10px;431 padding: 2px 1px 16px;432 border-bottom: 1px solid var(--line);433 }434 435 .avatar {436 width: 39px;437 height: 39px;438 display: grid;439 place-items: center;440 border-radius: 50%;441 background: linear-gradient(145deg, #53c7ff, #178fdf);442 box-shadow: 0 7px 20px rgba(42,171,238,.23);443 font-size: 16px;444 font-weight: 900;445 }446 447 .chat-name {448 font-size: 13px;449 font-weight: 850;450 }451 452 .chat-status {453 color: var(--green);454 font-size: 9px;455 }456 457 .chat-menu {458 margin-left: auto;459 color: #75859b;460 font-size: 20px;461 letter-spacing: 2px;462 }463 464 .messages {465 display: flex;466 flex-direction: column;467 gap: 11px;468 min-height: 385px;469 padding: 24px 0 11px;470 }471 472 .bubble {473 max-width: 86%;474 padding: 12px 13px;475 border-radius: 14px;476 font-size: 11px;477 line-height: 1.45;478 box-shadow: 0 7px 22px rgba(0,0,0,.14);479 }480 481 .bubble-user {482 align-self: flex-end;483 border-bottom-right-radius: 4px;484 color: #fff;485 background: linear-gradient(135deg, #158ed2, #237acb);486 }487 488 .bubble-bot {489 align-self: flex-start;490 border: 1px solid rgba(255,255,255,.065);491 border-bottom-left-radius: 4px;492 color: #d7e3f2;493 background: #101d2e;494 }495 496 .file-card {497 display: flex;498 align-items: center;499 gap: 10px;500 }501 502 .file-icon {503 width: 36px;504 height: 42px;505 display: grid;506 place-items: center;507 flex: 0 0 auto;508 border-radius: 9px;509 color: #84d8ff;510 background: rgba(42,171,238,.15);511 font-size: 9px;512 font-weight: 900;513 }514 515 .file-name {516 display: block;517 max-width: 155px;518 overflow: hidden;519 font-size: 10px;520 font-weight: 800;521 text-overflow: ellipsis;522 white-space: nowrap;523 }524 525 .file-size {526 color: rgba(255,255,255,.65);527 font-size: 9px;528 }529 530 .success-line {531 display: flex;532 align-items: center;533 gap: 7px;534 color: #78eab0;535 font-weight: 800;536 }537 538 .success-check {539 width: 18px;540 height: 18px;541 display: grid;542 place-items: center;543 border-radius: 50%;544 color: #062717;545 background: var(--green);546 font-size: 11px;547 }548 549 .link-box {550 display: flex;551 align-items: center;552 gap: 8px;553 margin-top: 10px;554 padding: 9px 10px;555 border: 1px dashed rgba(96,203,255,.24);556 border-radius: 9px;557 color: #89d8ff;558 background: rgba(42,171,238,.06);559 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;560 font-size: 8px;561 }562 563 .link-box span {564 overflow: hidden;565 text-overflow: ellipsis;566 white-space: nowrap;567 }568 569 .link-copy {570 margin-left: auto;571 color: #b8e8ff;572 font-family: inherit;573 font-size: 8px;574 font-weight: 900;575 }576 577 .chat-actions {578 display: grid;579 grid-template-columns: 1fr 1fr;580 gap: 7px;581 margin-top: 8px;582 }583 584 .chat-action {585 padding: 8px 6px;586 border: 1px solid rgba(42,171,238,.15);587 border-radius: 8px;588 color: #9addff;589 background: rgba(42,171,238,.08);590 font-size: 9px;591 font-weight: 800;592 text-align: center;593 }594 595 .float-card {596 position: absolute;597 z-index: 2;598 display: flex;599 align-items: center;600 gap: 9px;601 padding: 11px 13px;602 border: 1px solid var(--line);603 border-radius: 13px;604 background: rgba(9, 17, 31, .88);605 box-shadow: var(--shadow);606 backdrop-filter: blur(14px);607 font-size: 10px;608 font-weight: 800;609 }610 611 .float-card span {612 width: 28px;613 height: 28px;614 display: grid;615 place-items: center;616 border-radius: 8px;617 font-size: 13px;618 }619 620 .float-a {621 top: 75px;622 right: -22px;623 animation: floatSmall 5s ease-in-out infinite;624 }625 626 .float-a span {627 color: #6ef0b2;628 background: rgba(82,226,157,.12);629 }630 631 .float-b {632 bottom: 65px;633 left: -33px;634 animation: floatSmall 5.7s ease-in-out infinite reverse;635 }636 637 .float-b span {638 color: #b1a7ff;639 background: rgba(139,124,255,.13);640 }641 642 .section {643 padding: 105px 0 0;644 }645 646 .section-head {647 max-width: 730px;648 margin: 0 auto 44px;649 text-align: center;650 }651 652 .section-label {653 color: var(--blue-bright);654 font-size: 11px;655 font-weight: 900;656 letter-spacing: .15em;657 text-transform: uppercase;658 }659 660 h2 {661 margin: 13px 0 0;662 font-size: clamp(35px, 5vw, 54px);663 line-height: 1.07;664 letter-spacing: -.045em;665 }666 667 .section-head p {668 margin: 16px auto 0;669 color: var(--muted);670 font-size: 15px;671 line-height: 1.7;672 }673 674 .feature-grid {675 display: grid;676 grid-template-columns: repeat(3, 1fr);677 gap: 16px;678 }679 680 .feature {681 position: relative;682 overflow: hidden;683 min-height: 245px;684 padding: 25px;685 border: 1px solid var(--line);686 border-radius: 22px;687 background: linear-gradient(150deg, rgba(15,27,47,.78), rgba(7,14,26,.65));688 box-shadow: inset 0 1px 0 rgba(255,255,255,.035);689 transition: transform .25s ease, border-color .25s ease;690 }691 692 .feature::after {693 content: "";694 position: absolute;695 right: -90px;696 bottom: -105px;697 width: 190px;698 height: 190px;699 border-radius: 50%;700 background: var(--feature-glow, rgba(42,171,238,.13));701 filter: blur(18px);702 opacity: 0;703 transition: opacity .25s ease;704 }705 706 .feature:hover {707 transform: translateY(-5px);708 border-color: rgba(96,203,255,.22);709 }710 711 .feature:hover::after {712 opacity: 1;713 }714 715 .feature-icon {716 width: 48px;717 height: 48px;718 display: grid;719 place-items: center;720 border: 1px solid rgba(255,255,255,.06);721 border-radius: 14px;722 color: var(--icon-color, var(--blue-bright));723 background: var(--icon-bg, rgba(42,171,238,.1));724 font-size: 21px;725 }726 727 .feature h3 {728 margin: 20px 0 8px;729 font-size: 18px;730 letter-spacing: -.02em;731 }732 733 .feature p {734 margin: 0;735 color: var(--muted);736 font-size: 13px;737 line-height: 1.7;738 }739 740 .feature-tag {741 display: inline-flex;742 margin-top: 19px;743 padding: 5px 8px;744 border: 1px solid var(--line);745 border-radius: 999px;746 color: #a8b7ca;747 font-size: 9px;748 font-weight: 850;749 letter-spacing: .08em;750 text-transform: uppercase;751 }752 753 .steps {754 position: relative;755 display: grid;756 grid-template-columns: repeat(3, 1fr);757 gap: 22px;758 margin-top: 58px;759 }760 761 .steps::before {762 content: "";763 position: absolute;764 top: 35px;765 left: 15%;766 right: 15%;767 height: 1px;768 background: linear-gradient(90deg, transparent, rgba(96,203,255,.38), rgba(139,124,255,.34), transparent);769 }770 771 .step {772 position: relative;773 z-index: 1;774 text-align: center;775 }776 777 .step-number {778 width: 70px;779 height: 70px;780 display: grid;781 place-items: center;782 margin: 0 auto 20px;783 border: 1px solid rgba(96,203,255,.21);784 border-radius: 21px;785 color: #fff;786 background: linear-gradient(145deg, #112740, #0a1728);787 box-shadow: 0 14px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);788 font-size: 19px;789 font-weight: 900;790 }791 792 .step h3 {793 margin: 0 0 8px;794 font-size: 17px;795 }796 797 .step p {798 max-width: 285px;799 margin: 0 auto;800 color: var(--muted);801 font-size: 13px;802 line-height: 1.65;803 }804 805 .commands-wrap {806 display: grid;807 grid-template-columns: .85fr 1.15fr;808 gap: 22px;809 align-items: stretch;810 }811 812 .inline-panel,813 .commands-panel {814 padding: clamp(26px, 4vw, 42px);815 border: 1px solid var(--line);816 border-radius: 26px;817 background: linear-gradient(150deg, rgba(16,29,50,.8), rgba(7,14,26,.72));818 box-shadow: inset 0 1px 0 rgba(255,255,255,.04);819 }820 821 .inline-panel {822 position: relative;823 overflow: hidden;824 background:825 radial-gradient(circle at 100% 0, rgba(139,124,255,.18), transparent 42%),826 linear-gradient(145deg, rgba(16,29,50,.86), rgba(7,14,26,.72));827 }828 829 .inline-panel::after {830 content: "@";831 position: absolute;832 right: -10px;833 bottom: -88px;834 color: rgba(255,255,255,.025);835 font-size: 290px;836 font-weight: 950;837 line-height: 1;838 }839 840 .inline-panel h3,841 .commands-panel h3 {842 margin: 15px 0 10px;843 font-size: clamp(24px, 3vw, 34px);844 letter-spacing: -.035em;845 }846 847 .inline-panel p,848 .commands-panel > p {849 position: relative;850 z-index: 1;851 margin: 0;852 color: var(--muted);853 font-size: 14px;854 line-height: 1.7;855 }856 857 .inline-demo {858 position: relative;859 z-index: 1;860 display: flex;861 align-items: center;862 gap: 10px;863 margin: 26px 0 22px;864 padding: 13px 14px;865 border: 1px solid var(--line-bright);866 border-radius: 14px;867 background: rgba(3,8,16,.58);868 box-shadow: 0 14px 40px rgba(0,0,0,.24);869 }870 871 .inline-demo strong {872 color: #9c91ff;873 }874 875 .inline-demo span {876 color: #c8d4e5;877 font-size: 12px;878 }879 880 .command-list {881 display: grid;882 gap: 9px;883 margin-top: 24px;884 }885 886 .command {887 width: 100%;888 display: flex;889 align-items: center;890 gap: 14px;891 padding: 13px 14px;892 border: 1px solid rgba(255,255,255,.065);893 border-radius: 13px;894 color: inherit;895 background: rgba(255,255,255,.025);896 cursor: pointer;897 text-align: left;898 transition: border-color .2s ease, background .2s ease;899 }900 901 .command:hover {902 border-color: rgba(96,203,255,.2);903 background: rgba(42,171,238,.06);904 }905 906 .command code {907 min-width: 66px;908 color: #8cd8ff;909 font-size: 12px;910 font-weight: 850;911 }912 913 .command span {914 color: var(--muted);915 font-size: 12px;916 }917 918 .command small {919 margin-left: auto;920 color: #62738b;921 font-size: 9px;922 font-weight: 800;923 text-transform: uppercase;924 }925 926 .cta {927 position: relative;928 overflow: hidden;929 margin-top: 108px;930 padding: clamp(38px, 7vw, 72px);931 border: 1px solid rgba(96,203,255,.14);932 border-radius: 30px;933 background:934 radial-gradient(circle at 12% 10%, rgba(42,171,238,.2), transparent 38%),935 radial-gradient(circle at 92% 90%, rgba(139,124,255,.16), transparent 34%),936 #081321;937 box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);938 text-align: center;939 }940 941 .cta::before {942 content: "";943 position: absolute;944 inset: 0;945 pointer-events: none;946 background-image:947 linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),948 linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);949 background-size: 35px 35px;950 mask-image: linear-gradient(to bottom, black, transparent);951 }952 953 .cta > * {954 position: relative;955 z-index: 1;956 }957 958 .cta h2 {959 max-width: 720px;960 margin-left: auto;961 margin-right: auto;962 }963 964 .cta p {965 max-width: 600px;966 margin: 17px auto 28px;967 color: var(--muted);968 font-size: 15px;969 line-height: 1.7;970 }971 972 footer {973 display: flex;974 align-items: center;975 justify-content: space-between;976 gap: 20px;977 padding: 35px 0;978 color: #718199;979 font-size: 11px;980 }981 982 footer a {983 color: #9ecfe9;984 font-weight: 750;985 }986 987 .toast {988 position: fixed;989 left: 50%;990 bottom: 24px;991 z-index: 100;992 padding: 11px 16px;993 border: 1px solid rgba(82,226,157,.2);994 border-radius: 12px;995 color: #b8ffda;996 background: rgba(7,24,19,.94);997 box-shadow: 0 14px 50px rgba(0,0,0,.4);998 font-size: 12px;999 font-weight: 800;1000 opacity: 0;1001 pointer-events: none;1002 transform: translate(-50%, 12px);1003 transition: opacity .2s ease, transform .2s ease;1004 }1005 1006 .toast.show {1007 opacity: 1;1008 transform: translate(-50%, 0);1009 }1010 1011 .reveal {1012 opacity: 0;1013 transform: translateY(20px);1014 transition: opacity .7s ease, transform .7s ease;1015 }1016 1017 .reveal.visible {1018 opacity: 1;1019 transform: none;1020 }1021 1022 @keyframes pulse {1023 70% { box-shadow: 0 0 0 7px rgba(82, 226, 157, 0); }1024 100% { box-shadow: 0 0 0 0 rgba(82, 226, 157, 0); }1025 }1026 1027 @keyframes float {1028 0%, 100% { transform: translateY(0) rotate(1.5deg); }1029 50% { transform: translateY(-9px) rotate(.4deg); }1030 }1031 1032 @keyframes floatSmall {1033 0%, 100% { transform: translateY(0); }1034 50% { transform: translateY(-7px); }1035 }1036 1037 @keyframes breathe {1038 0%, 100% { transform: scale(.92); opacity: .33; }1039 50% { transform: scale(1.08); opacity: .52; }1040 }1041 1042 @media (max-width: 980px) {1043 .nav-links, .status {1044 display: none;1045 }1046 1047 .menu-button {1048 display: inline-grid;1049 place-items: center;1050 }1051 1052 .nav-cta {1053 margin-left: auto;1054 }1055 1056 .hero {1057 grid-template-columns: 1fr;1058 min-height: auto;1059 padding-top: 80px;1060 text-align: center;1061 }1062 1063 .hero-copy {1064 margin-left: auto;1065 margin-right: auto;1066 }1067 1068 .hero-actions, .trust-row {1069 justify-content: center;1070 }1071 1072 .phone-stage {1073 min-height: 610px;1074 }1075 1076 .feature-grid {1077 grid-template-columns: repeat(2, 1fr);1078 }1079 1080 .commands-wrap {1081 grid-template-columns: 1fr;1082 }1083 }1084 1085 @media (max-width: 680px) {1086 .container {1087 width: min(100% - 24px, 1160px);1088 }1089 1090 .nav {1091 min-height: 62px;1092 padding: 9px 10px 9px 12px;1093 border-radius: 16px;1094 }1095 1096 .brand-mark {1097 width: 38px;1098 height: 38px;1099 }1100 1101 .brand-name {1102 max-width: 145px;1103 overflow: hidden;1104 text-overflow: ellipsis;1105 }1106 1107 .brand-handle, .nav-cta {1108 display: none;1109 }1110 1111 .hero {1112 gap: 45px;1113 padding: 70px 0 45px;1114 }1115 1116 h1 {1117 font-size: clamp(44px, 15vw, 64px);1118 }1119 1120 .hero-actions {1121 display: grid;1122 }1123 1124 .button {1125 width: 100%;1126 }1127 1128 .phone-stage {1129 min-height: 540px;1130 }1131 1132 .phone {1133 width: min(350px, 94%);1134 }1135 1136 .float-a {1137 right: -3px;1138 top: 45px;1139 }1140 1141 .float-b {1142 left: -2px;1143 bottom: 34px;1144 }1145 1146 .feature-grid, .steps {1147 grid-template-columns: 1fr;1148 }1149 1150 .steps {1151 gap: 36px;1152 }1153 1154 .steps::before {1155 display: none;1156 }1157 1158 .feature {1159 min-height: auto;1160 }1161 1162 .section {1163 padding-top: 80px;1164 }1165 1166 .commands-panel, .inline-panel {1167 padding: 24px;1168 }1169 1170 .command {1171 align-items: flex-start;1172 }1173 1174 .command small {1175 display: none;1176 }1177 1178 .cta {1179 margin-top: 82px;1180 border-radius: 24px;1181 }1182 1183 footer {1184 flex-direction: column;1185 text-align: center;1186 }1187 }1188 1189 @media (prefers-reduced-motion: reduce) {1190 html {1191 scroll-behavior: auto;1192 }1193 1194 *, *::before, *::after {1195 animation-duration: .01ms !important;1196 animation-iteration-count: 1 !important;1197 transition-duration: .01ms !important;1198 }1199 1200 .reveal {1201 opacity: 1;1202 transform: none;1203 }1204 }1205 </style>1206</head>1207<body>1208 <div class="container nav-wrap">1209 <nav class="nav" aria-label="Main navigation">1210 <a class="brand" href="#top" aria-label="TBH File Sharing Bot home">1211 <span class="brand-mark" aria-hidden="true"></span>1212 <span>1213 <span class="brand-name">TBH File Sharing Bot</span>1214 <span class="brand-handle">@TBHFileSharingBot</span>1215 </span>1216 </a>1217 1218 <div class="nav-links">1219 <a href="#features">Features</a>1220 <a href="#how">How it works</a>1221 <a href="#commands">Commands</a>1222 </div>1223 1224 <span class="status"><span class="status-dot"></span> Online</span>1225 <a class="nav-cta" href="https://t.me/TBHFileSharingBot" target="_blank" rel="noopener">1226 Open bot <span aria-hidden="true">↗</span>1227 </a>1228 <button class="menu-button" id="menuButton" type="button" aria-expanded="false" aria-controls="mobileMenu" aria-label="Open navigation">☰</button>1229 </nav>1230 <div class="mobile-menu" id="mobileMenu">1231 <a href="#features">Features</a>1232 <a href="#how">How it works</a>1233 <a href="#commands">Commands</a>1234 <a href="https://t.me/TBHFileSharingBot" target="_blank" rel="noopener">Open bot ↗</a>1235 </div>1236 </div>1237 1238 <main id="top">1239 <section class="container hero">1240 <div class="hero-content">1241 <span class="eyebrow"><span class="eyebrow-spark">✦</span> Fast, private and built for Telegram</span>1242 <h1>Share any file. <span class="gradient-text">In seconds.</span></h1>1243 <p class="hero-copy">1244 Send a file to TBH File Sharing Bot and get a ready-to-share link instantly.1245 No complicated setup—just upload, copy and share.1246 </p>1247 <div class="hero-actions">1248 <a class="button button-primary" href="https://t.me/TBHFileSharingBot" target="_blank" rel="noopener">1249 <span class="plane" aria-hidden="true">➤</span> Start sharing now1250 </a>1251 <a class="button button-secondary" href="#how">See how it works <span aria-hidden="true">↓</span></a>1252 </div>1253 <div class="trust-row" aria-label="Key benefits">1254 <span class="trust-item"><i>✓</i> Up to 4 GB</span>1255 <span class="trust-item"><i>✓</i> Secure encryption</span>1256 <span class="trust-item"><i>✓</i> Inline mode</span>1257 </div>1258 </div>1259 1260 <div class="phone-stage" aria-label="Telegram file sharing preview">1261 <div class="float-card float-a"><span>✓</span> Link ready instantly</div>1262 <div class="float-card float-b"><span>4G</span> Large-file support</div>1263 1264 <div class="phone">1265 <div class="phone-screen">1266 <div class="chat-head">1267 <div class="avatar">TB</div>1268 <div>1269 <div class="chat-name">TBH File Sharing Bot</div>1270 <div class="chat-status">bot · online</div>1271 </div>1272 <div class="chat-menu" aria-hidden="true">•••</div>1273 </div>1274 1275 <div class="messages">1276 <div class="bubble bubble-user">1277 <div class="file-card">1278 <div class="file-icon">ZIP</div>1279 <div>1280 <span class="file-name">project-assets.zip</span>1281 <span class="file-size">1.8 GB</span>1282 </div>1283 </div>1284 </div>1285 1286 <div class="bubble bubble-bot">1287 <div class="success-line"><span class="success-check">✓</span> File uploaded securely</div>1288 <div class="link-box"><span>t.me/TBHFileSharingBot?start=file_8f2a</span><b class="link-copy">COPY</b></div>1289 <div class="chat-actions">1290 <span class="chat-action">Share on Telegram</span>1291 <span class="chat-action">Copy link</span>1292 </div>1293 </div>1294 1295 <div class="bubble bubble-user">That was fast ⚡</div>1296 <div class="bubble bubble-bot">Your link is ready to share. Use inline mode anytime by typing <strong>@TBHFileSharingBot</strong> in a chat.</div>1297 </div>1298 </div>1299 </div>1300 </div>1301 </section>1302 1303 <section class="container section reveal" id="features">1304 <div class="section-head">1305 <span class="section-label">Everything you need</span>1306 <h2>File sharing without the friction.</h2>1307 <p>Designed around a simple idea: getting a file from you to anyone else should take only a few taps.</p>1308 </div>1309 1310 <div class="feature-grid">1311 <article class="feature">1312 <div class="feature-icon" aria-hidden="true">⌁</div>1313 <h3>Instant sharing links</h3>1314 <p>Upload your file and receive a convenient link that is ready to copy, forward or share.</p>1315 <span class="feature-tag">Quick delivery</span>1316 </article>1317 1318 <article class="feature" style="--icon-color:#74efb4;--icon-bg:rgba(82,226,157,.1);--feature-glow:rgba(82,226,157,.13)">1319 <div class="feature-icon" aria-hidden="true">◆</div>1320 <h3>Secure by design</h3>1321 <p>Your files are protected with secure encryption while the bot handles the sharing process.</p>1322 <span class="feature-tag">Encrypted</span>1323 </article>1324 1325 <article class="feature" style="--icon-color:#b0a6ff;--icon-bg:rgba(139,124,255,.11);--feature-glow:rgba(139,124,255,.15)">1326 <div class="feature-icon" aria-hidden="true">4G</div>1327 <h3>Large file support</h3>1328 <p>Share files up to 4 GB, making the bot useful for archives, media, documents and more.</p>1329 <span class="feature-tag">Up to 4 GB</span>1330 </article>1331 1332 <article class="feature" style="--icon-color:#82dfff;--icon-bg:rgba(42,171,238,.1)">1333 <div class="feature-icon" aria-hidden="true">➤</div>1334 <h3>Telegram sharing</h3>1335 <p>Keep the entire workflow inside Telegram and forward your sharing result with ease.</p>1336 <span class="feature-tag">Native workflow</span>1337 </article>1338 1339 <article class="feature" style="--icon-color:#efb3ff;--icon-bg:rgba(219,119,255,.1);--feature-glow:rgba(219,119,255,.13)">1340 <div class="feature-icon" aria-hidden="true">@</div>1341 <h3>Inline mode</h3>1342 <p>Type the bot username in any chat for fast sharing without leaving the conversation.</p>1343 <span class="feature-tag">Share anywhere</span>1344 </article>1345 1346 <article class="feature" style="--icon-color:#ffd380;--icon-bg:rgba(255,185,73,.1);--feature-glow:rgba(255,185,73,.12)">1347 <div class="feature-icon" aria-hidden="true">⚡</div>1348 <h3>Effortless to use</h3>1349 <p>No forms, dashboards or confusing settings. Simply send a file and follow the bot.</p>1350 <span class="feature-tag">Three simple steps</span>1351 </article>1352 </div>1353 </section>1354 1355 <section class="container section reveal" id="how">1356 <div class="section-head">1357 <span class="section-label">How it works</span>1358 <h2>From file to shareable link.</h2>1359 <p>No installation or technical setup required. Everything happens in your Telegram chat.</p>1360 </div>1361 1362 <div class="steps">1363 <article class="step">1364 <div class="step-number">01</div>1365 <h3>Open the bot</h3>1366 <p>Visit <strong>@TBHFileSharingBot</strong> and tap Start to begin.</p>1367 </article>1368 <article class="step">1369 <div class="step-number">02</div>1370 <h3>Send your file</h3>1371 <p>Upload the file you want to share—up to 4 GB per file.</p>1372 </article>1373 <article class="step">1374 <div class="step-number">03</div>1375 <h3>Share the link</h3>1376 <p>Copy or forward the link generated by the bot to your recipient.</p>1377 </article>1378 </div>1379 </section>1380 1381 <section class="container section reveal" id="commands">1382 <div class="commands-wrap">1383 <article class="inline-panel">1384 <span class="section-label">Inline mode</span>1385 <h3>Share inside any chat.</h3>1386 <p>Bring the bot directly into a conversation. Type the username, choose your file and share without switching chats.</p>1387 <div class="inline-demo"><strong>@TBHFileSharingBot</strong><span>share a file…</span></div>1388 <a class="button button-primary" href="https://t.me/TBHFileSharingBot" target="_blank" rel="noopener">1389 Try it on Telegram <span aria-hidden="true">↗</span>1390 </a>1391 </article>1392 1393 <article class="commands-panel">1394 <span class="section-label">Bot commands</span>1395 <h3>Simple commands. Clear results.</h3>1396 <p>Tap a command below to copy it, then paste it into your bot chat.</p>1397 <div class="command-list">1398 <button class="command" type="button" data-command="/start">1399 <code>/start</code><span>Start the bot and begin sharing</span><small>Copy</small>1400 </button>1401 <button class="command" type="button" data-command="/help">1402 <code>/help</code><span>View instructions and available options</span><small>Copy</small>1403 </button>1404 <button class="command" type="button" data-command="/about">1405 <code>/about</code><span>Learn more about TBH File Sharing Bot</span><small>Copy</small>1406 </button>1407 </div>1408 </article>1409 </div>1410 </section>1411 1412 <section class="container cta reveal">1413 <span class="eyebrow"><span class="eyebrow-spark">✦</span> Ready when you are</span>1414 <h2>Your next file is only one tap away.</h2>1415 <p>Open TBH File Sharing Bot, send your file and get a link you can share wherever it needs to go.</p>1416 <a class="button button-primary" href="https://t.me/TBHFileSharingBot" target="_blank" rel="noopener">1417 <span class="plane" aria-hidden="true">➤</span> Open @TBHFileSharingBot1418 </a>1419 </section>1420 </main>1421 1422 <footer class="container">1423 <span>© <span id="year"></span> TBH File Sharing Bot</span>1424 <span>Only share files you are authorized to distribute. · <a href="https://t.me/TBHFileSharingBot" target="_blank" rel="noopener">Open bot</a></span>1425 </footer>1426 1427 <div class="toast" id="toast" role="status" aria-live="polite">Command copied</div>1428 1429 <script>1430 const menuButton = document.getElementById("menuButton");1431 const mobileMenu = document.getElementById("mobileMenu");1432 const toast = document.getElementById("toast");1433 let toastTimer;1434 1435 menuButton.addEventListener("click", () => {1436 const isOpen = mobileMenu.classList.toggle("open");1437 menuButton.setAttribute("aria-expanded", String(isOpen));1438 menuButton.textContent = isOpen ? "×" : "☰";1439 });1440 1441 mobileMenu.querySelectorAll("a").forEach((link) => {1442 link.addEventListener("click", () => {1443 mobileMenu.classList.remove("open");1444 menuButton.setAttribute("aria-expanded", "false");1445 menuButton.textContent = "☰";1446 });1447 });1448 1449 function showToast(message) {1450 toast.textContent = message;1451 toast.classList.add("show");1452 clearTimeout(toastTimer);1453 toastTimer = setTimeout(() => toast.classList.remove("show"), 1800);1454 }1455 1456 document.querySelectorAll("[data-command]").forEach((button) => {1457 button.addEventListener("click", async () => {1458 const command = button.dataset.command;1459 try {1460 await navigator.clipboard.writeText(command);1461 showToast(command + " copied");1462 } catch {1463 showToast("Copy " + command + " into Telegram");1464 }1465 });1466 });1467 1468 const reveals = document.querySelectorAll(".reveal");1469 if ("IntersectionObserver" in window) {1470 const observer = new IntersectionObserver((entries) => {1471 entries.forEach((entry) => {1472 if (entry.isIntersecting) {1473 entry.target.classList.add("visible");1474 observer.unobserve(entry.target);1475 }1476 });1477 }, { threshold: 0.1 });1478 reveals.forEach((item) => observer.observe(item));1479 } else {1480 reveals.forEach((item) => item.classList.add("visible"));1481 }1482 1483 document.getElementById("year").textContent = new Date().getFullYear();1484 </script>1485</body>1486</html>