<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>N-tuition — Προσωπικό Site</title>
    <meta name="google-site-verification" content="PpTfFzz_68v" />
  <meta name="description" content="Το προσωπικό site του N-tuition με πληροφορίες, βιβλία, βίντεο και αρχεία.">
  <style>
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      line-height: 1.6;
      color: #111;
     background: #9cc8ff;
    }
    .container { max-width: 900px; margin: 0 auto; padding: 0 16px; }

    header {
      background: rgba(255,255,255,0.9);
      border-bottom: 1px solid #eee;
      position: sticky; top: 0; z-index: 10;
      backdrop-filter: blur(6px);
    }
    nav {
      display: flex; align-items: center; justify-content: center;
      gap: 6px; padding: 12px 0; flex-wrap: wrap;
    }
    nav a {
      color: #111; text-decoration: none; font-weight: 600;
      padding: 6px 10px; border-radius: 8px;
    }
    nav a:hover { background: #f0f0f0; }
    .yt { background:#ff3131; color:#fff; }
    .yt:hover { background:#d92727; color:#fff; }

    .hero { text-align: center; padding: 70px 20px 30px; }
    .hero h1 { margin: 0; font-weight: 900; letter-spacing: .5px; font-size: clamp(40px, 6vw, 60px); }
    .hero p { margin: 8px 0 0; color:#333; }

    main { padding: 0 0 60px; }
    .card {
      background:#fff; border-radius:12px; padding:20px;
      box-shadow:0 4px 20px rgba(0,0,0,0.08);
      margin-bottom:24px;
    }
    h2 { margin:0 0 8px; }
    .muted { color:#555; font-size:15px; }

    /* Βιβλία */
    #books .covers{
      display:flex; flex-wrap:wrap; justify-content:center;
      gap:50px; margin-top:20px;
    }
    #books .cover-card{
      width:160px; text-align:center; background:#fff;
      border:1px solid #dce4f2; border-radius:10px; padding:8px;
      box-shadow:0 3px 10px rgba(0,0,0,0.08);
      transition: transform .2s ease;
    }
    #books .cover-card:hover { transform: scale(1.05); }
    #books .frame{
      width:130px; height:180px; margin:0 auto 8px; overflow:hidden; border-radius:8px;
    }
    #books img{ width:100%; height:100%; object-fit:cover; display:block; }
    #books .title{ font-weight:700; font-size:14px; }

    .more-btn{
      display:inline-block; margin-top:6px; padding:4px 8px;
      background:#2d6cff; color:#fff; font-weight:600; border-radius:6px;
      text-decoration:none; font-size:13px;
    }
    .more-btn:hover{ background:#0047b3; }

    .book-desc{
      font-size:14px; color:#444; margin-top:6px; line-height:1.4; font-style:italic;
    }

    /* Βίντεο */
    #videos .video-grid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 14px;
      margin-top: 12px;
    }
    .video-card{
      background:#fff; border:1px solid #dce4f2; border-radius:10px; padding:10px;
      box-shadow:0 3px 10px rgba(0,0,0,0.08); overflow:hidden;
      transition: transform .18s ease;
      text-decoration: none; color: inherit; display: block;
    }
    .video-card:hover{ transform: translateY(-2px); }
    .video-thumb{ position: relative; border-radius:8px; overflow:hidden; aspect-ratio: 16/9; }
    .video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .play-badge{
      position:absolute; right:8px; bottom:8px; background:#ff3131; color:#fff;
      font-weight:700; font-size:12px; padding:6px 10px; border-radius:999px;
    }
    .video-title{ font-weight:700; margin:8px 2px 2px; font-size:14px; }
    .video-meta{ color:#666; font-size:12px; margin:0 2px 4px; }
    footer { text-align:center; font-size:14px; padding:24px; color:#555; }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <nav>
        <a href="#info">Πληροφορίες</a>
        <a href="#books">Βιβλία</a>
        <a href="#videos">Βίντεο</a>
        <a href="#files">Αρχεία</a>
        <a href="mailto:nikostt2@gmail.com">Email</a>
        <a class="yt" href="https://www.youtube.com/watch?v=EPZGU5kmS5I&t=60s" target="_blank" rel="noopener">YouTube</a>
        <a href="alla.html">Άλλα</a>
      </nav>
    </div>
  </header>

  <section class="hero">
    <h1>N-tuition</h1>
    <p>Ιδέες, σημειώσεις, παρουσιάσεις</p>
  </section>

  <main class="container">

    <div id="info" class="card">
      <h2>Πληροφορίες</h2>
      <p class="muted">Πρόσθεσε εδώ το κείμενό σου όταν είσαι έτοιμος.</p>
      <p><strong>Email:</strong> <a href="mailto:nikostt2@gmail.com">nikostt2@gmail.com</a></p>
      <p><strong>Κανάλι:</strong> <a href="https://www.youtube.com/watch?v=EPZGU5kmS5I&t=60s" target="_blank" rel="noopener">N-tuition (YouTube)</a></p>
    </div>

    <!-- Βιβλία -->
    <div id="books" class="card">
      <h2>Βιβλία</h2>
      <p class="muted">Εξώφυλλα και σύντομες πληροφορίες.</p>

      <div class="covers">
        <div class="cover-card">
          <div class="frame"><img src="images/epipedia.png" alt="Εξώφυλλο βιβλίου ΕΠΙΠΕΔΙΑ"></div>
          <div class="title">ΕΠΙΠΕΔΙΑ</div>
          <p class="book-desc"> Η γεωμετρία του Δημοτικού Σχολείου μέσα από ισστορίες μυστηρίου </p>
          <a class="more-btn" href="epipedia.html">Περισσότερα</a>
        </div>

        <div class="cover-card">
          <div class="frame"><img src="images/istories_me_4_prakseis.png" alt="Εξώφυλλο βιβλίου ΙΣΤΟΡΙΕΣ ΜΕ 4 ΠΡΑΞΕΙΣ"></div>
          <div class="title">ΙΣΤΟΡΙΕΣ ΜΕ 4 ΠΡΑΞΕΙΣ</div>
          <p class="book-desc">Μια εναλλακτική προσέγγιση στα προβλήματα των μαθηματικών μτου Δημοτικού Σχολείου.</p>
          <a class="more-btn" href="istories.html">Περισσότερα</a>
        </div>
      </div>
    </div>

    <!-- Βίντεο -->
    <div id="videos" class="card">
      <h2>Βίντεο</h2>
      <p class="muted">Προεπισκοπήσεις από το κανάλι στο YouTube.</p>
      <div class="video-grid">
        <a class="video-card" href="https://www.youtube.com/watch?v=EPZGU5kmS5I&t=60s" target="_blank" rel="noopener">
          <div class="video-thumb">
            <img src="https://img.youtube.com/vi/EPZGU5kmS5I/hqdefault.jpg" alt="N-tuition #1">
            <span class="play-badge">▶ Play</span>
          </div>
          <div class="video-title">N-tuition — Video #1</div>
          <p class="video-meta">YouTube • άνοιγμα σε νέα καρτέλα</p>
        </a>
      </div>
    </div>

    <!-- Αρχεία -->
    <div id="files" class="card">
      <h2>Αρχεία</h2>
      <p class="muted">Εδώ θα ανεβαίνουν PDF και άλλα αρχεία για κατέβασμα.</p>
      <ul></ul>
      <p class="muted" style="margin-top:8px;">➜ Ανέβασε τα PDF στον φάκελο <code>files/</code> και πρόσθεσε εδώ τους συνδέσμους.</p>
    </div>

  </main>

  <footer>
    © 2025 N-tuition • Φτιαγμένο στο <a href="https://neocities.org" target="_blank" rel="noopener">Neocities</a>
  </footer>

</body>
</html>
/* --- Φόντο σε όλη τη σελίδα --- */
body {
  background: #eaf4ff; /* απαλό σιέλ */
}

