*

rekkabell · Oct 14, 2024 · bd70280 · bd70280
1 parent 8ed5e97
commit bd70280
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -17,15 +17,19 @@
 <header>
     <div id='wrap'>
        <img src='media/content/rabbit_main.jpg' alt='sailings in root vegetable-shaped sailboats on the ocean, they are talking to each other via a series of flags. A turnip-shaped boat has an anthropomorphic rabbit sailor aboard, and a human, the other is too far to make out'>
-        <!-- <a class='handflags' alt="hand flags" title="hand flags" href="site/handflags.html">
-          <span>Hand flags</span></a> -->
+        <a class='flagsignaling1' alt="signaling with flags" title="signaling with flags" href="site/flag_signaling.html">
+          <span>Quebec Romeo One</span></a>
+        <a class='flagsignaling2' alt="signaling with flags" title="signaling with flags" href="site/flag_signaling.html">
+          <span>Answering pennant</span></a>
   </div>
-  <!-- <style>
+  <style>
+    #wrap { max-width:100vw;position:relative;width:100%;margin:0 auto }
     #wrap span { text-indent:-9999px }
     #wrap a { display:block;position:absolute }
     #wrap a * { display:none }
-    #wrap a.handflags {width: 7%;height: 24%;top: 27%;left: 28%;}
-  </style>  -->
+    #wrap a.flagsignaling1 {width: 10%;height: 24%;top: 27%;left: 17%;}
+     #wrap a.flagsignaling2 {width: 14%;height: 24%;top: 7%;left: 51%;}
+  </style> 
   <img src='media/interface/title.png' alt='Rabbit Waves' class='title'>
   <img src='media/interface/soon.jpg' alt='soon' class='title'>
 </header>

diff --git a/media/content/2024_handflag_intro.jpg b/media/content/2024_handflag_intro.jpg
diff --git a/media/content/2024_handflags_howto.jpg b/media/content/2024_handflags_howto.jpg
diff --git a/media/content/2024_howtosignal_flags.jpg b/media/content/2024_howtosignal_flags.jpg
diff --git a/media/content/2024_japanese_semaphore.jpg b/media/content/2024_japanese_semaphore.jpg
diff --git a/media/content/2024_notunderstand_flags.jpg b/media/content/2024_notunderstand_flags.jpg
diff --git a/media/content/2024_otherlanguages_ics.jpg b/media/content/2024_otherlanguages_ics.jpg
diff --git a/media/content/2024_signaling_intro.jpg b/media/content/2024_signaling_intro.jpg
diff --git a/media/content/semaphore_anim.gif b/media/content/semaphore_anim.gif
diff --git a/media/docs/ics_pub102bk.pdf b/media/docs/ics_pub102bk.pdf
diff --git a/media/docs/semaphore_history.pdf b/media/docs/semaphore_history.pdf
diff --git a/site/flag_signaling.html b/site/flag_signaling.html
@@ -15,38 +15,81 @@
 </head>
 <body>
 <header>
-    <a href="../index.html"><img src='../media/interface/title.png' alt='Rabbit Waves' class='title'></a>
+    <a href="../index.html"><img src='../media/interface/title.png' loading='lazy' alt='Rabbit Waves' class='title'></a>
 </header>
 <main>
+
+<div id='wrap'>
+  <img src='../media/content/2024_signaling_intro.jpg'>
+    <p class='noprint'>The International Code of Signals is a system of signals and codes designed to communicate important safety and navigational messages when speaking is difficult (because of language barriers, distance, etc). A standardized alphabet was created (see below image), along with a spoken word form for each one, designed to set apart similar-sounding letters like B, V and D. Each letter/numeral was assigned a flag:</p>
+    <a class='ics' alt="international code of signals PDF - 40 MB" title="international code of signals PDF - 40 MB" href="../media/docs/ics_pub102bk.pdf" target="_blank">
+          <span>International Code of Signals PDF</span></a>
+</div>
+  <style>
+    #wrap { max-width:100vw;position:relative;width:100%;margin:0 auto }
+    #wrap span { text-indent:-9999px }
+    #wrap a { display:block;position:absolute }
+    #wrap a * { display:none }
+    #wrap a.ics {width: 44%;height: 10%;top: 5%;left: 7%;}
+  </style> 
 
-  <img src='../media/content/2024_phonetic_alphabet.jpg' alt='a complete list of the flags that represent each letter of the phonetic alphabet, each word has a pronounciation guide'>
+  <img src='../media/content/2024_phonetic_alphabet.jpg' loading='lazy' alt='a complete list of the flags that represent each letter of the phonetic alphabet, each word has a pronounciation guide'>
     <p class='noprint'>Phonetic Alphabet. Alfa : Al fah, Bravo : Brah voh, Charlie : Char Lee, Delta : Dell tah, Echo : Eck oh, Foxtrot : Foks trot, Golf, Hotel : Hoh tel, India : In dee ah, Juliet : Jee lee ett, Kilo : Key loh, Lima : Lee mah, Mike, November : Novem ber, Oscar : Oss cah, Papa: Pah pah, Quebec : Keh Beck, Romeo : Row me oh, Sierra : See air rah, Tango : Tan go, Uniform : Oo nee form, Victor : Vik tah, Whiskey : Wiss key, X-ray : Ecks ray, Yankee : Yang kee, Zulu : Zoo loo, 1st substitute, 2nd substitute, 3rd substitute, Answering penant or decimal point, 1 : Unaone : Oo nah wun, 2 : Bissotwo : Bee soh too, 3 : Terratree : Tay rah tree, 4 : Kartefour : Kar tay fower, 5 : Pantafive : Pan tah five, 6 : Soxisix : Sok see six, 7 : Setteseven : Say tay seven, 8 : Oktoeight : Ok toh ait, 9 : Novenine : No vay niner, 0 : Nadazero : Nah dah zay roh</p>
 
- <img src='../media/content/2024_assigned_meanings_handflags.jpg' alt='instructions on the different ways to use signal flags'>
+ <img src='../media/content/2024_assigned_meanings_handflags.jpg' loading='lazy' alt='instructions on the different ways to use signal flags'>
   <p class='noprint'>To save time when signaling, each flag has an assigned meaning to communicate very urgent or common messages. When used alone, the Oscar flag means "man overboard." When paired in twos, flags take on more specific meanings. For example, the Uniform and Whiskey flags used together in that order mean "I wish you a pleasant voyage." Numerals appended to two flags permit for more detailed messages, for example: The Quebec flag paired with the Romeo flags and the 1 number flag means "Can I come alongside?" Three letter signals that begin with Mike are reserved to communicate medical emergencies, for example: Mike followed by Alpha and then by a 2nd substitute flag is code for "I request urgent medical advice."</p>
 
-  <img src='../media/content/2024_substitute_handflags.jpg' alt='instructions on how to use substitute flags'>
+  <img src='../media/content/2024_substitute_handflags.jpg' loading='lazy' alt='instructions on how to use substitute flags'>
     <p class='noprint'>The title reads: Substitutes. To avoid having to carry multiple flags of the same signal, the ICS(international code of signals) uses 3 substitute flags. A substitute flag repeats the one at the indicated position. A drawing shows 3 flags for the 3 substitute flags. An example shows how to signal DD, which is to fly the flag signal Delta followed by the 1st substitute flag. DD means: "boats are not allowed to come alongside."</p>
 
-  <img src='../media/content/2024_spelling_handflags.jpg' alt='instructions on how to spell using flags'>
+  <img src='../media/content/2024_spelling_handflags.jpg' loading='lazy' alt='instructions on how to spell using flags'>
     <p class='noprint'>Single letter flags, like Kilo, are used to spell out words. An example shows how to spell the boat named Pino, using the following flags: Papa, India, November and Oscar. A title reads "Spelling", followed by: To begin spelling, hoist the Yankee and Zulu flags, which means, "The words which follow are in plain language." An example spells out the name Nastya using the following flags: November, Alpha, Sierra, Tango, Yankee and the 2nd substitute flag.</p>
 
-  <img src='../media/content/2024_otherlanguages_ics.jpg' alt='an example on how the ICS signals are used to communicate with others who do not speak the same language as you'>
+<div id='wrap'>
+  <img src='../media/content/2024_otherlanguages_ics.jpg' loading='lazy' alt='an example on how the ICS signals are used to communicate with others who do not speak the same language as you'>
     <p class='noprint'>One practical use of the International Code of Signals(ICS) is that all of the messages are standardized and come in 9 languages: English, French, Italian, German, Japanese, Spanish, Norwegian, Russian and Greek. The signal flag Victor was assigned "I require assistance" as a coded meaning. Under this, is illustration featuring a conversation betweeo a spectacled guillemot and a herring gull. The spectacled guillemot speaks Japanese, while the herring gull speaks Russian. The guillemot is yelling "Tasukete!" but the herring gull does not understand. The guillemot then yells out the coded meaning for Victor, "ビクター! ビクター(Bikutaa! Bikutaa!)" The herring gull understood this, and says Я понимаю (Ya ponimayu, to mean "I understand").</p>
+    <a class='ics2' alt="international code of signals PDF - 40 MB" title="international code of signals PDF - 40 MB" href="../media/docs/ics_pub102bk.pdf" target="_blank">
+          <span>International Code of Signals PDF</span></a>
+</div>
 
-  <img src='../media/content/2024_howtosignal_flags.jpg' alt='instructions on how to communicate with signal flags'>
+  <style>
+    #wrap { max-width:100vw;position:relative;width:100%;margin:0 auto }
+    #wrap span { text-indent:-9999px }
+    #wrap a { display:block;position:absolute }
+    #wrap a * { display:none }
+    #wrap a.ics2 {width: 58%;height: 10%;top: 3%;left: 9%;}
+  </style> 
+
+  <img src='../media/content/2024_howtosignal_flags.jpg' loading='lazy' alt='instructions on how to communicate with signal flags'>
     <p class='noprint'>The title reads, How to communicate with another vessel using flags. One: A murrelet raises a Kilo flag to mean "I wish to communicate with you." Two: The herring gull raises an answering pennant to mean that the signal was understood. Three: The murrelet raises a Romeo flag followed by a Foxtrot flag, to mean "Will you lead me to a safe anchorage?" Four: The herring gull raises an answering pennant to mean that the signal was understood. Five: The herring gull raises a Charlie flag to mean "Affirmative." Six: The murrelet raises  an answering pennant to mean that the signalling is now over. Seven: The herring gull raises an answering pennant to mean that the signal was understood.</p>
 
-  <img src='../media/content/2024_notunderstand_flags.jpg' alt='instructions on how to communicate with signal flags that a signal was not understood'>
+  <img src='../media/content/2024_notunderstand_flags.jpg' loading='lazy' alt='instructions on how to communicate with signal flags that a signal was not understood'>
     <p class='noprint'>If the message is not understood, keep the answering pennant up. A drawing shows two birds on separate boats, the herring gull did not understand the murrelet's message and has kept the answering pennant up. Another way to signal that the message was not understood is to fly the Zulu and Lima flags, to mean "your signal has been received but not understood."</p>
+
+<div id='wrap'>
+  <img src='../media/content/2024_handflag_intro.jpg' loading='lazy' alt='a rabbit waving a pair of oscar hand flags to initiate a conversation with another sailor by semaphore flags'>
+    <p class='noprint'>A rabbit waving a pair of oscar hand flags to initiate a conversation with another sailor by semaphore flags.</p>
+    <a class='flagsemaphore1' alt="hand flag semaphore" title="hand flag semaphore" href="handflags.html">
+          <span>Hand flag semaphore</span></a>
+    <a class='flagsemaphore2' alt="hand flag semaphore" title="hand flag semaphore" href="handflags.html">
+          <span>Hand flag semaphore</span></a>
+</div>
+  <style>
+    #wrap { max-width:100vw;position:relative;width:100%;margin:0 auto }
+    #wrap span { text-indent:-9999px }
+    #wrap a { display:block;position:absolute }
+    #wrap a * { display:none }
+    #wrap a.flagsemaphore1 {width: 42%;height: 31%;top: 10%;left: 8%; }
+    #wrap a.flagsemaphore2 {width: 26%;height: 31%;top: 31%;left: 58%; }
+  </style> 
 </main>
 </body>
 <footer>
     <div id='wrapfooter'>
-      <img src='../media/interface/footer.jpg' alt='hundredrabbits | copyright 2024 BY-NC-SA 4.0'>
-        <a class='hundredrabbits' alt="100r.co" title="100r.co" href="https://100r.co">
+      <img src='../media/interface/footer.jpg' loading='lazy' alt='hundredrabbits | copyright 2024 BY-NC-SA 4.0'>
+        <a class='hundredrabbits' alt="100r.co" title="100r.co" href="https://100r.co" target="_blank">
           <span>100r.co</span></a>
-        <a class='license' alt="BY-NC-SA 4.0" title="license" href="https://github.com/rekkabell/rabbitwaves">
+        <a class='license' alt="BY-NC-SA 4.0" title="license" href="https://github.com/rekkabell/rabbitwaves" target="_blank">
           <span>license</span></a>
   </div>
   <style>

diff --git a/site/handflags.html b/site/handflags.html
@@ -15,24 +15,59 @@
 </head>
 <body>
 <header>
-    <a href="../index.html"><img src='../media/interface/title.png' alt='Rabbit Waves' class='title'></a>
+    <a href="../index.html"><img src='../media/interface/title.png' loading ='lazy' alt='Rabbit Waves' class='title'></a>
 </header>
 <main>
+
+<div id='wrap'>
+  <img src='../media/content/2024_handflags_howto.jpg' loading ='lazy' alt='a guide on the uses and ways to use hand flag to communicate from afar'>
+    <a class='oscar' alt="oscar flag" title="oscar flag" href="flag_signaling.html">
+          <span>oscar</span></a>
+    <a class='papa' alt="papa flag" title="papa flag" href="flag_signaling.html">
+          <span>papa</span></a>
+    <a class='history' alt="sempahore history PDF - 4 MB" title="sempahore history PDF - 4 MB" href="../media/docs/semaphore_history.pdf">
+          <span>papa</span></a>
+    <p class='noprint'>Flag semaphore is a way of communicating at a distance by using hand flags. Information - such as the letters of the alphabet, numerals, etc - are encoded by the position of the flags. At sea, the Oscar flag acts as a signaling flag (on land, it's the Papa flag). To start signaling letters, signal J. To start signaling numerals, signal the hand flag position for numerals. To request permission to start a transmission, signal the "attention" signal(which doubles as the error signal). The one receiving the signal uses the "ready to receive a signal" flag position, which consists of raising the two flags overhead, then to drop them to the rest position (only once). The one receiving the signals ends the transmission with the same "ready to receive" flag signal. The one receiving the signal can then reply with the "attention" signal to make a reply. At night lighted wants replace the hand flags. It's also possible to signal using your arms only, but signals are easier to read with flags.</p>
+  <style>
+    #wrap { max-width:100vw;position:relative;width:100%;margin:0 auto }
+    #wrap span { text-indent:-9999px }
+    #wrap a { display:block;position:absolute }
+    #wrap a * { display:none }
+    #wrap a.oscar {width: 12%;height: 2%;top: 2%;left: 24%}
+    #wrap a.papa {width: 11%;height: 2%;top: 2%;left: 64%;}
+    #wrap a.history {width: 62%;height: 3%;top: 4%;left: 34%;}
+  </style>   
+<div id='wrap'>
 
-  <img src='../media/content/2024_semaphore.jpg' alt='rabbits waving two hand flags in 27 different positions to indicate the letters of the alphabet, including a position to indicate the need for a space between words'>
+  <img src='../media/content/2024_semaphore.jpg' loading ='lazy' alt='rabbits waving two hand flags in 27 different positions to indicate the letters of the alphabet, including a position to indicate the need for a space between words'>
 
-   <img src='../media/content/semaphore_anim.gif' alt='rabbits waving two hand flags in 27 different positions to indicate the letters of the alphabet, including a position to indicate the need for a space between words'>
+   <img src='../media/content/semaphore_anim.gif' loading ='lazy' alt='rabbits waving two hand flags in 27 different positions to indicate the letters of the alphabet, including a position to indicate the need for a space between words'>
 
-  <img src='../media/content/2024_morse_handflags.jpg' alt='rabbits showing the positions to communicate morse with hand flags'>
+<div id='wrap'>
+  <img src='../media/content/2024_japanese_semaphore.jpg' loading ='lazy' alt='a description of how the japanese sephamore system works'>
+   <a class='japanesesemaphore' alt="japanese semaphore" title="japanese semaphore" href="https://en.wikipedia.org/wiki/Flag_semaphore#Japanese_semaphore" target="_blank">
+          <span>Japanese Semaphore</span></a>
+    <p class='noprint'>The Japanese devised their own semaphore system adapted to fit their writing system which has way more characters than the Latin alphabet. Most characters require two flag positions to complete(an image of the two flag signals for the Japanese character A)... some require three(an image of the three flag signals for the Japanese character HO). When signaling the motion describes the angles of the brush strokes used when writing, it also takes the order of the strokes into account. Below the text is a graphic of an example of stroke order for the Japanese characters A and HO.</p>
+  <style>
+    #wrap { max-width:100vw;position:relative;width:100%;margin:0 auto }
+    #wrap span { text-indent:-9999px }
+    #wrap a { display:block;position:absolute }
+    #wrap a * { display:none }
+    #wrap a.japanesesemaphore {width: 66%;height: 3%;top: 0%;left: 16%;}
+  </style>   
+<div id='wrap'>
+
+  <img src='../media/content/2024_morse_handflags.jpg' loading ='lazy' alt='rabbits showing the positions to communicate morse with hand flags'>
     <p class='noprint'>Morse signaling by hand flags or arms : dash, dot, separation of dots and dashes, separation of letters/groups/words, request for repetition if by the receiving station or erase signals if made by the transmitting station. Allow for enough time between dots and dashes and between letters, groups, or words.</p>
 
-  <img src='../media/content/2024_repeat_handflags.jpg' alt='a murrelet at sea on a carrot-hulled catamaran waving flags in a circle to signal to a rabbit on another boat, the murrelet is requesting for the message to be repeated, the rabbit sees this and says that they are going to repeat the message with hand flags'>
+  <img src='../media/content/2024_repeat_handflags.jpg' loading ='lazy' alt='a murrelet at sea on a carrot-hulled catamaran waving flags in a circle to signal to a rabbit on another boat, the murrelet is requesting for the message to be repeated, the rabbit sees this and says that they are going to repeat the message with hand flags'>
     <p class="noprint">a murrelet at sea on a carrot-hulled catamaran waving flags in a circle to signal to a rabbit on another boat, the murrelet is requesting for the message to be repeated, the rabbit sees this and says that they are going to repeat the message with hand flags.</p>
+
 </main>
 </body>
 <footer>
     <div id='wrapfooter'>
-      <img src='../media/interface/footer.jpg' alt='hundredrabbits | copyright 2024 BY-NC-SA 4.0'>
+      <img src='../media/interface/footer.jpg' loading ='lazy' alt='hundredrabbits | copyright 2024 BY-NC-SA 4.0'>
         <a class='hundredrabbits' alt="100r.co" title="100r.co" href="https://100r.co">
           <span>100r.co</span></a>
         <a class='license' alt="BY-NC-SA 4.0" title="license" href="https://github.com/rekkabell/rabbitwaves">