<!doctype html><html lang=en><head><meta charset=UTF-8><link rel=icon type=image/x-icon href=/favicon.ico><link rel=apple-touch-icon sizes=180x180 href=/favicon.png><meta name=viewport content="width=device-width,initial-scale=1"><title>Unix Magic Poster Annotations</title><style>html,body{margin:0;padding:0;width:100vw;min-height:100vh;font-family:Arial,sans-serif;background-color:#fff;scroll-behavior:smooth}a{color:#bc4f5f;text-decoration:none}a:hover{text-decoration:underline;color:#a53f4f}.header{display:flex;align-items:center;gap:10px;justify-content:center;padding-top:15px}.header-link{text-decoration:none;font-size:14px;color:#666;transition:color .2s ease-in-out}.header-link:hover{color:#bc4f5f}.header img{width:20px;max-width:10vw;height:auto;transition:filter .3s ease-in-out;opacity:.5}.header img:hover{opacity:1}.poster-info-container{display:flex;justify-content:center;margin:0 auto;max-width:800px}.poster-info{max-width:800px;font-size:15px;color:#333;text-align:justify;padding:12px}.poster-info a{color:#bc4f5f;text-decoration:none}.poster-info a:hover{text-decoration:underline}.image-container{position:relative;width:100%;display:flex;justify-content:center}img{max-width:100%;max-height:100vh;display:block;margin:auto}.marker{position:absolute;width:18px;height:18px;background:rgba(220,53,69,.75);color:#fff;font-size:12px;font-weight:700;text-align:center;line-height:18px;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);opacity:0;animation:fadeIn 3s ease-out forwards}@keyframes fadeIn{from{opacity:0;transform:translate(-50%,-50%)scale(.7)}to{opacity:.8;transform:translate(-50%,-50%)scale(1)}}.marker:hover{opacity:1;transform:translate(-50%,-50%)scale(1.2)}.annotations{max-width:800px;margin:0 auto;padding:10px}.annotation{background-color:#e8e8e8;border-radius:8px;padding:12px;margin-bottom:15px;border:1px solid #e0e0e0}.annotation-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}.annotation-number{background-color:#bc4f5f;color:#fff;font-size:14px;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;display:inline-block;flex-shrink:0}.annotation-text{display:flex;flex-direction:column}.annotation-title{font-size:16px;font-weight:700}.annotation-description{font-size:14px;color:#333}.annotation-footer{display:flex;justify-content:flex-end;margin-top:8px}.back-to-top{text-decoration:none;font-size:18px;display:inline-block;color:inherit;cursor:pointer}.back-to-top:hover{text-decoration:none}.side-container{position:fixed;top:0;left:0;width:min(70vw,700px);max-height:90vh;background:#fff;box-shadow:4px 0 15px rgba(0,0,0,.2);padding:20px;transform:translateX(-100%);transition:transform .3s ease-in-out;z-index:1000;visibility:hidden;overflow:hidden;border-top-right-radius:10px;border-bottom-right-radius:10px;backdrop-filter:blur(12px);display:flex;flex-direction:column}.side-container.active{transform:translateX(0);visibility:visible}.close-btn{position:absolute;top:10px;right:10px;border:none;background:0 0;font-size:22px;font-weight:700;cursor:pointer;color:#777;transition:color .2s ease-in-out;z-index:10}.close-btn:hover{color:#555}.side-content .annotation{max-height:85vh;overflow-y:auto;padding-top:10px;padding-right:10px;font-size:16px;line-height:1.5;color:#222;scrollbar-width:none;-ms-overflow-style:none;border:none;background-color:#fff}.side-content::-webkit-scrollbar{display:none}.footer{text-align:center;padding:20px;font-size:14px;color:#555}.footer a{text-decoration:none;color:salmon;font-weight:700}</style></head><body><div class=header><a href=https://github.com/drio/unixmagic target=_blank><img src=github.svg alt=github>
0 commit comments