@wiv01 added htmlContent (English):
code:javascript\n<!doctype html>\n<html lang=\en\>\n<head>\n <meta charset=\utf-8\ />\n <meta name=\viewport\ content=\width=device-width, initial-scale=1\ />\n <title>Hello Wordl</title>\n <style>\n /* Reset-ish */\n *,*::before,*::afterbox-sizing:border-box\n html,bodyheight:100%\n bodymargin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;line-height:1.5;color:#e9eef7;\n /* Space background with a starfield made from layered radial-gradients */\n background:\n radial-gradient(#ffffff 1px, transparent 2px) 0 0/40px 40px,\n radial-gradient(#ffffffcc 1px, transparent 3px) 20px 20px/80px 80px,\n radial-gradient(#9ecbff 1px, transparent 2px) 10px 30px/60px 60px,\n radial-gradient(#ffffff99 0.5px, transparent 2px) 50px 70px/50px 50px,\n #070b1a;\n overflow:hidden;\n \n\n /* Center everything */\n .wrapmin-height:100svh;display:grid;place-items:center;padding:2rem\n\n /* Card */\n .carddisplay:flex;flex-direction:column;align-items:center;gap:1.25rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:2rem 2.25rem;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,0.35)\n\n h1font-size:clamp(1.8rem,3.5vw,2.6rem);letter-spacing:0.02em;margin:0;text-align:center\n pmargin:0;opacity:0.9;text-align:center\n\n /* Earth container */\n .earth\n width:min(280px, 64vw);\n aspect-ratio:1/1; /* keeps it square on resize */\n border-radius:50%;\n box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.08) inset, 0 0 60px #2a7cff40; /* glow */\n position:relative;\n overflow:hidden;\n user-select:none;\n \n\n .earth svgwidth:100%;height:100%;display:block\n\n /* Rotate the planet slowly for life */\n @keyframes spintotransform:translateX(-50%) rotate(360deg)\n .texturetransform-origin:50% 50%;animation:spin 80s linear infinite\n\n /* Subtle floating animation */\n @keyframes floaty0%transform:translateY(0)50%transform:translateY(-6px)100%transform:translateY(0)\n .earthanimation:floaty 6s ease-in-out infinite\n\n footermargin-top:0.25rem;font-size:0.9rem;opacity:0.7\n acolor:#b7d3ff;text-decoration:underline\n a:focus-visibleoutline:2px dashed #b7d3ff;outline-offset:4px\n </style>\n</head>\n<body>\n <main class=\wrap\ role=\main\>\n <section class=\card\ aria-labelledby=\title\>\n <h1 id=\title\>Hello Wordl</h1>\n\n (html comment removed: Pure HTML + CSS + inline SVG: Earth from cosmos, drawn from scratch )\n <figure class=\earth\ role=\img\ aria-label=\Stylized Earth viewed from space\>\n <svg viewBox=\0 0 100 100\ xmlns=\http://www.w3.org/2000/svg\ aria-hidden=\true\>\n (html comment removed: Space vignette inside circle for extra depth )\n <defs>\n (html comment removed: Ocean gradient )\n <radialGradient id=\ocean\ cx=\35%\ cy=\35%\ r=\70%\>\n <stop offset=\0%\ stop-color=\#7bc9ff\/>\n <stop offset=\60%\ stop-color=\#1b78c7\/>\n <stop offset=\100%\ stop-color=\#0b3e7a\/>\n </radialGradient>\n (html comment removed: Day/Night shading )\n <radialGradient id=\shade\ cx=\65%\ cy=\35%\ r=\75%\>\n <stop offset=\60%\ stop-color=\#00000000\/>\n <stop offset=\100%\ stop-color=\#00000066\/>\n </radialGradient>\n (html comment removed: Atmosphere rim )\n <radialGradient id=\rim\ cx=\50%\ cy=\50%\ r=\50%\>\n <stop offset=\75%\ stop-color=\#ffffff00\/>\n <stop offset=\100%\ stop-color=\#74b9ff55\/>\n </radialGradient>\n (html comment removed: Dotted star pattern used to fake clouds )\n <pattern id=\clouds\ patternUnits=\userSpaceOnUse\ width=\6\ height=\6\>\n <circle cx=\1\ cy=\1\ r=\0.8\ fill=\#ffffff55\/>\n <circle cx=\4\ cy=\2\ r=\0.6\ fill=\#ffffff55\/>\n <circle cx=\2\ cy=\4\ r=\0.5\ fill=\#ffffff55\/>\n </pattern>\n (html comment removed: Land color )\n <linearGradient id=\land\ x1=\0\ x2=\1\ y1=\0\ y2=\1\>\n <stop offset=\0%\ stop-color=\#9ee37d\/>\n <stop offset=\100%\ stop-color=\#2c9e5b\/>\n </linearGradient>\n </defs>\n\n (html comment removed: Planet circle )\n <clipPath id=\planet-clip\><circle cx=\50\ cy=\50\ r=\48\/></clipPath>\n <g clip-path=\url(#planet-clip)\>\n (html comment removed: Ocean base )\n <circle cx=\50\ cy=\50\ r=\48\ fill=\url(#ocean)\/>\n\n (html comment removed: Landmasses (simple artistic blobs) )\n <g class=\texture\>\n <path fill=\url(#land)\ d=\M20,40 C28,30 45,28 50,35 C56,43 40,50 35,55 C30,60 18,55 20,40 Z\/>\n <path fill=\url(#land)\ d=\M62,30 C70,28 78,34 80,42 C82,50 76,58 68,58 C62,58 58,54 59,48 C60,42 56,32 62,30 Z\/>\n <path fill=\url(#land)\ d=\M28,70 C36,66 48,66 54,72 C58,76 54,82 46,84 C38,86 26,80 28,70 Z\/>\n (html comment removed: clouds layer )\n <path fill=\url(#clouds)\ d=\M15,45 C28,38 42,40 55,44 C62,46 66,46 72,44 L72,46 C60,52 46,52 33,49 C24,47 18,47 15,45 Z\/>\n </g>\n\n (html comment removed: Night/day shading )\n <circle cx=\50\ cy=\50\ r=\48\ fill=\url(#shade)\/>\n </g>\n\n (html comment removed: Atmosphere rim highlight )\n <circle cx=\50\ cy=\50\ r=\48\ fill=\url(#rim)\/>\n </svg>\n </figure>\n\n <p>Image is created from scratch with HTML/CSS/SVG — no external files.</p>\n <footer>\n Tip: You can export this as an image by taking a screenshot or saving the SVG.\n </footer>\n </section>\n </main>\n</body>\n</html>\n<!doctype html>\n<html lang=\en\>\n<head>\n <meta charset=\utf-8\ />\n <meta name=\viewport\ content=\width=device-width, initial-scale=1\ />\n <title>Hello Wordl</title>\n <style>\n /* Reset-ish */\n *,*::before,*::afterbox-sizing:border-box\n html,bodyheight:100%\n bodymargin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;line-height:1.5;color:#e9eef7;\n /* Space background with a starfield made from layered radial-gradients */\n background:\n radial-gradient(#ffffff 1px, transparent 2px) 0 0/40px 40px,\n radial-gradient(#ffffffcc 1px, transparent 3px) 20px 20px/80px 80px,\n radial-gradient(#9ecbff 1px, transparent 2px) 10px 30px/60px 60px,\n radial-gradient(#ffffff99 0.5px, transparent 2px) 50px 70px/50px 50px,\n #070b1a;\n overflow:hidden;\n \n\n /* Center everything */\n .wrapmin-height:100svh;display:grid;place-items:center;padding:2rem\n\n /* Card */\n .carddisplay:flex;flex-direction:column;align-items:center;gap:1.25rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:2rem 2.25rem;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,0.35)\n\n h1font-size:clamp(1.8rem,3.5vw,2.6rem);letter-spacing:0.02em;margin:0;text-align:center\n pmargin:0;opacity:0.9;text-align:center\n\n /* Earth container */\n .earth\n width:min(280px, 64vw);\n aspect-ratio:1/1; /* keeps it square on resize */\n border-radius:50%;\n box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.08) inset, 0 0 60px #2a7cff40; /* glow */\n position:relative;\n overflow:hidden;\n user-select:none;\n \n\n .earth svgwidth:100%;height:100%;display:block\n\n /* Rotate the planet slowly for life */\n @keyframes spintotransform:translateX(-50%) rotate(360deg)\n .texturetransform-origin:50% 50%;animation:spin 80s linear infinite\n\n /* Subtle floating animation */\n @keyframes floaty0%transform:translateY(0)50%transform:translateY(-6px)100%transform:translateY(0)\n .earthanimation:floaty 6s ease-in-out infinite\n\n footermargin-top:0.25rem;font-size:0.9rem;opacity:0.7\n acolor:#b7d3ff;text-decoration:underline\n a:focus-visibleoutline:2px dashed #b7d3ff;outline-offset:4px\n </style>\n</head>\n<body>\n <main class=\wrap\ role=\main\>\n <section class=\card\ aria-labelledby=\title\>\n <h1 id=\title\>Hello Wordl</h1>\n\n (html comment removed: Pure HTML + CSS + inline SVG: Earth from cosmos, drawn from scratch )\n <figure class=\earth\ role=\img\ aria-label=\Stylized Earth viewed from space\>\n <svg viewBox=\0 0 100 100\ xmlns=\http://www.w3.org/2000/svg\ aria-hidden=\true\>\n (html comment removed: Space vignette inside circle for extra depth )\n <defs>\n (html comment removed: Ocean gradient )\n <radialGradient id=\ocean\ cx=\35%\ cy=\35%\ r=\70%\>\n <stop offset=\0%\ stop-color=\#7bc9ff\/>\n <stop offset=\60%\ stop-color=\#1b78c7\/>\n <stop offset=\100%\ stop-color=\#0b3e7a\/>\n </radialGradient>\n (html comment removed: Day/Night shading )\n <radialGradient id=\shade\ cx=\65%\ cy=\35%\ r=\75%\>\n <stop offset=\60%\ stop-color=\#00000000\/>\n <stop offset=\100%\ stop-color=\#00000066\/>\n </radialGradient>\n (html comment removed: Atmosphere rim )\n <radialGradient id=\rim\ cx=\50%\ cy=\50%\ r=\50%\>\n <stop offset=\75%\ stop-color=\#ffffff00\/>\n <stop offset=\100%\ stop-color=\#74b9ff55\/>\n </radialGradient>\n (html comment removed: Dotted star pattern used to fake clouds )\n <pattern id=\clouds\ patternUnits=\userSpaceOnUse\ width=\6\ height=\6\>\n <circle cx=\1\ cy=\1\ r=\0.8\ fill=\#ffffff55\/>\n <circle cx=\4\ cy=\2\ r=\0.6\ fill=\#ffffff55\/>\n <circle cx=\2\ cy=\4\ r=\0.5\ fill=\#ffffff55\/>\n </pattern>\n (html comment removed: Land color )\n <linearGradient id=\land\ x1=\0\ x2=\1\ y1=\0\ y2=\1\>\n <stop offset=\0%\ stop-color=\#9ee37d\/>\n <stop offset=\100%\ stop-color=\#2c9e5b\/>\n </linearGradient>\n </defs>\n\n (html comment removed: Planet circle )\n <clipPath id=\planet-clip\><circle cx=\50\ cy=\50\ r=\48\/></clipPath>\n <g clip-path=\url(#planet-clip)\>\n (html comment removed: Ocean base )\n <circle cx=\50\ cy=\50\ r=\48\ fill=\url(#ocean)\/>\n\n (html comment removed: Landmasses (simple artistic blobs) )\n <g class=\texture\>\n <path fill=\url(#land)\ d=\M20,40 C28,30 45,28 50,35 C56,43 40,50 35,55 C30,60 18,55 20,40 Z\/>\n <path fill=\url(#land)\ d=\M62,30 C70,28 78,34 80,42 C82,50 76,58 68,58 C62,58 58,54 59,48 C60,42 56,32 62,30 Z\/>\n <path fill=\url(#land)\ d=\M28,70 C36,66 48,66 54,72 C58,76 54,82 46,84 C38,86 26,80 28,70 Z\/>\n (html comment removed: clouds layer )\n <path fill=\url(#clouds)\ d=\M15,45 C28,38 42,40 55,44 C62,46 66,46 72,44 L72,46 C60,52 46,52 33,49 C24,47 18,47 15,45 Z\/>\n </g>\n\n (html comment removed: Night/day shading )\n <circle cx=\50\ cy=\50\ r=\48\ fill=\url(#shade)\/>\n </g>\n\n (html comment removed: Atmosphere rim highlight )\n <circle cx=\50\ cy=\50\ r=\48\ fill=\url(#rim)\/>\n </svg>\n </figure>\n\n <p>Image is created from scratch with HTML/CSS/SVG — no external files.</p>\n <footer>\n Tip: You can export this as an image by taking a screenshot or saving the SVG.\n </footer>\n </section>\n </main>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true
You are viewing a single comment's thread from: