A Pen by M Fathurrohman Mauludin on CodePen.
M Fathurrohman Mauludin MFathurrohmanMauludin
⛩️
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1 style="text-align:center;"> Tour Guide Demo.</h1> | |
| <div class="container"> | |
| <div class="py-5 text-center"> | |
| <h2>Checkout form</h2> | |
| <p class="lead">Below is an example usage of Tour Guide content based approach. Click [Start tour] button below to start the guided tour:</p> | |
| <p> | |
| <button class="btn btn-success btn-lg btn-block" id="tourbutton"> | |
| Start tour |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div contenteditable class="magic-input" tab-index="1" data-placeholder="Write a message..." ></div> |
MFathurrohmanMauludin
/ index.html
Created
November 28, 2024 22:11
Three Dots - CSS loading animations made with single element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| html, | |
| body { | |
| height: 100%; | |
| background: #f6f7fd; | |
| font-size: 16px; | |
| } | |
| .heading { | |
| margin: 36px 0; |
MFathurrohmanMauludin
/ access-camera-in-browser-and-take-pictures.markdown
Created
November 10, 2024 00:18
Access Camera in Browser and Take Pictures
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="ocr" class="ocr"> | |
| <h1 class="h">OCR with Tesseract</h1> | |
| <form id="ocr__form" class="ocr__form"> | |
| <label for="ocr__input">Image: </label> | |
| <input id="ocr__input" type="text" /> | |
| <button type="submit">Start</button> | |
| </form> | |
| <img id="ocr__img" class="ocr__img" /> |
MFathurrohmanMauludin
/ how-to-use-lity-js.markdown
Created
October 12, 2024 13:42
How to Use lity.js
A Pen by M Fathurrohman Mauludin on CodePen.
MFathurrohmanMauludin
/ datatables-custom-row-buttons.markdown
Created
October 6, 2024 09:39
dataTables custom row buttons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- オーバーレイ / Overlay --> | |
| <div id="overlay"> | |
| <p><span class="far"></span>now loading...</p> | |
| </div> | |
| <!-- ヘッダ / Header --> | |
| <div id="header"> | |
| <!-- 再生コントロール / Playback control --> | |
| <div id="control" class="far"> | |
| <a href="#" id="play" class="disabled"></a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- オーバーレイ / Overlay --> | |
| <div id="overlay"> | |
| <p><span class="far"></span>now loading...</p> | |
| </div> | |
| <!-- ヘッダ / Header --> | |
| <div id="header"> | |
| <!-- 再生コントロール / Playback control --> | |
| <div id="control" class="far"> | |
| <a href="#" id="play" class="disabled"></a> |
MFathurrohmanMauludin
/ awesome-button-effect-2021-gooey-bobbles.markdown
Created
March 9, 2024 15:19
Awesome Button Effect 2021 (Gooey Bobbles)
NewerOlder