</div>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/09/18/00/40/moon-5580571_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
}
</style>
</div>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/09/18/00/40/moon-5580571_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
}
</style>
Click on the name.
<div id="clickable-text" onclick="changeText()">Tiziri</div>
<script>
function changeText() {
var text = document.getElementById('clickable-text');
if (text.innerHTML === 'Tiziri') {
text.innerHTML = 'Sakina';
text.style.fontFamily = 'Harlow Solid Italic, cursive'; /* Use Harlow font */
text.style.color = 'brown'; /* Change color if needed */
text.style.cursor = 'default'; /* Optional: Change cursor */
} else {
text.innerHTML = 'Tiziri';
text.style.fontFamily = 'initial'; /* Restore default font */
text.style.color = 'black'; /* Restore original color */
text.style.cursor = 'pointer'; /* Restore cursor */
}
}
</script>
Sakina envied people who had special names, ones that held meaning. The logical part of her brain knew that it was just a name, a means of identification, but she could not stop thinking that her name was too plain. That it somehow affected who she was. Her parents would argue that it held meaning as well: Sakina, or calm. She was everything but calm, however. It didn't fit; she would counter. Sakina loathed it even more when she found out she was supposed to be called <em>"Tiziri"</em>, or <em> "moon,"</em> as intended by her grandmother, who liked to say that Sakina brightened up the world with her presence once born. Her parents had decided otherwise, however. It was as if the world already knew she would grow up to be an [[imposter]] to the culture, unworthy of such a name. A foreshadowing of some sort. She missed the name she never had. Missed who she could have been.
<!-- Nothing to see here -->
<div>
<div class="centered-content">
<p>NADA </p>
<p><span style="font-family: Arial;">WALOU</span></p>
<p><span style= "text-decoration: line-through solid ;">NOTHING</span></p>
</div>
(link: "Click Me")[Still Nothing]
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url(" https://cdn.pixabay.com/photo/2017/07/22/20/40/girl-2529907_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style><p> Sakina is now six years old. The age of asking about the world and collecting facts about yourself like clues in a treasure hunt. One fact, in particular, unsettled Sakina : She is told she's Amazigh but doesn't quite understand what that means. When she goes to visit her grandmother, she often speaks a language she doesn't understand either. Grandma calls her <span id="clickable-word">[[ILLI]]</span> or <span class="highlight">"Daughter"</span> as her father translated once.
"Why don't we speak it at home ?" She asked.
"You need to learn French and English. They're the languages that will help you later in life" her dad replied in a knowing tone that left no room for discussion.
Ever since, Sakina had the unsettling feeling that she wouldn't truly know her grandmother unless she learned the language. She knew it sounded <span id="transforming-word">[[BEAUTIFUL]]</span> however...</p><div id="morphingText">
</div>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2017/07/28/10/06/old-age-2548202_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
}
</style><style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2015/09/01/09/33/school-916678_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>
The blackboards of Sakina's school have witnessed many foreign words that soon became familiar. Sometimes more familiar than one's language. Sakina was glad for it, she gained new knowledge and memorized hundreds and hundreds of new words. If only she could converse just as effortlessly with her [[grandmother]]...
[[Time]] passed, and Sakina learned a few words in tamazight. Daily, easy words she would flaunt to her grandmother, who would jokingly laugh at her and then correct her whenever she mispronounced one. Sakina could sense a shift in their relationship—a stronger bond pulling them closer. She came to realize that while changing the language did not change the general meaning, it changed the tone, emotion, context... It was as if she was getting to know her grandmother all over again. There was also news about [[Tamazight]] becoming an official language in the Moroccan school system, and she was happy for the upcoming generations.
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/01/25/15/26/morocco-4792752_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style><style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url(" https://cdn.pixabay.com/photo/2016/08/13/13/45/boy-1590771_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
}
</style>
<div class="centered-content">
<p>You have chosen Ahmed </p>
<p> Ahmed speaks tamazight fluently </p>
<p>[[Ahmed's tamazight inventory]]</p>
</div>{
<!-- Save our response from passage name -->
(set: $responses to it + (a: (passage:)'s name) )
<!-- Save their response -->
(set: $responses to it + (a: "Pretty good. You?") )
<!-- Display the current chat log -->
(display: "Messenger")
}Words hold <em>power</em>
You can find culture in every letter, every sentence, and every <span id="textToDisappear">silence</span>
Language is the <em>tie</em>
It needs to live through <em>today</em> and <em>tomorrow</em>
Through [[ time ]]
</div>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2015/02/03/23/41/paper-623167_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
}
</style>
<script>
setTimeout(function() {
var textElement = document.getElementById('textToDisappear');
//textElement.classList.add('disappear');
}, 6000); // 6000 milliseconds = 3 seconds
</script><style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url(" https://cdn.pixabay.com/photo/2017/07/22/20/40/girl-2529907_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>
<div class="centered-content">
<p> This is the story of Sakina, who once discovered she did not know the words to understand who she was.</p>
<p>Check [[ Sakina's tamazight inventory ]] </p>
<p> [[ Start Sakina's story ]] </p>
</div>
<div class="centered-content">
<p>Welcome to a story about how words and language tie hearts and forge generations.</p>
<p>[[START]]</p>
</div>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/01/25/15/26/morocco-4792752_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style><p id="shrinking-text">
Sakina's grandmother could not remember when people started showing off languages rather than knowledge, or when knowing one language somehow made you more "modern" or "cultured". She couldn't pinpoint the exact moment her own children strayed away from their [[mother tongue]]. Did they realize they were slowly straying away from her too? She wondered and then raised the volume of the TV, hoping the noise of the words would stifle the loudness of her thoughts
</p>
<style>
#shrinking-text {
font-size: 20px; /* Adjust the font size as needed */
}
</style>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url(" https://cdn.pixabay.com/photo/2016/11/21/12/10/tv-1844964_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:160%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style><p id="morphingText">
<span id="word1">Right</span>
<span id="word2" style="display: none;">Answer</span>
</p>
Did you immediately click? Did you hesitate? Why did the mouse hover when your heart knows that a mother's love always comes first? Because words hold <span class="highlight">"[[Power]]"</span>, and if you want your words to hold power as well, they need to be spoken in a language that will be heard.
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url(" https://cdn.pixabay.com/photo/2015/02/01/15/50/hand-619733_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:100%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>Tamazight should not be :
<div id="wordContainer" style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;">
<a id="wordLink" style="font-size: 10vw;" onclick="morphWord()">FORGOTTEN</a>
</div>
<script>
var clicks = 0;
var words = [ "FORGOTTEN", "ENDANGERED", ""];
function morphWord() {
var wordLink = document.getElementById("wordLink");
clicks++;
if (clicks < words.length) {
wordLink.innerText = words[clicks];
} else {
}
}
</script>
It needs to be <em> revived </em>...
[[ NEXT ]]
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/01/25/15/26/morocco-4792752_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style><p id="morphingText">
<span id="word1">Wrong</span>
<span id="word2" style="display: none;">Answer</span>
</p>
<p> Sakina came the realization that while some decisions you make consciously. Others... [[the world]] makes for you. The world decides which languages live and which die, slowly *fading away* in the background.</p>
<tw-sidebar>
<style>
.yellow-italic {
color: yellow;
font-style: italic;
}
</style>
</tw-sidebar>
<tw-sidebar>
<style>
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
.fade {
animation: fadeOut 3s linear forwards;
}
</style>
</tw-sidebar>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2019/02/09/22/21/books-3986091_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>
Sakina thought the feeling would fade away, but this lack of [[identity]] followed her throughout the years and was particularly overwhelming on the day of her wedding. A day full of <em>tradition</em> and <em> culture </em>. The <span id="crimson-word">jewelry</span>, <span id="crimson-word">dresses</span>, <span id="crimson-word">songs</span>, <span id="crimson-word"> dances</span>, <span id="crimson-word">food</span>... They all held meaning. But why did they seem to be meant for <em> someone else</em> ?
<style>
#crimson-word {
color: crimson;
}
</style>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://img.freepik.com/free-photo/mehndi-wedding-ornament-hands-drawn-by-henna_8353-9769.jpg?t=st=1718841327~exp=1718844927~hmac=e1a8cc4aa61162701d7b547863661fdac689001777d1b7d18e0d4a627c4ca4fd&w=900");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:100%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>
At the age of seventy, Sakina’s grandmother grew terribly ill. Bedridden but still full of life, she spent hours upon hours talking with Sakina, recounting tales, stories of her childhood and recipes that needed to survive well after she left. All the while, she would teach her granddaughter new words in Tamazight. Words morphed into sentences and sentences into conversations. Three months after being diagnosed, Sakina's grandmother passed away, but she was still living through <em>each</em> and <em>every</em> word she taught her.
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/01/25/15/26/morocco-4792752_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style><style>
/* Define styles for the text animation */
.animated-text {
position: relative;
font-size: 24px; /* Initial font size */
font-family: Arial, sans-serif; /* Change font family as needed */
text-align: center;
}
.hidden {
display: none;
}
.animate-appear {
animation: appear-animation 1s forwards;
}
.animate-disappear {
animation: disappear-animation 1s forwards;
}
@keyframes appear-animation {
0% { font-size: 24px; } /* Initial font size */
100% { font-size: 48px; } /* Font size after animation */
}
@keyframes disappear-animation {
0% { opacity: 1; }
100% { opacity: 0; }
}
</style>
<div id="animation-container">
<span id="text-who" class="animated-text">who</span>
<span id="text-am" class="animated-text hidden">Am</span>
<span id="text-i" class="animated-text hidden">I</span>
<span id="text-who-am-i" class="animated-text hidden">Who Am I</span>
</div>
<script>
/* JavaScript to control the animation */
setTimeout(function() {
//document.getElementById('text-who').classList.add('animate-disappear');
//document.getElementById('text-am').classList.remove('hidden');
//document.getElementById('text-am').classList.add('animate-appear');
}, 2000); // Delay the appearance of 'Am' after 2 seconds
setTimeout(function() {
//document.getElementById('text-am').classList.add('animate-disappear');
//document.getElementById('text-i').classList.remove('hidden');
//document.getElementById('text-i').classList.add('animate-appear');
}, 4000); // Delay the appearance of 'I' after 'Am' animation
setTimeout(function() {
//document.getElementById('text-i').classList.add('animate-disappear');
//document.getElementById('text-who-am-i').classList.remove('hidden');
//document.getElementById('text-who-am-i').classList.add('animate-appear');
}, 6000); // Delay the appearance of 'Who Am I' after 'I' animation
</script>
Comparison and envy are two particularly recurring themes in our main character’s story.Overwhelming wistfulness consumed her at times, whenever she encountered people who were more in tune with their culture. The one she felt so detached and far away from. Sakina would proudly say she was Amazigh, to whoever asked. But deep down, she felt like an imposter. How could she be part of this beautiful culture? She, who barely spoke a few words of the [[language]]? Maybe Tiziri could have stood a chance. After all, people with meaningful names often live meaningful lives.
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url(" https://cdn.pixabay.com/photo/2015/02/01/15/50/hand-619733_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:100%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>Tiziri came to the world on a Friday night. Outside the hospital window, a full moon illuminated the sky. The kind you couldn't help but stop and marvel at. Sakina, ever the perfectionist, could not decide on a name for her daughter. How could she find a name that fit a person she had never met?
And yet, after one look at her, a name she had long forgotten visited her once again. This time not to torment her, but to remind her how far she had come. She had fought the odds, won her eternal dilemma between mother and tongue. Her daughter would not have to <span id="crimson-word">choose</span>. She would never have to feel like an <span id="crimson-word">imposter</span>.
<style>
#crimson-word {
color: crimson;
}
</style>
<em> THE END </em>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2022/04/05/19/34/motherhood-7114294_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style><!-- Clock passage in Twine 2.0 -->
<div id="clock-container">
<div class="clock">
<!-- Hour markers -->
<div class="hour" style="transform: rotate(30deg);">Stories</div>
<div class="hour" style="transform: rotate(60deg);">die</div>
<div class="hour" style="transform: rotate(90deg);">when</div>
<div class="hour" style="transform: rotate(120deg);">there</div>
<div class="hour" style="transform: rotate(150deg);">is</div>
<div class="hour" style="transform: rotate(180deg);">no</div>
<div class="hour" style="transform: rotate(210deg);">one</div>
<div class="hour" style="transform: rotate(240deg);">to</div>
<div class="hour" style="transform: rotate(270deg);">hear</div>
<div class="hour" style="transform: rotate(300deg);">and</div>
<div class="hour" style="transform: rotate(330deg);">speak</div>
<div class="hour" style="transform: rotate(0deg);">Them</div>
<!-- Clock hands -->
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
</div>
</div>
<script>
// JavaScript for clock animation
function updateClock() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
// Calculate rotations
const hourRotation = (hours % 12) * 30 + minutes / 2; // 30 degrees per hour, 0.5 degrees per minute
const minuteRotation = minutes * 6 + seconds / 10; // 6 degrees per minute, 0.1 degrees per second
// Apply rotations
//hourHand.style.transform = `rotate(${hourRotation}deg)`;
//minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
}
// Update clock every second
setInterval(updateClock, 1000);
// Initial call to update clock immediately when page loads
updateClock();
</script>
<style>
/* CSS styles for the clock (unchanged) */
#clock-container {
display: flex;
justify-content: center;
align-items: center;
height: 400px; /* Adjust size as needed */
}
.clock {
position: relative;
width: 300px; /* Adjust size as needed */
height: 300px; /* Adjust size as needed */
border: 2px solid black;
border-radius: 50%;
}
.hour {
position: absolute;
font-size: 12px;
font-weight: bold;
transform-origin: 50% 100%;
text-align: center;
width: 100%;
transform: rotate(0deg);
}
.hand {
position: absolute;
background-color: black;
transform-origin: 50% 100%;
}
.hour-hand {
width: 4px; /* Hour hand width */
height: 100px; /* Hour hand length */
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
}
.minute-hand {
width: 2px; /* Minute hand width */
height: 140px; /* Minute hand length */
top: 50%;
left: 50%;
transform: translate(-50%, -140%);
}
</style>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2018/12/08/20/12/watch-3863887_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>
<p> Click on the word, and it will tell you about <span class="highlight">indefinite love</span> and <span class="highlight">loyalty</span>. But as indefinite as love may be, life is not. So our [[ story ]] continues...
</div>
<div id="wordContainer" style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;">
<a id="wordLink" style="font-size: 10vw;" onclick="morphWord()">I L L I</a>
</div>
<script>
var clicks = 0;
var words = ["intergenerational", "Love", "loyalty", "indefinitely"];
function morphWord() {
var wordLink = document.getElementById("wordLink");
clicks++;
if (clicks < words.length) {
wordLink.innerText = words[clicks];
} else {
}
}
</script>
<div class="centered-content">
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/01/25/15/26/morocco-4792752_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style><style>
/* Define styles for bouncing words */
.bouncing-word {
position: absolute;
font-size: 18px; /* Initial font size */
font-family: Arial, sans-serif; /* Change font family as needed */
color: yellow; /* Initial color */
animation: bounce-animation 3s infinite alternate; /* Bounce animation */
}
@keyframes bounce-animation {
0% { left: 0; }
100% { left: calc(100% - 150px); } /* Adjust based on your screen width */
}
/* Style for the final sentence */
#final-sentence {
position: relative;
font-size: 20px; /* Initial font size */
color: red; /* Color of the sentence */
text-align: center;
display: none; /* Initially hidden */
}
/* Animation for popping out words */
@keyframes pop-out-animation {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<div id="words-container">
<!-- JavaScript will generate 43 div elements with class 'bouncing-word' -->
</div>
<div id="final-sentence" class="hidden">
All these languages are [[endangered]].
</div>
<script>
/* JavaScript to create bouncing words */
var wordsContainer = document.getElementById('words-container');
var finalSentence = document.getElementById('final-sentence');
// List of words to display
var words = [
'Judesmo', 'Korandje', 'Shenwa', 'tagargrent', 'tamahaq', 'tamazight', 'Awjila', 'tasnusit',
'tayurayt', 'taznatit', 'tidikelt', 'tugurt', 'Bolo', 'tchumbuli', 'Danisi', 'kua', 'Taa',
'Yeyi', 'Gui', 'Xaise', 'Pana', 'Ngombe', 'Geme', 'Besme', 'Maslam', 'Yasa', 'Dahalaak',
'Xiri', 'Parya', 'Rushani', 'Talysh', 'Amba', 'Cobiana', 'Bandial', 'somiev', 'jilbe'
];
// Function to generate random top position
function getRandomTop() {
return Math.floor(Math.random() * 80) + '%'; // Random top position
}
// Generate bouncing words
for (var i = 0; i < words.length; i++) {
var word = document.createElement('div');
word.textContent = words[i];
word.className = 'bouncing-word';
word.style.top = getRandomTop(); // Random top position
word.style.animationDelay = Math.random() * 3 + 's'; // Random delay for animation
wordsContainer.appendChild(word);
}
// After 20 seconds, hide bouncing words and show final sentence
setTimeout(function() {
var bouncingWords = document.getElementsByClassName('bouncing-word');
for (var i = 0; i < bouncingWords.length; i++) {
bouncingWords[i].style.display = 'none';
bouncingWords[i].style.animation = 'pop-out-animation 1s forwards ' + (i * 0.1) + 's'; // Delay each word
}
finalSentence.classList.remove('hidden');
finalSentence.style.display = 'block';
finalSentence.style.animation = 'pop-out-animation 1s forwards';
}, 20000); // Delay before showing final sentence (20 seconds)
</script>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2022/10/09/20/16/globe-7510104_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>
A language is more than [[words]] or sentences or letters it is :
<!-- Styling for crimson color -->
<style>
.crimson {
color: crimson;
}
.fade-in {
animation: fadeIn 1s ease-in-out forwards;
}
.fade-out {
animation: fadeOut 1s ease-in-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
<!-- Starting passage -->
<div id="textContainer">
<div id="phrase" class="crimson fade-in">ENDANGERED LANGUAGE</div>
</div>
<script>
$(document).ready(function() {
var words = [
"CULTURE", "HERITAGE", "VALUES", "LIFESTYLE",
"POETRY", "PROSE", "LITERATURE", "MUSIC",
"ARTS", "CUSTOMS", "TRADITIONS", "FASHION"
];
function displayWords(index) {
if (index >= words.length) return;
var word = words[index];
var element = $('<div class="crimson fade-in">' + word + '</div>');
$('#textContainer').append(element);
setTimeout(function() {
element.addClass('fade-out');
setTimeout(function() {
element.remove();
displayWords(index + 1);
}, 1000); // Adjust timing as needed
}, 2000); // Adjust timing as needed
}
// Start displaying words after initial phrase
setTimeout(function() {
$('#phrase').addClass('fade-out');
setTimeout(function() {
$('#phrase').remove();
displayWords(0);
}, 1000); // Adjust timing as needed
}, 2000); // Adjust timing as needed
});
</script>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/01/25/15/26/morocco-4792752_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>Stories need language to pass on from [[generation]] to generation and carry the essence of the community.
<div id="message" class="pretty-font big-size">
<span id="crimson-word"> NO LANGUAGE = NO STORIES</span>
</div>
<style>
.big-size {
font-size: 24px; /* Adjust size as needed */
}
</style>
<script>
setTimeout(function() {
var messageDiv = document.getElementById('message');
messageDiv.style.display = 'none';
}, 3000); // 3000 milliseconds = 3 seconds
</script>
<style>
#crimson-word {
color: crimson;
}
</style>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/01/25/15/26/morocco-4792752_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style><p>
<p>
We go from generations who <span class="italic-bold-crimson">speak</span> it, <span class="italic-bold-crimson">understand</span> it, and <span class="italic-bold-crimson">sherish</span> it.
To generations who understand and sherish it.
To generations who sherish it.
To generations who know
<span class="shrink-word">nothing</span> of it.
To ...
</p>
</p>
<em> THE END </em>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/01/25/15/26/morocco-4792752_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>
<style>
.shrink-word {
font-size: 14px; /* Adjust the font size as needed */
font-weight: normal; /* Optional: Adjust the font weight */
/* Add any additional styling here */
}
</style>
<style>
.italic-bold-crimson {
font-style: italic; /* Italicize the text */
font-weight: bold; /* Make the text bold */
color: crimson; /* Set the text color to burgundy */
/* Add any additional styling here */
}
</style>At the age of seventy, Sakina’s grandmother grew terribly ill. Bedridden but still full of life, she spent hours upon hours talking with Sakina, recounting tales, stories of her childhood and recipes that she insisted needed to survive well after she left. All the while, she would teach her granddaughter new words in Tamazight. Words morphed into sentences and sentences into conversations. Three months after being diagnosed, Sakina's grandmother passed away, but she was still [[living]] through <em>each</em> and <em>every</em> word she taught her.
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/01/25/15/26/morocco-4792752_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>Tiziri came to the world on a Friday night. Outside the hospital window, a full moon illuminated the sky. The kind you couldn't help but stop and marvel at. Sakina, ever the perfectionist, could not decide on a name for her daughter. How could she find a name that fit a person she had never met?
And yet, after one look at her, a name she had long forgotten visited her once again. This time not to torment her, but to remind her how far she had come. She had fought the odds, won her eternal dilemma between mother and tongue. Her daughter would not have to <span id="crimson-word">choose</span>. She would never have to feel like an <span id="crimson-word">imposter</span>.
<style>
#crimson-word {
color: crimson;
}
</style>
<em> THE END </em>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2022/04/05/19/34/motherhood-7114294_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>
<div class="centered-content">
<p> {[
<div class="modal">
<div class="modal-content">
(link: "[[mother]]")[ (replace: ?modal)[] ]<br>
(link: "[[tongue]]")[ (replace: ?modal)[] ]<br>
</div>
</div>
](modal|}
(link-repeat:"Make a choice!")[(show:?modal)]
</div>
<style>
/* Replace 'URL_OF_YOUR_IMAGE' with the URL or path to your image */
body {
background-image: url("https://cdn.pixabay.com/photo/2020/01/25/15/26/morocco-4792752_1280.jpg");
opacity: 0.7; /* Adjust the opacity value as needed */
/* Other CSS properties */
background-size:178%; /* Adjust this value to zoom in or out */
background-repeat: no-repeat;
}
</style>