שילוב ערוץ היוטיוב באתר

NHLOCAL · Nov 2, 2024 · f47e366 · f47e366
1 parent 67e0b47
commit f47e366
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 7 deletions.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -18,6 +18,8 @@ navbar:
     url: "/"
   - title: "נושאים"
     url: "#topics"
+  - title: "ערוץ יוטיוב"
+    url: "/youtube-channel.html"
   - title: "אודות"
     url: "#about"
   - title: "משוב"

diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html
@@ -3,14 +3,16 @@
         <!-- כפתור בית -->
         <li><a href="{{ '/' | relative_url }}"><i class="fas fa-home"></i> בית</a></li>
 
-        <!-- כפתור נושאים עם קישור יחסי לדף הבית, על ידי קישור ישיר עם עוגן -->
+        <!-- כפתור נושאים -->
         <li><a href="{{ '/' | relative_url }}#topics"><i class="fas fa-list"></i> נושאים</a></li>
 
+        <!-- כפתור ערוץ יוטיוב -->
+        <li><a href="{{ '/youtube-channel.html' | relative_url }}"><i class="fab fa-youtube"></i> ערוץ יוטיוב</a></li>
 
-        <!-- כפתור אודות עם קישור יחסי לדף הבית, על ידי קישור ישיר עם עוגן -->
+        <!-- כפתור אודות -->
         <li><a href="{{ '/' | relative_url }}#about"><i class="fas fa-info-circle"></i> אודות</a></li>
 
-        <!-- כפתור משוב עם קישור יחסי לדף הבית, על ידי קישור ישיר עם עוגן -->
+        <!-- כפתור משוב -->
         <li><a href="{{ '/' | relative_url }}#feedback"><i class="fas fa-comment"></i> משוב</a></li>
     </ul>
 </nav>
diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
@@ -526,4 +526,70 @@ a:hover {
 .home-buttons .button {
     min-width: 180px;
     font-size: 1.1em;
-}
+}
+
+/* כפתור גיטהאב */
+.github-button {
+    background-color: #2E2E2E; /* אפור כהה */
+}
+
+.github-button:hover {
+    background-color: #1b1b1b; /* אפור כהה יותר */
+}
+
+/* כפתור לעוד פרוייקטים */
+.projects-button {
+    background-color: #03C3DE; /* כחול בהיר */
+}
+
+.projects-button:hover {
+    background-color: #028fa1; /* כחול כהה יותר */
+}
+
+/* שיפור כפתורים */
+.button {
+    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.button:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+}
+
+/* כפתורים אדומים */
+.red-button {
+    background: linear-gradient(135deg, #ff4d4d, #e60000);
+}
+
+.red-button:hover {
+    background-color: #e60000;
+}
+
+/* סקשן עם רקע אדום */
+.red-section {
+    background-color: #ffe6e6;
+    border: 2px solid #ff4d4d;
+    border-radius: 12px;
+    padding: 30px;
+    margin-top: 30px;
+}
+
+/* עיצוב לתמיכה בסרטוני וידאו רספונסיביים */
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* יחס גובה-רוחב של 16:9 */
+    height: 0;
+    overflow: hidden;
+    max-width: 100%;
+    margin-bottom: 20px;
+}
+
+.video-container iframe,
+.video-container object,
+.video-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/docs/index.md b/docs/index.md
@@ -12,10 +12,10 @@ title: "בית"
 
     <!-- הוספת כפתורי GitHub ו-Main Site -->
     <div class="home-buttons">
-        <a href="https://github.com/nhlocal/ZeKal/" class="button" target="_blank" rel="noopener noreferrer" style="background-color: #2E2E2E">
-            <i class="fas fa-star"></i> ככב בגיטאהב
+        <a href="https://github.com/nhlocal/ZeKal/" class="button github-button" target="_blank" rel="noopener noreferrer">
+            <i class="fab fa-github"></i> ככב בגיטאהב
         </a>
-        <a href="https://nhlocal.github.io/?utm_source=ZeKalHome&utm_medium=site" class="button" target="_blank" rel="noopener noreferrer" style="background-color: #03C3DE;">
+        <a href="https://nhlocal.github.io/?utm_source=ZeKalHome&utm_medium=site" class="button projects-button" target="_blank" rel="noopener noreferrer">
             <i class="fas fa-external-link-alt"></i> לעוד פרוייקטים
         </a>
     </div>
@@ -24,6 +24,7 @@ title: "בית"
 ## <a id="topics"></a><i class="fas fa-th-large"></i> נושאים עיקריים
 
 <div class="topics-grid">
+    <!-- כפתורי הנושאים הקיימים -->
     <a href="{{ '/topics/computers.html' | relative_url }}" class="button"><i class="fas fa-laptop"></i> מחשבים</a>
     <a href="{{ '/topics/operating-systems.html' | relative_url }}" class="button"><i class="fas fa-desktop"></i> מערכות הפעלה</a>
     <a href="{{ '/topics/programming-languages.html' | relative_url }}" class="button"><i class="fas fa-code"></i> תכנות</a>
@@ -36,6 +37,22 @@ title: "בית"
     <a href="{{ '/topics/hardware-components.html' | relative_url }}" class="button"><i class="fas fa-microchip"></i> רכיבי חומרה</a>
 </div>
 
+## <a id="youtube-channel"></a><i class="fab fa-youtube"></i> ערוץ יוטיוב
+
+<div class="section red-section">
+    <h2>זה קל - לימוד אנגלית בקלי קלות</h2>
+    <p>מעוניינים ללמוד אנגלית בצורה פשוטה ומהנה? ערוץ היוטיוב שלנו מציע לימוד אנגלית מחולק ל-10 רמות, החל ממתחילים ועד למתקדמים, עם מילים, משפטים ומבנים לשוניים המתאימים לכל הרמות.</p>
+    <p>הצטרפו אלינו ותתחילו לשפר את האנגלית שלכם כבר היום!</p>
+
+    <div class="home-buttons">
+        <a href="{{ '/youtube-channel.html' | relative_url }}" class="button large-button red-button">
+            <i class="fas fa-info-circle"></i> למידע נוסף
+        </a>
+        <a href="https://github.com/NHLOCAL/WatchZekal/" class="button large-button red-button" target="_blank" rel="noopener noreferrer">
+            <i class="fab fa-github"></i> ככב בגיטאהב
+        </a>
+    </div>
+</div>
 
 ## <a id="about"></a><i class="fas fa-info-circle"></i> אודות
 

diff --git a/docs/youtube-channel.md b/docs/youtube-channel.md
@@ -0,0 +1,30 @@
+---
+layout: default
+title: "זה קל - לימוד אנגלית בקלי קלות"
+---
+
+<div class="section red-section">
+    <h1><i class="fab fa-youtube"></i> ערוץ היוטיוב שלנו</h1>
+    <p>ברוכים הבאים ל"זה קל - לימוד אנגלית בקלי קלות"!</p>
+
+    <p>ערוץ היוטיוב שלנו מציע לכם ללמוד אנגלית בצורה פשוטה ומהנה.</p>
+
+    <p>הלמידה מחולקת ל-10 רמות, החל מהיסודות ועד לנושאים מתקדמים, כך שתוכלו להתקדם בקצב שלכם.</p>
+
+    <p>כל רמה כוללת מילים, משפטים ומבנים לשוניים המתאימים לרמת הקושי שלה, ומאפשרת לכם לשפר את כישורי השפה שלכם בצורה מתמדת.</p>
+
+    <h2>צפו בסרטון לדוגמה</h2>
+    <!-- הטמעת סרטון YouTube לדוגמה -->
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/AbwtibCzEJg" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+    </div>
+
+    <div class="home-buttons">
+        <a href="https://www.youtube.com/@Ze-Kal" class="button large-button red-button" target="_blank" rel="noopener noreferrer">
+            <i class="fab fa-youtube"></i> בקרו בערוץ היוטיוב
+        </a>
+        <a href="https://github.com/NHLOCAL/WatchZekal/" class="button large-button red-button" target="_blank" rel="noopener noreferrer">
+            <i class="fab fa-github"></i> ככב בגיטאהב
+        </a>
+    </div>
+</div>