Hugging Face's logo

Spaces:
Johnny0619
/
OU
Sleeping

App Files Community
Johnny0619 commited on
Commit
8fc1930
·
verified ·
1 Parent(s): 8ab5e32

Create entry_info.html

Browse files
Files changed (1) hide show
  1. entry_info.html +398 -0
entry_info.html ADDED
@@ -0,0 +1,398 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LEOC 業務ポータルサイト | 社内各種登録・福利厚生ガイド</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+
9
+ <style>
10
+ /* --- ベーススタイル --- */
11
+ :root {
12
+ --theme-green: #29a745;
13
+ --theme-green-light: #f0f9f2;
14
+ --footer-bg: #305590;
15
+ --text-primary: #333333;
16
+ --bg-color: #ffffff;
17
+ --header-height: 80px;
18
+ --nav-height: 50px;
19
+ }
20
+
21
+ html { scroll-behavior: smooth; }
22
+
23
+ body {
24
+ margin: 0; padding: 0;
25
+ background-color: var(--bg-color);
26
+ font-family: "Helvetica Neue", "Arial", sans-serif;
27
+ color: var(--text-primary);
28
+ line-height: 1.6;
29
+ }
30
+
31
+ /* --- ヘッダー --- */
32
+ header {
33
+ background: #ffffff;
34
+ border-bottom: 4px solid var(--theme-green);
35
+ padding: 10px 0;
36
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
37
+ position: sticky; top: 0; z-index: 1000;
38
+ height: var(--header-height); box-sizing: border-box;
39
+ }
40
+ .header-inner {
41
+ max-width: 1200px; margin: 0 auto; padding: 0 20px;
42
+ display: flex; justify-content: space-between; align-items: center; height: 100%;
43
+ }
44
+ .logo-area { display: flex; flex-direction: column; line-height: 1; }
45
+ .logo-main { font-size: 24px; font-weight: 900; color: #222; }
46
+ .logo-sub { font-size: 10px; color: #777; letter-spacing: 0.15em; }
47
+ .header-right { display: flex; align-items: center; gap: 10px; }
48
+ .btn-portal { font-size: 11px; padding: 4px 8px; border: 1px solid #333; color: #333; text-decoration: none; }
49
+
50
+ /* --- 追従型インデックスナビゲーション --- */
51
+ .sticky-nav {
52
+ position: sticky; top: var(--header-height); z-index: 999;
53
+ background: rgba(255, 255, 255, 0.95);
54
+ border-bottom: 1px solid #ddd;
55
+ overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
56
+ box-shadow: 0 4px 6px -4px rgba(0,0,0,0.1);
57
+ }
58
+ .sticky-nav::-webkit-scrollbar { display: none; }
59
+
60
+ .nav-list {
61
+ display: flex; margin: 0; padding: 0; list-style: none; max-width: 860px; margin: 0 auto;
62
+ }
63
+ .nav-link {
64
+ display: block; padding: 0 15px; line-height: var(--nav-height);
65
+ font-size: 13px; font-weight: bold; color: #555; text-decoration: none;
66
+ border-bottom: 3px solid transparent; transition: all 0.3s;
67
+ }
68
+ /* アクティブ時のスタイル */
69
+ .nav-link:hover, .nav-link.active {
70
+ color: var(--theme-green); border-bottom-color: var(--theme-green); background-color: var(--theme-green-light);
71
+ }
72
+ .nav-icon { margin-right: 5px; }
73
+
74
+ /* --- メインコンテンツ --- */
75
+ .container { max-width: 860px; margin: 0 auto; padding: 20px 15px 80px; }
76
+
77
+ .page-intro {
78
+ text-align: center; margin-bottom: 30px; padding: 20px;
79
+ background-color: #f9f9f9; border-radius: 8px;
80
+ }
81
+ .page-title { font-size: 24px; margin: 0 0 10px; color: #222; }
82
+ .page-desc { font-size: 13px; color: #666; }
83
+
84
+ /* --- セクションスタイル --- */
85
+ .content-section {
86
+ margin-bottom: 60px; padding-top: 20px; border-top: 1px dashed #ddd;
87
+ scroll-margin-top: calc(var(--header-height) + var(--nav-height) + 10px);
88
+ }
89
+ .section-header {
90
+ display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
91
+ padding-left: 10px; border-left: 5px solid var(--theme-green);
92
+ }
93
+ .section-title { font-size: 20px; margin: 0; font-weight: bold; color: #333; }
94
+ .section-subtitle { font-size: 12px; color: #666; margin-left: auto; }
95
+
96
+ /* 画像・カードスタイル */
97
+ .image-container {
98
+ width: 100%; margin-bottom: 20px;
99
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; background: #fff;
100
+ }
101
+ .guide-image { width: 100%; height: auto; display: block; }
102
+ .image-caption {
103
+ padding: 8px 12px; background: #f0f0f0; font-size: 12px; font-weight: bold; color: #555;
104
+ border-bottom: 1px solid #ddd;
105
+ }
106
+
107
+ /* テキスト情報ブロック */
108
+ .info-block {
109
+ background-color: #f8fcf9; border: 1px solid #c3e6cb; border-radius: 6px;
110
+ padding: 15px; margin-bottom: 20px;
111
+ }
112
+ .info-title { font-weight: bold; font-size: 14px; margin-bottom: 8px; color: #155724; display: flex; align-items: center; gap: 6px; }
113
+ .info-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 5px; font-size: 13px; }
114
+ .info-label { font-weight: bold; color: #555; min-width: 60px; }
115
+ .info-value { font-family: monospace; background: #fff; padding: 2px 6px; border: 1px solid #ddd; border-radius: 3px; select-all: auto; }
116
+ .info-note { font-size: 11px; color: #666; margin-top: 5px; }
117
+
118
+ /* 動画エリア */
119
+ .video-wrapper {
120
+ position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden;
121
+ background: #000; border-radius: 8px; margin-bottom: 20px;
122
+ }
123
+ .video-wrapper video, .video-wrapper iframe {
124
+ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
125
+ }
126
+
127
+ /* --- フッタ�� --- */
128
+ footer { background-color: var(--footer-bg); color: #fff; padding: 40px 0; font-size: 12px; }
129
+ .footer-inner { max-width: 1000px; margin: 0 auto; padding: 0 25px; text-align: center; }
130
+ .copyright { margin-top: 10px; opacity: 0.8; }
131
+
132
+ @media (max-width: 768px) {
133
+ .header-inner { padding: 0 15px; }
134
+ .logo-main { font-size: 20px; }
135
+ .info-row { flex-direction: column; gap: 2px; }
136
+ }
137
+ </style>
138
+ </head>
139
+ <body>
140
+
141
+ <header>
142
+ <div class="header-inner">
143
+ <div class="logo-area">
144
+ <div class="logo-main">オノパー</div>
145
+ <div class="logo-sub">ONODERA PARK</div>
146
+ </div>
147
+ <div class="header-right">
148
+ <a href="#" class="btn-portal">ポータルTOPへ</a>
149
+ </div>
150
+ </div>
151
+ </header>
152
+
153
+ <nav class="sticky-nav">
154
+ <ul class="nav-list">
155
+ <li class="nav-item">
156
+ <a href="#sec-health" class="nav-link"><i class="fa-solid fa-user-nurse nav-icon"></i>体調・緊急</a>
157
+ </li>
158
+ <li class="nav-item">
159
+ <a href="#sec-training" class="nav-link"><i class="fa-solid fa-graduation-cap nav-icon"></i>研修・動画</a>
160
+ </li>
161
+ <li class="nav-item">
162
+ <a href="#sec-welfare" class="nav-link"><i class="fa-solid fa-gift nav-icon"></i>福利厚生</a>
163
+ </li>
164
+ <li class="nav-item">
165
+ <a href="#sec-info" class="nav-link"><i class="fa-solid fa-circle-info nav-icon"></i>社内情報</a>
166
+ </li>
167
+ <li class="nav-item">
168
+ <a href="#sec-anpi" class="nav-link"><i class="fa-solid fa-mobile-screen nav-icon"></i>安否確認</a>
169
+ </li>
170
+ <li class="nav-item">
171
+ <a href="#sec-pweb" class="nav-link"><i class="fa-solid fa-file-invoice-dollar nav-icon"></i>給与・MN</a>
172
+ </li>
173
+ <li class="nav-item">
174
+ <a href="#sec-compliance" class="nav-link"><i class="fa-solid fa-comments nav-icon"></i>相談窓口</a>
175
+ </li>
176
+ </ul>
177
+ </nav>
178
+
179
+ <main class="container">
180
+
181
+ <div class="page-intro">
182
+ <h1 class="page-title">各種登録・福利厚生ガイド</h1>
183
+ <p class="page-desc">
184
+ 入社時に必要な動画視聴、各種登録手続き、福利厚生の利用方法をまとめています。<br>
185
+ ※画像内のID/パスワードはコピーしてご利用ください。
186
+ </p>
187
+ </div>
188
+
189
+ <section id="sec-health" class="content-section">
190
+ <div class="section-header">
191
+ <h2 class="section-title">体調不良時・緊急連絡先</h2>
192
+ <span class="section-subtitle" style="color:#e74c3c;">最優先</span>
193
+ </div>
194
+ <div class="image-container">
195
+ <div class="image-caption">▼ 嘔吐・下痢・腹痛時の対応ルール</div>
196
+ <a href="https://lh3.googleusercontent.com/d/1XlMVeBv-kHYBgPo_1ufrbLXDeBAV0dGQ" target="_blank">
197
+ <img src="https://lh3.googleusercontent.com/d/1XlMVeBv-kHYBgPo_1ufrbLXDeBAV0dGQ" alt="体調不良に関するお願い" class="guide-image">
198
+ </a>
199
+ </div>
200
+ <div class="image-container">
201
+ <div class="image-caption">▼ 緊急連絡先カード</div>
202
+ <img src="https://lh3.googleusercontent.com/d/189ei6TnFnGyWKG88YpVK5veckMHV9b1V" alt="緊急連絡先カード" class="guide-image">
203
+ </div>
204
+ </section>
205
+
206
+ <section id="sec-training" class="content-section">
207
+ <div class="section-header">
208
+ <h2 class="section-title">入社時動画の視聴</h2>
209
+ <span class="section-subtitle">必須研修</span>
210
+ </div>
211
+
212
+ <div class="video-wrapper">
213
+ <iframe
214
+ src="https://www.youtube.com/embed/M5DebUhDCVc?si=OONODERA_GROUP"
215
+ title="YouTube video player"
216
+ frameborder="0"
217
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
218
+ referrerpolicy="strict-origin-when-cross-origin"
219
+ allowfullscreen>
220
+ </iframe>
221
+ </div>
222
+
223
+ <div class="info-block">
224
+ <div class="info-title"><i class="fa-solid fa-film"></i> 会社概要・研修動画</div>
225
+ <p style="font-size:13px; margin-bottom:10px;">LEOCに入社される全ての方が対象です。会社や業務を知って頂く事を目的としています。</p>
226
+ <div class="info-row">
227
+ <span class="info-label">視聴方法</span>
228
+ <span class="info-value">事業所PCにて視聴可能</span>
229
+ </div>
230
+ <div class="info-note">※詳細は下記画像の「入社時動画のご案内」をご確認ください。</div>
231
+ </div>
232
+ </section>
233
+
234
+ <section id="sec-welfare" class="content-section">
235
+ <div class="section-header">
236
+ <h2 class="section-title">福利厚生・手当制度</h2>
237
+ <span class="section-subtitle">従業員限定</span>
238
+ </div>
239
+
240
+ <div class="info-block">
241
+ <div class="info-title"><i class="fa-solid fa-ticket"></i> ベネフィット・ステーション</div>
242
+ <p style="font-size:13px; margin-bottom:10px;">レジャー、グルメ、映画、宿泊などが割引価格で利用できます。（入社2ヶ月以上対象）</p>
243
+ <div class="info-row">
244
+ <span class="info-label">URL</span>
245
+ <span class="info-value"><a href="http://bs.benefit-one.inc" target="_blank">http://bs.benefit-one.inc</a></span>
246
+ </div>
247
+ <div class="info-row">
248
+ <span class="info-label">団体ID</span>
249
+ <span class="info-value">C100130AV</span>
250
+ </div>
251
+ <div class="info-row">
252
+ <span class="info-label">認証キー1</span>
253
+ <span class="info-value">社員番号（6桁）</span>
254
+ </div>
255
+ <div class="info-row">
256
+ <span class="info-label">認証キー2</span>
257
+ <span class="info-value">生年月日（8桁）</span>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="info-block">
262
+ <div class="info-title"><i class="fa-solid fa-briefcase"></i> Biz Person's (三菱UFJ)</div>
263
+ <p style="font-size:13px; margin-bottom:10px;">ライフ・キャリアイベントに関わるお金の基礎知識やローン等の相談。</p>
264
+ <div class="info-row">
265
+ <span class="info-label">URL</span>
266
+ <span class="info-value"><a href="https://biz-persons.mufg.jp/userlogin" target="_blank">https://biz-persons.mufg.jp/userlogin</a></span>
267
+ </div>
268
+ <div class="info-row">
269
+ <span class="info-label">ID</span>
270
+ <span class="info-value">og</span>
271
+ <span class="info-label" style="margin-left:10px;">PW</span>
272
+ <span class="info-value">19834</span>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="info-block" style="border-color:#f39c12; background:#fffcf5;">
277
+ <div class="info-title" style="color:#d35400;"><i class="fa-solid fa-yen-sign"></i> 各種手当制度</div>
278
+ <ul style="font-size:13px; padding-left:20px; margin:0;">
279
+ <li style="margin-bottom:5px;"><strong>母子父子手当</strong>：18歳未満の子の保護者である従業員に対し月額5,000円支給（要申請）。<br>問合せ：給与計算部 03-5220-8506</li>
280
+ <li><strong>紹介手当</strong>：友人・家族を紹介できる制度（要申請）。事業所責任者まで。</li>
281
+ </ul>
282
+ </div>
283
+
284
+ <div class="image-container">
285
+ <div class="image-caption">▼ 福利厚生サービス・ログイン情報詳細</div>
286
+ <img src="https://lh3.googleusercontent.com/d/1r1lauavxtwC3Ya1L8UGr2GcJ2jhjwU36" alt="福利厚生のご案内" class="guide-image">
287
+ </div>
288
+ </section>
289
+
290
+ <section id="sec-info" class="content-section">
291
+ <div class="section-header">
292
+ <h2 class="section-title">社内報・メルマガ</h2>
293
+ <span class="section-subtitle">情報共有</span>
294
+ </div>
295
+
296
+ <div class="info-block">
297
+ <div class="info-title"><i class="fa-solid fa-globe"></i> Web社内報「オノパー」</div>
298
+ <p style="font-size:13px; margin-bottom:10px;">グループ会社の活動内容や取り組みを随時更新中。</p>
299
+ <div class="info-row">
300
+ <span class="info-label">URL</span>
301
+ <span class="info-value"><a href="https://park.onodera-group.com/" target="_blank">https://park.onodera-group.com/</a></span>
302
+ </div>
303
+ <div class="info-row">
304
+ <span class="info-label">ユーザー名</span>
305
+ <span class="info-value">op</span>
306
+ <span class="info-label" style="margin-left:10px;">PW</span>
307
+ <span class="info-value">2</span>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="image-container">
312
+ <div class="image-caption">▼ メルマガ登録方法・オノパーQRコード</div>
313
+ <img src="https://lh3.googleusercontent.com/d/1yTjJFqUfCGMoUE1wrolzfHlu4ZNSc5jk" alt="社内メルマガ登録・社内報" class="guide-image">
314
+ </div>
315
+ </section>
316
+
317
+ <section id="sec-anpi" class="content-section">
318
+ <div class="section-header">
319
+ <h2 class="section-title">安否確認サービス</h2>
320
+ </div>
321
+ <div class="image-container">
322
+ <div class="image-caption">▼ サービスの概要と登録のお願い</div>
323
+ <img src="https://lh3.googleusercontent.com/d/1aqSJpVH1aB-owwpB5siyvm5JQvuwUrEA" alt="安否確認登録のご案内" class="guide-image">
324
+ </div>
325
+ <div class="image-container">
326
+ <div class="image-caption">▼ アプリ・メールアドレスの登録手順</div>
327
+ <img src="https://lh3.googleusercontent.com/d/11od2GZX7U7zOP2J846dDADIfMFLsyxB_" alt="安否確認サービスの登録方法" class="guide-image">
328
+ </div>
329
+ </section>
330
+
331
+ <section id="sec-pweb" class="content-section">
332
+ <div class="section-header">
333
+ <h2 class="section-title">給与明細・マイナンバー</h2>
334
+ </div>
335
+ <div class="image-container">
336
+ <div class="image-caption">▼ 給与明細(P-web) 利用登録</div>
337
+ <img src="https://lh3.googleusercontent.com/d/1cZe_6MUEjJO5Edm6mywO94DH7V4vd8nH" alt="P-web利用案内" class="guide-image">
338
+ </div>
339
+ <div class="image-container">
340
+ <div class="image-caption">▼ マイナンバー提供・登録手順</div>
341
+ <img src="https://lh3.googleusercontent.com/d/1HaAQibjYgB2Lwd3k1Pj74rkJn-dNVcKK" alt="マイナンバー提供のお願い" class="guide-image">
342
+ </div>
343
+ <div class="image-container">
344
+ <img src="https://lh3.googleusercontent.com/d/1UVRXjNafHk8xUIzoR9x1HOtnKXZZcjWY" alt="マイナンバー登録方法" class="guide-image">
345
+ </div>
346
+ </section>
347
+
348
+ <section id="sec-compliance" class="content-section">
349
+ <div class="section-header">
350
+ <h2 class="section-title">コンプライアンス相談窓口</h2>
351
+ </div>
352
+ <div class="image-container">
353
+ <div class="image-caption">▼ 相談窓口「そうだ、そうだんだ。」</div>
354
+ <img src="https://lh3.googleusercontent.com/d/1D10GDFZpNyla9UctZ1O2ITzB4UCv5Acp" alt="そうだそうだんだカード" class="guide-image">
355
+ </div>
356
+ </section>
357
+
358
+ </main>
359
+
360
+ <footer>
361
+ <div class="footer-inner">
362
+ <h2>オノパー</h2>
363
+ <p>ONODERA PARK</p>
364
+ <div class="copyright">
365
+ Copyright© ONODERA GROUP Corporate Communications Division All Rights Reserved.
366
+ </div>
367
+ </div>
368
+ </footer>
369
+
370
+ <script>
371
+ document.addEventListener('DOMContentLoaded', () => {
372
+ const sections = document.querySelectorAll('.content-section');
373
+ const navLinks = document.querySelectorAll('.nav-link');
374
+
375
+ window.addEventListener('scroll', () => {
376
+ let current = '';
377
+ sections.forEach(section => {
378
+ // ヘッダー+ナビの高さ分オフセットして判定
379
+ const sectionTop = section.offsetTop - 150;
380
+ if (pageYOffset >= sectionTop) {
381
+ current = section.getAttribute('id');
382
+ }
383
+ });
384
+
385
+ navLinks.forEach(link => {
386
+ link.classList.remove('active');
387
+ // currentが空文字でない場合のみ、一致判定を行う
388
+ if (current && link.getAttribute('href').includes(current)) {
389
+ link.classList.add('active');
390
+ link.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
391
+ }
392
+ });
393
+ });
394
+ });
395
+ </script>
396
+
397
+ </body>
398
+ </html>