Created
December 27, 2020 09:14
-
-
Save rebelchris/0d24242c8bb382b97986687e0fee0504 to your computer and use it in GitHub Desktop.
no-div css art playground raw
This file contains 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
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>No-div playground</title> | |
| <meta name="description" content="A cool no-div playground" /> | |
| <meta name="author" content="Daily Dev Tips" /> | |
| <link rel="icon" href="/favicon.ico" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <style> | |
| .container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100%; | |
| } | |
| textarea { | |
| height: 66px; | |
| } | |
| iframe { | |
| width: 200px; | |
| height: 200px; | |
| border: 5px solid #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div> | |
| <textarea id="cssBody" placeholder="background: red;"></textarea> | |
| <br /> | |
| <textarea id="cssBefore" placeholder="content: '🤟';"></textarea> | |
| <br /> | |
| <textarea id="cssAfter" placeholder="content: '🤟';"></textarea> | |
| </div> | |
| <div> | |
| <iframe id="iFrame"></iframe> | |
| <br /> | |
| <button onclick="save()">I'm done ✨</button> | |
| </div> | |
| </div> | |
| <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script> | |
| <script type="text/javascript"> | |
| // Your web app's Firebase configuration | |
| var firebaseConfig = { | |
| apiKey: "AIzaSyDn9SYU4jwny-rVINJYztEntToMs9X0hKU", | |
| authDomain: "test-d6b30.firebaseapp.com", | |
| databaseURL: "https://test-d6b30-default-rtdb.firebaseio.com", | |
| projectId: "test-d6b30", | |
| storageBucket: "test-d6b30.appspot.com", | |
| messagingSenderId: "449532958203", | |
| appId: "1:449532958203:web:5b70e54e5a6538f97de75e", | |
| }; | |
| // Initialize Firebase | |
| firebase.initializeApp(firebaseConfig); | |
| const cssBody = document.getElementById("cssBody"); | |
| const cssBefore = document.getElementById("cssBefore"); | |
| const cssAfter = document.getElementById("cssAfter"); | |
| const iFrame = document.getElementById("iFrame").contentWindow.document; | |
| document.addEventListener("keyup", (event) => { | |
| if ( | |
| event.target !== cssBody && | |
| event.target !== cssBefore && | |
| event.target !== cssAfter | |
| ) { | |
| return; | |
| } | |
| iFrame.open(); | |
| iFrame.writeln(` | |
| <style> | |
| body { ${cssBody.value} } | |
| body:before { ${cssBefore.value} } | |
| body:after { ${cssAfter.value} } | |
| </style>`); | |
| iFrame.close(); | |
| }); | |
| const save = () => { | |
| const uuid = | |
| Date.now().toString(36) + Math.random().toString(36).substr(2); | |
| firebase.database().ref(uuid).set({ | |
| body: cssBody.value, | |
| before: cssBefore.value, | |
| after: cssAfter.value, | |
| }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>No-div playground</title> | |
| <meta name="description" content="A cool no-div playground" /> | |
| <meta name="author" content="Daily Dev Tips" /> | |
| <link rel="icon" href="/favicon.ico" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <style> | |
| .container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100%; | |
| } | |
| iframe { | |
| width: 200px; | |
| height: 200px; | |
| border: 5px solid #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <iframe id="iFrame"></iframe> | |
| </div> | |
| <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script> | |
| <script type="text/javascript"> | |
| // Your web app's Firebase configuration | |
| var firebaseConfig = { | |
| apiKey: "AIzaSyDn9SYU4jwny-rVINJYztEntToMs9X0hKU", | |
| authDomain: "test-d6b30.firebaseapp.com", | |
| databaseURL: "https://test-d6b30-default-rtdb.firebaseio.com", | |
| projectId: "test-d6b30", | |
| storageBucket: "test-d6b30.appspot.com", | |
| messagingSenderId: "449532958203", | |
| appId: "1:449532958203:web:5b70e54e5a6538f97de75e", | |
| }; | |
| // Initialize Firebase | |
| firebase.initializeApp(firebaseConfig); | |
| const iFrame = document.getElementById("iFrame").contentWindow.document; | |
| const currentURL = window.location.search; | |
| const search = new URLSearchParams(currentURL); | |
| const searchId = search.get("id"); | |
| if (searchId.length >= 1) { | |
| var noDivRef = firebase.database().ref(searchId); | |
| noDivRef.once("value", function (data) { | |
| let divData = data.val(); | |
| iFrame.open(); | |
| iFrame.writeln(` | |
| <style> | |
| body { ${divData.body} } | |
| body:before { ${divData.before} } | |
| body:after { ${divData.after} } | |
| </style>`); | |
| iFrame.close(); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment