Localstorage kullanabilirsin.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Kullandığın dildeki string fonksiyonlarını araştırmalısın. Örneğin;
Php array to string
diye arama yaparak ilgili sonuçlara ulaşabilirsin.
HTML yapına uygun CSS class'ları ile çözüm üretebilirsin tek liste içinde.
Eğer liste dinamik geliyorsa class isimlerini dinamik şekilde if
koşulları ile ekletip / çıkartman gerekebilir
HTML kodların;
<ul>
<li class="out rounded">1</li>
<li class="brtlr">2</li>
<li class="brblr">3</li>
<li class="out" class="brtlr">4</li>
<li class="out brblr">5</li>
<li class="rounded">6</li>
<li class="out rounded">7</li>
<li class="brtlr">8</li>
<li>9</li>
<li class="brblr">10</li>
<li class="out rounded">11</li>
</ul>
CSS kodların;
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
ul li {
padding: 5px 10px;
display: block;
color: white;
background: #444;
height: 30px;
list-style-type: none;
}
ul li.out {
background: cornflowerblue;
}
/* Border Radius Top Left and Right */
.brtlr {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
/* Border Radius Bottom Left and Right */
.brblr {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
/* Border Radius Full */
.rounded {
border-radius: 12px;
}
Genellikle dinamik alanlar için veritabanı kulanılması daha doğru olur. Ancak yapmak istediğin şey PHP ile FTP ye dosya kaydetmek ise
bu makale yardımcı olabilir;
https://www.techrepublic.com/article/keep-your-options-open-with-ftp-file-uploads-using-php/
Makale;
Video;
Burada makale olarak anlatmış;
https://blog.addpipe.com/using-recorder-js-to-capture-wav-audio-in-your-html5-web-site/
Burada da simple bir proje var;
https://github.com/addpipe/simple-recorderjs-demo
https://github.com/open-source-ideas/open-source-ideas/issues
Bu linkte güzel projeler var her seviye ve alan için incelemeni tavsiye ederim
Arkadaşların dediklerine ek olarak bu da güzel bir eklenti, sondaki bracketa gelince baştaki bracket da ne olduğunu ve satır sayısını gösteriyor.
https://marketplace.visualstudio.com/items?itemName=jomeinaster.bracket-peek
Aklıma gelen dört ihtimal var;
- Border radius ile bu şekil yapılmış olabilir.
- Clip Path ile yapılmış olabilir.
- SVG arkaplan olarak kullanılmış olabilir.
- Box shadow kullanılmış olabilir.
Css'de yer alan bu özellikleri araştırarak kendine uygun cözümü bulabilirsin.