Changes to titleman.scroll.pub

root
root
12 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
    +
  • Tools
    • +
  • Examples
    • +
  • About
    • +
    +
    +
    +
    +
    +
    +

    Create Beautiful Titles

    +

    Transform your headings into works of art

    +
    Type something...
    +
    +
    +
    +

    Styling Tools

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Example Titles

    +
    +
    +

    Elegant Style

    +

    Perfect for luxury brands

    +
    +
    +

    Bold Impact

    +

    Stand out from the crowd

    +
    +
    +

    Playful Touch

    +

    Add personality to your site

    +
    +
    +
    +
    +
    +
    +
    +

    Made with love by Titleman

    +
    + Privacy
    + Terms
    + Contact
    +
    +
    +
    index.scroll
    Changed around line 1
    + buildHtml
    + baseUrl https://titleman.scroll.pub
    + metaTags
    + description Create beautiful, semantic titles and headings for your web projects
    + keywords titles, headings, typography, web design, HTML
    + editButton /edit.html
    + title Titleman - Beautiful Web Typography
    + style.css
    + body.html
    + script.js
    prompt.json
    Changed around line 1
    + {
    + "id": "msg_011EBVEuhY3Ggws5qGacWvtF",
    + "type": "message",
    + "role": "assistant",
    + "model": "claude-3-5-sonnet-20241022",
    + "content": [
    + {
    + "type": "text",
    + "text": "For a website called \"titleman\", I'll create a fun and professional site about managing titles and headings, with a beautiful typographic design.\n\n---domain---\ntitleman.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://titleman.scroll.pub\nmetaTags\n description Create beautiful, semantic titles and headings for your web projects\n keywords titles, headings, typography, web design, HTML\neditButton /edit.html\ntitle Titleman - Beautiful Web Typography\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
    \n \n
    \n\n
    \n
    \n

    Create Beautiful Titles

    \n

    Transform your headings into works of art

    \n
    Type something...
    \n
    \n\n
    \n

    Styling Tools

    \n
    \n \n \n \n \n
    \n
    \n\n
    \n

    Example Titles

    \n
    \n
    \n

    Elegant Style

    \n

    Perfect for luxury brands

    \n
    \n
    \n

    Bold Impact

    \n

    Stand out from the crowd

    \n
    \n
    \n

    Playful Touch

    \n

    Add personality to your site

    \n
    \n
    \n
    \n
    \n\n\n\n---style.css---\n:root {\n --primary: #2a2b4a;\n --accent: #ff6b6b;\n --text: #333;\n --bg: #fff;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n color: var(--text);\n line-height: 1.6;\n overflow-x: hidden;\n}\n\nheader {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 20px rgba(0,0,0,0.1);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\n background: linear-gradient(45deg, var(--primary), var(--accent));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent);\n}\n\n.menu-toggle {\n display: none;\n}\n\n.hero {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 2rem;\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n}\n\nh1 {\n font-size: 4rem;\n text-align: center;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary), var(--accent));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: titleFloat 3s ease-in-out infinite;\n}\n\n@keyframes titleFloat {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n}\n\n.subtitle {\n font-size: 1.5rem;\n margin-bottom: 2rem;\n opacity: 0.8;\n}\n\n.title-preview {\n width: 80%;\n max-width: 600px;\n padding: 2rem;\n background: white;\n border-radius: 10px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n font-size: 2rem;\n text-align: center;\n transition: var(--transition);\n}\n\n.title-preview:focus {\n outline: none;\n box-shadow: 0 15px 40px rgba(0,0,0,0.15);\n}\n\n.tools {\n padding: 5rem 2rem;\n background: var(--bg);\n}\n\n.controls {\n display: flex;\n gap: 1rem;\n justify-content: center;\n flex-wrap: wrap;\n margin-top: 2rem;\n}\n\n.controls button {\n padding: 1rem 2rem;\n border: none;\n border-radius: 50px;\n background: var(--primary);\n color: white;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.controls button:hover {\n transform: translateY(-2px);\n background: var(--accent);\n}\n\n.examples {\n padding: 5rem 2rem;\n background: #f8f9fa;\n}\n\n.examples-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 2rem auto;\n}\n\n.example {\n padding: 2rem;\n background: white;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.example:hover {\n transform: translateY(-5px);\n}\n\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n }\n\n .menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--primary);\n margin: 5px 0;\n transition: var(--transition);\n }\n\n .nav-links {\n position: fixed;\n top: 70px;\n right: -100%;\n flex-direction: column;\n background: white;\n width: 100%;\n text-align: center;\n transition: var(--transition);\n padding: 2rem;\n }\n\n .nav-links.active {\n right: 0;\n }\n\n h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n menuToggle.classList.toggle('active');\n });\n\n // Style buttons functionality\n const styleButtons = document.querySelectorAll('.controls button');\n const titlePreview = document.querySelector('.title-preview');\n\n const styles = {\n elegant: {\n fontFamily: 'Georgia, serif',\n letterSpacing: '2px',\n fontWeight: '300'\n },\n bold: {\n fontFamily: 'system-ui, sans-serif',\n letterSpacing: '-1px',\n fontWeight: '800'\n },\n playful: {\n fontFamily: 'Comic Sans MS, cursive',\n letterSpacing: '1px',\n fontWeight: '400'\n },\n minimal: {\n fontFamily: 'Arial, sans-serif',\n letterSpacing: '0',\n fontWeight: '400'\n }\n };\n\n styleButtons.forEach(button => {\n button.addEventListener('click', () => {\n const style = styles[button.dataset.style];\n Object.assign(titlePreview.style, style);\n \n // Remove active class from all buttons\n styleButtons.forEach(btn => btn.classList.remove('active'));\n // Add active class to clicked button\n button.classList.add('active');\n });\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n target.scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Animation on scroll\n const observerOptions = {\n threshold: 0.1\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n});\n\n---end---"
    + }
    + ],
    + "stop_reason": "end_turn",
    + "stop_sequence": null,
    + "usage": {
    + "input_tokens": 272,
    + "cache_creation_input_tokens": 0,
    + "cache_read_input_tokens": 0,
    + "output_tokens": 2768
    + }
    + }
    readme.scroll
    Changed around line 1
    + # titleman.scroll.pub
    +
    + website generated by Claude from prompt: titleman
    script.js
    Changed around line 1
    + document.addEventListener('DOMContentLoaded', () => {
    + // Mobile menu toggle
    + const menuToggle = document.querySelector('.menu-toggle');
    + const navLinks = document.querySelector('.nav-links');
    +
    + menuToggle.addEventListener('click', () => {
    + navLinks.classList.toggle('active');
    + menuToggle.classList.toggle('active');
    + });
    +
    + // Style buttons functionality
    + const styleButtons = document.querySelectorAll('.controls button');
    + const titlePreview = document.querySelector('.title-preview');
    +
    + const styles = {
    + elegant: {
    + fontFamily: 'Georgia, serif',
    + letterSpacing: '2px',
    + fontWeight: '300'
    + },
    + bold: {
    + fontFamily: 'system-ui, sans-serif',
    + letterSpacing: '-1px',
    + fontWeight: '800'
    + },
    + playful: {
    + fontFamily: 'Comic Sans MS, cursive',
    + letterSpacing: '1px',
    + fontWeight: '400'
    + },
    + minimal: {
    + fontFamily: 'Arial, sans-serif',
    + letterSpacing: '0',
    + fontWeight: '400'
    + }
    + };
    +
    + styleButtons.forEach(button => {
    + button.addEventListener('click', () => {
    + const style = styles[button.dataset.style];
    + Object.assign(titlePreview.style, style);
    +
    + // Remove active class from all buttons
    + styleButtons.forEach(btn => btn.classList.remove('active'));
    + // Add active class to clicked button
    + button.classList.add('active');
    + });
    + });
    +
    + // Smooth scroll for navigation links
    + document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    + anchor.addEventListener('click', function (e) {
    + e.preventDefault();
    + const target = document.querySelector(this.getAttribute('href'));
    + target.scrollIntoView({
    + behavior: 'smooth'
    + });
    + });
    + });
    +
    + // Animation on scroll
    + const observerOptions = {
    + threshold: 0.1
    + };
    +
    + const observer = new IntersectionObserver((entries) => {
    + entries.forEach(entry => {
    + if (entry.isIntersecting) {
    + entry.target.classList.add('visible');
    + }
    + });
    + }, observerOptions);
    +
    + document.querySelectorAll('section').forEach(section => {
    + observer.observe(section);
    + });
    + });
    style.css
    Changed around line 1
    + :root {
    + --primary: #2a2b4a;
    + --accent: #ff6b6b;
    + --text: #333;
    + --bg: #fff;
    + --transition: all 0.3s ease;
    + }
    +
    + * {
    + margin: 0;
    + padding: 0;
    + box-sizing: border-box;
    + }
    +
    + body {
    + font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    + color: var(--text);
    + line-height: 1.6;
    + overflow-x: hidden;
    + }
    +
    + header {
    + position: fixed;
    + width: 100%;
    + background: rgba(255, 255, 255, 0.95);
    + backdrop-filter: blur(10px);
    + z-index: 1000;
    + box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    + }
    +
    + nav {
    + display: flex;
    + justify-content: space-between;
    + align-items: center;
    + padding: 1rem 5%;
    + max-width: 1200px;
    + margin: 0 auto;
    + }
    +
    + .logo {
    + font-size: 1.8rem;
    + font-weight: 700;
    + background: linear-gradient(45deg, var(--primary), var(--accent));
    + -webkit-background-clip: text;
    + background-clip: text;
    + color: transparent;
    + }
    +
    + .nav-links {
    + display: flex;
    + list-style: none;
    + gap: 2rem;
    + }
    +
    + .nav-links a {
    + text-decoration: none;
    + color: var(--text);
    + font-weight: 500;
    + transition: var(--transition);
    + }
    +
    + .nav-links a:hover {
    + color: var(--accent);
    + }
    +
    + .menu-toggle {
    + display: none;
    + }
    +
    + .hero {
    + min-height: 100vh;
    + display: flex;
    + flex-direction: column;
    + justify-content: center;
    + align-items: center;
    + padding: 2rem;
    + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    + }
    +
    + h1 {
    + font-size: 4rem;
    + text-align: center;
    + margin-bottom: 1rem;
    + background: linear-gradient(45deg, var(--primary), var(--accent));
    + -webkit-background-clip: text;
    + background-clip: text;
    + color: transparent;
    + animation: titleFloat 3s ease-in-out infinite;
    + }
    +
    + @keyframes titleFloat {
    + 0%, 100% { transform: translateY(0); }
    + 50% { transform: translateY(-10px); }
    + }
    +
    + .subtitle {
    + font-size: 1.5rem;
    + margin-bottom: 2rem;
    + opacity: 0.8;
    + }
    +
    + .title-preview {
    + width: 80%;
    + max-width: 600px;
    + padding: 2rem;
    + background: white;
    + border-radius: 10px;
    + box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    + font-size: 2rem;
    + text-align: center;
    + transition: var(--transition);
    + }
    +
    + .title-preview:focus {
    + outline: none;
    + box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    + }
    +
    + .tools {
    + padding: 5rem 2rem;
    + background: var(--bg);
    + }
    +
    + .controls {
    + display: flex;
    + gap: 1rem;
    + justify-content: center;
    + flex-wrap: wrap;
    + margin-top: 2rem;
    + }
    +
    + .controls button {
    + padding: 1rem 2rem;
    + border: none;
    + border-radius: 50px;
    + background: var(--primary);
    + color: white;
    + cursor: pointer;
    + transition: var(--transition);
    + }
    +
    + .controls button:hover {
    + transform: translateY(-2px);
    + background: var(--accent);
    + }
    +
    + .examples {
    + padding: 5rem 2rem;
    + background: #f8f9fa;
    + }
    +
    + .examples-grid {
    + display: grid;
    + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    + gap: 2rem;
    + max-width: 1200px;
    + margin: 2rem auto;
    + }
    +
    + .example {
    + padding: 2rem;
    + background: white;
    + border-radius: 10px;
    + box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    + transition: var(--transition);
    + }
    +
    + .example:hover {
    + transform: translateY(-5px);
    + }
    +
    + @media (max-width: 768px) {
    + .menu-toggle {
    + display: block;
    + background: none;
    + border: none;
    + cursor: pointer;
    + padding: 0.5rem;
    + }
    +
    + .menu-toggle span {
    + display: block;
    + width: 25px;
    + height: 3px;
    + background: var(--primary);
    + margin: 5px 0;
    + transition: var(--transition);
    + }
    +
    + .nav-links {
    + position: fixed;
    + top: 70px;
    + right: -100%;
    + flex-direction: column;
    + background: white;
    + width: 100%;
    + text-align: center;
    + transition: var(--transition);
    + padding: 2rem;
    + }
    +
    + .nav-links.active {
    + right: 0;
    + }
    +
    + h1 {
    + font-size: 2.5rem;
    + }
    + }