FailLoop/upload.html at main · jiyeonparkk/FailLoop · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>데이터 입력 - FailLoop</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="upload.css">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">FailLoop</div>
            <div class="nav-links">
                <a href="index.html">홈</a>
                <a href="upload.html" class="active">업로드</a>
                <a href="community.html">커뮤니티</a>
                <a href="mypage.html">마이페이지</a>
            </div>
        </div>
    </nav>

    <!-- Main Upload Section -->
    <section class="upload-section">
        <div class="container">
            <div class="upload-title-section fade-in">
                <h1 class="page-title">내 데이터 입력하기</h1>
                <p class="page-subtitle">실패 데이터를 업로드하고 AI의 인사이트를 받아보세요</p>
            </div>

            <form class="upload-form" id="uploadForm">
                <!-- File Upload Section -->
                <div class="form-section fade-in">
                    <h2 class="section-heading">
                        <span class="heading-icon">📁</span>
                        파일 업로드
                    </h2>
                    <div class="upload-area" id="uploadArea">
                        <input type="file" id="fileInput" multiple accept=".pdf,.doc,.docx,.txt,.csv,.json,.xlsx" hidden>
                        <div class="upload-content">
                            <div class="upload-icon">☁️</div>
                            <p class="upload-text">파일을 드래그하거나 클릭하여 업로드</p>
                            <p class="upload-subtext">PDF, DOC, TXT, CSV, JSON, XLSX 파일 지원</p>
                        </div>
                    </div>
                    <div class="file-list" id="fileList"></div>
                </div>

                <!-- Failure Type Selection (Required) -->
                <div class="form-section fade-in">
                    <h2 class="section-heading">
                        <span class="heading-icon">⚠️</span>
                        실패 유형 선택
                        <span class="required-badge">필수</span>
                    </h2>
                    <div class="failure-types">
                        <div class="type-card" data-type="기능 오류">
                            <div class="type-icon">🔧</div>
                            <h3>기능 오류</h3>
                            <p>제품 기능의 버그나 오작동</p>
                        </div>
                        <div class="type-card" data-type="사용자 이탈">
                            <div class="type-icon">👥</div>
                            <h3>사용자 이탈</h3>
                            <p>사용자 이탈률 증가</p>
                        </div>
                        <div class="type-card" data-type="매출 감소">
                            <div class="type-icon">📉</div>
                            <h3>매출 감소</h3>
                            <p>수익 하락 및 매출 감소</p>
                        </div>
                        <div class="type-card" data-type="시스템 장애">
                            <div class="type-icon">⚡</div>
                            <h3>시스템 장애</h3>
                            <p>서버 다운 또는 인프라 문제</p>
                        </div>
                    </div>

                    <!-- Custom Type Input -->
                    <div class="custom-type-section">
                        <button type="button" class="add-custom-btn" id="addCustomBtn">
                            <span>+</span> 직접 추가
                        </button>
                        <div class="custom-type-input" id="customTypeInput" style="display: none;">
                            <input type="text" id="customTypeText" placeholder="실패 유형을 입력하세요" maxlength="50">
                            <button type="button" class="confirm-custom-btn" id="confirmCustomBtn">추가</button>
                        </div>
                    </div>

                    <div class="selected-types" id="selectedTypes"></div>
                    <p class="error-message" id="typeError" style="display: none;">실패 유형을 최소 1개 이상 선택해주세요.</p>
                </div>

                <!-- Metadata Section (Optional) -->
                <div class="form-section fade-in">
                    <h2 class="section-heading">
                        <span class="heading-icon">📝</span>
                        메타데이터 추가
                        <span class="optional-badge">선택</span>
                    </h2>
                    <button type="button" class="add-metadata-btn" id="addMetadataBtn">
                        <span>+</span> 메타데이터 추가
                    </button>

                    <div class="metadata-container" id="metadataContainer"></div>
                </div>

                <!-- Description Section -->
                <div class="form-section fade-in">
                    <h2 class="section-heading">
                        <span class="heading-icon">💬</span>
                        상세 설명
                        <span class="optional-badge">선택</span>
                    </h2>
                    <textarea
                        id="description"
                        class="description-textarea"
                        placeholder="실패에 대한 상세한 설명을 입력해주세요..."
                        rows="6"
                    ></textarea>
                </div>

                <!-- Submit Button -->
                <div class="submit-section fade-in">
                    <button type="submit" class="submit-btn">
                        <span class="button-text">AI 분석 시작하기</span>
                        <span class="button-icon">→</span>
                    </button>
                </div>
            </form>
        </div>
    </section>

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