Spaces:

duck-ho
/

greenwave-example

Running

역할 당신은 숙련된 웹 프론트엔드 개발자이며, HTML, CSS, JavaScript만으로 현대적이고 반응형인 정적 회사 소개 웹페이지를 제작하는 임무를 수행합니다. 별도의 npm 패키지 설치나 React 같은 라이브러리는 사용하지 않습니다. 아래 제공된 회사 개요와 요구사항을 바탕으로, 깔끔하고 모던한 느낌의 웹페이지를 작성해주세요. ⸻ 회사 개요 • 회사명: GreenWave Tech • 산업 분야: 친환경 에너지 솔루션 • 회사 미션: 혁신적인 친환경 기술을 통해 지속 가능한 미래를 만든다. • 주요 제품: • SolarOne: 고효율 태양광 패널 시스템 • EcoCharge: 전기차 급속 충전기 • WindFlow: 소형 풍력 발전 터빈 • 회사 핵심 가치: • 지속 가능성 (Sustainability) • 혁신성 (Innovation) • 신뢰성 (Reliability) ⸻ 웹페이지 요구사항 웹페이지는 다음과 같은 4가지 섹션으로 구성되어야 합니다. 1. 메인(Hero) 섹션 • 회사명과 캐치프레이즈: “GreenWave Tech - 기술로 만드는 지속 가능한 미래” • 친환경 느낌의 배경 이미지 또는 색상 사용 • “자세히 알아보기” 버튼 클릭 시 회사 소개 섹션으로 부드럽게 스크롤 이동 2. 회사 소개 섹션 (About Us) • 회사 미션 및 핵심 가치 소개 • 3가지 핵심 가치(지속 가능성, 혁신성, 신뢰성)를 아이콘과 함께 나란히 표시 3. 제품 소개 섹션 (Our Products) • 주요 제품(SolarOne, EcoCharge, WindFlow)을 카드 형식으로 소개 • 각 카드에는 제품 이름, 이미지(placeholder), 제품 설명 포함 • 버튼 “더 알아보기” (단순 버튼으로, 별도 페이지 연결 없음) 4. 문의 섹션 (Contact Us) • 회사 주소, 전화번호, 이메일 표기 • 간단한 문의 폼 (이름, 이메일, 메시지, 제출 버튼) • "제출하기" 버튼 클릭 시 폼 동작 없이 경고창(alert)으로 “문의가 접수되었습니다.” 메시지 표시만 구현 ⸻ 스타일 및 기술 요구사항 • 사용 가능 기술: HTML5, CSS3, 순수 JavaScript • 컬러 팔레트: • 주요색: 친환경 초록색 계열 (#34D399, #059669 등) • 보조색: 화이트, 그레이, 밝은 하늘색 • 폰트: • Google Fonts에서 무료로 제공되는 깔끔한 sans-serif 계열 폰트(예: Inter, Poppins)를 CDN 링크로 연결 사용 • UI/UX: • 반응형 레이아웃 (데스크탑, 태블릿, 모바일 최적화) • 부드러운 스크롤 효과 구현 (순수 JavaScript로 처리) • 깨끗하고 간결한 디자인 유지 • Accessibility (접근성): 충분한 글자 크기와 명확한 컬러 대비 ⸻ 결과물 형태 아래와 같은 파일 구조로 작성하여 주세요. GreenWaveTech/ ├── index.html ├── styles.css └── script.js • 모든 HTML 코드는 index.html에 작성하고, 각 섹션은 태그로 구분 • 모든 CSS 스타일링은 styles.css 파일에 작성하고, 클래스 기반으로 스타일링 • 모든 JavaScript 기능(부드러운 스크롤, 버튼 클릭 이벤트)은 script.js에 작성 • 폰트 및 아이콘은 CDN 링크만 사용하고 추가 패키지는 설치하지 않음 ⸻ 코드 스타일 예시 아래는 Hero 섹션의 간단한 예시 코드입니다. HTML (index.html 일부 예시) <title>GreenWave Tech</title> GreenWave Tech 기술로 만드는 지속 가능한 미래 자세히 알아보기 <script src="script.js"></script> CSS (styles.css 일부 예시) body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; } .hero { background-color: #34D399; color: white; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } button { background-color: white; color: #059669; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } JavaScript (script.js 일부 예시) document.getElementById("learn-more-btn").addEventListener("click", function() { document.querySelector("#about").scrollIntoView({ behavior: "smooth" }); }); // 문의 폼 제출 버튼 이벤트 예시 document.querySelector("#contact-form").addEventListener("submit", function(e) { e.preventDefault(); alert("문의가 접수되었습니다."); }); 위 조건과 구조를 참고하여 HTML, CSS, 순수 JavaScript만으로 GreenWave Tech의 회사 소개 웹페이지를 작성해 주세요. - Initial Deployment

6a07a9e verified 9 months ago

preview code

raw

history blame contribute delete

219 Bytes

metadata

title: greenwave-example
emoji: 🐳
colorFrom: purple
colorTo: gray
sdk: static
pinned: false
tags:
  - deepsite

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference