Changes to phoenixlegion.scroll.pub

root
root
25 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Phoenix Legion

+

Rising from the ashes to dominate the Dota 2 competitive scene

+
+
+
+
+

Our Roster

+
+
+
+

ShadowBlade

+

Position 1 - Carry

+
+
+
+

StormMaster

+

Position 2 - Mid

+
+
+
+

IcePhoenix

+

Position 3 - Offlane

+
+
+
+

EarthSpirit

+

Position 4 - Support

+
+
+
+

OracleSage

+

Position 5 - Hard Support

+
+
+
+
+
+

Upcoming Matches

+
+
+
June 15, 2024
+
+ Phoenix Legion
+ VS
+ Team Secret
+
+
ESL One Stockholm
+
+
+
+
+
+

Achievements

+
+
+
+

ESL One Malaysia

+

1st Place - 2023

+
+
+
+

DreamLeague

+

2nd Place - 2023

+
+
+
+
+
+
+
+

Phoenix Legion - Professional Dota 2 Team

+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://phoenixlegion.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Phoenix Legion - Professional Dota 2 Team
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01VQHxhL4B73eUF1TRsSrya4",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website for a fictional Dota 2 esports team called \"Phoenix Legion\".\n\n---domain---\nphoenixlegion.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://phoenixlegion.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Phoenix Legion - Professional Dota 2 Team\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
\n \n
\n\n
\n
\n
\n

Phoenix Legion

\n

Rising from the ashes to dominate the Dota 2 competitive scene

\n
\n
\n\n
\n

Our Roster

\n
\n
\n
\n

ShadowBlade

\n

Position 1 - Carry

\n
\n
\n
\n

StormMaster

\n

Position 2 - Mid

\n
\n
\n
\n

IcePhoenix

\n

Position 3 - Offlane

\n
\n
\n
\n

EarthSpirit

\n

Position 4 - Support

\n
\n
\n
\n

OracleSage

\n

Position 5 - Hard Support

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

Upcoming Matches

\n
\n
\n
June 15, 2024
\n
\n Phoenix Legion\n VS\n Team Secret\n
\n
ESL One Stockholm
\n
\n
\n
\n\n
\n

Achievements

\n
\n
\n \n

ESL One Malaysia

\n

1st Place - 2023

\n
\n
\n \n

DreamLeague

\n

2nd Place - 2023

\n
\n
\n
\n
\n\n\n\n---style.css---\n:root {\n --primary-color: #ff4d00;\n --secondary-color: #1a1a1a;\n --accent-color: #ffd700;\n --text-color: #ffffff;\n --background-color: #0a0a0a;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Arial', sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\n/* Header & Navigation */\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background-color: rgba(0, 0, 0, 0.9);\n position: fixed;\n width: 100%;\n z-index: 1000;\n backdrop-filter: blur(10px);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n color: var(--text-color);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),\n url('data:image/svg+xml,');\n background-size: cover;\n text-align: center;\n}\n\n.hero-content h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n color: var(--primary-color);\n text-shadow: 0 0 10px rgba(255, 77, 0, 0.5);\n}\n\n/* Team Section */\n.team-section {\n padding: 5rem 5%;\n}\n\n.player-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.player-card {\n background: linear-gradient(145deg, #1a1a1a, #2a2a2a);\n padding: 1.5rem;\n border-radius: 10px;\n text-align: center;\n transition: transform 0.3s ease;\n}\n\n.player-card:hover {\n transform: translateY(-5px);\n}\n\n.player-image {\n width: 150px;\n height: 150px;\n background-color: var(--primary-color);\n border-radius: 50%;\n margin: 0 auto 1rem;\n}\n\n/* Matches Section */\n.matches-section {\n padding: 5rem 5%;\n background-color: var(--secondary-color);\n}\n\n.match-card {\n background: linear-gradient(145deg, #2a2a2a, #1a1a1a);\n padding: 2rem;\n border-radius: 10px;\n margin-top: 2rem;\n}\n\n.match-teams {\n display: flex;\n justify-content: space-around;\n align-items: center;\n margin: 1rem 0;\n}\n\n.vs {\n color: var(--accent-color);\n font-weight: bold;\n}\n\n/* Achievements Section */\n.achievements-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.achievement {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(145deg, #1a1a1a, #2a2a2a);\n border-radius: 10px;\n}\n\n.trophy::before {\n content: \"🏆\";\n font-size: 3rem;\n}\n\n/* Footer */\nfooter {\n background-color: var(--secondary-color);\n padding: 2rem 5%;\n text-align: center;\n}\n\n.social-links {\n margin-bottom: 1rem;\n}\n\n.social-links a {\n color: var(--text-color);\n text-decoration: none;\n margin: 0 1rem;\n}\n\n/* Mobile Responsiveness */\n.mobile-menu-btn {\n display: none;\n background: none;\n border: none;\n cursor: pointer;\n}\n\n.mobile-menu-btn span {\n display: block;\n width: 25px;\n height: 3px;\n background-color: var(--text-color);\n margin: 5px 0;\n transition: 0.3s;\n}\n\n@media (max-width: 768px) {\n .mobile-menu-btn {\n display: block;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n background-color: var(--secondary-color);\n flex-direction: column;\n text-align: center;\n padding: 1rem 0;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .hero-content h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu functionality\n const mobileMenuBtn = document.querySelector('.mobile-menu-btn');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenuBtn.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n \n // Animate hamburger to X\n const spans = mobileMenuBtn.querySelectorAll('span');\n spans.forEach(span => span.classList.toggle('active'));\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 if (target) {\n target.scrollIntoView({\n behavior: 'smooth'\n });\n // Close mobile menu if open\n navLinks.classList.remove('active');\n }\n });\n });\n\n // Intersection Observer for fade-in animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);\n\n // Observe all sections\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": 282,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3019
+ }
+ }
readme.scroll
Changed around line 1
+ # phoenixlegion.scroll.pub
+ Website generated by Claude from prompt: a website about a dota 2 esports team
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu functionality
+ const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenuBtn.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+
+ // Animate hamburger to X
+ const spans = mobileMenuBtn.querySelectorAll('span');
+ spans.forEach(span => span.classList.toggle('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'));
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ }
+ });
+ });
+
+ // Intersection Observer for fade-in animations
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ observer.unobserve(entry.target);
+ }
+ });
+ }, observerOptions);
+
+ // Observe all sections
+ document.querySelectorAll('section').forEach(section => {
+ observer.observe(section);
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #ff4d00;
+ --secondary-color: #1a1a1a;
+ --accent-color: #ffd700;
+ --text-color: #ffffff;
+ --background-color: #0a0a0a;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Arial', sans-serif;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ }
+
+ /* Header & Navigation */
+ .main-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ background-color: rgba(0, 0, 0, 0.9);
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+ backdrop-filter: blur(10px);
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+ }
+
+ .nav-links a {
+ color: var(--text-color);
+ text-decoration: none;
+ transition: color 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ color: var(--primary-color);
+ }
+
+ /* Hero Section */
+ .hero {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
+ url('data:image/svg+xml,');
+ background-size: cover;
+ text-align: center;
+ }
+
+ .hero-content h1 {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ color: var(--primary-color);
+ text-shadow: 0 0 10px rgba(255, 77, 0, 0.5);
+ }
+
+ /* Team Section */
+ .team-section {
+ padding: 5rem 5%;
+ }
+
+ .player-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+ }
+
+ .player-card {
+ background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
+ padding: 1.5rem;
+ border-radius: 10px;
+ text-align: center;
+ transition: transform 0.3s ease;
+ }
+
+ .player-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .player-image {
+ width: 150px;
+ height: 150px;
+ background-color: var(--primary-color);
+ border-radius: 50%;
+ margin: 0 auto 1rem;
+ }
+
+ /* Matches Section */
+ .matches-section {
+ padding: 5rem 5%;
+ background-color: var(--secondary-color);
+ }
+
+ .match-card {
+ background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
+ padding: 2rem;
+ border-radius: 10px;
+ margin-top: 2rem;
+ }
+
+ .match-teams {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ margin: 1rem 0;
+ }
+
+ .vs {
+ color: var(--accent-color);
+ font-weight: bold;
+ }
+
+ /* Achievements Section */
+ .achievements-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+ }
+
+ .achievement {
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
+ border-radius: 10px;
+ }
+
+ .trophy::before {
+ content: "🏆";
+ font-size: 3rem;
+ }
+
+ /* Footer */
+ footer {
+ background-color: var(--secondary-color);
+ padding: 2rem 5%;
+ text-align: center;
+ }
+
+ .social-links {
+ margin-bottom: 1rem;
+ }
+
+ .social-links a {
+ color: var(--text-color);
+ text-decoration: none;
+ margin: 0 1rem;
+ }
+
+ /* Mobile Responsiveness */
+ .mobile-menu-btn {
+ display: none;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu-btn span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background-color: var(--text-color);
+ margin: 5px 0;
+ transition: 0.3s;
+ }
+
+ @media (max-width: 768px) {
+ .mobile-menu-btn {
+ display: block;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ background-color: var(--secondary-color);
+ flex-direction: column;
+ text-align: center;
+ padding: 1rem 0;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero-content h1 {
+ font-size: 2.5rem;
+ }
+ }