Hugging Face's logo

Spaces:
Johnny0619
/
OU
Running

App Files Community
Johnny0619 commited on
Commit
108e712
·
verified ·
1 Parent(s): 2a9e8e0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +15 -42
index.html CHANGED
@@ -5,13 +5,10 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>新研修制度ポータルサイト</title>
7
 
8
- <!-- Tailwind CSS (CDN) -->
9
  <script src="https://cdn.tailwindcss.com"></script>
10
 
11
- <!-- Font Awesome (アイコン用 CDN) -->
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
13
 
14
- <!-- Google Fonts (Inter) -->
15
  <link rel="preconnect" href="https://fonts.googleapis.com">
16
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
@@ -130,20 +127,16 @@
130
  </head>
131
  <body class="bg-gray-50 font-sans antialiased">
132
 
133
- <!-- ===== ヘッダー ===== -->
134
  <header class="bg-white shadow-md sticky top-0 z-50">
135
  <nav class="container mx-auto px-4 sm:px-6 lg:px-8">
136
  <div class="flex justify-between items-center h-16">
137
- <!-- ロゴ -->
138
  <div class="flex-shrink-0 flex items-center">
139
  <span class="text-2xl font-bold text-leoc-green-500">
140
  <i class="fa-solid fa-seedling mr-2"></i>ONODERA UNIVERSITY
141
  </span>
142
- <!-- 通称を追加 -->
143
  <span class="ml-4 text-sm font-semibold text-gray-500 hidden md:block">(新研修制度ポータル)</span>
144
  </div>
145
 
146
- <!-- ナビゲーションメニュー (PC) -->
147
  <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
148
  <a href="#home" class="inline-flex items-center px-1 pt-1 border-b-2 border-leoc-green-500 text-sm font-medium text-gray-900">
149
  ホーム
@@ -159,7 +152,6 @@
159
  </a>
160
  </div>
161
 
162
- <!-- ハンバーガーメニュー (モバイル) -->
163
  <div class="-mr-2 flex items-center sm:hidden">
164
  <button type=button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-leoc-green-500" aria-expanded="false">
165
  <span class="sr-only">メニューを開く</span>
@@ -174,7 +166,6 @@
174
  </div>
175
  </nav>
176
 
177
- <!-- モバイルメニュー (開閉) -->
178
  <div class="sm:hidden hidden" id="mobile-menu">
179
  <div class="pt-2 pb-3 space-y-1">
180
  <a href="#home" class="block pl-3 pr-4 py-2 border-l-4 border-leoc-green-500 bg-leoc-green-50 text-base font-medium text-leoc-green-700">ホーム</a>
@@ -186,9 +177,7 @@
186
  </div>
187
  </header>
188
 
189
- <!-- ===== メインコンテンツ ===== -->
190
  <main>
191
- <!-- ===== ヒーローセクション (Home) ===== -->
192
  <section id="home" class="relative bg-leoc-green-500 text-white overflow-hidden">
193
  <div class="absolute inset-0 opacity-10">
194
  <svg class="absolute bottom-0 left-0" width="400" height="400" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="200" cy="200" r="200" fill="url(#grad1)"/><defs><radialGradient id="grad1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(200 200) rotate(90) scale(200)"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs></svg>
@@ -229,7 +218,6 @@
229
  </div>
230
  </section>
231
 
232
- <!-- ===== 制度について (About) - ★更新セクション ===== -->
233
  <section id="about" class="py-16 sm:py-24 bg-white">
234
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
235
 
@@ -237,7 +225,6 @@
237
  新研修制度 “ONODERA UNIVERSITY” について
238
  </h2>
239
 
240
- <!-- 田中社長メッセージ (テキスト) -->
241
  <div class="max-w-3xl mx-auto text-center mb-16 bg-gray-50 p-8 rounded-lg shadow-inner">
242
  <h3 class="text-2xl font-bold text-leoc-green-700 sm:text-3xl mb-4">
243
  田中社長メッセージ「共に成長するために」
@@ -269,7 +256,6 @@
269
  </div>
270
  </div>
271
 
272
- <!-- 新しい研修制度のポイント (3点) -->
273
  <div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8 text-center mb-24">
274
  <div class="p-6 bg-leoc-green-50 border-t-4 border-leoc-green-500 rounded-lg shadow-lg flex flex-col items-center">
275
  <div class="flex items-center justify-center h-16 w-16 bg-leoc-green-500 text-white rounded-full text-3xl font-bold mb-4">1</div>
@@ -290,7 +276,6 @@
290
  </div>
291
  </div>
292
 
293
- <!-- 1. 職務の定義 -->
294
  <div class="mb-20">
295
  <h2 class="subsection-title" id="point1_shokumu">1. 責任者の職務を定���します</h2>
296
  <blockquote class="content-blockquote">
@@ -306,7 +291,6 @@
306
 
307
  <h4 class="text-xl font-semibold text-gray-900 mt-12 mb-6 text-center">事業所責任者の6つの職務</h4>
308
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
309
- <!-- 職務カード -->
310
  <div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
311
  <h5 class="text-lg font-bold text-leoc-green-600 mb-2">① 業績管理</h5>
312
  <ul class="list-disc list-inside text-gray-700 space-y-1">
@@ -353,7 +337,6 @@
353
  </div>
354
  </div>
355
 
356
- <!-- 2. 研修と資格 -->
357
  <div class="mb-20">
358
  <h2 class="subsection-title" id="point2_kenshu">2. 責任者職務を学ぶ研修と責任者資格制度を始めます</h2>
359
  <blockquote class="content-blockquote">
@@ -379,8 +362,7 @@
379
  </div>
380
 
381
  <div class="flex justify-center my-12">
382
- <!-- ダミー画像を使用 -->
383
- <a href="https://lh3.googleusercontent.com/d/1bXqv3ghmcativ87KJ1uI1L3V76bc0QZ1" target="_blank">
384
  <img src="https://lh3.googleusercontent.com/d/1bXqv3ghmcativ87KJ1uI1L3V76bc0QZ1" alt="ONODERA UNIVERSITY ロゴ" class="h-48 w-auto">
385
  </a>
386
  </div>
@@ -405,11 +387,9 @@
405
  </div>
406
  </div>
407
 
408
- <!-- ★ 修正点 1: テーブルデザイン変更 -->
409
  <h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">研修科目と所要時間</h4>
410
  <div class="overflow-x-auto">
411
- <table class="fashionable-table"> <!-- class変更 -->
412
- <thead>
413
  <tr>
414
  <th>科目</th>
415
  <th>Lv. 1</th>
@@ -421,8 +401,8 @@
421
  <tr>
422
  <td class="highlight-cell">オリエンテーション</td>
423
  <td>3:30</td>
424
- <td>0:20</td>
425
- <td>0:40</td>
426
  </tr>
427
  <tr>
428
  <td class="highlight-cell">業績管理</td>
@@ -466,21 +446,22 @@
466
  <td>4:30</td>
467
  <td>4:30</td>
468
  </tr>
469
- <tr class="highlight-row"> <!-- class変更 -->
470
- <td>合計（時間）</td>
471
  <td>13:40</td>
472
- <td>16:00</td>
473
- <td>26:30</td>
474
  </tr>
475
  </tbody>
476
  </table>
 
 
 
 
477
  </div>
478
 
479
- <!-- ★ 修正点 1: テーブルデザイン変更 -->
480
  <h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">研修対象者（社員のみ）</h4>
481
  <div class="overflow-x-auto">
482
- <table class="fashionable-table"> <!-- class変更 -->
483
- <thead>
484
  <tr>
485
  <th>対象者</th>
486
  <th>開始時期</th>
@@ -532,10 +513,8 @@
532
  <h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">事業所責任者資格を付与します</h4>
533
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
534
  <div class="text-center">
535
- <!-- ダミー画像を使用 -->
536
- <a href="https://lh3.googleusercontent.com/d/1sBNjPOpqY1F_7IpwDnur17CigD2WgUoH" target="_blank">
537
- <img src="https://lh3.googleusercontent.com/d/1sBNjPOpqY1F_7IpwDnur17CigD2WgUoH" alt="事業所責任者資格認定証 サンプル" class="rounded-lg shadow-lg max-w-sm mx-auto border border-[#999999]"> <!-- サイズを調整 -->
538
- </a>
539
  <p class="text-sm text-gray-500 mt-2">※認定証はイメージです</p>
540
  </div>
541
  <blockquote class="content-blockquote text-xl">
@@ -546,7 +525,6 @@
546
  </div>
547
  </div>
548
 
549
- <!-- 3. キャリア -->
550
  <div>
551
  <h2 class="subsection-title" id="point3_career">3. 責任者の経験を今後のキャリアに活きるようにします</h2>
552
  <blockquote class="content-blockquote">
@@ -579,7 +557,6 @@
579
  </div>
580
  </div>
581
 
582
- <!-- ★ 修正点 2: スケジュールをテーブルに変更 -->
583
  <h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">これからのスケジュール</h4>
584
  <div class="overflow-x-auto max-w-4xl mx-auto">
585
  <table class="fashionable-table">
@@ -630,7 +607,6 @@
630
  </section>
631
 
632
 
633
- <!-- ===== 資料一覧 (Materials) ===== -->
634
  <section id="materials" class="py-16 sm:py-24 bg-white">
635
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
636
  <div class="text-center mb-12">
@@ -647,7 +623,6 @@
647
  </div>
648
  </section>
649
 
650
- <!-- ===== よくある質問 (FAQ) ===== -->
651
  <section id="faq" class="py-16 sm:py-24 bg-gray-50"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
652
  <div class="max-w-3xl mx-auto">
653
  <h2 class="section-title">
@@ -671,19 +646,17 @@
671
  </section>
672
  </main>
673
 
674
- <!-- ===== フッター ===== -->
675
  <footer class="bg-leoc-green-700 text-leoc-green-100">
676
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
677
  <span class="text-2xl font-bold">
678
  <i class="fa-solid fa-seedling mr-2"></i>新研修制度ポータル
679
  </span>
680
  <p class="mt-4 text-sm text-leoc-green-200">
681
- &copy;株式会社ONODERA GROUP All Rights Reserved.
682
  </p>
683
  </div>
684
  </footer>
685
 
686
- <!-- ===== JavaScript ===== -->
687
  <script>
688
  document.addEventListener('DOMContentLoaded', function() {
689
 
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>新研修制度ポータルサイト</title>
7
 
 
8
  <script src="https://cdn.tailwindcss.com"></script>
9
 
 
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
11
 
 
12
  <link rel="preconnect" href="https://fonts.googleapis.com">
13
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
 
127
  </head>
128
  <body class="bg-gray-50 font-sans antialiased">
129
 
 
130
  <header class="bg-white shadow-md sticky top-0 z-50">
131
  <nav class="container mx-auto px-4 sm:px-6 lg:px-8">
132
  <div class="flex justify-between items-center h-16">
 
133
  <div class="flex-shrink-0 flex items-center">
134
  <span class="text-2xl font-bold text-leoc-green-500">
135
  <i class="fa-solid fa-seedling mr-2"></i>ONODERA UNIVERSITY
136
  </span>
 
137
  <span class="ml-4 text-sm font-semibold text-gray-500 hidden md:block">(新研修制度ポータル)</span>
138
  </div>
139
 
 
140
  <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
141
  <a href="#home" class="inline-flex items-center px-1 pt-1 border-b-2 border-leoc-green-500 text-sm font-medium text-gray-900">
142
  ホーム
 
152
  </a>
153
  </div>
154
 
 
155
  <div class="-mr-2 flex items-center sm:hidden">
156
  <button type=button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-leoc-green-500" aria-expanded="false">
157
  <span class="sr-only">メニューを開く</span>
 
166
  </div>
167
  </nav>
168
 
 
169
  <div class="sm:hidden hidden" id="mobile-menu">
170
  <div class="pt-2 pb-3 space-y-1">
171
  <a href="#home" class="block pl-3 pr-4 py-2 border-l-4 border-leoc-green-500 bg-leoc-green-50 text-base font-medium text-leoc-green-700">ホーム</a>
 
177
  </div>
178
  </header>
179
 
 
180
  <main>
 
181
  <section id="home" class="relative bg-leoc-green-500 text-white overflow-hidden">
182
  <div class="absolute inset-0 opacity-10">
183
  <svg class="absolute bottom-0 left-0" width="400" height="400" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="200" cy="200" r="200" fill="url(#grad1)"/><defs><radialGradient id="grad1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(200 200) rotate(90) scale(200)"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs></svg>
 
218
  </div>
219
  </section>
220
 
 
221
  <section id="about" class="py-16 sm:py-24 bg-white">
222
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
223
 
 
225
  新研修制度 “ONODERA UNIVERSITY” について
226
  </h2>
227
 
 
228
  <div class="max-w-3xl mx-auto text-center mb-16 bg-gray-50 p-8 rounded-lg shadow-inner">
229
  <h3 class="text-2xl font-bold text-leoc-green-700 sm:text-3xl mb-4">
230
  田中社長メッセージ「共に成長するために」
 
256
  </div>
257
  </div>
258
 
 
259
  <div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8 text-center mb-24">
260
  <div class="p-6 bg-leoc-green-50 border-t-4 border-leoc-green-500 rounded-lg shadow-lg flex flex-col items-center">
261
  <div class="flex items-center justify-center h-16 w-16 bg-leoc-green-500 text-white rounded-full text-3xl font-bold mb-4">1</div>
 
276
  </div>
277
  </div>
278
 
 
279
  <div class="mb-20">
280
  <h2 class="subsection-title" id="point1_shokumu">1. 責任者の職務を定���します</h2>
281
  <blockquote class="content-blockquote">
 
291
 
292
  <h4 class="text-xl font-semibold text-gray-900 mt-12 mb-6 text-center">事業所責任者の6つの職務</h4>
293
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 
294
  <div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
295
  <h5 class="text-lg font-bold text-leoc-green-600 mb-2">① 業績管理</h5>
296
  <ul class="list-disc list-inside text-gray-700 space-y-1">
 
337
  </div>
338
  </div>
339
 
 
340
  <div class="mb-20">
341
  <h2 class="subsection-title" id="point2_kenshu">2. 責任者職務を学ぶ研修と責任者資格制度を始めます</h2>
342
  <blockquote class="content-blockquote">
 
362
  </div>
363
 
364
  <div class="flex justify-center my-12">
365
+ <a href="https://lh3.googleusercontent.com/d/1bXqv3ghmcativ87KJ1uI1L3V76bc0QZ1" target="_blank">
 
366
  <img src="https://lh3.googleusercontent.com/d/1bXqv3ghmcativ87KJ1uI1L3V76bc0QZ1" alt="ONODERA UNIVERSITY ロゴ" class="h-48 w-auto">
367
  </a>
368
  </div>
 
387
  </div>
388
  </div>
389
 
 
390
  <h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">研修科目と所要時間</h4>
391
  <div class="overflow-x-auto">
392
+ <table class="fashionable-table"> <thead>
 
393
  <tr>
394
  <th>科目</th>
395
  <th>Lv. 1</th>
 
401
  <tr>
402
  <td class="highlight-cell">オリエンテーション</td>
403
  <td>3:30</td>
404
+ <td>-</td>
405
+ <td>-</td>
406
  </tr>
407
  <tr>
408
  <td class="highlight-cell">業績管理</td>
 
446
  <td>4:30</td>
447
  <td>4:30</td>
448
  </tr>
449
+ <tr class="highlight-row"> <td>合計（時間）</td>
 
450
  <td>13:40</td>
451
+ <td>15:40</td>
452
+ <td>25:50</td>
453
  </tr>
454
  </tbody>
455
  </table>
456
+ <p class="mt-2 text-sm text-red-600 text-right">
457
+ ※時間は目安であり、動画の作成状況やカリキュラムの変更により変動します。<br>
458
+ （一部の項目は既存資料での代替や削除となる場合があります）
459
+ </p>
460
  </div>
461
 
 
462
  <h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">研修対象者（社員のみ）</h4>
463
  <div class="overflow-x-auto">
464
+ <table class="fashionable-table"> <thead>
 
465
  <tr>
466
  <th>対象者</th>
467
  <th>開始時期</th>
 
513
  <h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">事業所責任者資格を付与します</h4>
514
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
515
  <div class="text-center">
516
+ <a href="https://lh3.googleusercontent.com/d/1sBNjPOpqY1F_7IpwDnur17CigD2WgUoH" target="_blank">
517
+ <img src="https://lh3.googleusercontent.com/d/1sBNjPOpqY1F_7IpwDnur17CigD2WgUoH" alt="事業所責任者資格認定証 サンプル" class="rounded-lg shadow-lg max-w-sm mx-auto border border-[#999999]"> </a>
 
 
518
  <p class="text-sm text-gray-500 mt-2">※認定証はイメージです</p>
519
  </div>
520
  <blockquote class="content-blockquote text-xl">
 
525
  </div>
526
  </div>
527
 
 
528
  <div>
529
  <h2 class="subsection-title" id="point3_career">3. 責任者の経験を今後のキャリアに活きるようにします</h2>
530
  <blockquote class="content-blockquote">
 
557
  </div>
558
  </div>
559
 
 
560
  <h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">これからのスケジュール</h4>
561
  <div class="overflow-x-auto max-w-4xl mx-auto">
562
  <table class="fashionable-table">
 
607
  </section>
608
 
609
 
 
610
  <section id="materials" class="py-16 sm:py-24 bg-white">
611
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
612
  <div class="text-center mb-12">
 
623
  </div>
624
  </section>
625
 
 
626
  <section id="faq" class="py-16 sm:py-24 bg-gray-50"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
627
  <div class="max-w-3xl mx-auto">
628
  <h2 class="section-title">
 
646
  </section>
647
  </main>
648
 
 
649
  <footer class="bg-leoc-green-700 text-leoc-green-100">
650
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
651
  <span class="text-2xl font-bold">
652
  <i class="fa-solid fa-seedling mr-2"></i>新研修制度ポータル
653
  </span>
654
  <p class="mt-4 text-sm text-leoc-green-200">
655
+ ©株式会社ONODERA GROUP All Rights Reserved.
656
  </p>
657
  </div>
658
  </footer>
659
 
 
660
  <script>
661
  document.addEventListener('DOMContentLoaded', function() {
662