MHTML Viewer

{"name":"MHTML Viewer","description":"Dive into the world of MHTML files with this interactive viewer! Learn the basics of web page structure by displaying MHTML content in a browser. This project is perfect for those curious about web technologies and eager to build a simple, yet informative tool using HTML and JavaScript. Get ready to explore the magic of MHTML files!","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-05-19T16:48:02.605285Z","updated_at":"2025-05-19T16:48:02.605289Z","user_id":647,"status":"PRIVATE","parent_id":null,"id":7996,"user":{"photo":null,"email":null,"recess_id":"d0315104-ac44-4ee3-9145-56e7e12c3a03","created_at":"2025-04-29T23:01:46.022681Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"Caleb_Industries","id":647,"password_hash":null,"updated_at":"2025-04-29T23:01:46.022685Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"function setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n // Game logic will go here\n}","style.css":"canvas { display: block; }\n\nbody {\n font-family: Roboto, sans-serif;\n font-size: 75%;\n --avatar-stroke-color: var(--google-gray-50);\n --custodian-name-color: #333333;\n --custodian-email-color: #5f6368;\n --focused-details-button-border: rgba(26, 115, 232, 0.4);\n --header-color: var(--google-gray-900);\n --paragraph-color: var(--google-gray-700);\n --callout-text-color: var(--google-gray-900);\n --callout-bg-color: var(--google-gray-100);\n padding: 24px 24px 20px;\n}\n\nbutton {\n font-family: Roboto, sans-serif;\n background: var(--primary-button-fill-color);\n border: 0px;\n border-radius: 4px;\n box-sizing: border-box;\n color: var(--primary-button-text-color);\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n height: 32px;\n line-height: normal;\n margin: 0px;\n padding: 6px 16px;\n transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);\n user-select: none;\n}\n\nh1 {\n color: var(--header-color);\n font-size: 24px;\n font-weight: normal;\n margin: 0px 0px 16px;\n}\n\np {\n color: var(--paragraph-color);\n font-size: 14px;\n margin-bottom: 0px;\n}\n\n.message-container {\n display: flex;\n flex-direction: column;\n}\n\n.frame-blocked {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n margin: 50px auto 0px;\n max-width: 432px;\n overflow: visible;\n width: 100%;\n}\n\n.button-container {\n display: flex;\n flex-flow: row-reverse;\n justify-content: flex-start;\n margin: 40px -12px;\n}\n\n.custodian-information {\n clear: both;\n display: flex;\n margin-top: 24px;\n}\n\n.avatar-img {\n border: none;\n border-radius: 50%;\n float: left;\n height: 40px;\n margin-inline-end: 12px;\n user-select: none;\n width: 40px;\n}\n\n.custodian-contact {\n display: flex;\n flex-direction: column;\n overflow: visible;\n}\n\n.custodian-name {\n color: var(--custodian-name-color);\n font-size: 14px;\n margin-bottom: 4px;\n}\n\n.custodian-email {\n color: var(--custodian-email-color);\n font-size: 12px;\n}\n","index.html":"\n\n\n\n \n \n MHTML Viewer\n \n\n\n

\n \n

A parent or guardian has to say that it's OK for you to visit this website

This site is blocked

Your parent hasn't said it's OK yet

\n $\"\"$ \n

Sandy Burns

sburnsdesigns@gmail.com

\n \n \n

\n\n"},"chat_history":[{"message":"display some mhtml","project_id":7996,"created_at":"2025-05-19T16:48:02.614896Z","output_tokens":null,"code_id":243702,"sender":"human","deleted":0,"input_tokens":null,"id":142940},{"message":"Let's get started!\n Errors:\n","project_id":7996,"created_at":"2025-05-19T16:48:04.922657Z","output_tokens":null,"code_id":243702,"sender":"client_script","deleted":0,"input_tokens":null,"id":142941},{"message":"Great! It looks like we're working with a project that involves viewing or displaying MHTML. Could you tell me a bit more about what you'd like to achieve with this project? Are you aiming to create a game, a website, or perhaps an interactive animation? Let me know so we can tailor the project to your goals!","project_id":7996,"created_at":"2025-05-19T16:48:05.095547Z","output_tokens":77,"code_id":243702,"sender":"ai","deleted":0,"input_tokens":2663,"id":142942},{"message":"From: \nSnapshot-Content-Location: chrome-error://chromewebdata/\nSubject: Site blocked\nDate: Mon, 19 May 2025 09:47:45 -0700\nMIME-Version: 1.0\nContent-Type: multipart/related;\n\ttype=\"text/html\";\n\tboundary=\"----MultipartBoundary--QJLooDJH5rYTnBDId9NmKFp2yhiUtMGm06pwSCnZaD----\"\n\n\n------MultipartBoundary--QJLooDJH5rYTnBDId9NmKFp2yhiUtMGm06pwSCnZaD----\nContent-Type: text/html\nContent-ID: \nContent-Transfer-Encoding: quoted-printable\nContent-Location: chrome-error://chromewebdata/\n\n\n\n\n \nSite blocked\n\n\n\n\n\n

\n =20\n

\n \n

A parent or guardian has=\n to say that it's OK for you to visit this website

\n =20\n =20\n =20\n

Details

Hide details=\n

This site is blocked

Your parent hasn't said it's OK ye=\nt

\n $3D\"\"$ \n

Sandy Burns

sburnsdesigns@gmail.com

\n =20\n

\n =20\n \n =20\n \n =20\n

\n =20\n

\n\n\n\n------MultipartBoundary--QJLooDJH5rYTnBDId9NmKFp2yhiUtMGm06pwSCnZaD----\nContent-Type: text/css\nContent-Transfer-Encoding: quoted-printable\nContent-Location: cid:css-095474e5-7341-4b06-a170-c120703ffd2e@mhtml.blink\n\n@charset \"utf-8\";\n\nbody { font-family: Roboto, sans-serif; font-size: 75%; }\n\nbutton { font-family: Roboto, sans-serif; }\n------MultipartBoundary--QJLooDJH5rYTnBDId9NmKFp2yhiUtMGm06pwSCnZaD----\nContent-Type: text/css\nContent-Transfer-Encoding: quoted-printable\nContent-Location: cid:css-341e9d89-12b3-4114-9ac4-7ee6e3120a4f@mhtml.blink\n\n@charset \"utf-8\";\n\nbody { --avatar-stroke-color: var(--google-gray-50); --custodian-name-color=\n: #333333; --custodian-email-color: #5f6368; --focused-details-button-borde=\nr: rgba(26, 115, 232, 0.4); --header-color: var(--google-gray-900); --parag=\nraph-color: var(--google-gray-700); --callout-text-color: var(--google-gray=\n-900); --callout-bg-color: var(--google-gray-100); font-family: Roboto, san=\ns-serif; padding: 24px 24px 20px; }\n\nbutton { background: var(--primary-button-fill-color); border: 0px; border-=\nradius: 4px; box-sizing: border-box; color: var(--primary-button-text-color=\n); cursor: pointer; font-size: 13px; font-weight: 500; height: 32px; line-h=\neight: normal; margin: 0px; padding: 6px 16px; transition: box-shadow 200ms=\n cubic-bezier(0.4, 0, 0.2, 1); user-select: none; }\n\nbutton:active { background: var(--primary-button-fill-color-active); }\n\n[dir=3D\"rtl\"] button { float: left; }\n\n#details { margin-top: 32px; }\n\n#details-header { font-weight: bold; }\n\n.details-button { background: var(--quiet-background-color); border: 1px so=\nlid var(--google-gray-500); color: var(--google-gray-700); float: none; }\n\n.details-button:hover { background: var(--google-gray-50); border-color: va=\nr(--google-gray-600); }\n\n.details-button:active { background: var(--google-gray-50); box-shadow: rgb=\na(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;=\n }\n\n.details-button:focus { background: var(--google-gray-50); border-color: va=\nr(--focused-details-button-border); }\n\n#family-link-kite-icon { height: 20px; width: 20px; margin-right: 16px; ove=\nrflow: visible; }\n\nh1, p, .custodian-contact { letter-spacing: -0.35px; }\n\nh1 { color: var(--header-color); font-size: 24px; font-weight: normal; marg=\nin: 0px 0px 16px; }\n\nhtml { text-size-adjust: 100%; font-size: 125%; }\n\np { color: var(--paragraph-color); font-size: 14px; margin-bottom: 0px; }\n\n.message-container { display: flex; flex-direction: column; }\n\n.illustration { display: inline; width: 120px; }\n\n.frame-blocked { box-sizing: border-box; display: flex; flex-direction: col=\numn; margin: 50px auto 0px; max-width: 432px; overflow: visible; width: 100=\n%; }\n\n#main-message { margin-top: 24px; }\n\n.button-container { display: flex; flex-flow: row-reverse; justify-content:=\n flex-start; margin: 40px -12px; }\n\n.go-back-button { float: right; margin-left: 24px; }\n\n#custodians-information { margin-top: 0px; }\n\n.custodian-information { clear: both; display: flex; margin-top: 24px; }\n\n.avatar-img { border: none; border-radius: 50%; content: image-set(url(\"dat=\na:image/png;base64,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\niuvsKbwP/OVp2D40M/7QAAAABJRU5ErkJggg=3D=3D\") 1x, url(\"data:image/png;base64=\n,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAALZ0lEQVR4Xu1da2wU1xWeJmmbJl=\nRVf1Rp1afaplWUVP1bVapa9YGSklaRWqXtj5YU8qAxOIGQkAYCxWkAYxtiREkNGGNjgzHG4De4F=\nNt4ZheDCYQYPDOGoEaiIf2TErw7M/cOc7vfWpaIG7DXszM7Z/ce6ZNXu97du/udnXvueSr5JkKI=\n21TT+0bM5L/QDLdYM/iGmO42x0y3X9P5OdVg76o6uxrTmZX6ex3AbdyHx2K6O4z/xXPSzzXcRZr=\nJHx4wxNfx2oqUaOHEqPfluO7+RjP5phRpcdVkYykCRTBg1/AeMZNXxkbdR4+b3pckAyGj95K4M6=\n7zh0C4qvNREJNLqAY3xxWCP4i1SYYCwPCw+ER8lP9SM1h9zGQfgIAoIr21GKwOWwbWLJnzicHz3=\nrdiJi+L6ew/IIAUdPaeZvDS+AXvXslkZkbcx+Im/1nMcA+BgHyAarjdms5/gs8mGb6l9c5/pZru=\nmyAgT3Fa0/kjkxRB/uI1g8/BlwMCCgGa4Q7BaCx48gdGnfs13e3xQQD5rSFuePcVHPFnznh3jzt=\nomAsCChuMw9AduizuKgjyVZPPVk12aTIBEvwiDMW8JR4arhl8y1QESPDKvHMoDRjOd2MmH5kmAR=\nKG+5Z2wXkgL8jXRt3fI9giic3Yq5jQDPe3dH32veIO+Ov9ESChmbyiSYjbaRl6I96nNdPtyg4BE=\nprutuHkRIL8/vPeF4Jw6sgtwT0Vv+jdE21j76L4SqAhWrkdGJHNQUhn4ejsX8ESIAEfCrKTIvfL=\nD5d8qQS4EkRmz8/NZV9uB7AJcm7tS4Mvt1FFnA5yds6PxlFPHhFz4ieIlpNHOotCd+9KAqIFuI1=\nDC+xE07cvYwcIIAUe0o12VE9GEQMNJccM/jdJQMRh8NcCy+SRBNBA1jOLeofFLEJpXBI6vxB7x/=\nuUki1BAme+EDCgu6LjDS72HueiXmMAbqfvU/V8OhXw0qylblPO3tVSaB7koqzDEc/WWWLu35PiD=\n69/NPDY4l2WKO900s/RiGcbqyPet30XbVDN2z824oqqfzqiqMYCuTPCwtRzq446eC2qitDh99I/=\nhyL5tceYWFA9Qbx/LNhhiTqVEY0c8tkzrtWjFujpPcfFymYbpAWCVc226DvHqSnByRnVIqJQkxL=\n5XWf4xOU+UBTttET3GVpKgN4KGe/9lKp029/g4qntafJDwVPVlug4zUnlE2Z0FUB9PhXyD7/JsU=\neDmFABG+PwWU7pKvCjDFy+7iEilj6OdiAkJ1hcb1HyHXRk0JaFhlaXtjsgIqcoa3fo2AOj3jeVq=\nQSlyhTIP3iSi7k5Jn/CedR6ilMJFK2bshsXlYZML+yxQEAksGyPRSVn4MrQkPi4cjPBcYEA+XDT=\ngoBIYf8JTqQrCf/5LTx/rJ6CAqxusSOnACUtNpHYCNt50w6caIUadfL7zrvij1UgIFqYtzUp+kd=\nIbAP/7TK9TyqTBe1XKWjwbo2BgEhiT4xGvAB+Hqpp3gjVRlYBKjodKrkCG5TJQqW866W9VmQV4K=\nUmi0ofopH/a7lOxJkRRsDHV/4Ale8RNZ3KhKDfPpWFP74NBEQSqbVZlKqJfk2yzGs8pSuSwNoId=\nSnlG5UJwRQMKguftzW6CjC/KkmpiES7oUs3GyOycB+h31BCxJRKya4iRyDd2oVSdsvS3ZFVAMQn=\naGVMv+19VcF0LUqLXnPQjqwCrG21SSkAnH8KRqtRWnR1X3QdQTv6GbWaiaepVf0gDSuaJ4AUes5=\nSyxjmZTgBNPsnRtoBy3ZbFMvJmxRMyfRPitwGavoYRQU4qmCcKr1uGNE6Dj5dYwnVoFg15J5VMC=\n+XYslTda8jf/2+wf6twCFAter3+QYr92f/3RbdKmKdva9QbviEEq35W3Mb/Dl0llNuLJVUMD4dd=\n1BFg8ZyESDCeyI7iXpnsevkFQDYdjR0ewA2CAigrwD50vNvR184V4LHUu9RM8njR3wLmDAC6WPf=\nIEdELshoH2oSSJM+2QicdAykjyPDXJQEUDfwykFbHB2mT/7kYyBcwcO4I9+ASp0/N/q/GiAJteV=\nkBsQTcwT5cAWTaR6BdG109ph+cudOC8/Bc/O9texR38EgapHEBpWJzT2OWN/uiL8esAHcxn14DA=\n0nCqm3cJOfcDB9yDkD69ENZJEkgC78J4SY/GFJAFn4TwnDDDpJQGEC4/7SaeEBlIVLECgTR1q4j=\n8IQCeI+APXGxlCVkgCy8F8iHht1H5UEFBbQCliZEMyhlQQUFgYvic8rN4pqcFMSUDC//vMTvOe1=\nHaAa472EESbeeYyJ1484YkO3I9a2jbuBS/bb6Y5jr6Rur2110v7/LT1OOt7fdJynU84GjAKZNBo=\nb5Q9SJhu5ebsGmKhMEYy+/otqMR4mO6lfCA6t3GeLjV0O3oN+vMDgP/3INnFUkkM0wxWtQ1xs+Y=\ncjXk4R82R1+NnBaE8PpcAasBbNoJMEgo6wN+kSzuqiSjomdWAUDC7ZT2yLXmkY1oQtpbafYXJJh=\nBWA71BuIpGLC/TrbnrvXr7XQi4eCCABrBUdw1Aw0nc+WgqArX6qZtHvRaETOIy0+VUggDbQ0gaf=\n5UAEsoqQ/nfLZtEABg7mymKvG2BTVPvQxnMNVvozakbOrP81ylQSv+DdG3aJF0ayFWeQskUc+Ky=\nwZ0IvKUM7IGU6ohpudxjk47K4pN4H8cTxXL0lWsJqM6+77cp0BdOnAzXuRlzk4YVd0hXZziKlbU=\n4IncbZDzMaGxfU0EgMaV44+XIvAccVspCjMzxS0/kjARRyBlvNS//EgO8oiNDvnJkNjjbcoSyRD=\n+tXXvKn53qG7yObRvbxDH79wcQHGmMsQ0eOVILGLA2fgD2n+BC/JwK0TpOX/Zk1n0Ahi9+YSavi=\nV+KGd19MZ+5MF7GiyZaEzrwu0ceZnzH4dHxQ73uYJGLq/giQwHc4U6/fq0q2ZOiyuCtm8osZLgL=\nRMX8ESCC3YSazAEyE931Q7t85hMHOj/kO5khgRJ6q+5gU7gO+0sY6T2fp8i+B2cQ+0r38YvJwSc=\nN9azoL2RtnWSFAIqMj4Zn0UMggRbvgPKDqLDENx0+WCJCoV6ejAOwaTmxKGKIZ7u+ipQBSAdJTw=\nMIUlBZFQwGkAiCJRwlbmoS4XdPdttwqgFQA1XRbwIWSC+kdFrNU3T2VEwWQCgDyB+GjUXIp8Yve=\nPZrJjXAVQCoAyruOmd7nlCgIiktVk10KRwGkAmgmfztmeF9UoiRoNQMlCFYBpAKA/PiI+JoSRcE=\nUcmwHQSmAVAA+4uOXH55NgEyi7CqAVAAYfD72/PBPB1uP2CezQ4DEtj47nrb2KckqIe5Y3WLF5/=\noiQKaMrz5gD+C7VKjKunZrw/yqMS8zAiQe35rw1rVZ65R8kE1H7IeKa5PJ6REgsbgukdjcg2TOP=\nJKqIfGZVc3W0K1Tw2U2cMl+6/jmXjFLyVep6LCLF9aMsQ8TIFFUk3Be62YLlEKQhgHx2ZIWWx1P=\nGZMpXyUH7D5cIZVCk8ouPvuFRutKoZL/YqN9edNh/mOl0KW8w176zK7EWKEQ/2x98oON3axYkfL=\nhWsSKTusvz+xK5q0iLNmVvFbaYa+YolZPKkJZNyt+fo99BVZxPlj2yxqsd8s7rSJJfIao7GE/TB=\n0dY09uH7tOjfgnqseur9pvqZu62Q8kkz5R0yvuXN9hL1/emBidX5Xwouy9W7E3aZR32S9izZK5A=\nFB22Lu7vIMtXdFknSqqTdq59tUX1Sbslc3WUHmnvaSqLfSAjZSKTuc7r7ZaFfAyLqlPXA0y7oDX=\nxnus3GcNrWmzyjd3O/dLBqIXhbyt/BD7fmlbckXJAatpZZN1ImWEvZOywN9fVJu0/rQ94WIbmVc=\nFA20cuI378Bj+B/+L57zcbA3iNfBaFT3se3jtfCPgf7/fE1HD7nWzAAAAAElFTkSuQmCC\") 2x)=\n; float: left; height: 40px; margin-inline-end: 12px; user-select: none; wi=\ndth: 40px; }\n\n.custodian-contact { display: flex; flex-direction: column; overflow: visib=\nle; }\n\n.custodian-name { color: var(--custodian-name-color); font-size: 14px; marg=\nin-bottom: 4px; }\n\n.custodian-email { color: var(--custodian-email-color); display: flex; flex=\n-direction: column; font-size: 12px; height: 100%; justify-content: center;=\n }\n\n#details { margin-top: 32px; }\n\n#details-header { font-weight: bold; }\n\n#block-reason-show-details-link, #block-reason-hide-details-link { display:=\n none; }\n\n#block-reason-container { margin-top: 16px; }\n\n#block-reason { align-items: center; background-color: var(--callout-bg-col=\nor); border-radius: 8px; color: var(--header-color); display: flex; justify=\n-content: flex-start; padding: 16px; width: max-content; }\n\n#block-reason-header { font-size: 15px; line-height: 24px; font-weight: 400=\n; margin: 0px; }\n\n#block-reason-message { color: var(--callout-text-color); font-size: 12px; =\nline-height: 20px; font-weight: 400; margin: 0px; }\n\n.secondary-button { background: var(--background-color); border: 1px solid =\nvar(--google-gray-300); color: var(--google-blue-600); order: 2; }\n\n.secondary-button:active { background: var(--secondary-button-hover-fill-co=\nlor); }\n\n.primary-button { margin-inline-start: 8px; }\n\n.frame-blocked:focus-visible, button:focus-visible { outline: none; }\n\n@media (prefers-color-scheme: dark) {\n body.supervised-user-block { --avatar-stroke-color: var(--google-blue-100=\n); --callout-bg-color: var(--google-gray-800); --callout-text-color: var(--=\ngoogle-gray-200); --custodian-email-color: var(--google-gray-500); --custod=\nian-name-color: var(--google-gray-500); --header-color: #e9eaed; --paragrap=\nh-color: var(--google-gray-500); }\n #family-link-kite-icon { fill: rgb(241, 243, 244); }\n .secondary-button { color: var(--google-blue-300); border-color: var(--se=\ncondary-button-border-color); }\n}\n\n@media (max-width: 480px) {\n html, body, .frame-blocked { height: 100%; }\n body { padding: 0px; margin: auto; }\n button, [dir=3D\"rtl\"] button { height: 40px; width: 100%; padding: 10px; =\n}\n .primary-button { margin: 0px 0px 8px; }\n .secondary-button { border: none; margin: 0px; }\n .frame-blocked { margin-top: 0px; padding: 0px 32px; }\n .message-container { margin-top: 50px; }\n #block-reason-show-details-link { color: var(--primary-button-fill-color)=\n; display: block; margin-top: 0px; }\n #block-reason-hide-details-link { color: var(--primary-button-fill-color)=\n; display: none; margin-top: 0px; margin-bottom: 14px; }\n #block-reason { display: none; }\n #custodians-information { margin-top: 8px; }\n .custodian-information { margin-top: 8px; }\n .avatar-img { height: 32px; width: 32px; }\n .button-container { display: flex; flex-direction: column; justify-conten=\nt: center; margin: auto 0px 28px; }\n .go-back-button { margin-left: 4px; }\n}\n\n@media (max-height: 300px) {\n #error-page-illustration, #custodians-information, #block-reason-containe=\nr { display: none; }\n .message-container { margin-top: 0px; }\n}\n\n@media (prefers-color-scheme: dark) and (max-width: 480px) {\n .frame-blocked { background-color: initial; }\n}\n------MultipartBoundary--QJLooDJH5rYTnBDId9NmKFp2yhiUtMGm06pwSCnZaD----\nContent-Type: text/css\nContent-Transfer-Encoding: quoted-printable\nContent-Location: cid:css-75823009-6635-4819-b369-d84953569b7a@mhtml.blink\n\n@charset \"utf-8\";\n\na { color: var(--link-color); }\n\nbody { --background-color: #fff; --error-code-color: var(--google-gray-700)=\n; --google-blue-50: rgb(232, 240, 254); --google-blue-100: rgb(210, 227, 25=\n2); --google-blue-300: rgb(138, 180, 248); --google-blue-600: rgb(26, 115, =\n232); --google-blue-700: rgb(25, 103, 210); --google-gray-100: rgb(241, 243=\n, 244); --google-gray-300: rgb(218, 220, 224); --google-gray-500: rgb(154, =\n160, 166); --google-gray-50: rgb(248, 249, 250); --google-gray-600: rgb(128=\n, 134, 139); --google-gray-700: rgb(95, 99, 104); --google-gray-800: rgb(60=\n, 64, 67); --google-gray-900: rgb(32, 33, 36); --heading-color: var(--googl=\ne-gray-900); --link-color: rgb(88, 88, 88); --primary-button-fill-color-act=\nive: var(--google-blue-700); --primary-button-fill-color: var(--google-blue=\n-600); --primary-button-text-color: #fff; --quiet-background-color: rgb(247=\n, 247, 247); --secondary-button-border-color: var(--google-gray-500); --sec=\nondary-button-fill-color: #fff; --secondary-button-hover-border-color: var(=\n--google-gray-600); --secondary-button-hover-fill-color: var(--google-gray-=\n50); --secondary-button-text-color: var(--google-gray-700); --small-link-co=\nlor: var(--google-gray-700); --text-color: var(--google-gray-700); backgrou=\nnd: var(--background-color); color: var(--text-color); overflow-wrap: break=\n-word; }\n\n.nav-wrapper .secondary-button { background: var(--secondary-button-fill-co=\nlor); border: 1px solid var(--secondary-button-border-color); color: var(--=\nsecondary-button-text-color); float: none; margin: 0px; padding: 8px 16px; =\n}\n\n.hidden { display: none; }\n\nhtml { text-size-adjust: 100%; font-size: 125%; }\n\n.icon { background-repeat: no-repeat; background-size: 100%; }\n\n@media (prefers-color-scheme: dark) {\n body { --background-color: var(--google-gray-900); --error-code-color: va=\nr(--google-gray-500); --heading-color: var(--google-gray-500); --link-color=\n: var(--google-blue-300); --primary-button-fill-color-active: rgb(129, 162,=\n 208); --primary-button-fill-color: var(--google-blue-300); --primary-butto=\nn-text-color: var(--google-gray-900); --quiet-background-color: var(--backg=\nround-color); --secondary-button-border-color: var(--google-gray-700); --se=\ncondary-button-fill-color: var(--google-gray-900); --secondary-button-hover=\n-fill-color: rgb(48, 51, 57); --secondary-button-text-color: var(--google-b=\nlue-300); --small-link-color: var(--google-blue-300); --text-color: var(--g=\noogle-gray-500); }\n}\n------MultipartBoundary--QJLooDJH5rYTnBDId9NmKFp2yhiUtMGm06pwSCnZaD------\n","project_id":7996,"created_at":"2025-05-19T16:48:50.509210Z","output_tokens":null,"code_id":243702,"sender":"human","deleted":0,"input_tokens":null,"id":142943},{"message":"It looks like you want to display the contents of an MHTML file. This can be a bit tricky since MHTML is a web archive format that encapsulates all the assets like HTML, CSS, and images into a single file. Let's work on displaying the HTML content in a simple way using your existing setup.\n\nWould you like to create a simple viewer that illustrates a part of this MHTML content on your web page? If so, I can help you with a basic example using HTML and JavaScript. Please let me know how you'd like to proceed!","project_id":7996,"created_at":"2025-05-19T16:48:50.582838Z","output_tokens":128,"code_id":243702,"sender":"ai","deleted":0,"input_tokens":18177,"id":142944},{"message":"just illustrate it all","project_id":7996,"created_at":"2025-05-19T16:49:09.360199Z","output_tokens":null,"code_id":243702,"sender":"human","deleted":0,"input_tokens":null,"id":142945},{"message":"We can create a simple web page to display the HTML content extracted from your MHTML file. The CSS can be applied to style the page as per the extracted styles. Here's how you can illustrate the content:\n\n1. Update the `index.html` to display your HTML content.\n2. Add the extracted CSS from your MHTML file to `style.css`.\n\nLet's proceed with these updates:\n\n```html\n\n\n\n\n \n \n MHTML Viewer\n \n\n\n

\n \n

A parent or guardian has to say that it's OK for you to visit this website

This site is blocked

Your parent hasn't said it's OK yet

\n $\"\"$ \n

Sandy Burns

sburnsdesigns@gmail.com

\n \n \n

\n\n\n```\n\n```css\n/* style.css */\nbody {\n font-family: Roboto, sans-serif;\n font-size: 75%;\n --avatar-stroke-color: var(--google-gray-50);\n --custodian-name-color: #333333;\n --custodian-email-color: #5f6368;\n --focused-details-button-border: rgba(26, 115, 232, 0.4);\n --header-color: var(--google-gray-900);\n --paragraph-color: var(--google-gray-700);\n --callout-text-color: var(--google-gray-900);\n --callout-bg-color: var(--google-gray-100);\n padding: 24px 24px 20px;\n}\n\nbutton {\n font-family: Roboto, sans-serif;\n background: var(--primary-button-fill-color);\n border: 0px;\n border-radius: 4px;\n box-sizing: border-box;\n color: var(--primary-button-text-color);\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n height: 32px;\n line-height: normal;\n margin: 0px;\n padding: 6px 16px;\n transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);\n user-select: none;\n}\n\nh1 {\n color: var(--header-color);\n font-size: 24px;\n font-weight: normal;\n margin: 0px 0px 16px;\n}\n\np {\n color: var(--paragraph-color);\n font-size: 14px;\n margin-bottom: 0px;\n}\n\n.message-container {\n display: flex;\n flex-direction: column;\n}\n\n.frame-blocked {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n margin: 50px auto 0px;\n max-width: 432px;\n overflow: visible;\n width: 100%;\n}\n\n.button-container {\n display: flex;\n flex-flow: row-reverse;\n justify-content: flex-start;\n margin: 40px -12px;\n}\n\n.custodian-information {\n clear: both;\n display: flex;\n margin-top: 24px;\n}\n\n.avatar-img {\n border: none;\n border-radius: 50%;\n float: left;\n height: 40px;\n margin-inline-end: 12px;\n user-select: none;\n width: 40px;\n}\n\n.custodian-contact {\n display: flex;\n flex-direction: column;\n overflow: visible;\n}\n\n.custodian-name {\n color: var(--custodian-name-color);\n font-size: 14px;\n margin-bottom: 4px;\n}\n\n.custodian-email {\n color: var(--custodian-email-color);\n font-size: 12px;\n}\n```\n\n### Explanation:\n- **HTML Structure**: We’ve added the HTML content extracted from your MHTML file into the `index.html`. It includes text and buttons similar to the original file.\n- **CSS Styling**: The `style.css` contains styles for the body, buttons, and various sections of the content to match the original MHTML styling.\n\nYou can now open the `index.html` file in a web browser to see how it displays the content from your MHTML file. Let me know if you would like to make further adjustments!","project_id":7996,"created_at":"2025-05-19T16:49:09.432185Z","output_tokens":1142,"code_id":243702,"sender":"ai","deleted":0,"input_tokens":2662,"id":142946}],"assets":[],"messages_sent":3,"comments":[],"steps":[]}

Ask your parent

This site is blocked

Ask your parent

This site is blocked

Ask your parent

This site is blocked