VPR/profile.html at main · windows10101713/VPR · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VPR | Profile</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body data-page="profile">
    <div class="app-shell">
      <aside class="sidebar">
        <div>
          <a class="brand brand-link" href="index.html">
            <div class="brand-mark">V</div>
            <div>
              <p class="eyebrow">Virtual Program Runner</p>
              <h1>VPR</h1>
            </div>
          </a>
          <nav class="menu">
            <a class="menu-item" href="index.html"><span>홈</span><small>Home</small></a>
            <a class="menu-item" href="editor.html"><span>에디터</span><small>Editor</small></a>
            <a class="menu-item" href="examples.html"><span>예제</span><small>Examples</small></a>
            <a class="menu-item" href="assistant.html"><span>AI 도우미</span><small>Assistant</small></a>
            <a class="menu-item" href="errors.html"><span>에러 해결</span><small>Error Fix</small></a>
            <a class="menu-item" href="community.html"><span>공유</span><small>Community</small></a>
          </nav>
        </div>
        <div class="sidebar-card">
          <p class="eyebrow">프로필</p>
          <h2>내 계정 관리</h2>
          <p>소개, 선호 언어, 공개 코드 목록을 관리합니다.</p>
        </div>
      </aside>

      <main class="main-content page-stack">
        <header class="topbar">
          <div>
            <p class="eyebrow">User Profile</p>
            <h2>내 프로필 관리</h2>
          </div>
          <div class="topbar-actions">
            <label class="language-switch" for="localeSelect">
              <span>언어</span>
              <select id="localeSelect">
                <option value="ko">한국어</option>
                <option value="en">English</option>
              </select>
            </label>
            <label class="language-switch" for="themeSelect">
              <span>테마</span>
              <select id="themeSelect">
                <option value="light">Light</option>
                <option value="dark">Dark</option>
              </select>
            </label>
          </div>
        </header>

        <section class="feature-grid">
          <article class="feature-card">
            <p class="eyebrow">내 정보</p>
            <h3>프로필 수정</h3>
            <img id="profileImagePreview" class="profile-avatar" src="https://placehold.co/120x120?text=VPR" alt="profile" />
            <label>프로필 이미지 업로드<input id="profileImageFile" type="file" accept="image/*" /></label>
            <label>프로필 이미지 URL/Data<input id="profileImageUrl" type="text" /></label>
            <label>표시 이름<input id="profileDisplayName" type="text" /></label>
            <label>소개<textarea id="profileBio"></textarea></label>
            <label>선호 언어<input id="profileFavoriteLang" type="text" /></label>
            <button class="primary-button small" id="saveProfileButton" type="button">프로필 저장</button>
          </article>

          <article class="feature-card">
            <p class="eyebrow">계정 상태</p>
            <h3>로그인 정보</h3>
            <div class="response-box" id="profileStatusBox"></div>
            <button class="ghost-button small" id="logoutButton" type="button">로그아웃</button>
            <label>계정 삭제 확인용 1차 비밀번호<input id="deletePassword" type="password" /></label>
            <label>계정 삭제 확인용 2차 비밀번호<input id="deleteSecondPassword" type="password" /></label>
            <button class="secondary-button small danger" id="deleteAccountButton" type="button">계정 삭제</button>
          </article>
        </section>

        <section class="feature-grid single-column-grid">
          <article class="feature-card wide">
            <p class="eyebrow">공개 코드</p>
            <h3>내가 공개한 코드</h3>
            <ul class="snippet-list" id="myPublicSnippetList"></ul>
          </article>
        </section>
      </main>
    </div>

    <script src="app.js"></script>
  </body>
</html>