forked from caglarorhan/phonetic-portal
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (114 loc) · 6.44 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Phonetic Portal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/index.js"></script>
</head>
<body>
<div class="header">
<div class="header-content">
<img src="./img/phonetic-portal-64.png" alt="Phonetic Portal Logo">
<strong>Phonetic Portal<small><sup>©</sup></small></strong>
</div>
</div>
<div class="tab-container">
<div class="tab active" data-tab="tab_1">How to use?</div>
<div class="tab" data-tab="tab_2">Last searches</div>
<div class="tab" data-tab="tab_3">Settings</div>
<div class="tab" data-tab="tab_4">About</div>
<div class="tab" data-tab="tab_5">Feedback</div>
</div>
<div id="tab_1" class="tab-content active">
<ol>
<li>
<span>Highlight a word</span>
</li>
<li>
<span>Follow one of the two options below</span>
<ol>
<li>
<span>
Option 1: Click on the <img alt="Phonetic Portal icon" src="./img/phonetic-portal-24.png" style="width: 16px; height: 16px; vertical-align: middle;"> icon that appears
</span>
</li>
<li>
<span>
Option 2: Right-click and select <img alt="Phonetic Portal icon" src="./img/phonetic-portal-24.png" style="width: 16px; height: 16px; vertical-align: middle;"> <strong>Phonetic Portal</strong> from the context menu
</span>
</li>
</ol>
</li>
<li>
<span>Read the IPA pronunciation in the portal</span>
</li>
</ol>
</div>
<div id="tab_2" class="tab-content">
<div class="search-container">
<input type="text" class="search-box" placeholder="Search in history">
</div>
<div class="search-result">
<div class="search-text">pronunciation</div>
<div class="ipa-text">/prəʊnʌnsɪ'eɪʃən/</div>
<div class="dialect-info">
<img src="./img/united-kingdom-flag.png" alt="UK" class="dialect-flag">
<span class="country-code">UK</span>
</div>
<div class="search-date">2024-12-26 05:00</div>
</div>
<div class="search-result">
<div class="search-text">pronunciation</div>
<div class="ipa-text">/prə'nʌnsi'eɪʃən/</div>
<div class="dialect-info">
<img src="./img/united-states-flag.png" alt="US" class="dialect-flag">
<span class="country-code">US</span>
</div>
<div class="search-date">2024-12-26 05:00</div>
</div>
</div>
<div id="tab_3" class="tab-content">
<fieldset>
<legend>Icon Placement Around Selected Word</legend>
<div class="icon-aligner">
<div class="symbolic-rectangle" title="Click a black square to choose where you want your icon to appear.">
<div class="icon top-left" data-place="top-left"></div>
<div class="icon top-center" data-place="top-center"></div>
<div class="icon top-right" data-place="top-right"></div>
<div class="icon middle-left" data-place="middle-left"></div>
<div class="icon middle-right" data-place="middle-right"></div>
<div class="icon bottom-left" data-place="bottom-left"></div>
<div class="icon bottom-center" data-place="bottom-center"></div>
<div class="icon bottom-right" data-place="bottom-right"></div>
<span class="selected-word">Selected Word</span>
</div>
<div>You can click the black boxes to choose the position of IPA icon.</div>
</div>
<div class="selected-place"></div>
</fieldset>
</div>
<div id="tab_4" class="tab-content">
<div>
<p><strong>Phonetic Portal</strong> is a simple and basic tool designed to help users understand and pronounce words using the International Phonetic Alphabet (IPA). Whether you're a linguist, language learner, or just curious about phonetics, this application provides an easy and intuitive way to convert words into their phonetic representation.</p>
<p>Features:</p>
<ul>
<li>Instant IPA conversion for the highlighted words</li>
<li>Supports multiple dialects</li>
<li>Easy-to-use interface with context menu integration</li>
<li>History of last searches for quick reference</li>
<li>Customizable settings to suit your preferences</li>
</ul>
<p>Developed with a focus on accuracy and user experience, Phonetic Portal aims to be an indispensable resource for anyone interested in the international phonetics of human speech.</p>
<p><strong>Feedbacks:</strong> You can send all types of feedbacks like comments, questions, bug reports and feature request to us. Please use the Google Form at the <a href="" id="feedback-link" style="margin-right: 1px;">Feedback</a> tab.</p>
<p><strong>GitHub:</strong> Alternatively, you can use Phonetic Portal's GitHub repository's <a href="https://github.com/caglarorhan/phonetic-portal/issues/new" target="_blank" rel="noopener" style="margin-right: 1px;">issues</a> section to provide feedback.</p>
<p><strong>Icons from:</strong> <a href="https://www.flaticon.com/free-icons/pronunciation" title="pronunciation icons">Pronunciation icons created by Freepik - Flaticon</a></p>
<p><strong>Developers:</strong> <a href="https://github.com/Ksenofanex" target="_blank" rel="noopener" style="margin-right: 1px;">Burak Kadir Er</a> & <a href="https://github.com/caglarorhan" target="_blank" rel="noopener">Caglar Orhan</a></p>
</div>
</div>
<div id="tab_5" class="tab-content">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSew0pp1bmarkvFc5Sn0XT87ri4XGcqnYuD5ADjPk67tE36jvg/viewform?embedded=true" width="540" height="500" frameborder="0" marginheight="0" marginwidth="0" class="feedback-form" title="Feedback Form">Loading…</iframe>
</div>
</body>
</html>