지금부터 html, css, javascript를 이용하여 웹사이트에서 인터렉티브로 작용하는 CYOA를 만들거야.

내가 지시하는 사항에 따라 웹 사이트 코드를 제작해줘

내가 [] 특수문자 사이에 사이트에 직접 들어갈 문자들을 입력해줄 건데 그 이외의 문자들은 들어가서는 안돼

또한 문장 단위로 줄바꿈을 하는 등 가독성에 신경을 써줘야 하고, 사이트 디자인은 깔끔하면서도 모던하게 만들어줘

텍스트도 사이트의 분위기에 맞는 색감을 사용하는 등 심미적이게 처리해줘

하단에 항상 스크롤을 따라오면서 고정되어있는 바가 존재해 

해당 바 중앙에는 선택지를 선택함에 따라 조정되는 변수'포인트'가 중앙에 있어 변수의 초기 값은 10이야

이미지는 내가 넣을 건데 일단 이미지 경로와 이름은 다음과 같은 형식이야.

image/xxx.png

xxx에 이미지 명이 들어가는데 내가 -이미지: 이름- 이런식으로 표기하면 '이름'에 해당하는 글자가 xxx에 들어가는 이름이야.

내가 표기한거를 기반으로 코드상 경로를 작성해줘

우선 처음 사이트 시작시 나타나는 도입부 설명 부분이야.

-이미지: start-

[당신은 오늘도 지친 몸을 침대에 내던졌습니다. 그러고는 이불을 덮어쓰고 휴대폰 화면을 켰습니다. 그러나 오늘따라 매트리스의 감촉이 이상합니다.

좀 더 푹신한데, 뭔가 튀어나와있는 감각. 당신은 휴대폰 불빛으로 그 곳을 비추어 보았고, 그곳에는 푹신한 베개로 만들어진 듯 한 손잡이와 문이 있었습니다.

당신은 알 수 없는 이끌림에 그 문을 열고 기나긴 이불 동굴을 지났습니다. 그러자 펼쳐지는 것은...]

-이미지:intro-

[푹신한 배개와 이불로 이뤄진 세계였습니다. 알 수 없는 편안함과 부드러움으로 가득한 세계. 돌아보니 당신이 들어온 문은 감쪽같이 사라져 있었습니다.]

[당신은 돌아갈 길이 막혔다는 것을 알고, 이 곳을 탐사하기 시작했습니다. 온통 푹신해 보이는 것들 뿐이지만요.]

=

[이곳은 얼마나 넓습니까?]

지금부터 해당 선택지 섹션은 앞에 'A'를 붙여 구분할 거야 해당 A 섹션은 선택지 중에서 딱 하나만 고를 수 있어

하나를 고를 경우 고르지 않은 선택지들은 모두 블러 처리되고 선택이 불가능해져

고른 선택지는 연두색 테두리가 생기는 등 디자인에 맞게 선택된걸 확인할 수 있도록 표시하줘

이미 고른 선택지를 다시 고를경우 고른걸 취소하고 다시 고를 수 있어

포인트 부분 숫자는 변수에 양수를 추가하면 연두색 계열 음수를 추가하면 붉은색 계열로 숫자를 색칠해줘

포인트 부분 숫자는 즉각적으로 '포인트' 변수에 그 수치를 더해줘, 선택을 취소하면 그 수치를 빼고

각 선택지들의 맨 처음에 나타나는 [] 내부 글자는 '제목'으로 다른 글자보다 조금 더 크게 나타나야해

A1

[학교 운동장]

-이미지:A1-

[포인트: -5]

[400m 트랙으로 둘러싸인 운동장 정도의 크기다.]

해당 선택지 선택시 변수 '포인트' -5

A2

[마을]

-이미지:A2-

[포인트: -3]

[둘레 약 4km 정도의 동네 크기다. 천천히 걸어서 2시간이면 다 둘러볼 것 같다.

해당 선택지 선택시 변수 '포인트' -3

A3

[큰 도시]

-이미지:A3-

[포인트: 0]

[마을이 수십개 모인 정도 크기다. 걸어서는 하루만에 돌아보기 힘들다.]

A4

[나라]

-이미지:A4-

[포인트:+5]

[크고 작은 도시가 모인 크기다. 걸어서 돌아보려면 반년은 걸릴 것 같다.]

해당 선택지 선택시 변수 '포인트' +10

A5

[불명]

-이미지:A5-

[포인트:+10]

[어디가 끝인지 모르겠다.]

해당 선택지 선택시 변수 '포인트' +10

=

[주변에 뭐가 있나요? 익숙한 동식물이 있나요?]

지금부터 해당 선택지 섹션은 앞에 'B'를 붙여 구분할 거야 해당 B 섹션은 선택지를 모두 고를 수 있어

이미 고른 선택지를 다시 고를경우 고른걸 취소하고 다시 고를 수 있어

포인트 부분 숫자는 변수에 양수를 추가하면 연두색 계열 음수를 추가하면 붉은색 계열로 숫자를 색칠해줘

포인트 부분 숫자는 즉각적으로 '포인트' 변수에 그 수치를 더해줘, 선택을 취소하면 그 수치를 빼고

B1

[식물]

-이미지:B1-

[포인트:-1]

[푹신한 배게와 이불로 이뤄진 식물이다. 극세사 이불로 된 잎이 보드랍다.]

B2

[동물]

-이미지:B2-

[포인트:-2]

[부드럽고 말랑 말랑한 배게로 이뤄진 동물이다. 다가가면 마구 안겨와서 애교를 부린다.]

B3

[작은 괴물]

-이미지:B3-

[포인트:+3]

[푹신한 배게로 이뤄진 작은 괴물이다. 당신에게 달려들어 싸구려 부직포로 마구 긁는다. 따갑다.]

B4

[푸호이!]

-이미지:B4-

[포인트:-5]

[당신과 소통할 수 있는 배게 지성체다. 천이 말랑 쫀득해서 기분좋다. 사람 모양이다.]

B5

[큰 괴물]

-이미지:B5-

[포인트:+6]

[푹신한 배게로 이뤄진 커다란 괴물이다. 당신을 집어 삼켜 딱딱하고 거친 싸구려 매트리스로 비빈다. 온몸이 쓸려서 아프다.]

=

[주변 지형은 어떤가요?]

지금부터 해당 선택지 섹션은 앞에 'C'를 붙여 구분할 거야 해당 C 섹션은 선택지를 모두 고를 수 있어

이미 고른 선택지를 다시 고를경우 고른걸 취소하고 다시 고를 수 있어

포인트 부분 숫자는 변수에 양수를 추가하면 연두색 계열 음수를 추가하면 붉은색 계열로 숫자를 색칠해줘

포인트 부분 숫자는 즉각적으로 '포인트' 변수에 그 수치를 더해줘, 선택을 취소하면 그 수치를 빼고

C1

[배게 산]

-이미지: C1-

[포인트: +3]

[배게와 이불로 드높히 쌓인 산이다. 발을 헛디디면 통 통 튀기면서 굴러 떨어진다. 때때로 거친 부직포가 있어서 따갑다.]

C2

[이불 바다]

-이미지:C2-

[포인트: +6]

[너무나도 포근해서 빠져나오기 싫어지는 이불 바다다. 극세사 이불이라 특히 더 좋다. 너무 깊게 들어가면 숨쉬기 힘들다.]

C3

[하늘 베게]

-이미지:C3-

[포인트: +4]

[하늘에 떠다니는 베게 구름이다. 어떻게든 올라가고 싶어지는 욕망이 든다. 위에서 떨어지면 어지럽다.]

C4

[협곡]

-이미지:C4-

[포인트:+5]

[실수로 빠지면 나오는데 오래 걸릴 것 같다. 떨어질 때 포근한 이불이 받아준다. 그대로 잠들어 버릴 것 같다.]

C5

[큰 나무]

-이미지:C5-

[포인트:+2]

[큰 나무 모양 배게다. 엄청 높다. 작은 쿠션으로 음식이 마구 떨어진다. 맞으면 어지러운데, 의외로 맛잇다.]

[특별한게 있나요?]

지금부터 해당 선택지 섹션은 앞에 'D'를 붙여 구분할 거야 해당 D 섹션은 선택지를 모두 고를 수 있어

이미 고른 선택지를 다시 고를경우 고른걸 취소하고 다시 고를 수 있어

포인트 부분 숫자는 변수에 양수를 추가하면 연두색 계열 음수를 추가하면 붉은색 계열로 숫자를 색칠해줘

포인트 부분 숫자는 즉각적으로 '포인트' 변수에 그 수치를 더해줘, 선택을 취소하면 그 수치를 빼고

D1

[말랑 푹신 도서관]

-이미지:D1-

[포인트: -7]

[절대로 손가락 다칠 일 없는 말랑 푹신 포근한 책으로 가득한 도서관이다. 많은 차원의 책이 모여든다.]

D2

[보들 보들 컴퓨터]

-이미지:D2-

[포인트: -10]

[껴안고 싶을 정도로 부드러운 컴퓨터다 화면이 부드러운데 이상하게 해상도가 좋다. 온 차원의 인터넷에 접속 할 수 있다.]

D3

[문]

-이미지:D3-

[포인트:-10]

[사라졌던 문이 저 멀리 생겨있다. 언제든 들어올 수 있을 것 같다. 밖의 시간은 멈춘 것 같다.]

D4

[푹신 푹신 마천루]

-이미지:D4-

[포인트: -6]

[푹신한 배게로 만들어진 고층 베개집이 모여있다. 푸호이들이 살 수 있어 보인다.]

D5

[뿅뿅 헬스장]

-이미지:D5-

[포인트: -3]

[누르면 뿅 소리가 나는 토끼 인형이 덤벨인 헬스장이다. 근육이 쉽게 빵빵해진다.]

D6

[디따 큰 침대]

-이미지:D6-

[포인트: -5]

[여기서는 목욕탕 역할 인 것 같다. 병이 낫고 건강해진다.]

=

[뭔가 바뀌었을까요?]

지금부터 해당 선택지 섹션은 앞에 'E'를 붙여 구분할 거야 해당 E 섹션은 선택지를 모두 고를 수 있어

이미 고른 선택지를 다시 고를경우 고른걸 취소하고 다시 고를 수 있어

포인트 부분 숫자는 변수에 양수를 추가하면 연두색 계열 음수를 추가하면 붉은색 계열로 숫자를 색칠해줘

포인트 부분 숫자는 즉각적으로 '포인트' 변수에 그 수치를 더해줘, 선택을 취소하면 그 수치를 빼고

E1

[푹신해지기]

-이미지:E1-

[포인트:+10]

[나도 말랑푹신보들해질 수 있다. 더이상 생명체에 구속되지 않아도 된다.]

E2

[말랑해지기]

-이미지:E2-

[포인트: -10]

[말랑한거가 될 수 있다.]

E3

[부드러워지기]

-이미지:E3-

[포인트: -10]

[부드러운거가 될 수 있다.]

=

[다 고르셨나요?]

[예]버튼이 아래 존재 버튼 누를시 다음 글자 등장.

{

[당신이 고른 것들은 이 것들이에요]

그 이후 골랐던 선택지들의 표기된 제목이 각 섹션 구분에 따라 구분되어 아래 나열된다.

A 섹션은 [세계] B섹션은 [움직이는 것] C섹션은 [풍경] D 섹션은 [특이한 거] E 섹션은 [변화]로 표기되며 각 섹션의 종속된 선택지들로 구분되어 선택한 것들의 제목이 표기된다.

}