{"id":27,"date":"2026-10-29T05:58:45","date_gmt":"2026-10-29T05:58:45","guid":{"rendered":"https:\/\/elyssia.online\/?p=27"},"modified":"2026-10-29T05:58:54","modified_gmt":"2026-10-29T05:58:54","slug":"27","status":"publish","type":"post","link":"https:\/\/elyssia.online\/?p=27","title":{"rendered":""},"content":{"rendered":"\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.0\">\n<title>DreamAI \u2014 AI Art Studio<\/title>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@500;700&family=Poppins:wght@300;400;600&display=swap');\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  min-height: 100vh;\n  background: radial-gradient(circle at top, #211044, #080812 65%);\n  color: white;\n  font-family: 'Poppins', sans-serif;\n  padding: 25px;\n}\n\nheader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: 1100px;\n  margin: auto;\n  padding: 15px 0 50px;\n}\n\n.logo {\n  font-family: 'Orbitron', sans-serif;\n  font-size: 24px;\n  color: #c9a7ff;\n  text-shadow: 0 0 20px #a855f7;\n}\n\n.tag {\n  border: 1px solid #7547a8;\n  border-radius: 30px;\n  padding: 8px 15px;\n  color: #d7b8ff;\n  font-size: 12px;\n}\n\nmain {\n  max-width: 1000px;\n  margin: auto;\n  text-align: center;\n}\n\nh1 {\n  font-size: clamp(36px, 6vw, 65px);\n  line-height: 1.15;\n  margin-bottom: 18px;\n  letter-spacing: -2px;\n}\n\nh1 span {\n  background: linear-gradient(90deg, #b388ff, #ff80d5, #80d8ff);\n  -webkit-background-clip: text;\n  color: transparent;\n}\n\n.subtitle {\n  color: #aaa4bd;\n  margin-bottom: 35px;\n  font-size: 15px;\n}\n\n.generator {\n  max-width: 750px;\n  margin: auto;\n  padding: 20px;\n  background: rgba(255,255,255,0.045);\n  border: 1px solid rgba(190,140,255,0.25);\n  border-radius: 22px;\n  box-shadow: 0 0 50px #7c3aed16;\n  backdrop-filter: blur(15px);\n}\n\ntextarea {\n  width: 100%;\n  min-height: 110px;\n  resize: vertical;\n  padding: 18px;\n  color: white;\n  background: #100d1d;\n  border: 1px solid #39304e;\n  border-radius: 14px;\n  outline: none;\n  font: inherit;\n  font-size: 14px;\n}\n\ntextarea:focus {\n  border-color: #b388ff;\n  box-shadow: 0 0 15px #a855f733;\n}\n\n.controls {\n  display: flex;\n  gap: 12px;\n  margin-top: 15px;\n  flex-wrap: wrap;\n}\n\nselect, button {\n  border: none;\n  border-radius: 12px;\n  padding: 13px 18px;\n  font: inherit;\n  cursor: pointer;\n}\n\nselect {\n  flex: 1;\n  min-width: 150px;\n  color: #eee;\n  background: #211a32;\n  border: 1px solid #403153;\n}\n\nbutton {\n  background: linear-gradient(100deg, #8b5cf6, #ec4899);\n  color: white;\n  font-weight: 600;\n  transition: .25s;\n}\n\nbutton:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 0 25px #c084fc77;\n}\n\n#generate {\n  flex: 2;\n  min-width: 180px;\n}\n\n.preview {\n  margin: 35px auto 0;\n  max-width: 750px;\n  min-height: 300px;\n  border-radius: 22px;\n  overflow: hidden;\n  border: 1px solid #4b3568;\n  background: #100d1d;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n#art {\n  display: none;\n  width: 100%;\n  height: auto;\n  max-height: 650px;\n  object-fit: contain;\n}\n\n.placeholder {\n  padding: 45px 20px;\n  color: #a9a0bc;\n}\n\n.placeholder .icon {\n  font-size: 55px;\n  margin-bottom: 15px;\n  filter: drop-shadow(0 0 15px #b388ff);\n}\n\n#status {\n  margin-top: 15px;\n  color: #c9a7ff;\n  font-size: 13px;\n  min-height: 20px;\n}\n\nfooter {\n  text-align: center;\n  margin-top: 45px;\n  font-size: 12px;\n  color: #777187;\n}\n\n@media (max-width: 550px) {\n  body { padding: 16px; }\n  header { padding-bottom: 40px; }\n  .logo { font-size: 19px; }\n  .generator { padding: 13px; }\n  .controls { flex-direction: column; }\n  .controls button, .controls select { width: 100%; }\n  .preview { min-height: 230px; }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<header>\n  <div class=\"logo\">\u2726 DreamAI<\/div>\n  <div class=\"tag\">AI ART STUDIO<\/div>\n<\/header>\n\n<main>\n  <h1>Imagine it.<br><span>Create magic.<\/span><\/h1>\n  <p class=\"subtitle\">\n    Turn your imagination into extraordinary digital art.\n  <\/p>\n\n  <section class=\"generator\">\n    <textarea id=\"prompt\"\n      placeholder=\"Describe your dream image... e.g. A glowing purple galaxy above a futuristic city, cinematic lighting, ultra detailed\"><\/textarea>\n\n    <div class=\"controls\">\n      <select id=\"style\">\n        <option value=\"cinematic digital art\">Cinematic<\/option>\n        <option value=\"anime illustration\">Anime<\/option>\n        <option value=\"photorealistic photography\">Realistic<\/option>\n        <option value=\"dreamy fantasy concept art\">Fantasy<\/option>\n        <option value=\"minimalist aesthetic art\">Minimalist<\/option>\n        <option value=\"cyberpunk neon digital art\">Cyberpunk<\/option>\n      <\/select>\n\n      <button id=\"generate\" onclick=\"generateArt()\">\n        \u2728 Generate Artwork\n      <\/button>\n    <\/div>\n  <\/section>\n\n  <section class=\"preview\">\n    <div class=\"placeholder\" id=\"placeholder\">\n      <div class=\"icon\">\u2727<\/div>\n      <h3>Your imagination starts here<\/h3>\n      <p style=\"margin-top:8px;font-size:13px\">\n        Write a prompt and create something beautiful.\n      <\/p>\n    <\/div>\n    <img id=\"art\" alt=\"AI-generated artwork\">\n  <\/section>\n\n  <p id=\"status\">Ready to create something magical \u2726<\/p>\n\n  <button id=\"download\" onclick=\"downloadArt()\"\n    style=\"display:none;margin-top:15px\">\n    \u2193 Download Artwork\n  <\/button>\n<\/main>\n\n<footer>\n  MADE WITH \u2726 IMAGINATION &#038; TECHNOLOGY\n<\/footer>\n\n<script>\nconst promptBox = document.getElementById(\"prompt\");\nconst art = document.getElementById(\"art\");\nconst statusText = document.getElementById(\"status\");\nconst placeholder = document.getElementById(\"placeholder\");\nconst downloadButton = document.getElementById(\"download\");\nconst generateButton = document.getElementById(\"generate\");\n\nlet currentImageUrl = \"\";\n\nfunction generateArt() {\n  const prompt = promptBox.value.trim();\n\n  if (!prompt) {\n    statusText.textContent =\n      \"Please describe the image you want to create \u2728\";\n    promptBox.focus();\n    return;\n  }\n\n  const style = document.getElementById(\"style\").value;\n  const fullPrompt = `${prompt}, ${style}, beautiful lighting, highly detailed`;\n\n  \/\/ Uses a third-party image generation service.\n  \/\/ Availability and access requirements may change.\n  currentImageUrl =\n    \"https:\/\/image.pollinations.ai\/prompt\/\" +\n    encodeURIComponent(fullPrompt) +\n    \"?width=1024&height=1024&nologo=true\";\n\n  generateButton.disabled = true;\n  generateButton.textContent = \"Creating...\";\n  statusText.textContent =\n    \"\u2728 Creating your artwork... this may take a little while.\";\n\n  art.style.display = \"none\";\n  downloadButton.style.display = \"none\";\n  placeholder.style.display = \"block\";\n\n  const imageLoader = new Image();\n\n  imageLoader.onload = function() {\n    art.src = imageLoader.src;\n    art.style.display = \"block\";\n    placeholder.style.display = \"none\";\n    statusText.textContent = \"Your artwork is ready! \u2728\";\n    downloadButton.style.display = \"inline-block\";\n    generateButton.disabled = false;\n    generateButton.textContent = \"\u2728 Generate Artwork\";\n  };\n\n  imageLoader.onerror = function() {\n    statusText.textContent =\n      \"Image generation failed. The image service may be unavailable or require access. Please try again later.\";\n    generateButton.disabled = false;\n    generateButton.textContent = \"\u2728 Generate Artwork\";\n  };\n\n  imageLoader.src = currentImageUrl;\n}\n\nasync function downloadArt() {\n  if (!art.src) return;\n\n  try {\n    const response = await fetch(art.src);\n    if (!response.ok) throw new Error(\"Download failed\");\n\n    const blob = await response.blob();\n    const localUrl = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n\n    link.href = localUrl;\n    link.download = \"dreamai-artwork.png\";\n    link.click();\n\n    URL.revokeObjectURL(localUrl);\n  } catch (error) {\n    \/\/ Fallback if cross-origin downloading is blocked.\n    window.open(art.src, \"_blank\");\n    statusText.textContent =\n      \"Opened the image in a new tab. Save it from there.\";\n  }\n}\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>DreamAI \u2014 AI Art Studio \u2726 DreamAI AI ART STUDIO Imagine it.Create magic. Turn your imagination into extraordinary digital art. CinematicAnimeRealisticFantasyMinimalistCyberpunk \u2728 Generate Artwork \u2727 Your imagination starts here Write a prompt and create something beautiful. Ready to create something magical \u2726 \u2193 Download Artwork MADE WITH \u2726 IMAGINATION &#038; TECHNOLOGY<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/elyssia.online\/index.php?rest_route=\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elyssia.online\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elyssia.online\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elyssia.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elyssia.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=27"}],"version-history":[{"count":2,"href":"https:\/\/elyssia.online\/index.php?rest_route=\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/elyssia.online\/index.php?rest_route=\/wp\/v2\/posts\/27\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/elyssia.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elyssia.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elyssia.online\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}