API tools faq
paste
XTaylorSpenceX

Alembic of Antique Aesthetics

XTaylorSpenceX
Oct 9th, 2025
48
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 27.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6. <title>Alembic of Antique Aesthetics</title>
  7. <style>
  8. @import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');
  9. *{margin:0;padding:0;box-sizing:border-box}
  10. :root{
  11.   --panel-max-h: calc(100vh - 220px);
  12.   --artifact-pad: 14px;
  13.   --artifact-radius: 10px;
  14. }
  15. body{
  16.   font-family:'VT323',monospace;
  17.   background:linear-gradient(45deg,#0a0a0a 25%,#1a1a1a 25%,#1a1a1a 50%,#0a0a0a 50%,#0a0a0a 75%,#1a1a1a 75%,#1a1a1a);
  18.   background-size:20px 20px;min-height:100vh;overflow:hidden;position:relative;
  19. }
  20. .stars{
  21.   position:fixed;inset:0;pointer-events:none;
  22.   background-image:
  23.     radial-gradient(2px 2px at 20px 30px,#fff,transparent),
  24.     radial-gradient(2px 2px at 40px 70px,#fff,transparent),
  25.     radial-gradient(1px 1px at 50px 50px,#fff,transparent);
  26.   background-repeat:repeat;background-size:200px 200px;animation:twinkle 5s infinite;
  27. }
  28. @keyframes twinkle{0%,100%{opacity:.3}50%{opacity:.8}}
  29. .title{
  30.   text-align:center;padding:20px;font-family:'Press Start 2P',cursive;font-size:24px;
  31.   background:linear-gradient(90deg,#ff00ff,#00ffff,#ffff00,#ff00ff);
  32.   background-size:200% 100%;animation:gradient 3s linear infinite;
  33.   -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  34.   text-shadow:2px 2px 4px rgba(255,0,255,.5);position:relative;z-index:10;
  35. }
  36. @keyframes gradient{0%{background-position:0% 50%}100%{background-position:200% 50%}}
  37. .lab-container{
  38.   max-width:1200px;margin:0 auto;padding:20px;
  39.   display:grid;grid-template-columns:1fr 320px 1fr;gap:30px;align-items:start;position:relative;z-index:5;
  40. }
  41. .ingredients-panel,.results-panel{
  42.   background:rgba(0,0,0,.9);border:3px solid #00ff00;border-radius:12px;padding:20px;
  43.   box-shadow:0 0 20px #00ff00,inset 0 0 20px rgba(0,255,0,.08);
  44. }
  45. .results-panel{max-height:var(--panel-max-h);overflow:auto}
  46. .panel-title{color:#00ff00;font-size:24px;margin-bottom:16px;text-align:center;text-shadow:0 0 10px currentColor}
  47. .ingredient{
  48.   background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:2px solid #fff;border-radius:8px;
  49.   padding:12px;margin:10px 0;cursor:grab;transition:.25s;color:#fff;font-size:18px;text-align:center;position:relative;overflow:hidden;
  50. }
  51. .ingredient:hover{transform:scale(1.05);box-shadow:0 5px 15px rgba(102,126,234,.6)}
  52. .ingredient.dragging{opacity:.5;cursor:grabbing}
  53. .ingredient::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  54.   background:linear-gradient(45deg,transparent,rgba(255,255,255,.3),transparent);transform:rotate(45deg);transition:.5s}
  55. .ingredient:hover::before{animation:shimmer .5s}
  56. @keyframes shimmer{0%{transform:translateX(-100%) translateY(-100%) rotate(45deg)}100%{transform:translateX(100%) translateY(100%) rotate(45deg)}}
  57. .cauldron-section{display:flex;flex-direction:column;align-items:center}
  58. .cauldron{
  59.   width:260px;height:205px;background:radial-gradient(ellipse at center bottom,#2a2a2a,#000);
  60.   border-radius:50% 50% 40% 40%/60% 60% 40% 40%;border:5px solid #444;position:relative;
  61.   box-shadow:0 10px 30px rgba(0,0,0,.8),inset 0 -20px 40px rgba(0,0,0,.5);margin-top:18px;
  62. }
  63. .cauldron-contents{
  64.   position:absolute;width:90%;height:60%;left:5%;top:25%;
  65.   border-radius:50% 50% 40% 40%/60% 60% 40% 40%;background:linear-gradient(180deg,#4a0080,#8b008b);
  66.   overflow:hidden;transition:.5s
  67. }
  68. .cauldron.brewing .cauldron-contents{background:linear-gradient(180deg,#00ff00,#ff00ff,#00ffff);animation:bubble 2s infinite}
  69. @keyframes bubble{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
  70. .bubbles{position:absolute;inset:0;display:none}
  71. .cauldron.brewing .bubbles{display:block}
  72. .bubble{position:absolute;background:radial-gradient(circle,rgba(255,255,255,.8),rgba(255,255,255,.2));border-radius:50%;animation:rise 2s infinite}
  73. @keyframes rise{0%{bottom:0;opacity:0}10%{opacity:1}100%{bottom:100%;opacity:0}}
  74. .drop-zone{
  75.   min-height:110px;border:3px dashed #666;border-radius:10px;margin:12px 0 0;padding:10px;transition:.3s;background:rgba(0,0,0,.35)
  76. }
  77. .drop-zone.drag-over{border-color:#00ff00;background:rgba(0,255,0,.08)}
  78. .chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:6px}
  79. .chip{
  80.   display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#222;border:1px solid #00ffaa;color:#00ffaa;font-size:14px
  81. }
  82. .chip button{all:unset;cursor:pointer;font-weight:bold}
  83. .transmute-btn{
  84.   margin-top:18px;padding:14px 36px;font-family:'Press Start 2P',cursive;font-size:14px;background:linear-gradient(45deg,#ff00ff,#00ffff);
  85.   border:none;color:#fff;cursor:pointer;border-radius:8px;position:relative;overflow:hidden;text-shadow:2px 2px 4px rgba(0,0,0,.5);transition:.25s
  86. }
  87. .transmute-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(255,0,255,.5)}
  88. .transmute-btn:active{transform:translateY(0)}
  89. .transmute-btn::before{content:'';position:absolute;inset:0;left:-100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}
  90. .transmute-btn:hover::before{left:100%}
  91. .instructions{
  92.   background:rgba(0,0,0,.8);border:2px dashed #ffff00;padding:12px;margin:10px auto 0;max-width:800px;color:#00ff00;text-align:center;font-size:18px
  93. }
  94.  
  95. /* Results / Artifact sizing guards */
  96. #resultsContainer{display:grid;grid-template-columns:1fr;gap:14px}
  97. .artifact{
  98.   width:100%;max-width:100%;overflow:hidden;background:#000;border:3px ridge #888;border-radius:var(--artifact-radius);
  99.   padding:var(--artifact-pad);margin:0;position:relative;min-height:80px;contain:content
  100. }
  101. .artifact *{max-width:100%}
  102. .artifact h3{font-size:18px;color:#0ff;margin-bottom:6px}
  103. .meta{font-size:14px;color:#aaa;margin-top:6px}
  104.  
  105. /* Retro styles — all constrained to fit */
  106. .marquee-artifact{background:#111;padding:10px}
  107. .marquee-window{width:100%;overflow:hidden;border:2px inset #333;background:repeating-linear-gradient(90deg,#ff0,#ff0 10px,#000 10px,#000 20px);padding:6px;border-radius:6px}
  108. .marquee-text{color:#ff0000;font-size:20px;font-weight:bold;animation:marquee 10s linear infinite;white-space:nowrap;text-shadow:2px 2px 0 #000;will-change:transform}
  109. @keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
  110.  
  111. .counter-artifact{background:#001244;border:5px inset #c0c0c0;text-align:center;font-family:'Courier New',monospace}
  112. .counter-display{background:#000;color:#0f0;padding:8px;font-size:18px;border:2px inset #808080;margin:8px auto;max-width:280px;border-radius:4px}
  113.  
  114. .tiled-artifact{
  115.   background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQoU2NkYGD4z8DAwMiABPhFCQiA5EEKkQWRFEIVwhXCFcIUIhXCFEIVwhXCFEIUwhTCFEIVwhXCFGIUAgCLHgYDqiAqmQAAAABJRU5ErkJggg==');
  116.   background-repeat:repeat;color:#ffff00;text-align:center;padding:12px;border-radius:6px
  117. }
  118. .tiled-artifact .blink-text{animation:blink 1s steps(2) infinite}
  119. @keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
  120.  
  121. .rainbow-text{
  122.   background:linear-gradient(90deg,#f00,#f90,#ff0,#0f0,#00f,#4b0082,#9400d3);
  123.   -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rainbow 3s linear infinite;background-size:200% 100%;
  124.   font-size:22px;font-weight:bold
  125. }
  126. @keyframes rainbow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
  127.  
  128. /* guestbook */
  129. .guestbook-artifact{background:#fff;border:5px double #000;padding:12px;font-family:'Comic Sans MS',cursive;color:#000}
  130. .guestbook-title{color:#ff00ff;font-size:20px;text-align:center;margin-bottom:6px}
  131. .guestbook-entry{border:1px dotted #888;padding:8px;margin:6px 0;background:#ffffcc}
  132.  
  133. /* webring */
  134. .webring-artifact{background:linear-gradient(180deg,#c0c0c0,#808080);border:3px outset #fff;padding:12px;text-align:center}
  135. .webring-nav{display:flex;justify-content:space-around;margin:8px 0}
  136. .webring-btn{background:#00f;color:#ff0;padding:5px 10px;border:2px outset #fff;cursor:pointer;text-decoration:none;font-family:'Times New Roman',serif;border-radius:4px}
  137. .webring-btn:active{border-style:inset}
  138.  
  139. /* NEW retro patterns */
  140. .popup-artifact{background:#c0c0c0;border:3px outset #fff;color:#000}
  141. .popup-title{display:flex;justify-content:space-between;align-items:center;background:#000080;color:#fff;padding:6px 8px;font-weight:bold}
  142. .popup-body{background:#e6e6e6;border:2px inset #999;padding:10px}
  143. .badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  144. .badge{background:#222;color:#0ff;border:1px solid #0ff;text-align:center;padding:6px;border-radius:4px;font-size:14px}
  145.  
  146. .crt-artifact{background:#001100;color:#39ff14;border:2px solid #114411;box-shadow:inset 0 0 20px #003300}
  147. .crt-screen{font-family:Courier,monospace;line-height:1.2;filter:contrast(1.1) brightness(1.05)}
  148. .crt-scan{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.0) 50%,rgba(0,0,0,.08) 50%);background-size:100% 4px;pointer-events:none}
  149.  
  150. .frames-artifact{background:#dcdcdc;border:4px ridge #999;color:#000}
  151. .frame-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  152. .frame{border:2px inset #888;background:#fff;padding:8px;min-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  153.  
  154. .status-artifact{background:#003;color:#0ff;border:2px solid #09f;position:relative}
  155. .status-bar{font-family:Courier,monospace;background:#012;padding:6px;border:2px inset #045;overflow:hidden}
  156. .status-txt{display:inline-block;white-space:nowrap;animation:marquee 12s linear infinite}
  157.  
  158. .sparkle-artifact{background:#111;border:2px dashed #ff0;position:relative}
  159. .sparkle-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  160. .sparkle{width:18px;height:18px;background:radial-gradient(circle,#fff 10%,#ff0 35%,transparent 60%);filter:blur(.2px)}
  161.  
  162. .undercon-artifact{text-align:center;background:#111;border:2px solid #f90}
  163. .gif-bar{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:6px}
  164. .gif{height:12px;background:repeating-linear-gradient(90deg,#f00 0 4px,#ff0 4px 8px,#0f0 8px 12px,#0ff 12px 16px,#00f 16px 20px,#f0f 20px 24px)}
  165.  
  166. .meta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
  167.  
  168. /* helper anim */
  169. @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  170. </style>
  171. </head>
  172. <body>
  173. <div class="stars"></div>
  174. <h1 class="title">⚗️ ALEMBIC OF ANTIQUE AESTHETICS ⚗️</h1>
  175.  
  176. <div class="instructions">
  177.   <p>🧙‍♂️ Drag <strong>exactly three</strong> Modern Ingredients (order matters) into the cauldron, then TRANSMUTE to discover a unique Retro Artifact. No duplicates, no overflow.</p>
  178. </div>
  179.  
  180. <div class="lab-container">
  181.   <!-- INGREDIENTS -->
  182.   <div class="ingredients-panel">
  183.     <h2 class="panel-title">✨ Modern Ingredients (8) ✨</h2>
  184.     <div class="ingredient" draggable="true" data-type="navbar">🧭 Navigation Bar</div>
  185.     <div class="ingredient" draggable="true" data-type="carousel">🎠 Image Carousel</div>
  186.     <div class="ingredient" draggable="true" data-type="button">🔘 Call-to-Action Button</div>
  187.     <div class="ingredient" draggable="true" data-type="form">📝 Contact Form</div>
  188.     <div class="ingredient" draggable="true" data-type="hero">🦸 Hero Section</div>
  189.     <div class="ingredient" draggable="true" data-type="social">💬 Social Links</div>
  190.     <!-- NEW -->
  191.     <div class="ingredient" draggable="true" data-type="search">🔍 Search Bar</div>
  192.     <div class="ingredient" draggable="true" data-type="video">📺 Video Player</div>
  193.   </div>
  194.  
  195.   <!-- CAULDRON -->
  196.   <div class="cauldron-section">
  197.     <div class="cauldron" id="cauldron">
  198.       <div class="cauldron-contents">
  199.         <div class="bubbles"></div>
  200.       </div>
  201.       <div class="drop-zone" id="dropZone">
  202.         <div class="chips" id="chips"></div>
  203.       </div>
  204.     </div>
  205.     <button class="transmute-btn" id="transmuteBtn">⚡ TRANSMUTE ⚡</button>
  206.   </div>
  207.  
  208.   <!-- RESULTS -->
  209.   <div class="results-panel">
  210.     <h2 class="panel-title">🌟 Retro Artifacts 🌟</h2>
  211.     <div id="resultsContainer"></div>
  212.   </div>
  213. </div>
  214.  
  215. <script>
  216. class DigitalAlchemy {
  217.   constructor(){
  218.     this.cauldron = document.getElementById('cauldron');
  219.     this.dropZone = document.getElementById('dropZone');
  220.     this.chips = document.getElementById('chips');
  221.     this.transmuteBtn = document.getElementById('transmuteBtn');
  222.     this.resultsContainer = document.getElementById('resultsContainer');
  223.     this.ingredients = document.querySelectorAll('.ingredient');
  224.     this.cauldronIngredients = []; // ordered
  225.     this.visitorCount = Math.floor(Math.random()*99999)+10000;
  226.  
  227.     this.allTypes = ['navbar','carousel','button','form','hero','social','search','video'];
  228.     this.discovered = new Set(); // combo keys already shown (prevents exact duplicate outputs)
  229.     this.initializeBubbles();
  230.     this.setupDragAndDrop();
  231.     this.setupTransmutation();
  232.   }
  233.  
  234.   initializeBubbles(){
  235.     const bubblesContainer = this.cauldron.querySelector('.bubbles');
  236.     for(let i=0;i<10;i++){
  237.      const b=document.createElement('div');
  238.      b.className='bubble';
  239.      const size = Math.random()*20+5;
  240.      b.style.width = size+'px';
  241.      b.style.height = size+'px';
  242.      b.style.left = Math.random()*100+'%';
  243.      b.style.animationDelay = Math.random()*2+'s';
  244.      b.style.animationDuration = (Math.random()*2+2)+'s';
  245.      bubblesContainer.appendChild(b);
  246.    }
  247.  }
  248.  
  249.  setupDragAndDrop(){
  250.    this.ingredients.forEach(el=>{
  251.       el.addEventListener('dragstart',e=>{
  252.         e.dataTransfer.effectAllowed='copy';
  253.         e.dataTransfer.setData('text/plain', e.target.dataset.type);
  254.         el.classList.add('dragging');
  255.       });
  256.       el.addEventListener('dragend',()=>el.classList.remove('dragging'));
  257.     });
  258.  
  259.     const canAccept = ()=> this.cauldronIngredients.length < 3;
  260.  
  261.    this.dropZone.addEventListener('dragover',e=>{
  262.       if(!canAccept()) return;
  263.       e.preventDefault(); this.dropZone.classList.add('drag-over');
  264.     });
  265.     this.dropZone.addEventListener('dragleave',()=>this.dropZone.classList.remove('drag-over'));
  266.     this.dropZone.addEventListener('drop',e=>{
  267.       e.preventDefault(); this.dropZone.classList.remove('drag-over');
  268.       const type = e.dataTransfer.getData('text/plain');
  269.       if(type && canAccept()){
  270.        this.addIngredient(type);
  271.         this.cauldron.classList.add('brewing');
  272.         this.showBrewing();
  273.       }
  274.     });
  275.  
  276.     // click-to-add for accessibility
  277.     this.ingredients.forEach(el=>{
  278.       el.addEventListener('click',()=>{
  279.         if(this.cauldronIngredients.length<3){
  280.          this.addIngredient(el.dataset.type);
  281.          this.cauldron.classList.add('brewing');
  282.          this.showBrewing();
  283.        }
  284.      });
  285.    });
  286.  }
  287.  
  288.  addIngredient(type){
  289.    this.cauldronIngredients.push(type);
  290.    // chip UI
  291.    const chip = document.createElement('span');
  292.    chip.className='chip';
  293.    chip.dataset.type = type;
  294.    chip.innerHTML = `${this.icon(type)} ${this.pretty(type)} <button title="remove">×</button>`;
  295.     chip.querySelector('button').addEventListener('click',()=>{
  296.       const idx = Array.from(this.chips.children).indexOf(chip);
  297.       if(idx>-1){
  298.         this.cauldronIngredients.splice(idx,1);
  299.         chip.remove();
  300.       }
  301.       if(this.cauldronIngredients.length===0){
  302.         this.cauldron.classList.remove('brewing');
  303.       }
  304.     });
  305.     this.chips.appendChild(chip);
  306.   }
  307.  
  308.   setupTransmutation(){
  309.     this.transmuteBtn.addEventListener('click',()=>{
  310.       if(this.cauldronIngredients.length!==3){
  311.         this.flashMessage('Add exactly 3 ingredients (order matters)!', '#ff8080');
  312.         return;
  313.       }
  314.       this.performTransmutation();
  315.     });
  316.   }
  317.  
  318.   icon(t){
  319.     const map = {navbar:'🧭',carousel:'🎠',button:'🔘',form:'📝',hero:'🦸',social:'💬',search:'🔍',video:'📺'};
  320.     return map[t]||'✨';
  321.     }
  322.   pretty(t){ return ({
  323.     navbar:'Navigation Bar',carousel:'Image Carousel',button:'CTA Button',form:'Contact Form',
  324.     hero:'Hero Section',social:'Social Links',search:'Search Bar',video:'Video Player'
  325.   }[t]||t); }
  326.  
  327.   showBrewing(){
  328.     const msg=document.createElement('div');
  329.     Object.assign(msg.style,{
  330.       position:'absolute',top:'-28px',left:'50%',transform:'translateX(-50%)',
  331.       color:'#00ff00',fontSize:'14px',whiteSpace:'nowrap'
  332.     });
  333.     msg.textContent = `${this.cauldronIngredients.length}/3 ingredients added`;
  334.     this.cauldron.appendChild(msg);
  335.     setTimeout(()=>msg.remove(),1600);
  336.   }
  337.  
  338.   performTransmutation(){
  339.     const comboKey = this.cauldronIngredients.join('>');
  340.     if(this.discovered.has(comboKey)){
  341.       this.flashMessage('That combo is already discovered. Try a new ORDER or INGREDIENTS!', '#ffd166');
  342.     } else {
  343.       const artifact = this.createArtifactFromCombo(this.cauldronIngredients);
  344.       artifact.style.animation='fadeIn .45s ease-out both';
  345.       artifact.dataset.combo = comboKey;
  346.       this.resultsContainer.prepend(artifact);
  347.       this.discovered.add(comboKey);
  348.     }
  349.     // reset
  350.     this.cauldronIngredients = [];
  351.     this.chips.innerHTML='';
  352.     setTimeout(()=>this.cauldron.classList.remove('brewing'),600);
  353.   }
  354.  
  355.   /* ======= Combo → Artifact (deterministic, order-sensitive) ======= */
  356.   hashString(s){
  357.     // simple 32-bit FNV-1a
  358.     let h=0x811c9dc5;
  359.     for(let i=0;i<s.length;i++){ h^=s.charCodeAt(i); h = (h>>>0)*0x01000193; }
  360.     return h>>>0;
  361.   }
  362.   rng(seed){ // mulberry32
  363.     let t = seed>>>0;
  364.     return function(){
  365.       t += 0x6D2B79F5; t = t>>>0;
  366.       let r = Math.imul(t ^ t>>>15, 1|t);
  367.       r ^= r + Math.imul(r ^ r>>>7, 61|r);
  368.       return ((r ^ r>>>14)>>>0) / 4294967296;
  369.     }
  370.   }
  371.  
  372.   createArtifactFromCombo(order){
  373.     const key = order.join('>');
  374.     const h = this.hashString(key);
  375.     const rand = this.rng(h);
  376.  
  377.     // artifact templates (12 variants) — each returns a DOM node sized safely
  378.     const templates = [
  379.       ()=>this.t_marquee(rand),
  380.       ()=>this.t_tiled(rand),
  381.       ()=>this.t_blinkAd(rand),
  382.       ()=>this.t_guestbook(rand),
  383.       ()=>this.t_counter(rand),
  384.       ()=>this.t_webring(rand),
  385.       ()=>this.t_popup(rand),
  386.       ()=>this.t_badgeGrid(rand),
  387.       ()=>this.t_crt(rand),
  388.       ()=>this.t_frames(rand),
  389.       ()=>this.t_status(rand),
  390.       ()=>this.t_sparkles(rand),
  391.       ()=>this.t_underConstruction(rand)
  392.     ];
  393.     const tmpl = templates[h % templates.length];
  394.  
  395.     const artifact = tmpl();
  396.     // meta strip
  397.     const meta = document.createElement('div');
  398.     meta.className='meta meta-row';
  399.     const orderLabel = document.createElement('span');
  400.     orderLabel.textContent = `Order: ${order.map(t=>this.pretty(t)).join(' → ')}`;
  401.     const hashLabel = document.createElement('span');
  402.     hashLabel.textContent = `Combo ID: ${('00000000'+h.toString(16)).slice(-8)}`;
  403.     meta.appendChild(orderLabel); meta.appendChild(hashLabel);
  404.     artifact.appendChild(meta);
  405.     return artifact;
  406.   }
  407.  
  408.   // ======== Templates (all constrained) ========
  409.   t_marquee(rand){
  410.     const el = document.createElement('div'); el.className='artifact marquee-artifact';
  411.     const title = document.createElement('h3'); title.textContent='Neon Highway Marquee';
  412.     const win = document.createElement('div'); win.className='marquee-window';
  413.     const text = document.createElement('div'); text.className='marquee-text';
  414.     const slogans = [
  415.       '🔥 WELCOME TO THE INFORMATION SUPERHIGHWAY!!! 🔥 BEST VIEWED IN NETSCAPE 4.0!!! 🔥',
  416.       '✨ CLICK HERE FOR 1,000,000 COUPONS ✨ NO SPYWARE GUARANTEED ✨',
  417.       '🕹️ ENTER THE RETRO ZONE 🕹️ FRAMES • GIFS • MIDI • COUNTERS'
  418.     ];
  419.     text.textContent = slogans[Math.floor(rand()*slogans.length)];
  420.     win.appendChild(text);
  421.     el.appendChild(title); el.appendChild(win);
  422.     return el;
  423.   }
  424.  
  425.   t_tiled(rand){
  426.     const el = document.createElement('div'); el.className='artifact tiled-artifact';
  427.     const title = document.createElement('h3'); title.textContent='Checkerboard Shrine';
  428.     const b1 = document.createElement('div'); b1.className='blink-text'; b1.textContent='🌟 UNDER CONSTRUCTION 🌟';
  429.     const b2 = document.createElement('div'); b2.textContent = ['Optimized for 800×600!','Right-click forbidden!','Welcome, net traveler!'][Math.floor(rand()*3)];
  430.     el.appendChild(title); el.appendChild(b1); el.appendChild(b2);
  431.     return el;
  432.   }
  433.  
  434.   t_blinkAd(rand){
  435.     const el = document.createElement('div'); el.className='artifact';
  436.     el.style.textAlign='center';
  437.     const title = document.createElement('h3'); title.textContent='Banner Of Temptation';
  438.     const a=document.createElement('div'); a.className='rainbow-text'; a.textContent='!!! CLICK HERE TO WIN !!!';
  439.     const b=document.createElement('div'); b.className='blink-text'; b.style.color='#ff0'; b.style.fontSize='18px'; b.style.marginTop='8px';
  440.     b.textContent = ['YOU ARE THE 1,000,000th VISITOR!','FREE TRIAL • NO CREDIT CARD','CONGRATS! YOU WON A NEW MODEM!'][Math.floor(rand()*3)];
  441.     el.appendChild(title); el.appendChild(a); el.appendChild(b);
  442.     return el;
  443.   }
  444.  
  445.   t_guestbook(rand){
  446.     const el = document.createElement('div'); el.className='artifact guestbook-artifact';
  447.     const t = document.createElement('div'); t.className='guestbook-title'; t.textContent='📖 Sign My Guestbook! 📖';
  448.     const entries = [
  449.       "<strong>XxDarkAngel99xX:</strong> kewl site!!! add me on AIM! ^_^",
  450.       "<strong>WebMaster2000:</strong> Nice frames! Check out my hamster hub!",
  451.       "<strong>~*StarGirl*~:</strong> OMG love the midi music!!! &lt;3"
  452.     ];
  453.     el.appendChild(t);
  454.     for(let i=0;i<3;i++){
  455.      const e=document.createElement('div'); e.className='guestbook-entry'; e.innerHTML = entries[(i+Math.floor(rand()*3))%entries.length];
  456.      el.appendChild(e);
  457.    }
  458.    return el;
  459.  }
  460.  
  461.  t_counter(rand){
  462.    this.visitorCount++;
  463.    const el = document.createElement('div'); el.className='artifact counter-artifact';
  464.    const t = document.createElement('div'); t.style.color='#ff0'; t.style.fontSize='16px'; t.textContent='You are visitor number:';
  465.    const d = document.createElement('div'); d.className='counter-display';
  466.    d.innerHTML = `<span style="font-family:'Digital',monospace;">${this.visitorCount.toString().padStart(6,'0')}</span>`;
  467.     const s = document.createElement('div'); s.style.color='#c0c0c0'; s.style.fontSize='14px';
  468.     s.textContent = ['Since Jan 1, 1997','Since Y2K','Since 56k Dawn'][Math.floor(rand()*3)];
  469.     el.appendChild(t); el.appendChild(d); el.appendChild(s);
  470.     return el;
  471.   }
  472.  
  473.   t_webring(rand){
  474.     const el = document.createElement('div'); el.className='artifact webring-artifact';
  475.     const top=document.createElement('div'); top.style.fontWeight='bold'; top.style.marginBottom='8px'; top.textContent='🔗 Ye Olde Web Ring 🔗';
  476.     const nav=document.createElement('div'); nav.className='webring-nav';
  477.     ['<< Previous','Random','Next >>'].forEach(txt=>{
  478.       const a=document.createElement('a'); a.href='#'; a.className='webring-btn'; a.textContent=txt; nav.appendChild(a);
  479.     });
  480.     const small=document.createElement('div'); small.style.fontSize='12px'; small.style.marginTop='8px';
  481.     small.textContent = ['Awesome 90s Sites','Ring of GIF Masters','Frames & Flames'][Math.floor(rand()*3)];
  482.     el.appendChild(top); el.appendChild(nav); el.appendChild(small);
  483.     return el;
  484.   }
  485.  
  486.   t_popup(rand){
  487.     const el = document.createElement('div'); el.className='artifact popup-artifact';
  488.     const title=document.createElement('div'); title.className='popup-title';
  489.     title.innerHTML = `<span>Windows 98 Notification</span><span>🗕 🗗 ✖</span>`;
  490.     const body=document.createElement('div'); body.className='popup-body';
  491.     body.textContent = ['Install ActiveX Control?','Free Cursor Effects Available!','Your trial has expired (just kidding).'][Math.floor(rand()*3)];
  492.     el.appendChild(title); el.appendChild(body);
  493.     return el;
  494.   }
  495.  
  496.   t_badgeGrid(rand){
  497.     const el=document.createElement('div'); el.className='artifact';
  498.     const t=document.createElement('h3'); t.textContent='88×31 Button Wall';
  499.     const grid=document.createElement('div'); grid.className='badge-grid';
  500.     const labels = ['Best Viewed','HTML3.2','Under Const.','Netscape','IE4 Ready','Y2K OK','No Tables','Blink 4ever','CSS?!','MIDI ON','Guestbook','Top 100'];
  501.     for(let i=0;i<12;i++){
  502.      const b=document.createElement('div'); b.className='badge'; b.textContent=labels[(i+Math.floor(rand()*labels.length))%labels.length];
  503.      grid.appendChild(b);
  504.    }
  505.    el.appendChild(t); el.appendChild(grid);
  506.    return el;
  507.  }
  508.  
  509.  t_crt(rand){
  510.    const el=document.createElement('div'); el.className='artifact crt-artifact';
  511.    const screen=document.createElement('div'); screen.className='crt-screen'; screen.style.padding='10px';
  512.    screen.innerHTML = [
  513.      '&gt; dir<br>GIFS  MIDI  FRAMES  README.TXT<br>&gt; type README.TXT<br>WELCOME TO THE FUTURE OF 1999.',
  514.       '&gt; ping geocities.com<br>Reply from 23.23.23.23: bytes=32 time=120ms',
  515.       '&gt; run retro.exe<br>Loading... ███████████ 100%'
  516.     ][Math.floor(rand()*3)];
  517.     const scan=document.createElement('div'); scan.className='crt-scan';
  518.     el.appendChild(screen); el.appendChild(scan);
  519.     return el;
  520.   }
  521.  
  522.   t_frames(rand){
  523.     const el=document.createElement('div'); el.className='artifact frames-artifact';
  524.     const t=document.createElement('h3'); t.textContent='Fake Frameset';
  525.     const row=document.createElement('div'); row.className='frame-row';
  526.     for(let i=0;i<2;i++){
  527.      const f=document.createElement('div'); f.className='frame';
  528.      f.textContent=['Home • Links • Guestbook','Site News • Updates • Credits','Music • GIFs • Awards'][Math.floor(rand()*3)];
  529.      row.appendChild(f);
  530.    }
  531.    el.appendChild(t); el.appendChild(row);
  532.    return el;
  533.  }
  534.  
  535.  t_status(rand){
  536.    const el=document.createElement('div'); el.className='artifact status-artifact';
  537.    const t=document.createElement('h3'); t.textContent='Scrolling Status Bar';
  538.    const bar=document.createElement('div'); bar.className='status-bar';
  539.    const txt=document.createElement('div'); txt.className='status-txt';
  540.    txt.textContent = ['Welcome to my homepage — sign the guestbook!','New: 88×31 buttons pack','Counter reset after 999,999 😭'][Math.floor(rand()*3)];
  541.    bar.appendChild(txt); el.appendChild(t); el.appendChild(bar);
  542.    return el;
  543.  }
  544.  
  545.  t_sparkles(rand){
  546.    const el=document.createElement('div'); el.className='artifact sparkle-artifact';
  547.    const t=document.createElement('h3'); t.textContent='Cursor Sparkles Preview';
  548.    const row=document.createElement('div'); row.className='sparkle-row';
  549.    for(let i=0;i<32;i++){ const s=document.createElement('div'); s.className='sparkle'; row.appendChild(s); }
  550.    el.appendChild(t); el.appendChild(row);
  551.    return el;
  552.  }
  553.  
  554.  t_underConstruction(rand){
  555.    const el=document.createElement('div'); el.className='artifact undercon-artifact';
  556.    const t=document.createElement('h3'); t.textContent='🚧 Under Construction 🚧';
  557.    const p=document.createElement('p'); p.textContent='Pardon our dust while we add more GIFs.';
  558.    const bar=document.createElement('div'); bar.className='gif-bar';
  559.    for(let i=0;i<8;i++){ const g=document.createElement('div'); g.className='gif'; bar.appendChild(g); }
  560.    el.appendChild(t); el.appendChild(p); el.appendChild(bar);
  561.    return el;
  562.  }
  563.  
  564.  flashMessage(text,color='#00ff00'){
  565.    const m=document.createElement('div');
  566.    Object.assign(m.style,{
  567.      position:'fixed',left:'50%',top:'20px',transform:'translateX(-50%)',
  568.      background:'#000',border:'2px solid '+color,color:color,padding:'8px 12px',
  569.      zIndex:'9999',borderRadius:'8px',boxShadow:'0 0 12px '+color,fontFamily:'Press Start 2P, monospace',fontSize:'12px'
  570.    });
  571.    m.textContent=text; document.body.appendChild(m); setTimeout(()=>m.remove(),1600);
  572.   }
  573. }
  574.  
  575. document.addEventListener('DOMContentLoaded',()=>new DigitalAlchemy());
  576.  
  577. // secret hotkey remains
  578. document.addEventListener('keydown',(e)=>{
  579.   if(e.key==='Enter' && e.ctrlKey){
  580.    alert('🎉 You found the secret hotkey! Welcome to the elite hackers club! 🎉');
  581.   }
  582. });
  583. </script>
  584. </body>
  585. </html>
  586.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!