@tbdtbdp0 님
*[OOC: 잠깐 롤플레잉을 중단. 새로운 에피소드를 시작한다. NPC의 휴대폰의 알림창을 html을 활용해 출력한다. html을 활용할 때는 배경색과 글자색의 명도가 대비되게끔 색을 지정해 가독성을 높이고, css 클래스를 적극 활용한다. 이미지 링크를 사용 금지, 대신에 실제 NPC가 사용할 법한 알림창처럼 다양한 요소(이모티콘, 특수 문자, 유니코드 등)을 활용할 수 있음. 아이폰, 갤럭시 폰의 실제 휴대폰 배경화면 인터페이스처럼 사실적으로 휴대폰 비율로 출력할 것. 아이폰, 갤럭시 폰의 실제 휴대폰 배경화면 인터페이스처럼 사실적으로 출력(배터리 잔량, 전파 상태 등 상단 바 포함), 휴대폰 테두리와 전면부 펀치홀 부분을 포함해 출력. 단, 세계관 정보, PC와 NPC의 캐릭터 정보, 로어북, 두 사람의 관계성 등을 참고하라.]*
#윤규상
html 정리
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>윤규상 휴대폰 화면</title>
<style>
body {
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.phone-frame {
width: 390px;
height: 844px;
background-color: #1c1c1e;
border-radius: 50px;
padding: 15px;
box-shadow: 0 0 20px rgba(0,0,0,0.7);
position: relative;
overflow: hidden;
}
.screen {
width: 100%;
height: 100%;
background: url('https://i.pinimg.com/564x/2b/86/e1/2b86e1074a3f37b12d354a8497330541.jpg') no-repeat center center;
background-size: cover;
border-radius: 35px;
position: relative;
display: flex;
flex-direction: column;
}
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 25px 5px;
color: white;
font-size: 15px;
font-weight: 600;
}
.time {
font-weight: bold;
letter-spacing: 0.5px;
}
.status-icons {
display: flex;
align-items: center;
gap: 8px;
}
.notch {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 35px;
background-color: #1c1c1e;
border-radius: 0 0 20px 20px;
}
.notifications-container {
padding: 20px;
flex-grow: 1;
overflow-y: auto;
scrollbar-width: none; / Firefox /
}
.notifications-container::-webkit-scrollbar {
display: none; / Chrome, Safari, Opera/
}
.notification {
background-color: rgba(50, 50, 50, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 18px;
padding: 12px 16px;
margin-bottom: 12px;
color: white;
}
.app-header {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.app-icon {
font-size: 16px;
margin-right: 8px;
}
.app-name {
font-size: 14px;
font-weight: 600;
color: #a0a0a5;
}
.notification-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 2px;
}
.notification-body {
font-size: 15px;
line-height: 1.3;
}
.notification-time {
font-size: 14px;
color: #a0a0a5;
text-align: right;
margin-top: 4px;
}
.stack-header {
font-size: 18px;
font-weight: 600; color: #e5e5ea; margin-bottom: 8px; }
</style>
</head>
<body>
<div class="phone-frame">
<div class="screen">
<div class="status-bar">
<span class="time">오전 10:13</span>
<div class="status-icons">
<span>📶</span>
<span>LTE</span>
<span>🔋</span>
</div>
</div>
<div class="notch"></div>
<div class="notifications-container">
<div class="stack-header">메시지</div>
<div class="notification">
<div class="app-header">
<span class="app-icon">💬</span>
<span class="app-name">김 실장</span>
</div>
<div class="notification-title">형님, 박 사장 건 말입니다.</div>
<div class="notification-body">약속 어음 만기 오늘까지인데 연락 두절입니다. 저녁에 한번 찾아뵙는 게 좋을 것 같습니다.</div>
<div class="notification-time">방금</div>
</div>
<div class="notification">
<div class="app-header">
<span class="app-icon">💬</span>
<span class="app-name">김 실장</span>
</div>
<div class="notification-title">새로운 메시지 2개</div>
<div class="notification-body">그리고 아까 말씀하신 바다 쪽 펜션, 제일 좋은 곳으로 예약 잡아놨습니다. 필요하시면 바로…</div>
<div class="notification-time">5분 전</div>
</div>
<div class="stack-header" style="margin-top: 20px;">부재중 전화</div>
<div class="notification">
<div class="app-header">
<span class="app-icon">📞</span>
<span class="app-name">발신번호 표시제한</span>
</div>
<div class="notification-title">부재중 전화 (3)</div>
<div class="notification-body">오전 9:48</div>
<div class="notification-time">25분 전</div>
</div>
<div class="notification">
<div class="app-header">
<span class="app-icon">📞</span>
<span class="app-name">아빠</span>
</div>
<div class="notification-title">부재중 전화</div>
<div class="notification-body">어제</div>
<div class="notification-time">오후 8:15</div>
</div>
</div>
</div>
</div>
</body>
</html>
#류연
html 정리
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>윤규상 휴대폰 화면</title>
<style>
body {
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.phone-frame {
width: 390px;
height: 844px;
background-color: #1c1c1e;
border-radius: 50px;
padding: 15px;
box-shadow: 0 0 20px rgba(0,0,0,0.7);
position: relative;
overflow: hidden;
}
.screen {
width: 100%;
height: 100%;
background: url('https://i.pinimg.com/564x/2b/86/e1/2b86e1074a3f37b12d354a8497330541.jpg') no-repeat center center;
background-size: cover;
border-radius: 35px;
position: relative;
display: flex;
flex-direction: column;
}
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 25px 5px;
color: white;
font-size: 15px;
font-weight: 600;
}
.time {
font-weight: bold;
letter-spacing: 0.5px;
}
.status-icons {
display: flex;
align-items: center;
gap: 8px;
}
.notch {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 35px;
background-color: #1c1c1e;
border-radius: 0 0 20px 20px;
}
.notifications-container {
padding: 20px;
flex-grow: 1;
overflow-y: auto;
scrollbar-width: none; / Firefox /
}
.notifications-container::-webkit-scrollbar {
display: none; / Chrome, Safari, Opera/
}
.notification {
background-color: rgba(50, 50, 50, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 18px;
padding: 12px 16px;
margin-bottom: 12px;
color: white;
}
.app-header {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.app-icon {
font-size: 16px;
margin-right: 8px;
}
.app-name {
font-size: 14px;
font-weight: 600;
color: #a0a0a5;
}
.notification-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 2px;
}
.notification-body {
font-size: 15px;
line-height: 1.3;
}
.notification-time {
font-size: 14px;
color: #a0a0a5;
text-align: right;
margin-top: 4px;
}
.stack-header {
font-size: 18px;
font-weight: 600; color: #e5e5ea; margin-bottom: 8px; }
</style>
</head>
<body>
<div class="phone-frame">
<div class="screen">
<div class="status-bar">
<span class="time">오전 11:07</span>
<div class="status-icons">
<span>📶</span>
<span>LTE</span>
<span>🔋</span>
</div>
</div>
<div class="notch"></div>
<div class="notifications-container">
<div class="stack-header">알림 센터</div>
<div class="notification">
<div class="app-header">
<span class="app-icon">📷</span>
<span class="app-name">Instagram</span>
</div>
<div class="notification-title">새로운 팔로워가 생겼습니다</div>
<div class="notification-body">'sea_and_sky' 님이 회원님을 팔로우하기 시작했습니다..</div>
<div class="notification-time">방금</div>
</div>
<div class="notification">
<div class="app-header">
<span class="app-icon">💬</span>
<span class="app-name">알 수 없는 번호</span>
</div>
<div class="notification-title">새로운 메시지 4개</div>
<div class="notification-body">[Web발신]
[XX캐피탈] 고객님만을 위한 특별 한도! 지금 바로 확인하세요! ▶hxxp://http://m.xxcp.co.kr</div>
<div class="notification-time">5분 전</div>
</div>
<div class="stack-header" style="margin-top: 20px;">부재중 전화</div>
<div class="notification">
<div class="app-header">
<span class="app-icon">📞</span>
<span class="app-name">변태 오빠💖</span>
</div>
<div class="notification-title">부재중 전화 (4)</div>
<div class="notification-body">오전 11:05</div>
<div class="notification-time">2분 전</div>
</div>
</body>
</html>
🐺🐰
🩸🗡️