Skip to content

Commit

Permalink
Merge pull request #4 from ImSkully/dev
Browse files Browse the repository at this point in the history 
chore: merge dev > main
  • Loading branch information
@ImSkully
ImSkully authored Oct 25, 2024
2 parents c9eec2c + 04ad524 commit d0267e9
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 24 deletions.
2 changes: 2 additions & 0 deletions .github/FUNDING.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
github: ImSkully
buy_me_a_coffee: Skully
Binary file added .github/readme_preview.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 16 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,12 @@
<h2>RTTTL Web Composer</h2>
</div>

![License](https://img.shields.io/github/license/ImSkully/rtttl-web-composer)
<a href="./package-lock.json" target="_blank" alt="package-lock"><img src="https://img.shields.io/badge/package--lock-committed-brightgreen" /></a>
<p align="center">
<a href="./LICENSE" alt="Project License"><img src="https://img.shields.io/github/license/ImSkully/rtttl-web-composer" alt="License Badge" /></a>
<a href="./package-lock.json" alt="package-lock"><img src="https://img.shields.io/badge/package--lock-committed-brightgreen" /></a>
<a href="https://skully.tech/discord" target="_blank" alt="Join Discord"><img src="https://img.shields.io/discord/820142202666876938.svg" /></a>
<a href="https://imskully.github.io/rtttl-web-composer" target="_blank"><img src="https://img.shields.io/static/v1?label=Demo&message=Preview&color=228be6" alt="Open Preview Badge" /></a>
</p>

> [!NOTE]
> This README requires expansion.
Expand All @@ -15,6 +19,15 @@ A rich web based composer for creating [Ring Tone Text Transfer Language (RTTTL)
* 🎶 Dynamic RTTTL generation and browser playback using [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
* 📦 Generate or import RTTTL ringtone strings

<div align="center" style="padding: 25px;">
<h3><a href="https://imskully.github.io/rtttl-web-composer" target="_blank" title="Open RTTTL Web Composer">Open Demo Application</a></h3>
<img width="800" src=".github/readme_preview.png" alt="RTTTL Web Composer Logo" />
</div>

This web application is built with barebones HTML & CSS, and vanilla JavaScript for the sake of simplicity. The frontend uses the [Tabler UI](https://github.com/tabler/tabler) framework, [BS5](https://github.com/twbs/bootstrap), and [jQuery](https://jquery.com) for UI components and interactivity.

***

## RTTTL

Ring Tone Text Transfer Language (RTTTL) is a simple text-based format for ringtones originally developed by Nokia in the 1990s. In simple terms, an RTTTL string represents a melody and timing information - the format is relatively easy to understand, making it popular for creating ringtones on early mobile phones.
Expand Down Expand Up @@ -67,4 +80,4 @@ In more modern usage, RTTTL is commonly found in Arduino/ESP8266/ESP32 projects
<special-duration> := "." ; Dotted note

; End of specification
</details>
</details>
101 changes: 80 additions & 21 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/ImSkully" target="_blank">
<a class="nav-link" href="https://github.com/ImSkully/rtttl-web-composer" target="_blank">
<span class="nav-link-icon d-md-none d-lg-inline-block"><i class="ti ti-brand-github"></i></span>
<span class="nav-link-title">Source</span>
</a>
Expand Down Expand Up @@ -81,20 +81,48 @@
<div class="col-1 bg-primary">
<table class="table card-table header-table">
<tbody>
<tr><th>B</th></tr>
<tr><th>A#</th></tr>
<tr><th>A</th></tr>
<tr><th>G#</th></tr>
<tr><th>G</th></tr>
<tr><th>F#</th></tr>
<tr><th>F</th></tr>
<tr><th>E</th></tr>
<tr><th>D#</th></tr>
<tr><th>D</th></tr>
<tr><th>C#</th></tr>
<tr><th>C</th></tr>
<tr><th>d</th></tr>
<tr><th>o</th></tr>
<tr>
<th>B</th>
</tr>
<tr>
<th>A#</th>
</tr>
<tr>
<th>A</th>
</tr>
<tr>
<th>G#</th>
</tr>
<tr>
<th>G</th>
</tr>
<tr>
<th>F#</th>
</tr>
<tr>
<th>F</th>
</tr>
<tr>
<th>E</th>
</tr>
<tr>
<th>D#</th>
</tr>
<tr>
<th>D</th>
</tr>
<tr>
<th>C#</th>
</tr>
<tr>
<th>C</th>
</tr>
<tr>
<th>d</th>
</tr>
<tr>
<th>o</th>
</tr>
</tbody>
</table>
</div>
Expand Down Expand Up @@ -168,7 +196,18 @@
<!-- Play Button -->
<input type="radio" class="btn-check" name="btn-radio-toolbar" id="radio-toolbar-play" autocomplete="off" />
<label for="radio-toolbar-play" class="btn btn-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-player-play">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-player-play"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 4v16l13 -8z" />
</svg>
Expand All @@ -177,7 +216,18 @@
<!-- Stop Button -->
<input type="radio" class="btn-check" name="btn-radio-toolbar" id="radio-toolbar-stop" autocomplete="off" disabled="disabled" />
<label for="radio-toolbar-stop" class="btn btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-player-stop">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-player-stop"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
</svg>
Expand All @@ -186,7 +236,18 @@
<!-- Load From Text Area Button -->
<input type="radio" class="btn-check" name="btn-radio-toolbar" id="radio-toolbar-load-from-textarea" autocomplete="off" />
<label for="radio-toolbar-load-from-textarea" class="btn btn-info">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-book-upload">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-book-upload"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5" />
<path d="M11 16h-5a2 2 0 0 0 -2 2" />
Expand All @@ -213,9 +274,7 @@
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item">
<a href="https://github.com/ImSkully/rtttl-web-composer" target="_blank" class="link-secondary">
View source on GitHub <i class="ti ti-external-link"></i>
</a>
<a href="https://github.com/ImSkully/rtttl-web-composer" target="_blank" class="link-secondary"> View source on GitHub <i class="ti ti-external-link"></i> </a>
</li>
</ul>
</div>
Expand Down

0 comments on commit d0267e9

Please sign in to comment.