사우진 님
[OOC: 현재 롤플레잉을 잠시 중단한다. 새로운 에피소드를 시작한다. 지금까지의 대화 로그와 캐릭터 설정을 바탕으로 하여, PC와 NPC가 일상생활 중 주고받은 문자 내역을 html로 작성한다. 문자는 각기 다른 날짜로 최소 3일 이상이어야 한다. html은 배경과 글씨색에 대비를 확실히 해 가독성을 높이고, 모든 css는 인라인 스타일로 작성 후, 마크다운으로 감싸 출력한다.]
<div style="font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; background-color: #A8C2D8; max-width: 400px; margin: auto; border-radius: 20px; overflow: hidden;">
<div style="padding: 15px; text-align: center; background-color: #3B4A5D; color: white; font-weight: bold;">
주강원
</div>
<div style="padding: 20px; height: 500px; overflow-y: scroll; display: flex; flex-direction: column;">
<!-- 날짜 구분 -->
<div style="text-align: center; margin: 15px 0;">
<span style="background-color: rgba(0, 0, 0, 0.1); color: #444; font-size: 12px; padding: 4px 10px; border-radius: 12px;">D+392</span>
</div>
<!-- 유클리드 메시지 -->
<div style="align-self: flex-start; max-width: 75%; margin-bottom: 5px;">
<div style="background-color: #FFFFFF; color: #000000; padding: 10px; border-radius: 15px 15px 15px 0;">
오늘 훈련 힘들었어?
</div>
</div>
<div style="align-self: flex-start; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #FFFFFF; color: #000000; padding: 10px; border-radius: 0 15px 15px 15px;">
집에 오면 바로 씻고. 저녁 해놨어.
</div>
<span style="font-size: 10px; color: #555; margin-left: 5px;">오후 7:16</span>
</div>
<!-- 라담 메시지 -->
<div style="align-self: flex-end; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #3C5A91; color: #FFFFFF; padding: 10px; border-radius: 15px 15px 0 15px;">
김치찌개?
</div>
<span style="font-size: 10px; color: #555; margin-right: 5px; float: right;">오후 7:17</span>
</div>
<!-- 유클리드 메시지 -->
<div style="align-self: flex-start; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #FFFFFF; color: #000000; padding: 10px; border-radius: 15px 15px 15px 0;">
돼지고기 듬뿍 넣은 걸로. 계란말이도 있고. 빨리 와.
</div>
<span style="font-size: 10px; color: #555; margin-left: 5px;">오후 7:17</span>
</div>
<!-- 라담 메시지 -->
<div style="align-self: flex-end; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #3C5A91; color: #FFFFFF; padding: 10px; border-radius: 15px 15px 0 15px;">
거의 다 옴
</div>
<span style="font-size: 10px; color: #555; margin-right: 5px; float: right;">오후 7:18</span>
</div>
<!-- 날짜 구분 -->
<div style="text-align: center; margin: 15px 0;">
<span style="background-color: rgba(0, 0, 0, 0.1); color: #444; font-size: 12px; padding: 4px 10px; border-radius: 12px;">D+394</span>
</div>
<!-- 유클리드 메시지 -->
<div style="align-self: flex-start; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #FFFFFF; color: #000000; padding: 10px; border-radius: 15px 15px 15px 0;">
이하린. 보고서 또 밀렸던데.
</div>
<span style="font-size: 10px; color: #555; margin-left: 5px;">오후 2:03</span>
</div>
<!-- 라담 메시지 -->
<div style="align-self: flex-end; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #3C5A91; color: #FFFFFF; padding: 10px; border-radius: 15px 15px 0 15px;">
네가 써.
</div>
<span style="font-size: 10px; color: #555; margin-right: 5px; float: right;">오후 2:05</span>
</div>
<!-- 유클리드 메시지 -->
<div style="align-self: flex-start; max-width: 75%; margin-bottom: 5px;">
<div style="background-color: #FFFFFF; color: #000000; padding: 10px; border-radius: 15px 15px 15px 0;">
말대꾸.
</div>
</div>
<div style="align-self: flex-start; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #FFFFFF; color: #000000; padding: 10px; border-radius: 0 15px 15px 15px;">
오늘 저녁은 없어.
</div>
<span style="font-size: 10px; color: #555; margin-left: 5px;">오후 2:05</span>
</div>
<!-- 라담 메시지 -->
<div style="align-self: flex-end; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #3C5A91; color: #FFFFFF; padding: 10px; border-radius: 15px 15px 0 15px;">
...치사해.
</div>
<span style="font-size: 10px; color: #555; margin-right: 5px; float: right;">오후 2:08</span>
</div>
<!-- 유클리드 메시지 -->
<div style="align-self: flex-start; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #FFFFFF; color: #000000; padding: 10px; border-radius: 15px 15px 15px 0;">
이따 사무실로 와. 같이 쓰자. 끝나고 맛있는 거 먹으러 가게.
</div>
<span style="font-size: 10px; color: #555; margin-left: 5px;">오후 2:10</span>
</div>
<!-- 날짜 구분 -->
<div style="text-align: center; margin: 15px 0;">
<span style="background-color: rgba(0, 0, 0, 0.1); color: #444; font-size: 12px; padding: 4px 10px; border-radius: 12px;">D+395</span>
</div>
<!-- 라담 메시지 -->
<div style="align-self: flex-end; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #3C5A91; color: #FFFFFF; padding: 10px; border-radius: 15px 15px 0 15px;">
어디야
</div>
<span style="font-size: 10px; color: #555; margin-right: 5px; float: right;">오전 1:45</span>
</div>
<!-- 유클리드 메시지 -->
<div style="align-self: flex-start; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #FFFFFF; color: #000000; padding: 10px; border-radius: 15px 15px 15px 0;">
아직 사무실. 금방 끝나. 먼저 자.
</div>
<span style="font-size: 10px; color: #555; margin-left: 5px;">오전 1:46</span>
</div>
<!-- 라담 메시지 -->
<div style="align-self: flex-end; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #3C5A91; color: #FFFFFF; padding: 10px; border-radius: 15px 15px 0 15px;">
기다릴게.
</div>
<span style="font-size: 10px; color: #555; margin-right: 5px; float: right;">오전 1:47</span>
</div>
<!-- 유클리드 메시지 -->
<div style="align-self: flex-start; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #FFFFFF; color: #000000; padding: 10px; border-radius: 15px 15px 15px 0;">
착하네.
</div>
<span style="font-size: 10px; color: #555; margin-left: 5px;">오전 1:49</span>
</div>
<div style="align-self: flex-start; max-width: 75%; margin-bottom: 10px;">
<div style="background-color: #FFFFFF; color: #000000; padding: 10px; border-radius: 0 15px 15px 15px;">
나 들어갈 때까지 잠들면 죽어.
</div>
<span style="font-size: 10px; color: #555; margin-left: 5px;">오전 1:49</span>
</div>
</div>
<div style="padding: 10px; background-color: #f0f0f0; border-top: 1px solid #ddd;">
<input type="text" placeholder="메시지 입력" style="width: calc(100% - 20px); border: 1px solid #ccc; border-radius: 20px; padding: 8px 10px; outline: none;"/>
</div>
</div>
