{"html":"\n \n\n

\n Click to open\n \n \n \n

\n\n

\n \n\n

\n \n \n \n \n \n

\n\n

\n \n \n \n \n \n

Hero_BG.png

PNG • 4.2 MB

\n\n

\n \n \n \n \n

Promo_Cut.mp4

MP4 • 128 MB

\n\n

\n \n \n \n \n

app_config.json

JSON • 12 KB

\n\n

\n \n \n \n \n \n \n \n

Q3_Report.pdf

PDF • 1.1 MB

\n\n

\n \n \n \n \n \n

Pitch_Deck.pptx

PPTX • 8.4 MB

\n\n

\n \n

\n FILES\n 05\n

\n\n","css":"/* Note: all animations will works when you click not hover, I use just active state to make the folder card stay open... I Hope you like this design... */\n\n.folder-card {\n width: 170px;\n height: 130px;\n perspective: 1200px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n -webkit-tap-highlight-color: transparent;\n}\n\n.folder-toggle {\n display: none;\n}\n\n/* hint text */\n.hint-wrapper {\n position: absolute;\n top: -40px;\n right: -50px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n transition:\n opacity 0.3s ease,\n transform 0.3s ease;\n pointer-events: none;\n z-index: 100;\n animation: floatHint 2.5s ease-in-out infinite;\n}\n\n.hint-text {\n font-family:\n \"Inter\",\n -apple-system,\n sans-serif;\n color: #60a5fa;\n font-size: 10px;\n font-weight: 900;\n text-decoration: underline;\n letter-spacing: 0.5px;\n white-space: nowrap;\n position: relative;\n right: -25px;\n top: 10px;\n transform: rotate(45deg);\n}\n.hint-arrow {\n height: 35px;\n width: 35px;\n}\n\n@keyframes floatHint {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(6px);\n }\n}\n\n.folder-toggle:checked ~ .hint-wrapper {\n opacity: 0;\n transform: translateY(-10px);\n}\n\n/* folder card logics are here */\n.folder-container {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n backface-visibility: hidden;\n will-change: transform;\n}\n\n.folder-toggle:checked ~ .folder-container {\n transform: rotateX(10deg) rotateY(-5deg);\n}\n\n.folder-back {\n position: absolute;\n bottom: 0;\n width: 100%;\n filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));\n}\n\n.folder-front-wrapper {\n position: absolute;\n bottom: -7px;\n width: 100%;\n z-index: 90;\n transform-origin: bottom;\n transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n border-radius: 12px;\n}\n\n.folder-label {\n position: absolute;\n top: 10px;\n left: 10px;\n width: 30px;\n height: 4px;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 10px;\n}\n\n/* this counts files */\n.counter {\n position: absolute;\n top: -95px;\n right: -75px;\n background-color: #a18cd1;\n\n padding: 4px 8px;\n border-radius: 50px;\n display: flex;\n align-items: center;\n gap: 8px;\n\n box-shadow:\n 0 10px 20px rgba(0, 0, 0, 0.3),\n inset 0 1px 1px rgba(255, 255, 255, 0.2);\n transform: scale(0) translateY(20px);\n opacity: 0;\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n z-index: 100;\n pointer-events: auto;\n}\n\n.folder-toggle:checked ~ .folder-container .counter {\n transform: scale(1) translateY(0);\n opacity: 1;\n transition-delay: 0.2s;\n}\n\n.status-dot {\n width: 6px;\n height: 6px;\n background: #34d399;\n border-radius: 50%;\n position: relative;\n box-shadow: 0 0 10px #34d399;\n}\n\n.status-dot::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #34d399;\n border-radius: 50%;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(3);\n opacity: 0;\n }\n}\n\n.counter-label {\n font-family: \"Inter\", sans-serif;\n font-size: 8px;\n font-weight: 800;\n color: black;\n text-transform: capitalize;\n}\n\n.counter-number {\n font-family: \"Inter\", sans-serif;\n font-size: 12px;\n font-weight: 900;\n color: #ffffff;\n text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);\n}\n\n.counter:hover {\n background: rgba(255, 255, 255, 0.2);\n border-color: #60a5fa;\n transform: scale(1.1) translateY(-5px) !important;\n cursor: help;\n}\n\n.counter:hover .counter-number {\n color: #60a5fa;\n transition: color 0.3s ease;\n}\n\n/* files with */\n.file {\n position: absolute;\n bottom: 5px;\n left: 10%;\n width: 80%;\n height: 85px;\n border-radius: 6px;\n overflow: hidden;\n box-shadow:\n inset 0 1px 1px rgba(255, 255, 255, 0.3),\n 0 4px 12px rgba(0, 0, 0, 0.3);\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n z-index: 0;\n}\n\n.file-1 {\n background: #ff5f6d;\n z-index: 25;\n transition-delay: 0.15s;\n}\n.file-2 {\n background: #ffc371;\n z-index: 24;\n transition-delay: 0.1s;\n}\n.file-3 {\n background: #4facfe;\n z-index: 23;\n transition-delay: 0.05s;\n}\n.file-4 {\n background: #00f2fe;\n z-index: 22;\n transition-delay: 0.02s;\n}\n.file-5 {\n background: #a18cd1;\n z-index: 21;\n transition-delay: 0s;\n}\n\n.shine {\n position: absolute;\n top: 0;\n left: -100%;\n width: 50%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.4),\n transparent\n );\n transform: skewX(-20deg);\n transition: none;\n}\n\n.folder-toggle:checked ~ .folder-container .shine {\n left: 150%;\n transition: left 0.8s ease-in-out;\n transition-delay: 0.3s;\n}\n\n.file-text {\n font-family: \"Inter\", sans-serif;\n font-size: 9px;\n color: white;\n padding: 12px;\n font-weight: 800;\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n opacity: 0;\n transform: translateY(5px);\n transition: all 0.3s ease 0.4s;\n}\n\n.folder-toggle:checked ~ .folder-container .file-text {\n opacity: 1;\n transform: translateY(0);\n}\n\n/* active state (click on card folder) */\n.folder-toggle:checked ~ .folder-container .folder-front-wrapper {\n transform: rotateX(-50deg);\n}\n\n.folder-toggle:checked ~ .folder-container .file-1 {\n transform: translateY(-70px) rotate(-10deg) translateX(-15px) translateZ(20px);\n}\n.folder-toggle:checked ~ .folder-container .file-2 {\n transform: translateY(-55px) rotate(8deg) translateX(18px) translateZ(10px);\n}\n.folder-toggle:checked ~ .folder-container .file-3 {\n transform: translateY(-40px) rotate(-15deg) translateX(-8px);\n}\n.folder-toggle:checked ~ .folder-container .file-4 {\n transform: translateY(-25px) rotate(12deg) translateX(12px);\n}\n.folder-toggle:checked ~ .folder-container .file-5 {\n transform: translateY(-10px) rotate(-5deg);\n}\n\n/* Hover Interaction */\n.folder-toggle:checked ~ .folder-container .file:hover {\n cursor: pointer;\n filter: brightness(1.1);\n}\n\n.folder-toggle:checked ~ .folder-container .file-1:hover {\n transform: translateY(-80px) rotate(-10deg) translateX(-15px) translateZ(20px);\n}\n.folder-toggle:checked ~ .folder-container .file-2:hover {\n transform: translateY(-65px) rotate(8deg) translateX(18px) translateZ(10px);\n}\n.folder-toggle:checked ~ .folder-container .file-3:hover {\n transform: translateY(-50px) rotate(-15deg) translateX(-8px);\n}\n.folder-toggle:checked ~ .folder-container .file-4:hover {\n transform: translateY(-35px) rotate(12deg) translateX(12px);\n}\n.folder-toggle:checked ~ .folder-container .file-5:hover {\n transform: translateY(-20px) rotate(-5deg);\n}\n\n/* extras styles for files */\n.file-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 14px;\n height: 14px;\n color: rgba(255, 255, 255, 0.4);\n transition: color 0.3s ease;\n}\n\n.file-tag {\n position: absolute;\n bottom: 10px;\n right: 10px;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n color: rgba(255, 255, 255, 0.9);\n font-family:\n \"Inter\",\n -apple-system,\n sans-serif;\n font-size: 7px;\n font-weight: 700;\n padding: 3px 6px;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n opacity: 0;\n transform: translateX(10px);\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n pointer-events: none;\n}\n\n/* when folder is OPEN and you HOVER a file */\n.folder-toggle:checked ~ .folder-container .file:hover .file-icon {\n color: rgba(255, 255, 255, 0.9);\n}\n.folder-toggle:checked ~ .folder-container .file-tag {\n opacity: 1;\n}\n\n/* search bar */\n.folder-search {\n position: absolute;\n top: -40px;\n left: 10%;\n width: 30px;\n height: 25px;\n background-color: #60a5fa;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-radius: 20px;\n display: flex;\n align-items: center;\n padding: 0 8px;\n transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n opacity: 0;\n z-index: 100;\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.search-icon {\n width: 12px;\n height: 12px;\n flex-shrink: 0;\n}\n\n.search-input {\n background: transparent;\n border: none;\n color: #ffffff;\n font-family: \"Inter\", sans-serif;\n font-size: 9px;\n margin-left: 8px;\n outline: none;\n transition: width 0.4s ease;\n}\n.search-input::placeholder {\n color: #ffffff;\n}\n\n.folder-toggle:checked ~ .folder-container .folder-search {\n opacity: 1;\n top: -80px;\n width: 80%;\n}\n\n.folder-toggle:checked ~ .folder-container .folder-search:focus-within {\n width: 90%;\n background-color: #ff3b30;\n}\n\n.folder-toggle:checked\n ~ .folder-container\n .folder-search:focus-within\n .search-input {\n width: 100%;\n}\n"}

great-wombat-13

👁 实时预览

📝 源代码