WordConnection/index.html at main · robertosolari/WordConnection · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Connection - Il Gioco della Ghigliottina Online</title>
    <meta name="description"
        content="Mettiti alla prova con Word Connection! Il gioco di parole ispirato alla Ghigliottina. Trova le associazioni, accumula punti e indovina la parola segreta.">
    <meta name="keywords"
        content="ghigliottina, gioco parole, associazioni parole, quiz parole, gioco online, word connection">
    <meta name="application-name" content="Word Connection">
    <meta name="author" content="Roberto Solari">
    <meta name="theme-color" content="#1a1a2e">

    <!-- Canonical Link -->
    <link rel="canonical" href="http://wordsconnection.netlify.app/">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://wordsconnection.netlify.app/">
    <meta property="og:title" content="Word Connection - Il Gioco della Ghigliottina Online">
    <meta property="og:description"
        content="Sfida la tua mente con il gioco stile Ghigliottina. Trova le 5 parole indizio e indovina la soluzione finale.">
    <meta property="og:image" content="http://wordsconnection.netlify.app/banner.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="http://wordsconnection.netlify.app/">
    <meta property="twitter:title" content="Word Connection - Il Gioco della Ghigliottina Online">
    <meta property="twitter:description"
        content="Sfida la tua mente con il gioco stile Ghigliottina. Trova le 5 parole indizio e indovina la soluzione finale.">
    <meta property="twitter:image" content="http://wordsconnection.netlify.app/banner.png">

    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DT2KKBMBTG"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-DT2KKBMBTG');
    </script>

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "Word Connection",
      "applicationCategory": "GameApplication",
      "operatingSystem": "Any",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "EUR"
      },
      "description": "Un gioco di parole dove devi trovare le associazioni e indovinare la parola segreta, simile alla Ghigliottina televisiva.",
      "image": "http://wordsconnection.netlify.app/banner.png",
      "url": "http://wordsconnection.netlify.app/",
      "author": {
          "@type": "Person",
          "name": "Roberto Solari"
      }
    }
    </script>
</head>

<body>

    <header>
        <h1>WORD CONNECTION</h1>
        <div id="prize-display">PUNTEGGIO: <span id="prize-value">0</span></div>
    </header>

    <main id="game-container">
        <!-- Intro Screen -->
        <section id="intro-screen" class="active">
            <h2>Il Gioco della Ghigliottina Online</h2>
            <p>Indovina le associazioni, accumula punti e trova la parola segreta!</p>
            <div style="text-align: left; margin: 20px 0; font-size: 0.95rem; color: #ccc;">
                <p style="margin-bottom: 5px;"><strong>Come funziona:</strong></p>
                <ul style="list-style-position: inside; padding-left: 0;">
                    <li>1. Scegli la parola giusta (+100 pt)</li>
                    <li>2. Raccogli i 5 indizi</li>
                    <li>3. Indovina l'ultima parola (+500 pt)</li>
                </ul>
            </div>
            <p style="font-size: 0.9rem; color: #aaa; margin-top: 15px;">Ispirato al classico gioco televisivo, Word
                Connection sfida la tua abilità di collegare le parole.</p>
            <button id="start-btn" class="primary-btn">GIOCA ORA</button>
        </section>

        <!-- Pairs Phase -->
        <section id="pairs-phase" class="hidden">
            <h3>Scegli la parola giusta</h3>
            <div class="pairs-container">
                <button class="word-option" id="option-1">PAROLA 1</button>
                <button class="word-option" id="option-2">PAROLA 2</button>
            </div>
            <div id="clues-container">
                <!-- Accumulated clues will go here -->
            </div>
        </section>

        <!-- Final Phase -->
        <section id="final-phase" class="hidden">
            <h3>L'ultima parola</h3>
            <div id="countdown">60</div>
            <div id="final-clues">
                <!-- Final 5 clues display -->
            </div>
            <div class="input-area">
                <input type="text" id="final-input" placeholder="La tua parola..." autocomplete="off">
                <button id="submit-btn" class="primary-btn">CONFERMA</button>
            </div>
        </section>

        <!-- Result Screen -->
        <section id="result-screen" class="hidden">
            <h2 id="result-title">VITTORIA!</h2>
            <p id="result-message">Hai fatto 0 punti</p>
            <div id="solution-display">
                <p>La parola era: <strong id="correct-word">SOLUZIONE</strong></p>
                <p id="explanation-text">Spiegazione dei collegamenti...</p>
            </div>
            <button id="restart-btn" class="primary-btn">GIOCA DI NUOVO</button>
        </section>
    </main>

    <footer>
        <p>Creato da <a href="https://robertosolari.netlify.app" target="_blank" rel="noopener noreferrer"><i class="fa-solid fa-user"></i> Roberto Solari</a></p>
        <p><a href="https://github.com/robertosolari/WordConnection" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github"></i> GitHub</a></p>
    </footer>

    <script src="game_data.js"></script>
    <script src="script.js"></script>

</body>

</html>