Spaces:
Running
Running
| <html lang="th"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Share YouTube - แชร์วิดีโอและโน๊ตกับเพื่อน</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <h1><i class="fab fa-youtube"></i> Share YouTube</h1> | |
| <p>แชร์วิดีโอและโน๊ตกับเพื่อน</p> | |
| </div> | |
| </header> | |
| <!-- Share Form --> | |
| <div class="share-section"> | |
| <div class="share-card"> | |
| <h2><i class="fas fa-share"></i> แชร์ลิงก์ YouTube</h2> | |
| <form id="shareForm"> | |
| <div class="form-group"> | |
| <label for="name"><i class="fas fa-user"></i> ชื่อของคุณ:</label> | |
| <input type="text" id="name" name="name" required placeholder="กรอกชื่อของคุณ"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="youtube_link"><i class="fab fa-youtube"></i> ลิงก์ YouTube:</label> | |
| <input type="url" id="youtube_link" name="youtube_link" required placeholder="https://www.youtube.com/watch?v=..."> | |
| </div> | |
| <div class="form-group"> | |
| <label for="note"><i class="fas fa-sticky-note"></i> โน๊ตสั้นๆ:</label> | |
| <textarea id="note" name="note" required placeholder="เขียนโน๊ตสั้นๆ เกี่ยวกับวิดีโอนี้..."></textarea> | |
| </div> | |
| <button type="submit" class="btn-share"> | |
| <i class="fas fa-share"></i> แชร์ | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Shared Links Feed --> | |
| <div class="feed-section"> | |
| <h2><i class="fas fa-list"></i> ลิงก์ที่แชร์</h2> | |
| <div id="linksContainer"> | |
| <!-- Shared links will be loaded here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading Spinner --> | |
| <div id="loadingSpinner" class="loading-spinner"> | |
| <i class="fas fa-spinner fa-spin"></i> | |
| <p>กำลังโหลด...</p> | |
| </div> | |
| <!-- Success Message --> | |
| <div id="successMessage" class="success-message"> | |
| <i class="fas fa-check-circle"></i> | |
| <span id="successText">แชร์สำเร็จ!</span> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |