diff --git a/README.md b/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..508bfaf7172fa9b2ce7ab5240ea75f81a576e0d2
--- /dev/null
+++ b/README.md
@@ -0,0 +1,9 @@
+# Comment Syntax Finder
+Web page listing inline and block comments for about 150 programming and scripting languages.
+Filter this list with the search input.
+
+
+
+## Remarks
+- search input filters both language and syntax
+- `~` is the replacement for the comment text itself
diff --git a/comments.csv b/comments.csv
new file mode 100644
index 0000000000000000000000000000000000000000..17f3b709bf71e7311ff255caef39875a778169c6
--- /dev/null
+++ b/comments.csv
@@ -0,0 +1,258 @@
+ABAP,"
+ABAP,*
+ActionScript,//
+Ada,--
+APL,â
+AppleScript,--
+Assembler S/360,*
+Assembler,;
+AutoHotkey,;
+AutoIt,;
+AWK,#
+Bash,#
+Basic Plus,!
+BASIC,REM
+Batch files,::
+Batch files,REM
+BCPL,//
+Bourne shell,#
+C (C99),//
+C shell,#
+C#,//
+C++,//
+Cecil,--
+Cisco IOS,!
+Clojure,;
+cmd.exe,::
+COBOL 2002,*>
+COBOL 90,*>
+COBOL I to COBOL 85,*
+Cobra,#
+CoffeeScript,#
+COMMAND.COM,::
+Common Lisp,;
+Curl,||
+D,//
+DCL,$!
+Dylan,//
+E,#
+Eiffel,--
+Elixir,#
+Emacs Lisp,;
+Erlang,%
+Euphoria,--
+F#,//
+Fish shell,#
+Forth,\
+Fortran I to Fortran 77,C
+Fortran IV to Fortran 77,*
+Fortran,!
+Gambas,'
+GAMS,*
+GNU-bc,#
+GNU-sed,#
+Go,//
+Haskell,--
+Icon,#
+Inform,!
+INI-Datei,;
+Io,#
+Io,//
+J,NB.
+Java,//
+JavaScript,//
+JQuery,//
+Julia,#
+Kotlin,//
+LaTeX,%
+Lisp,;
+Logo,;
+Lua,--
+M4,dnl
+Make,#
+Maple,#
+MATLAB,%
+Mercury,%
+merd,#
+Monkey,'
+MUMPS,;
+Nim,#
+Object Pascal (Delphi),//
+Objective-C,//
+Occam,--
+Oz,%
+PAW,*
+Perl,#
+Perl6,#
+PHP,#
+PHP,//
+Pick Basic,!
+Pick Basic,*
+Pike,//
+PILOT,R:
+Pliant,#
+PostScript,%
+PowerFlex,//
+PowerShell,#
+Prolog,%
+PureScript,--
+Python,#
+R,#
+Raku,#
+Rebol,;
+Red,;
+Ruby,#
+Rust,//
+S-Lang,%
+SASS,//
+Sather,--
+Scala,//
+Scheme,;
+Scilab,//
+Seed7,#
+SGML,--
+SIMULA,--
+Small Basic,'
+SPARK,--
+SQL,--
+Swift,//
+Tcl,#
+TeX,%
+Texinfo,@c
+Texinfo,@comment
+TUTOR,$$
+TUTOR,*
+Unix shell,#
+VBScript,'
+VHDL,--
+Vimscript,"
+Visual Basic,'
+Visual Prolog,%
+Xojo,'
+Xojo,//
+Xojo,rem
+YAML,#
+YCP,//
+Yorick,//
+ActionScript,/* ~ */
+ALGOL 60,comment ~ ;
+ALGOL 68,# ~ #
+ALGOL 68,co ~ co
+ALGOL 68,comment ~ comment
+ALGOL 68,¢ ~ ¢
+ALGOL 68,£ ~ £
+AppleScript,(* ~ *)
+AutoHotkey,/* ~ */
+AutoIt,#comments-start ~ #comments-end
+AutoIt,#cs ~ #ce
+AWK,<# ~ #>
+B,/* ~ */
+Bash,<# ~ #>
+Beta,(* ~ *)
+Bourne shell,<# ~ #>
+C shell,<# ~ #>
+C#,/* ~ */
+C++,/* ~ */
+C,#if 0 ~ #endif
+C,/* ~ */
+CHILL,/* ~ */
+Clojure,(comment ~ )
+Cobra,/# ~ #/
+CoffeeScript,### ~ ###
+ColdFusion,<!--- ~ --->
+CSS,/* ~ */
+Curl,|# ~ #|
+Curl,|TAG# ~ #TAG|
+D,/* ~ */
+D,/+ ~ +/
+Delphi,(* ~ *)
+Delphi,{ ~ }
+Dylan,/* ~ */
+F#,(* ~ *)
+Forth,( ~ )
+GNU-bc,/* ~ */
+Go,/* ~ */
+Handlebars,{{! ~ }}
+Handlebars,{{!-- ~ --}}
+Haskell,{- ~ -}
+HTML,<!-- ~ -->
+Io,/* ~ */
+Java,/* ~ */
+JavaScript,/* ~ */
+JQuery,/* ~ */
+JSP,<%-- ~ --%>
+Julia,#= ~ =#
+Kotlin,/* ~ */
+Lisp,#| ~ |#
+Lua,--[=[ ~ ]=]
+Lua,--[=…=[ ~ ]=…=]
+Lua,--[[ ~ ]]
+Maple,(* ~ *)
+Maple,<# ~ #>
+Mathematica,(* ~ *)
+MATLAB,%{ ~ %}
+Mercury,/* ~ */
+ML,(* ~ *)
+Modula-2,(* ~ *)
+Modula-3,(* ~ *)
+Mustache,{{! ~ }}
+Newspeak,(* ~ *)
+Nim,#[ ~ ]#
+Nunjucks,{# ~ #}
+Oberon,(* ~ *)
+Object Pascal,(* ~ *)
+Object Pascal,{ ~ }
+Objective-C,/* ~ */
+OCaml,(* ~ *)
+Oz,/* ~ */
+Pascal,(* ~ *)
+Pascal,{ ~ }
+Perl,=begin ~ =cut
+Perl,=pod ~ =cut
+Perl6,#[ ~ ]
+Perl6,=pod ~ =cut
+PHP,/* ~ */
+Pike,/* ~ */
+PL/I,/* ~ */
+PLZ/SYS,! ~ !
+PowerShell,<# ~ #>
+Prolog,/* ~ */
+Python,""" ~ """
+Python,''' ~ '''
+R,<# ~ #>
+Racket,#| ~ |#
+Raku,#`( ~ )
+Raku,#`< ~ >
+Raku,#`[ ~ ]
+Raku,#`{ ~ }
+Raku,#`{{ ~ }}
+Rebol,comment [ ~ ]
+Rebol,comment { ~ }
+Red,{ ~ }
+Rexx,/* ~ */
+Ruby,=begin ~ =end
+Rust,/* ~ */
+S-Lang,#<TAG> ~ #</TAG>
+S-Lang,#if !true ~ #endif
+S-Lang,#if false ~ #endif
+S-Lang,#iffalse ~ #endif
+S-Lang,#ifntrue ~ #endif
+S-Lang,#stop ~ EOF
+SAS,/* ~ */
+SASS,/* ~ */
+Scala,/* ~ */
+Scheme,#| ~ |#
+Seed7,(* ~ *)
+SIMULA,comment ~ ;
+Smalltalk," ~ "
+Smarty,(* ~ *)
+SQL,/* ~ */
+Standard ML,(* ~ *)
+Swift,/* ~ */
+Tcl,<# ~ #>
+Twig,{# ~ #}
+Visual Prolog,/* ~ */
+Wolfram Language,(* ~ *)
+XML,<!-- ~ -->
+YCP,/* ~ */
+Yorick,/* ~ */
diff --git a/index.php b/index.php
new file mode 100644
index 0000000000000000000000000000000000000000..d23eaa005bf1e1647ae1c55b5a6b9a23e5e43151
--- /dev/null
+++ b/index.php
@@ -0,0 +1,84 @@
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="robots" content="noindex,nofollow">
+ <meta name="referrer" content="no-referrer">
+ <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+ <meta http-equiv="Pragma" content="no-cache">
+ <meta http-equiv="Expires" content="0">
+ <meta name="author" content="Simpel">
+ <meta name="copyright" content="MIT 2021 Simpel">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes user-scalable=no">
+ <title>Comment Syntax</title>
+ <link rel="stylesheet" href="style.css">
+ </head>
+ <body>
+ <header>
+ <nav>
+ <h1>Comment Syntax</h1>
+ <a id="logo" class="cursordefault" href="/"><img src="../Simpel.png" alt="simpel icon" height="48" width="48"></a>
+ <a id="github" href="https://github.com/SimpelMe/comment-syntax-finder" target="_blank" title="watch source code">
+ <img id="github-cat" src="../github-cat-white.png" alt="github logo">
+ </a>
+ </nav>
+ </header>
+ <main>
+ <div>
+ <label for="searchinput">Search language or comment syntax:</label>
+ <input type="text" id="searchinput" onkeyup="searchSyntax()" title="Type in a scripting language or comments syntax" placeholder="search string …" autofocus>
+ <table id="resulttable">
+ <thead>
+ <tr>
+ <th>programming / scripting language</th>
+ <th>comments syntax (~ represents text)</th>
+ </tr>
+ </thead>
+ <tbody>
+ <?php
+ $file = fopen("comments.csv", "r");
+ // Fetching data from csv file row by row
+ while (($data = fgetcsv($file)) !== false) {
+ // HTML tag for placing in row format
+ echo "<tr>";
+ foreach ($data as $i) {
+ echo "<td>" . htmlspecialchars($i, ENT_QUOTES, 'UTF-8', false) . "</td>";
+ }
+ echo "</tr> \n";
+ }
+ fclose($file);
+ ?>
+ </tbody>
+ </table>
+ </div>
+ </main>
+ <footer>
+ <p>sources:</p>
+ <ul>
+ <li class="source"><a href="https://en.wikipedia.org/wiki/Comparison_of_programming_languages_(syntax)" target="_blank">en.wikipedia.org/wiki/Comparison_of_programming_languages_(syntax)</a></li>
+ <li class="source"><a href="http://rigaux.org/language-study/syntax-across-languages/Vrs.html" target="_blank">rigaux.org/language-study/syntax-across-languages/Vrs.html</a></li>
+ </ul>
+ </footer>
+ </body>
+ <script>
+ function searchSyntax() {
+ var input, filter, table, tr, tdOne, tdTwo, i, txtValue;
+ input = document.getElementById("searchinput");
+ filter = input.value.toUpperCase();
+ table = document.getElementById("resulttable");
+ tr = table.getElementsByTagName("tr");
+ for (i = 0; i < tr.length; i++) {
+ tdOne = tr[i].getElementsByTagName("td")[0];
+ tdTwo = tr[i].getElementsByTagName("td")[1];
+ if (tdOne || tdTwo) {
+ txtValue = tdOne.innerText;
+ txtValue += tdTwo.innerText;
+ if (txtValue.toUpperCase().indexOf(filter) > -1) {
+ tr[i].style.display = "";
+ } else {
+ tr[i].style.display = "none";
+ }
+ }
+ }
+ }
+ </script>
+</html>
diff --git a/screenshot.png b/screenshot.png
new file mode 100644
index 0000000000000000000000000000000000000000..7214b6410a8433bea80a21a41a0227d002bcbb57
Binary files /dev/null and b/screenshot.png differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..45df2c8b35ed93107d4fd969dcfd774de76c6c21
--- /dev/null
+++ b/style.css
@@ -0,0 +1,146 @@
+body {
+ min-height: 50vh;
+ font-family: helvetica, Arial, sans-serif;
+ font-size: 2vmin;
+ background-color: #555;
+ color: white;
+ margin: 3vmin 4vmin 2vmin 4vmin;
+}
+
+/* iPad portait */
+@media (max-width: 768px) {
+ body {
+ font-size: 3vmin;
+ }
+}
+
+/* iPhone landscape only */
+@media (max-width: 568px) {
+ body {
+ font-size: 4vmin;
+ }
+}
+
+/* iPhone portait only */
+@media (max-width: 320px) {
+ body {
+ font-size: 4vmin;
+ }
+}
+
+a {
+ color: #ffffff;
+ text-decoration: none;
+}
+
+h1 {
+ padding-left: 60px;
+ line-height: 52px;
+ margin-top: 3vmin;
+}
+
+#logo {
+ float: left;
+ position: absolute;
+ top: 3vmin;
+}
+
+#github {
+ position: absolute;
+ top: 3.3vmin;
+ right: 4vmin;
+}
+
+#github-cat {
+ height: 4vh;
+}
+
+main {
+ justify-content: center;
+ display: flex;
+}
+
+label, input, button, select {
+ display: block;
+}
+
+button, input, select {
+ font-size: medium;
+ height: 2.5em;
+ margin-top: 0.2em;
+ padding: 5px 10px;
+ color: white;
+ border: 2px solid;
+ cursor: pointer;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+}
+
+/* makes input listening to height so input and select have the same height */
+input, select {
+ color: #333;
+ border-color: white;
+ background-color: white;
+ box-sizing: border-box;
+}
+
+input[type="text"], select {
+ width: 70ch;
+ max-width: calc(100vw - 8vmin);
+}
+
+table {
+ font-size: medium;
+ border: 1px solid white;
+ margin-top: 2vmin;
+ width: 70ch;
+ max-width: calc(100vw - 8vmin);
+ border-collapse: collapse;
+}
+
+table, td, th{
+ padding-left:10px;
+ padding-top:10px;
+ padding-bottom:10px;
+}
+
+tr:nth-child(even) {
+ background-color:#555;
+}
+
+tr:nth-child(odd) {
+ background-color:#555;
+}
+
+tr, th {
+ border-bottom: 1px solid white;
+}
+
+tr:last-child {
+ border-bottom: none;
+}
+
+td:first-child, th:first-child {
+ border-right: 1px solid white;
+}
+
+th {
+ text-align: left;
+ background-color: #444444;
+}
+
+th, td {
+ width: 35ch;
+}
+
+footer {
+ margin: auto;
+}
+
+.source a {
+ word-break: break-all;
+}
+
+.source a:hover {
+ text-decoration: underline;
+}