kfg/wifi-howto
3
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Language selection implemented.

Browse source
This commit is contained in:
bentlor 2017-06-02 19:38:14 +02:00
parent 35082ac43c
commit 6e8bdbcfe5
20 changed files with 226 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
css/style.css
View file

@ -31,6 +31,10 @@ figcaption {
img {
max-width: 100%;
}
#lang {
margin-right: .5em;
vertical-align: middle;
}
#logo {
width: 80px;
height: 80px;

BIN
img/en.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

10
img/en.svg Normal file
View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600">
<clipPath id="t">
<path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
</clipPath>
<path d="M0,0 v30 h60 v-30 z" fill="#00247d"/>
<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
<path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#cf142b" stroke-width="4"/>
<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
<path d="M30,0 v30 M0,15 h60" stroke="#cf142b" stroke-width="6"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 522 B

BIN
img/hu.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 213 B

5
img/hu.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 6 3">
<rect fill="#436F4D" width="6" height="3"/>
<rect fill="#FFF" width="6" height="2"/>
<rect fill="#CD2A3E" width="6" height="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 224 B

28
index.html
View file

@ -15,18 +15,26 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<![endif]-->
<script>
language = navigator.language;
if (language.match(/hu/i)) {
location.replace('index_hu.html');
}
</script>
</head>
<body>
<div id="content">
<header>
<img src="img/logo.png" id="logo" alt="Karinthy Címer" />
<h1>Karinthy Free WiFi - Útmutató</h1>
<img src="img/logo.png" id="logo" alt="Karinthy Logo" />
<h1>Karinthy Free WiFi - Instructions</h1>
<a href="index_hu.html"><img src="img/hu.png" id="lang" alt="Megtekintés magyarul" />Megtekintés magyarul</a>
</header>
<section>
<p>Kedves Látogatónk!
<p>Az új WiFi hálózatban nem kell minden bejelentkezéskor beírnod a jelszavad, csak az első alkalommal. Az alábbiakban találhatod az operációs rendszeredhez szükséges beállításokat, hogy használhasd az internetet iskolánkban.
<p>Szerintünk te
<p>Dear Visitor!
<p>In our new WiFi network, you don't need to enter your username and password anymore, only at first use. Below you will find the instructions specific to your operating system that will enable you to use the internet in our school.
<p>We think you are using
<span id="xp" class="os-name">Windows XP</span>
<span id="vista" class="os-name">Windows Vista</span>
<span id="win7" class="os-name">Windows 7</span>
@ -35,16 +43,16 @@
<span id="android" class="os-name">Android</span>
<span id="linux" class="os-name">Linux</span>
<span id="mac" class="os-name">Mac OS X</span>
<span id="other" class="os-name">ismeretlen</span>
operációs rendszert használsz. A bejelentkezéshez kövesd az alábbi utasításokat.
<p>Ha másik operációs rendszer útmutatóját szeretnéd megtekinteni, válaszd ki az operációs rendszert az alábbi listából.<br>
<span id="other" class="os-name">Other</span>
operating system. Please follow the instructions below.
<p>If you want to view instructions for another operating system, please choose one from the list:<br>
<select id="osSelector">
<option value="win7">Windows Vista & 7</option>
<option value="win10">Windows 8 & 10</option>
<option value="android">Android</option>
<option value="mac">Mac OS X</option>
<option value="linux">Linux</option>
<option value="other">Egyéb</option>
<option value="other">Other</option>
</select>
<div id="os-specific"></div>
</section>
@ -52,6 +60,6 @@
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/selector.js"></script>
<script>selectOs('#os-specific');</script>
<script>selectOs('#os-specific', 'en');</script>
</body>
</html>

58
index_hu.html Normal file
View file

@ -0,0 +1,58 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Karinthy Free WiFi</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Karinthy Free WiFi">
<meta name="author" content="Karinthy Frigyes Gimnázium">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<![endif]-->
</head>
<body>
<div id="content">
<header>
<img src="img/logo.png" id="logo" alt="Karinthy Címer" />
<h1>Karinthy Free WiFi - Útmutató</h1>
<a href="index.html"><img src="img/en.png" id="lang" alt="Read in English" />View in English</a>
</header>
<section>
<p>Kedves Látogatónk!
<p>Az új WiFi hálózatban nem kell minden bejelentkezéskor beírnod a jelszavad, csak az első alkalommal. Az alábbiakban találhatod az operációs rendszeredhez szükséges beállításokat, hogy használhasd az internetet iskolánkban.
<p>Szerintünk te
<span id="xp" class="os-name">Windows XP</span>
<span id="vista" class="os-name">Windows Vista</span>
<span id="win7" class="os-name">Windows 7</span>
<span id="win8" class="os-name">Windows 8</span>
<span id="win10" class="os-name">Windows 10</span>
<span id="android" class="os-name">Android</span>
<span id="linux" class="os-name">Linux</span>
<span id="mac" class="os-name">Mac OS X</span>
<span id="other" class="os-name">ismeretlen</span>
operációs rendszert használsz. A bejelentkezéshez kövesd az alábbi utasításokat.
<p>Ha másik operációs rendszer útmutatóját szeretnéd megtekinteni, válaszd ki az operációs rendszert az alábbi listából.<br>
<select id="osSelector">
<option value="win7">Windows Vista & 7</option>
<option value="win10">Windows 8 & 10</option>
<option value="android">Android</option>
<option value="mac">Mac OS X</option>
<option value="linux">Linux</option>
<option value="other">Egyéb</option>
</select>
<div id="os-specific"></div>
</section>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/selector.js"></script>
<script>selectOs('#os-specific', 'hu');</script>
</body>
</html>

6
js/selector.js
View file

@ -1,4 +1,4 @@
function selectOs( osDiv ) {
function selectOs( osDiv, language ) {
osString = navigator.oscpu + navigator.userAgent;
osString = osString.toLowerCase();
@ -27,10 +27,10 @@ function selectOs( osDiv ) {
var osSelect = checkOsString(detectedOs);
$('#' + detectedOs).addClass('detectedOs');
$('' + osDiv).load('os/' + detectedOs + '/howto.html');
$('' + osDiv).load('os/' + detectedOs + '/howto_' + language + '.html');
$('#osSelector').val(osSelect);
$('#osSelector').change(function () {
$('' + osDiv).load('os/' + $(this).val() + '/howto.html');
$('' + osDiv).load('os/' + $(this).val() + '/howto_' + language + '.html');
})
}

11
os/android/howto_en.html Normal file
View file

@ -0,0 +1,11 @@
<figure>
<figcaption>1. Choose the "karinthy" WiFi network.</figcaption>
<img src="os/android/en/01.png" alt=""/>
</figure>
<figure>
<figcaption>2. Choose not to validate the CA certificate and then enter your "karinthy" username and password in the relevant fields. You don't have to fill anonymous user identity.</figcaption>
<img src="os/android/en/02.png" alt=""/>
</figure>
<figure>
<figcaption>3. Now you can start using the network.</figcaption>
</figure>

0
os/android/howto.html → os/android/howto_hu.html
View file

17
os/linux/howto_en.html Normal file
View file

@ -0,0 +1,17 @@
<p>The below instructions are for the application Network manager. Small deviances may appear when using other applications.
<figure>
<figcaption>1. Add a new WiFi network to the list of configurations.</figcaption>
<img src="os/linux/01.png" alt="" />
</figure>
<figure>
<figcaption>2. Set the name of the network (SSID: karinthy) on the "Wi-Fi" tab.</figcaption>
<img src="os/linux/02.png" alt="" />
</figure>
<figure>
<figcaption>3. On the Wi-Fi Security tab, you have to set the type of encryption. Choose "WPA & WPA2 Enterprise".</figcaption>
<img src="os/linux/03.png" alt="" />
</figure>
<figure>
<figcaption>4. After that, choose "Tunneled TLS" authentication, and check "No CA certificate is required" so that the computer does not check the certificate of our server. Inner authentication should be set to "MSCHAPv2". Finally, type your "karinthy" username and password in the relevant fields. You can then connect to the network.</figcaption>
<img src="os/linux/04.png" alt="" />
</figure>

0
os/linux/howto.html → os/linux/howto_hu.html
View file

20
os/mac/howto_en.html Normal file
View file

@ -0,0 +1,20 @@
<figure>
<figcaption>1. Choose "karinthy" in the list of available networks.</figcaption>
<img src="os/mac/en/01.png" alt=""/>
</figure>
<figure>
<figcaption>2. In the pop-up box, enter your "karinthy" username and password, then click "Join".</figcaption>
<img src="os/mac/en/02.png" alt=""/>
</figure>
<figure>
<figcaption>3. The computer may ask if you trust the "karinthy" network. You can safely click "Continue" here...</figcaption>
<img src="os/mac/en/03.png" alt=""/>
</figure>
<figure>
<figcaption>4. ...then if required, enter your local password and click "Update settings".</figcaption>
<img src="os/mac/en/04.png" alt=""/>
</figure>
<figure>
<figcaption>5. After that your computer will connect to the network.</figcaption>
</figure>

0
os/mac/howto.html → os/mac/howto_hu.html
View file

19
os/other/howto_en.html Normal file
View file

@ -0,0 +1,19 @@
<p>Use the following settings for other operating systems:</p>
<dl>
<dt>Network name (SSID)</dt>
<dd>karinthy</dd>
<dt>Encryption:</dt>
<dd>WPA2-Enterprise</dd>
<dt>Authentication:</dt>
<dd>MSCHAPv2</dd>
<dt>Username:</dt>
<dd>&lt;karinthy username&gt;</dd>
<dt>Jelszó:</dt>
<dd>&lt;karinthy password&gt;</dd>
<dt>Anonymous identity:</dt>
<dd>Leave empty.</dd>
<dt>CA certificate:</dt>
<dd>You can choose not to validate it, as we do not currently have one.</dd>
</dl>
<p>If the above settings don't work, your computer may not be able to connect to our WiFi netowork. If you want to be absolutely sure, contact the system administrators.</p>

0
os/other/howto.html → os/other/howto_hu.html
View file

0
os/win10/howto.html → os/win10/howto_en.html
View file

12
os/win10/howto_hu.html Normal file
View file

@ -0,0 +1,12 @@
<figure>
<figcaption>1. Válaszd ki a "karinthy" hálózatot, és kattints a "csatlakozás" gombra.</figcaption>
<img src="os/win10/hu/01.png" alt=""/>
</figure>
<figure>
<figcaption>2. Írd be a karinthys felhasználóneved és jelszavad. Figyelj a kis- és nagybetűkre.</figcaption>
<img src="os/win10/hu/02.png" alt=""/>
</figure>
<figure>
<figcaption>3. Erősítsd meg, hogy valóban csatlakozni akarsz.</figcaption>
<img src="os/win10/hu/03.png" alt=""/>
</figure>

49
os/win7/howto_en.html Normal file
View file

@ -0,0 +1,49 @@
<figure>
<figcaption>1. In the list of available networks click "Open Network and Sharing Center".</figcaption>
<img src="os/win7/en/01.png" alt=""/>
</figure>
<figure>
<figcaption>2. Open the list of available networks (Manage wireless networks).</figcaption>
<img src="os/win7/en/02.png" alt=""/>
</figure>
<figure>
<figcaption>3. Click "Add".</figcaption>
<img src="os/win7/en/03.png" alt=""/>
</figure>
<figure>
<figcaption>4. Choose to "Manually create a network profile".</figcaption>
<img src="os/win7/en/04.png" alt=""/>
</figure>
<figure>
<figcaption>5. Fill the "Network name" (karinthy), the "Security type" (WPA2-Enterprise) and the "Encryption type" (AES) fields. If you like, you can choose to start this connection automatically.</figcaption>
<img src="os/win7/en/05.png" alt=""/>
</figure>
<figure>
<figcaption>6. Click on "Next", then choose to "Change connection settings".</figcaption>
<img src="os/win7/en/06.png" alt=""/>
</figure>
<figure>
<figcaption>7. On the security tab, click on "Settings" next to the network authentication method.</figcaption>
<img src="os/win7/en/07.png" alt=""/>
</figure>
<figure>
<figcaption>8. Set your computer not to validate the server certificate. Then click "Configure".</figcaption>
<img src="os/win7/en/08.png" alt=""/>
</figure>
<figure>
<figcaption>9. In the pop-up window disable using your windows username and password.</figcaption>
<img src="os/win7/en/09.png" alt=""/>
</figure>
<figure>
<figcaption>10. On the previous screen, choose "Advanced settings".</figcaption>
<img src="os/win7/en/07.png" alt=""/>
</figure>
<figure>
<figcaption>11. On the next screen, specify the authentication mode (User authentication) and then set your "karinthy" username and password under "Save credentials".</figcaption>
<img src="os/win7/en/10.png" alt=""/>
<img src="os/win7/en/11.png" alt=""/>
</figure>
<figure>
<figcaption>12. Finally click on "Ok" and then "Close". The connection is now ready to be used.</figcaption>
</figure>

0
os/win7/howto.html → os/win7/howto_hu.html
View file