DEV Community

Alex | OpenUI
Alex | OpenUI

Posted on

Building a Zero-Dependency Cyberpunk AI Prompt Widget for Website Sidebars (Full Source Code)

#webdev #css #html #javascript

Hey dev community! ๐Ÿ‘‹

I wanted to find a clean way to increase user time-on-page metrics for a tech blog without bloating the server with heavy tracking frameworks or bulky WordPress plugins.

To solve this, I engineered a highly compact, hyper-dark cyberpunk AI Prompt Architect Matrix Widget that runs 100% client-side. It allows visitors to instantly mix and match Midjourney V6 prompt structures and copy them with a single click. It even features a built-in gamified session tracker to keep users engaged.

It is completely self-containedโ€”meaning all HTML, inline CSS, and local JavaScript reside in one single block. You can drop it straight into any standard 360px website sidebar, Ghost layout, or custom CMS HTML block.

๐Ÿงฑ The Source Code

Here is the complete, production-ready code block. Feel free to copy-paste it directly into your project:

[<div id="ultimate-ai-style-architect-matrix">
<style>
#ultimate-ai-style-architect-matrix{width:100%;max-width:360px;margin:auto;background:#090514;color:#f5edff;border:1px solid #c084fc;border-radius:16px;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 0 25px #c084fc25}
#ultimate-ai-style-architect-matrix *{box-sizing:border-box}
.uasm-head{padding:16px;border-bottom:1px solid #c084fc55;background:linear-gradient(135deg,#c084fc12,#22d3ee08)}
.uasm-status{font-size:8px;color:#22d3ee;letter-spacing:1.2px;margin-bottom:7px}
.uasm-title{margin:0;font-size:16px;line-height:1.3}
.uasm-sub{margin:6px 0 0;color:#aa9ab9;font-size:8px;line-height:1.5}
.uasm-body{padding:14px}
.uasm-label{display:flex;justify-content:space-between;margin-bottom:6px;color:#e9d5ff;font-size:8px;font-weight:800;text-transform:uppercase}
.uasm-code{color:#22d3ee}
.uasm-group{margin-bottom:12px}
.uasm-select{width:100%;padding:10px;border:1px solid #c084fc55;border-radius:9px;background:#10081b;color:#fff;outline:none;font:inherit;font-size:9px}
.uasm-rangebox{padding:10px;border:1px solid #c084fc40;border-radius:9px;background:#08040f}
.uasm-range-top{display:flex;justify-content:space-between;margin-bottom:8px;font-size:8px;color:#aa9ab9}
.uasm-value{color:#22d3ee;font-weight:bold}
#uasm-variance{width:100%;accent-color:#22d3ee}
.uasm-output{border:1px solid #22d3ee35;border-radius:10px;background:#030208;margin-top:14px;overflow:hidden}
.uasm-output-head{padding:7px 9px;border-bottom:1px solid #22d3ee22;color:#22d3ee;font-size:7px;letter-spacing:1px}
.uasm-prompt{padding:10px;min-height:115px;max-height:170px;overflow:auto;font-size:8px;line-height:1.65;color:#ddd0e8}
.uasm-copy{width:100%;margin-top:11px;padding:12px;border:1px solid #c084fc;border-radius:9px;background:linear-gradient(90deg,#c084fc,#22d3ee);color:#090514;font:inherit;font-size:9px;font-weight:900;cursor:pointer}
.uasm-copy:active{transform:scale(.98)}
.uasm-copy.done{background:#67e8f9}
.uasm-counter{display:flex;justify-content:space-between;margin-top:9px;padding:7px 9px;border:1px solid #c084fc25;border-radius:8px;color:#aa9ab9;font-size:7px}
.uasm-count{color:#c084fc;font-weight:bold}
.uasm-vault{display:none;margin-top:11px;padding:11px;border:1px solid #22d3ee;border-radius:10px;background:#22d3ee09}
.uasm-vault.show{display:block}
.uasm-vault-title{margin:0;color:#fff;font-size:11px}
.uasm-vault-text{margin:6px 0 9px;color:#aa9ab9;font-size:7px;line-height:1.5}
.uasm-share{width:100%;padding:9px;border:1px solid #22d3ee;border-radius:8px;background:#22d3ee;color:#061015;font:inherit;font-size:7px;font-weight:900;cursor:pointer}
.uasm-site{margin:11px 0 0;padding:10px;border:1px solid #c084fc45;border-radius:9px;text-align:center;background:#c084fc08}
.uasm-site a{color:#22d3ee;text-decoration:none;font-size:8px;font-weight:900}
.uasm-footer{margin:0 14px;padding:12px 0;border-top:1px solid #c084fc44;text-align:center}
.uasm-footer a{color:#d9c2eb;text-decoration:none;font-size:7px}
.uasm-toast{position:absolute;left:50%;bottom:55px;transform:translate(-50%,10px);opacity:0;width:calc(100% - 28px);padding:9px;border:1px solid #22d3ee88;border-radius:8px;background:#071016;color:#eaffff;text-align:center;font-size:7px;pointer-events:none}
.uasm-toast.show{animation:uasmToast 2s ease}
@keyframes uasmToast{0%{opacity:0;transform:translate(-50%,10px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-5px)}}
</style>

<div class="uasm-head">
  <div class="uasm-status">โ— PROMPTFLIP // STYLE MATRIX ONLINE</div>
  <h2 class="uasm-title">The Ultimate AI Style Architect Matrix</h2>
  <p class="uasm-sub">Build a visual prompt architecture in seconds.</p>
</div>

<div class="uasm-body">

  <div class="uasm-group">
    <div class="uasm-label">
      <span>Core Creative Subject</span>
      <span class="uasm-code">A</span>
    </div>
    <select id="uasm-subject" class="uasm-select">
      <option>Cyberpunk Overlord</option>
      <option>Biomechanical Dragon Nest</option>
      <option>Hyper-Realistic Space Colony</option>
    </select>
  </div>

  <div class="uasm-group">
    <div class="uasm-label">
      <span>Aesthetic Medium &amp; Pipeline</span>
      <span class="uasm-code">B</span>
    </div>
    <select id="uasm-medium" class="uasm-select">
      <option>8K Unreal Engine 5 Render</option>
      <option>Vintage Polaroid Film</option>
      <option>Retro 16-Bit Pixel Art</option>
    </select>
  </div>

  <div class="uasm-group">
    <div class="uasm-label">
      <span>Stylize Variance Vector</span>
      <span class="uasm-code">C</span>
    </div>
    <div class="uasm-rangebox">
      <div class="uasm-range-top">
        <span>--s VALUE</span>
        <span id="uasm-value" class="uasm-value">500</span>
      </div>
      <input id="uasm-variance" type="range" min="0" max="1000" value="500">
    </div>
  </div>

  <div class="uasm-output">
    <div class="uasm-output-head">GENERATED PROMPT ARCHITECTURE</div>
    <div id="uasm-prompt" class="uasm-prompt"></div>
  </div>

  <button id="uasm-copy" class="uasm-copy" type="button">
    โง‰ COPY PROMPT
  </button>

  <div class="uasm-counter">
    <span>UNIQUE GENERATIONS</span>
    <span id="uasm-counter" class="uasm-count">0 / 3</span>
  </div>

  <div id="uasm-vault" class="uasm-vault">
    <h3 class="uasm-vault-title">โšก VIP PROMPT VAULT UNLOCKED</h3>
    <p class="uasm-vault-text">
      You completed 3 different architectures. Continue the workflow with PromptFlip.
    </p>
    <button id="uasm-share" class="uasm-share" type="button">
      โ†— COPY PROMPTFLIP SHARE MESSAGE
    </button>

    <div class="uasm-site">
      <a href="https://promptflip.netlify.app" target="_blank" rel="noopener noreferrer">
        โšก OPEN PROMPTFLIP โ†’
      </a>
    </div>
  </div>

</div>

<div class="uasm-footer">
  <a href="https://promptflip.netlify.app" target="_blank" rel="noopener noreferrer">
    ๐Ÿš€ Extract Full Styles Natively via PromptFlip โ†’
  </a>
</div>

<div id="uasm-toast" class="uasm-toast"></div>

<script>
(function(){
"use strict";

var subject=document.getElementById("uasm-subject");
var medium=document.getElementById("uasm-medium");
var variance=document.getElementById("uasm-variance");
var value=document.getElementById("uasm-value");
var output=document.getElementById("uasm-prompt");
var copy=document.getElementById("uasm-copy");
var counter=document.getElementById("uasm-counter");
var vault=document.getElementById("uasm-vault");
var share=document.getElementById("uasm-share");
var toast=document.getElementById("uasm-toast");

var count=0;
var signatures=[];

var subjects={
"Cyberpunk Overlord":"rain-soaked neon megacity command citadel, towering holographic architecture, cybernetic interfaces, reflective alloy structures, volumetric atmosphere, dominant central subject, cinematic low-angle framing, deep perspective",
"Biomechanical Dragon Nest":"vast biomechanical cavern nest, organic-metal architecture, colossal chambers, intricate mechanical scales, engineered bone structures, glowing energy channels, microscopic detail, dramatic cinematic composition, layered depth",
"Hyper-Realistic Space Colony":"massive orbital space colony overlooking a luminous planetary horizon, sophisticated habitat sectors, precision engineering, illuminated transit systems, realistic materials, atmospheric reflections, monumental scale, cinematic establishing composition"
};

var mediums={
"8K Unreal Engine 5 Render":"physically based materials, ray-traced global illumination, cinematic volumetric lighting, ultra-detailed 8K rendering, realistic reflections, crisp micro-geometry, high dynamic range",
"Vintage Polaroid Film":"authentic vintage Polaroid character, soft optical imperfections, subtle film grain, instant-film exposure, natural analog color shifts, gentle highlight bloom, tactile photographic texture",
"Retro 16-Bit Pixel Art":"carefully constructed 16-bit pixel-art aesthetic, deliberate pixel clusters, limited visual palette, crisp pixel edges, controlled dithering, nostalgic game-era composition"
};

function buildPrompt(){
return subjects[subject.value]+", "+mediums[medium.value]+", precise material separation, sophisticated lighting hierarchy, controlled highlights and shadows, atmospheric depth, intentional negative space, coherent visual storytelling, premium production design, technically polished final composition --ar 16:9 --q 2 --s "+variance.value;
}

function render(){
value.textContent=variance.value;
output.textContent=buildPrompt();
}

function toastMessage(message){
toast.textContent=message;
toast.classList.remove("show");
void toast.offsetWidth;
toast.classList.add("show");
}

function fallback(text,success){
var area=document.createElement("textarea");
area.value=text;
area.style.position="fixed";
area.style.left="-9999px";
document.body.appendChild(area);
area.focus();
area.select();

var ok=false;
try{ok=document.execCommand("copy");}catch(e){ok=false;}

document.body.removeChild(area);

if(ok){success();}
else{toastMessage("Clipboard unavailable. Please copy manually.");}
}

function copyText(text,success){
if(navigator.clipboard && navigator.clipboard.writeText){
navigator.clipboard.writeText(text).then(success).catch(function(){
fallback(text,success);
});
}else{
fallback(text,success);
}
}

function register(){
var signature=subject.value+"|"+medium.value+"|"+variance.value;

if(signatures.indexOf(signature)!==-1){
toastMessage("Choose a new configuration for another sequence.");
return;
}

signatures.push(signature);

if(count<3){count++;}

counter.textContent=count+" / 3";

if(count===3){
vault.classList.add("show");
toastMessage("โšก VIP PROMPT VAULT UNLOCKED");
}else{
toastMessage("โœ“ Generation "+count+" / 3 completed");
}
}

subject.addEventListener("change",render);
medium.addEventListener("change",render);
variance.addEventListener("input",render);

copy.addEventListener("click",function(){
register();

copyText(buildPrompt(),function(){
copy.classList.add("done");
copy.textContent="โœ“ COPIED";

setTimeout(function(){
copy.classList.remove("done");
copy.textContent="โง‰ COPY PROMPT";
},1500);
});
});

share.addEventListener("click",function(){
var liveUrl=window.location.href;

var message=
"โšก I found a powerful AI visual prompt tool. "+
"Try PromptFlip to reverse-engineer visual references into detailed prompt architecture: "+
"https://promptflip.netlify.app "+
" | Widget source: "+liveUrl;

copyText(message,function(){
toastMessage("โ†— PromptFlip share message copied!");
});
});

render();

})();
</script>
</div>]
Enter fullscreen mode Exit fullscreen mode

๐Ÿš€ Key Architectural Features Built In:

  • Dual-Axis Input Engine: Connects a Core Subject Matrix with a Render Lens Pipeline to generate unique output variants.
  • Frictionless Copy System: A single click instantly copies the dynamic string to the clipboard with an animated confirmation indicator.
  • Gamification Layer: Logs visitor interaction milestones using client-side JavaScript to boost visual dwell time.
  • Zero Dependencies: No external library imports, no heavy fonts, and absolute minimal execution weight.

๐Ÿ› ๏ธ How to Customize It

If you want to integrate this asset natively into your layout, you can quickly adjust the primary styling tokens directly within the first line of the code block:

  • Background: Swap out #0d0818 for your site's native hex color code.
  • Accents: Adjust #a855f7 (Neon Purple) or #38bdf8 (Cyan Output Text) to match your brand palette.

Top comments (4)

Collapse
 
dev_alex_matrix profile image
Alex | OpenUI •

CSS question for anyone who has dealt with this kind of compact widget: how would you adapt the current inline styling grid to fit Tailwind breakpoints cleanly without introducing unnecessary layout shifts or duplicating too many responsive rules? Curious how others would structure the breakpoint logic.

Collapse
 
dev_alex_matrix profile image
Alex | OpenUI •

Let me know if you run into any styling or responsive design issues when adding this to your sidebarsโ€”happy to help adjust the CSS!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.