프롬프트

목표량이 8잔이고 물병이 차오르는 모양 형태로 채워지는 모습을 보여주는 물 마시기 기록기를 만들어 주세요. 아무것도 설치할 필요 없이 다른 파일 없이 브라우저에서 바로 열 수 있는 HTML 파일 하나로 만들어 주세요. CSS와 자바스크립트는 그 파일 안에 함께 넣어 주세요. 이미지 파일이나 외부 주소는 쓰지 마시고, 기호가 필요하면 이모지나 글자를 사용하세요.

큰 버튼 하나는 물 한 잔을 추가하고, 더 작은 버튼 하나는 잘못 눌렀을 때 마지막 한 잔을 취소합니다.

화면의 핵심은 숫자가 아니라 그림 형태로 얼마나 채워졌는지 보여주는 것입니다. 숫자는 그 아래에 더 작은 글씨로 적어 주세요.

자정이 되면 빈 상태로 초기화하고, 지난 7일간의 기록을 아래에 작은 한 줄로 표시해 패턴을 확인할 수 있게 해 주세요.

목표를 달성하면 짧고 기분 좋은 축하 문구를 보여주세요. 그 이후로 잔을 더 추가할 때마다 매번 축하하지는 마세요.

브라우저를 닫아도 모든 기록이 브라우저 안에 그대로 유지되어야 합니다.

다 만든 후에는, 자정이 지나 새 날이 시작되어도 전날의 기록이 사라지지 않는지 확인해 주세요.