+

+

+

+

+

+

+

+

+

+

+

In a world where memories are medicine, sanity comes at a price.

+ Pre-order Now

+

+

+

+

The Story

+

+

+

+

+

Read an Excerpt

+

+

+

+

+

+

+

+

+

+

+

+ buildHtml

+ baseUrl https://vchronicles.scroll.pub

+ metaTags

+ editButton /edit.html

+ title The Psychiatrie Vchronicles - A Dystopian Novel

+ style.css

+ body.html

+ script.js

+ {

+ "id": "msg_01JZyfiKhWrH5dwDAx3nR2wn",

+ "type": "message",

+ "role": "assistant",

+ "model": "claude-3-5-sonnet-20241022",

+ "content": [

+ {

+ "type": "text",

+ "text": "I'll help create a dark, mysterious website fitting for a dystopian novel. For the domain, I suggest:\n\n---domain---\nvchronicles.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://vchronicles.scroll.pub\nmetaTags\neditButton /edit.html\ntitle The Psychiatrie Vchronicles - A Dystopian Novel\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n

\n \n

\n\n

\n

\n

\n

The Psychiatrie Vchronicles

\n

\n

In a world where memories are medicine, sanity comes at a price.

\n Pre-order Now\n

\n\n

\n

The Story

\n

\n

In 2157, the Psychiatrie Corporation controls humanity's memories. When a rogue psychiatrist discovers a conspiracy within the system, she must choose between preserving society's artificial peace or exposing the truth that could unravel civilization itself.

\n

\n

\n\n

\n

Read an Excerpt

\n

\n

\"The neural implant pulsed against her temple as another modified memory was uploaded to the collective. Sarah knew the procedure well - she'd performed it countless times. But this patient was different. His memories weren't just being altered; they were being weaponized.\"

\n

\n

\n\n

\n

\n

\n

\n

About the Author

\n

A former neuroscientist turned novelist, bringing authentic scientific speculation to dystopian fiction.

\n

\n

\n

\n

\n\n\n\n---style.css---\n:root {\n --primary-color: #00f4ff;\n --background-dark: #0a0a0a;\n --text-color: #ffffff;\n --accent-color: #ff124f;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Inter', sans-serif;\n background-color: var(--background-dark);\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.main-header {\n position: fixed;\n width: 100%;\n padding: 1rem;\n background: rgba(10, 10, 10, 0.9);\n backdrop-filter: blur(10px);\n z-index: 1000;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 2rem;\n font-weight: 700;\n color: var(--primary-color);\n text-shadow: 0 0 10px var(--primary-color);\n}\n\n.nav-links a {\n color: var(--text-color);\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n background: linear-gradient(45deg, rgba(0,0,0,0.9), rgba(0,0,0,0.7));\n}\n\n.glitch {\n font-size: 4rem;\n font-weight: 700;\n position: relative;\n text-shadow: 0.05em 0 0 var(--accent-color),\n -0.05em -0.025em 0 var(--primary-color);\n animation: glitch 1s infinite;\n}\n\n@keyframes glitch {\n 0% {\n text-shadow: 0.05em 0 0 var(--accent-color),\n -0.05em -0.025em 0 var(--primary-color);\n }\n 25% {\n text-shadow: -0.05em -0.025em 0 var(--accent-color),\n 0.025em 0.025em 0 var(--primary-color);\n }\n 50% {\n text-shadow: 0.025em 0.05em 0 var(--accent-color),\n 0.05em 0 0 var(--primary-color);\n }\n 100% {\n text-shadow: -0.05em 0 0 var(--accent-color),\n -0.025em -0.05em 0 var(--primary-color);\n }\n}\n\n.tagline {\n font-size: 1.5rem;\n margin: 2rem 0;\n color: var(--primary-color);\n}\n\n.cta-button {\n padding: 1rem 2rem;\n font-size: 1.2rem;\n background: transparent;\n border: 2px solid var(--primary-color);\n color: var(--primary-color);\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.cta-button:hover {\n background: var(--primary-color);\n color: var(--background-dark);\n}\n\nsection {\n padding: 5rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.excerpt-text {\n border-left: 4px solid var(--primary-color);\n padding-left: 2rem;\n font-style: italic;\n margin: 2rem 0;\n}\n\n.author-content {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: center;\n}\n\n.author-image {\n width: 100%;\n aspect-ratio: 1;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n border-radius: 50%;\n}\n\nfooter {\n padding: 2rem;\n background: rgba(10, 10, 10, 0.9);\n text-align: center;\n}\n\n@media (max-width: 768px) {\n .glitch {\n font-size: 2.5rem;\n }\n \n .author-content {\n grid-template-columns: 1fr;\n }\n \n .nav-links {\n display: none;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Parallax effect for hero section\n window.addEventListener('scroll', () => {\n const hero = document.querySelector('.hero');\n const scrolled = window.pageYOffset;\n hero.style.backgroundPosition = `center ${scrolled * 0.5}px`;\n });\n\n // Glitch effect enhancement\n const glitchText = document.querySelector('.glitch');\n if (glitchText) {\n setInterval(() => {\n glitchText.style.animation = 'none';\n void glitchText.offsetWidth;\n glitchText.style.animation = null;\n }, 2500);\n }\n\n // Interactive CTA button\n const ctaButton = document.querySelector('.cta-button');\n ctaButton.addEventListener('mouseover', () => {\n ctaButton.style.transform = 'scale(1.1)';\n });\n ctaButton.addEventListener('mouseout', () => {\n ctaButton.style.transform = 'scale(1)';\n });\n});\n\n---end---\n\nThis design features:\n- A dark, cyberpunk-inspired color scheme\n- Glitch text effect for the title\n- Smooth parallax scrolling\n- Responsive design\n- Interactive elements\n- Modern, clean typography\n- Accessibility considerations\n- Semantic HTML structure\n- Performance optimizations\n- CSS animations and transitions\n- Mobile-first approach\n\nThe website maintains a professional yet edgy aesthetic that matches the dystopian theme of the novel while remaining clean and functional."

+ }

+ ],

+ "stop_reason": "end_turn",

+ "stop_sequence": null,

+ "usage": {

+ "input_tokens": 288,

+ "cache_creation_input_tokens": 0,

+ "cache_read_input_tokens": 0,

+ "output_tokens": 2432

+ }

+ }

+ # vchronicles.scroll.pub

+ Website generated by Claude from prompt: a landing site for a dystopian novel called The Psychiatrie Vchroniles

+ document.addEventListener('DOMContentLoaded', () => {

+ // Smooth scrolling for navigation links

+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {

+ anchor.addEventListener('click', function (e) {

+ e.preventDefault();

+ document.querySelector(this.getAttribute('href')).scrollIntoView({

+ behavior: 'smooth'

+ });

+ });

+ });

+

+ // Parallax effect for hero section

+ window.addEventListener('scroll', () => {

+ const hero = document.querySelector('.hero');

+ const scrolled = window.pageYOffset;

+ hero.style.backgroundPosition = `center ${scrolled * 0.5}px`;

+ });

+

+ // Glitch effect enhancement

+ const glitchText = document.querySelector('.glitch');

+ if (glitchText) {

+ setInterval(() => {

+ glitchText.style.animation = 'none';

+ void glitchText.offsetWidth;

+ glitchText.style.animation = null;

+ }, 2500);

+ }

+

+ // Interactive CTA button

+ const ctaButton = document.querySelector('.cta-button');

+ ctaButton.addEventListener('mouseover', () => {

+ ctaButton.style.transform = 'scale(1.1)';

+ });

+ ctaButton.addEventListener('mouseout', () => {

+ ctaButton.style.transform = 'scale(1)';

+ });

+ });

+ :root {

+ --primary-color: #00f4ff;

+ --background-dark: #0a0a0a;

+ --text-color: #ffffff;

+ --accent-color: #ff124f;

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ font-family: 'Inter', sans-serif;

+ background-color: var(--background-dark);

+ color: var(--text-color);

+ line-height: 1.6;

+ }

+

+ .main-header {

+ position: fixed;

+ width: 100%;

+ padding: 1rem;

+ background: rgba(10, 10, 10, 0.9);

+ backdrop-filter: blur(10px);

+ z-index: 1000;

+ }

+

+ nav {

+ display: flex;

+ justify-content: space-between;

+ align-items: center;

+ max-width: 1200px;

+ margin: 0 auto;

+ }

+

+ .logo {

+ font-size: 2rem;

+ font-weight: 700;

+ color: var(--primary-color);

+ text-shadow: 0 0 10px var(--primary-color);

+ }

+

+ .nav-links a {

+ color: var(--text-color);

+ text-decoration: none;

+ margin-left: 2rem;

+ transition: color 0.3s ease;

+ }

+

+ .nav-links a:hover {

+ color: var(--primary-color);

+ }

+

+ .hero {

+ height: 100vh;

+ display: flex;

+ flex-direction: column;

+ justify-content: center;

+ align-items: center;

+ text-align: center;

+ padding: 2rem;

+ background: linear-gradient(45deg, rgba(0,0,0,0.9), rgba(0,0,0,0.7));

+ }

+

+ .glitch {

+ font-size: 4rem;

+ font-weight: 700;

+ position: relative;

+ text-shadow: 0.05em 0 0 var(--accent-color),

+ -0.05em -0.025em 0 var(--primary-color);

+ animation: glitch 1s infinite;

+ }

+

+ @keyframes glitch {

+ 0% {

+ text-shadow: 0.05em 0 0 var(--accent-color),

+ -0.05em -0.025em 0 var(--primary-color);

+ }

+ 25% {

+ text-shadow: -0.05em -0.025em 0 var(--accent-color),

+ 0.025em 0.025em 0 var(--primary-color);

+ }

+ 50% {

+ text-shadow: 0.025em 0.05em 0 var(--accent-color),

+ 0.05em 0 0 var(--primary-color);

+ }

+ 100% {

+ text-shadow: -0.05em 0 0 var(--accent-color),

+ -0.025em -0.05em 0 var(--primary-color);

+ }

+ }

+

+ .tagline {

+ font-size: 1.5rem;

+ margin: 2rem 0;

+ color: var(--primary-color);

+ }

+

+ .cta-button {

+ padding: 1rem 2rem;

+ font-size: 1.2rem;

+ background: transparent;

+ border: 2px solid var(--primary-color);

+ color: var(--primary-color);

+ cursor: pointer;

+ transition: all 0.3s ease;

+ }

+

+ .cta-button:hover {

+ background: var(--primary-color);

+ color: var(--background-dark);

+ }

+

+ section {

+ padding: 5rem 2rem;

+ max-width: 1200px;

+ margin: 0 auto;

+ }

+

+ .excerpt-text {

+ border-left: 4px solid var(--primary-color);

+ padding-left: 2rem;

+ font-style: italic;

+ margin: 2rem 0;

+ }

+

+ .author-content {

+ display: grid;

+ grid-template-columns: 1fr 2fr;

+ gap: 2rem;

+ align-items: center;

+ }

+

+ .author-image {

+ width: 100%;

+ aspect-ratio: 1;

+ background: linear-gradient(45deg, var(--primary-color), var(--accent-color));

+ border-radius: 50%;

+ }

+

+ footer {

+ padding: 2rem;

+ background: rgba(10, 10, 10, 0.9);

+ text-align: center;

+ }

+

+ @media (max-width: 768px) {

+ .glitch {

+ font-size: 2.5rem;

+ }

+

+ .author-content {

+ grid-template-columns: 1fr;

+ }

+

+ .nav-links {

+ display: none;

+ }

+ }