index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://ddmgimo.scroll.pub
+ metaTags
+ editButton /edit.html
+ title DD MGIMO - Double Degree Programs at MGIMO University
+ style.css
+ header
+ class hero
+ nav
+ div DD MGIMO
+ class logo
+ div
+ class nav-links
+ a Programs
+ href #programs
+ a Benefits
+ href #benefits
+ a Apply
+ href #apply
+ a Contact
+ class cta-button
+ href #contact
+ div
+ class hero-content
+ h1 Double Degree Excellence
+ p Unlock Global Opportunities with MGIMO's Premier Double Degree Programs
+ a Apply Now
+ class primary-button
+ href #apply
+ main
+ section
+ id programs
+ class programs
+ h2 Our Programs
+ div
+ class program-grid
+ div
+ class program-card
+ h3 Economics & Management
+ p Partnership with University of London
+ a Learn More
+ class secondary-button
+ href #
+ div
+ class program-card
+ h3 International Relations
+ p Partnership with Sciences Po
+ a Learn More
+ class secondary-button
+ href #
+ div
+ class program-card
+ h3 Business Administration
+ p Partnership with ICN Business School
+ a Learn More
+ class secondary-button
+ href #
+ div
+ class program-card
+ h3 Law & Diplomacy
+ p Partnership with St. Andrews University
+ a Learn More
+ class secondary-button
+ href #
+ section
+ id benefits
+ class benefits
+ h2 Why Choose DD MGIMO?
+ div
+ class benefits-container
+ div
+ class benefit-item
+ span 🎓
+ h3 Dual Qualifications
+ p Earn two prestigious degrees simultaneously
+ div
+ class benefit-item
+ span 🌍
+ h3 Global Network
+ p Access international career opportunities
+ div
+ class benefit-item
+ span 💼
+ h3 Professional Growth
+ p Gain multicultural business experience
+ div
+ class benefit-item
+ span 🗣️
+ h3 Language Excellence
+ p Master multiple languages
+ section
+ id apply
+ class apply-section
+ h2 Application Process
+ div
+ class timeline
+ div
+ class timeline-item
+ h3 1. Submit Documents
+ p Prepare your application package
+ div
+ class timeline-item
+ h3 2. Language Test
+ p Demonstrate language proficiency
+ div
+ class timeline-item
+ h3 3. Interview
+ p Personal or online interview
+ div
+ class timeline-item
+ h3 4. Admission
+ p Receive your admission decision
+ section
+ id contact
+ class contact
+ h2 Contact Us
+ div
+ class contact-container
+ form
+ class contact-form
+ input
+ type text
+ placeholder Your Name
+ input
+ type email
+ placeholder Your Email
+ textarea
+ placeholder Your Message
+ button Submit
+ type submit
+ class primary-button
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Programs
+ href #programs
+ a Apply
+ href #apply
+ a Contact
+ href #contact
+ p MGIMO University - Double Degree Programs
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01CpvpLfYgm9dCodzbM3hF9w",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website for \"DD MGIMO\" (Double Degree MGIMO program).\n\n---domain---\nddmgimo.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://ddmgimo.scroll.pub\nmetaTags\neditButton /edit.html\ntitle DD MGIMO - Double Degree Programs at MGIMO University\nstyle.css\nheader\n class hero\n nav\n div DD MGIMO\n class logo\n div\n class nav-links\n a Programs\n href #programs\n a Benefits\n href #benefits\n a Apply\n href #apply\n a Contact\n class cta-button\n href #contact\n div\n class hero-content\n h1 Double Degree Excellence\n p Unlock Global Opportunities with MGIMO's Premier Double Degree Programs\n a Apply Now\n class primary-button\n href #apply\nmain\n section\n id programs\n class programs\n h2 Our Programs\n div\n class program-grid\n div\n class program-card\n h3 Economics & Management\n p Partnership with University of London\n a Learn More\n class secondary-button\n href #\n div\n class program-card\n h3 International Relations\n p Partnership with Sciences Po\n a Learn More\n class secondary-button\n href #\n div\n class program-card\n h3 Business Administration\n p Partnership with ICN Business School\n a Learn More\n class secondary-button\n href #\n div\n class program-card\n h3 Law & Diplomacy\n p Partnership with St. Andrews University\n a Learn More\n class secondary-button\n href #\n section\n id benefits\n class benefits\n h2 Why Choose DD MGIMO?\n div\n class benefits-container\n div\n class benefit-item\n span 🎓\n h3 Dual Qualifications\n p Earn two prestigious degrees simultaneously\n div\n class benefit-item\n span 🌍\n h3 Global Network\n p Access international career opportunities\n div\n class benefit-item\n span 💼\n h3 Professional Growth\n p Gain multicultural business experience\n div\n class benefit-item\n span 🗣️\n h3 Language Excellence\n p Master multiple languages\n section\n id apply\n class apply-section\n h2 Application Process\n div\n class timeline\n div\n class timeline-item\n h3 1. Submit Documents\n p Prepare your application package\n div\n class timeline-item\n h3 2. Language Test\n p Demonstrate language proficiency\n div\n class timeline-item\n h3 3. Interview\n p Personal or online interview\n div\n class timeline-item\n h3 4. Admission\n p Receive your admission decision\n section\n id contact\n class contact\n h2 Contact Us\n div\n class contact-container\n form\n class contact-form\n input\n type text\n placeholder Your Name\n input\n type email\n placeholder Your Email\n textarea\n placeholder Your Message\n button Submit\n type submit\n class primary-button\nfooter\n div\n class footer-content\n div\n class footer-links\n a Programs\n href #programs\n a Apply\n href #apply\n a Contact\n href #contact\n p MGIMO University - Double Degree Programs\nscript.js\n---style.css---\n:root {\n --primary-color: #1e3d59;\n --secondary-color: #ff6e40;\n --accent-color: #ffc13b;\n --text-color: #333;\n --light-bg: #f5f5f5;\n --white: #ffffff;\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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), #2a5298);\n color: var(--white);\n padding: 2rem 0;\n min-height: 80vh;\n display: flex;\n flex-direction: column;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 5%;\n margin-bottom: 4rem;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: bold;\n color: var(--accent-color);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n color: var(--white);\n text-decoration: none;\n padding: 0.5rem 1rem;\n transition: var(--transition);\n}\n\n.cta-button {\n background: var(--secondary-color);\n border-radius: 25px;\n padding: 0.5rem 1.5rem !important;\n}\n\n.hero-content {\n text-align: center;\n padding: 0 5%;\n margin: auto 0;\n}\n\n.hero-content h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n}\n\n.primary-button {\n display: inline-block;\n background: var(--secondary-color);\n color: var(--white);\n padding: 1rem 2rem;\n border-radius: 25px;\n text-decoration: none;\n transition: var(--transition);\n margin-top: 2rem;\n}\n\n.program-grid, .benefits-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem 5%;\n}\n\n.program-card {\n background: var(--white);\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.program-card:hover {\n transform: translateY(-5px);\n}\n\nsection {\n padding: 5rem 0;\n}\n\nsection h2 {\n text-align: center;\n margin-bottom: 3rem;\n color: var(--primary-color);\n}\n\n.benefits {\n background: var(--light-bg);\n}\n\n.benefit-item {\n text-align: center;\n padding: 2rem;\n}\n\n.benefit-item span {\n font-size: 3rem;\n}\n\n.timeline {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n padding: 0 5%;\n}\n\n.timeline-item {\n text-align: center;\n position: relative;\n padding: 2rem;\n}\n\n.contact-container {\n max-width: 600px;\n margin: 0 auto;\n padding: 0 5%;\n}\n\n.contact-form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\ninput, textarea {\n padding: 1rem;\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\nfooter {\n background: var(--primary-color);\n color: var(--white);\n padding: 2rem 5%;\n text-align: center;\n}\n\n.footer-links {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-bottom: 1rem;\n}\n\n.footer-links a {\n color: var(--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: 2.5rem;\n }\n \n section {\n padding: 3rem 0;\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 // Form submission handling\n const form = document.querySelector('.contact-form');\n if (form) {\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n // Add form submission logic here\n alert('Thank you for your message. We will get back to you soon!');\n form.reset();\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.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('.program-card, .benefit-item, .timeline-item').forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(20px)';\n el.style.transition = 'all 0.6s ease-out';\n observer.observe(el);\n });\n});\n---end---\n\nThis implementation creates a modern, professional website for DD MGIMO with smooth animations, responsive design, and an intuitive user interface. The color scheme uses deep blues (representing education and professionalism) with orange accents (for energy and creativity). The layout is clean and organized, with clear sections for programs, benefits, application process, and contact information.\n\nKey features include:\n- Smooth scroll behavior\n- Intersection Observer for scroll animations\n- Responsive grid layouts\n- Modern card-based design\n- Contact form with basic functionality\n- Mobile-friendly navigation\n- Gradient backgrounds\n- Hover effects\n- Accessible color contrast\n- Semantic HTML structure\n\nThe site maintains a professional academic aesthetic while incorporating modern web design principles and interactive elements."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 820,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2625
+ }
+ }
readme.scroll
Changed around line 1
+ # ddmgimo.scroll.pub
+
+ website generated by Claude from prompt: DD MGIMO
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'
+ });
+ });
+ });
+
+ // Form submission handling
+ const form = document.querySelector('.contact-form');
+ if (form) {
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ // Add form submission logic here
+ alert('Thank you for your message. We will get back to you soon!');
+ form.reset();
+ });
+ }
+
+ // Animation on scroll
+ const observerOptions = {
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('.program-card, .benefit-item, .timeline-item').forEach(el => {
+ el.style.opacity = '0';
+ el.style.transform = 'translateY(20px)';
+ el.style.transition = 'all 0.6s ease-out';
+ observer.observe(el);
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #1e3d59;
+ --secondary-color: #ff6e40;
+ --accent-color: #ffc13b;
+ --text-color: #333;
+ --light-bg: #f5f5f5;
+ --white: #ffffff;
+ --transition: all 0.3s ease;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ }
+
+ .hero {
+ background: linear-gradient(135deg, var(--primary-color), #2a5298);
+ color: var(--white);
+ padding: 2rem 0;
+ min-height: 80vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 5%;
+ margin-bottom: 4rem;
+ }
+
+ .logo {
+ font-size: 1.8rem;
+ font-weight: bold;
+ color: var(--accent-color);
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ }
+
+ .nav-links a {
+ color: var(--white);
+ text-decoration: none;
+ padding: 0.5rem 1rem;
+ transition: var(--transition);
+ }
+
+ .cta-button {
+ background: var(--secondary-color);
+ border-radius: 25px;
+ padding: 0.5rem 1.5rem !important;
+ }
+
+ .hero-content {
+ text-align: center;
+ padding: 0 5%;
+ margin: auto 0;
+ }
+
+ .hero-content h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .primary-button {
+ display: inline-block;
+ background: var(--secondary-color);
+ color: var(--white);
+ padding: 1rem 2rem;
+ border-radius: 25px;
+ text-decoration: none;
+ transition: var(--transition);
+ margin-top: 2rem;
+ }
+
+ .program-grid, .benefits-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem 5%;
+ }
+
+ .program-card {
+ background: var(--white);
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: var(--transition);
+ }
+
+ .program-card:hover {
+ transform: translateY(-5px);
+ }
+
+ section {
+ padding: 5rem 0;
+ }
+
+ section h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ color: var(--primary-color);
+ }
+
+ .benefits {
+ background: var(--light-bg);
+ }
+
+ .benefit-item {
+ text-align: center;
+ padding: 2rem;
+ }
+
+ .benefit-item span {
+ font-size: 3rem;
+ }
+
+ .timeline {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ padding: 0 5%;
+ }
+
+ .timeline-item {
+ text-align: center;
+ position: relative;
+ padding: 2rem;
+ }
+
+ .contact-container {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 0 5%;
+ }
+
+ .contact-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ input, textarea {
+ padding: 1rem;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ }
+
+ footer {
+ background: var(--primary-color);
+ color: var(--white);
+ padding: 2rem 5%;
+ text-align: center;
+ }
+
+ .footer-links {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-bottom: 1rem;
+ }
+
+ .footer-links a {
+ color: var(--white);
+ text-decoration: none;
+ }
+
+ @media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero-content h1 {
+ font-size: 2.5rem;
+ }
+
+ section {
+ padding: 3rem 0;
+ }
+ }