index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://inclusivework.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Navigating Heteronormative Workplaces | Professional Guide
+ style.css
+ header
+ class hero
+ nav
+ div
+ class logo
+ span Inclusive
+ class highlight
+ span Work
+ div
+ class nav-links
+ a Home
+ href #top
+ a Strategies
+ href #strategies
+ a Resources
+ href #resources
+ a Community
+ href #community
+ div
+ class hero-content
+ h1 Thriving in the Workplace
+ p Professional strategies for LGBTQ+ individuals navigating corporate environments
+ main
+ section
+ id strategies
+ class strategies-grid
+ h2 Key Strategies
+ div
+ class strategy-card
+ h3 Setting Boundaries
+ p Learn to establish and maintain professional boundaries while being authentic
+ button Learn More
+ class action-btn
+ div
+ class strategy-card
+ h3 Building Allies
+ p Develop meaningful professional relationships and create support networks
+ button Learn More
+ class action-btn
+ div
+ class strategy-card
+ h3 Workplace Rights
+ p Understand your legal protections and company policies
+ button Learn More
+ class action-btn
+ div
+ class strategy-card
+ h3 Self-Advocacy
+ p Effective communication strategies for professional growth
+ button Learn More
+ class action-btn
+ section
+ id resources
+ class resources-section
+ h2 Professional Resources
+ div
+ class resource-container
+ div
+ class resource-item
+ h3 Policy Templates
+ p Sample workplace policies and documentation
+ div
+ class resource-item
+ h3 Legal Guidelines
+ p Current workplace protection laws
+ div
+ class resource-item
+ h3 Communication Tools
+ p Professional dialogue frameworks
+ section
+ id community
+ class community-section
+ h2 Community Support
+ div
+ class community-grid
+ div
+ class community-card
+ h3 Mentorship
+ p Connect with experienced professionals
+ div
+ class community-card
+ h3 Peer Groups
+ p Join industry-specific support networks
+ div
+ class community-card
+ h3 Success Stories
+ p Read experiences from others
+ footer
+ div
+ class footer-content
+ p Built with pride by the community
+ div
+ class footer-links
+ a About
+ href #about
+ a Contact
+ href #contact
+ a Privacy
+ href #privacy
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01Qt6MV4S5FtRnU3Y62n5QUt",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website focused on navigating and thriving in heteronormative workplaces with inclusive, professional guidance.\n\n---domain---\ninclusivework.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://inclusivework.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Navigating Heteronormative Workplaces | Professional Guide\nstyle.css\nheader\n class hero\n nav\n div\n class logo\n span Inclusive\n class highlight\n span Work\n div\n class nav-links\n a Home\n href #top\n a Strategies\n href #strategies\n a Resources\n href #resources\n a Community\n href #community\n div\n class hero-content\n h1 Thriving in the Workplace\n p Professional strategies for LGBTQ+ individuals navigating corporate environments\nmain\n section\n id strategies\n class strategies-grid\n h2 Key Strategies\n div\n class strategy-card\n h3 Setting Boundaries\n p Learn to establish and maintain professional boundaries while being authentic\n button Learn More\n class action-btn\n div\n class strategy-card\n h3 Building Allies\n p Develop meaningful professional relationships and create support networks\n button Learn More\n class action-btn\n div\n class strategy-card\n h3 Workplace Rights\n p Understand your legal protections and company policies\n button Learn More\n class action-btn\n div\n class strategy-card\n h3 Self-Advocacy\n p Effective communication strategies for professional growth\n button Learn More\n class action-btn\n section\n id resources\n class resources-section\n h2 Professional Resources\n div\n class resource-container\n div\n class resource-item\n h3 Policy Templates\n p Sample workplace policies and documentation\n div\n class resource-item\n h3 Legal Guidelines\n p Current workplace protection laws\n div\n class resource-item\n h3 Communication Tools\n p Professional dialogue frameworks\n section\n id community\n class community-section\n h2 Community Support\n div\n class community-grid\n div\n class community-card\n h3 Mentorship\n p Connect with experienced professionals\n div\n class community-card\n h3 Peer Groups\n p Join industry-specific support networks\n div\n class community-card\n h3 Success Stories\n p Read experiences from others\nfooter\n div\n class footer-content\n p Built with pride by the community\n div\n class footer-links\n a About\n href #about\n a Contact\n href #contact\n a Privacy\n href #privacy\nscript.js\n---style.css---\n:root {\n --primary: #7371fc;\n --secondary: #ff6b6b;\n --text: #2d3436;\n --background: #ffffff;\n --accent: #ffeaa7;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--text);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\n color: white;\n padding: 2rem;\n min-height: 60vh;\n display: flex;\n flex-direction: column;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.highlight {\n color: var(--accent);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: opacity 0.3s;\n}\n\n.nav-links a:hover {\n opacity: 0.8;\n}\n\n.hero-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n.hero-content h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.strategies-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 4rem 2rem;\n}\n\n.strategy-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s;\n}\n\n.strategy-card:hover {\n transform: translateY(-5px);\n}\n\n.action-btn {\n background: var(--primary);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 5px;\n cursor: pointer;\n transition: background 0.3s;\n}\n\n.action-btn:hover {\n background: var(--secondary);\n}\n\n.resources-section, .community-section {\n padding: 4rem 2rem;\n background: #f8f9fa;\n}\n\n.resource-container, .community-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\nfooter {\n background: var(--text);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.footer-links {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n}\n\n.footer-links a {\n color: white;\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero-content h1 {\n font-size: 2rem;\n }\n \n .strategies-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scrolling for anchor 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 // Add animation to strategy cards on scroll\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, {\n threshold: 0.1\n });\n\n document.querySelectorAll('.strategy-card').forEach(card => {\n card.style.opacity = '0';\n card.style.transform = 'translateY(20px)';\n card.style.transition = 'opacity 0.5s, transform 0.5s';\n observer.observe(card);\n });\n\n // Mobile menu toggle functionality\n let isMenuOpen = false;\n const createMobileMenu = () => {\n if (window.innerWidth <= 768 && !isMenuOpen) {\n const mobileMenuBtn = document.createElement('button');\n mobileMenuBtn.innerHTML = '☰';\n mobileMenuBtn.className = 'mobile-menu-btn';\n document.querySelector('nav').prepend(mobileMenuBtn);\n \n mobileMenuBtn.addEventListener('click', () => {\n const navLinks = document.querySelector('.nav-links');\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n });\n \n isMenuOpen = true;\n }\n };\n\n createMobileMenu();\n window.addEventListener('resize', createMobileMenu);\n});\n---end---\n\nThis website features:\n1. A modern, gradient-based design with smooth animations\n2. Fully responsive layout that works on all devices\n3. Interactive strategy cards with hover effects\n4. Smooth scrolling navigation\n5. Intersection Observer for scroll animations\n6. Mobile-friendly menu system\n7. Accessible color contrast and semantic HTML\n8. Clean, modular CSS with CSS variables\n9. Professional typography and spacing\n10. Progressive enhancement with JavaScript\n\nThe color scheme is carefully chosen to be both professional and welcoming, while the layout emphasizes readability and easy navigation. The content is structured to provide valuable information while maintaining a supportive and inclusive tone."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 826,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2273
+ }
+ }
readme.scroll
Changed around line 1
+ # inclusivework.scroll.pub
+
+ website generated by Claude from prompt: how to survive in a heteronormative workplace
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Smooth scrolling for anchor links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Add animation to strategy cards on scroll
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, {
+ threshold: 0.1
+ });
+
+ document.querySelectorAll('.strategy-card').forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'opacity 0.5s, transform 0.5s';
+ observer.observe(card);
+ });
+
+ // Mobile menu toggle functionality
+ let isMenuOpen = false;
+ const createMobileMenu = () => {
+ if (window.innerWidth <= 768 && !isMenuOpen) {
+ const mobileMenuBtn = document.createElement('button');
+ mobileMenuBtn.innerHTML = '☰';
+ mobileMenuBtn.className = 'mobile-menu-btn';
+ document.querySelector('nav').prepend(mobileMenuBtn);
+
+ mobileMenuBtn.addEventListener('click', () => {
+ const navLinks = document.querySelector('.nav-links');
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+ });
+
+ isMenuOpen = true;
+ }
+ };
+
+ createMobileMenu();
+ window.addEventListener('resize', createMobileMenu);
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #7371fc;
+ --secondary: #ff6b6b;
+ --text: #2d3436;
+ --background: #ffffff;
+ --accent: #ffeaa7;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ }
+
+ .hero {
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+ color: white;
+ padding: 2rem;
+ min-height: 60vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+
+ .highlight {
+ color: var(--accent);
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: opacity 0.3s;
+ }
+
+ .nav-links a:hover {
+ opacity: 0.8;
+ }
+
+ .hero-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ }
+
+ .hero-content h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ }
+
+ .strategies-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 4rem 2rem;
+ }
+
+ .strategy-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+ }
+
+ .strategy-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .action-btn {
+ background: var(--primary);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background 0.3s;
+ }
+
+ .action-btn:hover {
+ background: var(--secondary);
+ }
+
+ .resources-section, .community-section {
+ padding: 4rem 2rem;
+ background: #f8f9fa;
+ }
+
+ .resource-container, .community-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+ }
+
+ footer {
+ background: var(--text);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .footer-links {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-top: 1rem;
+ }
+
+ .footer-links a {
+ color: white;
+ text-decoration: none;
+ }
+
+ @media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero-content h1 {
+ font-size: 2rem;
+ }
+
+ .strategies-grid {
+ grid-template-columns: 1fr;
+ }
+ }