11<!DOCTYPE html>
2- < html >
3- < head >
4- < meta charset ="utf-8 ">
5- < meta name ="viewport " content ="width=device-width, initial-scale=1 ">
6- < title > Welcome to Firebase Hosting</ title >
7-
8- <!-- update the version number as needed -->
9- < script defer src ="/__/firebase/12.7.0/firebase-app-compat.js "> </ script >
10- <!-- include only the Firebase features as you need -->
11- < script defer src ="/__/firebase/12.7.0/firebase-auth-compat.js "> </ script >
12- < script defer src ="/__/firebase/12.7.0/firebase-database-compat.js "> </ script >
13- < script defer src ="/__/firebase/12.7.0/firebase-firestore-compat.js "> </ script >
14- < script defer src ="/__/firebase/12.7.0/firebase-functions-compat.js "> </ script >
15- < script defer src ="/__/firebase/12.7.0/firebase-messaging-compat.js "> </ script >
16- < script defer src ="/__/firebase/12.7.0/firebase-storage-compat.js "> </ script >
17- < script defer src ="/__/firebase/12.7.0/firebase-analytics-compat.js "> </ script >
18- < script defer src ="/__/firebase/12.7.0/firebase-remote-config-compat.js "> </ script >
19- < script defer src ="/__/firebase/12.7.0/firebase-performance-compat.js "> </ script >
20- <!--
21- initialize the SDK after all desired features are loaded, set useEmulator to false
22- to avoid connecting the SDK to running emulators.
23- -->
24- < script defer src ="/__/firebase/init.js?useEmulator=true "> </ script >
25-
26- < style media ="screen ">
27- body { background : # ECEFF1 ; color : rgba (0 , 0 , 0 , 0.87 ); font-family : Roboto, Helvetica, Arial, sans-serif; margin : 0 ; padding : 0 ; }
28- # message { background : white; max-width : 360px ; margin : 100px auto 16px ; padding : 32px 24px ; border-radius : 3px ; }
29- # message h2 { color : # ffa100 ; font-weight : bold; font-size : 16px ; margin : 0 0 8px ; }
30- # message h1 { font-size : 22px ; font-weight : 300 ; color : rgba (0 , 0 , 0 , 0.6 ); margin : 0 0 16px ;}
31- # message p { line-height : 140% ; margin : 16px 0 24px ; font-size : 14px ; }
32- # message a { display : block; text-align : center; background : # 039be5 ; text-transform : uppercase; text-decoration : none; color : white; padding : 16px ; border-radius : 4px ; }
33- # message , # message a { box-shadow : 0 1px 3px rgba (0 , 0 , 0 , 0.12 ), 0 1px 2px rgba (0 , 0 , 0 , 0.24 ); }
34- # load { color : rgba (0 , 0 , 0 , 0.4 ); text-align : center; font-size : 13px ; }
35- @media (max-width : 600px ) {
36- body , # message { margin-top : 0 ; background : white; box-shadow : none; }
37- body { border-top : 16px solid # ffa100 ; }
38- }
39- </ style >
40- </ head >
41- < body >
42- < div id ="message ">
43- < h2 > Welcome</ h2 >
44- < h1 > Firebase Hosting Setup Complete</ h1 >
45- < p > You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</ p >
46- < a target ="_blank " href ="https://firebase.google.com/docs/hosting/ "> Open Hosting Documentation</ a >
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < title > GitHub Pattern Generator</ title >
7+ < link rel ="stylesheet " href ="style.css ">
8+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css ">
9+ </ head >
10+
11+ < body >
12+
13+ <!-- ================= HEADER ================= -->
14+ < header class ="topbar ">
15+ < div class ="logo ">
16+ < img src ="assets/logo.jpg " class ="header-logo " alt ="Logo ">
17+ < span class ="logo-text "> aurafarmerone</ span >
18+ </ div >
19+
20+ < nav class ="nav ">
21+ < a href ="index.html " class ="active "> 🎨 Draw first. Commit later.</ a >
22+ </ nav >
23+ </ header >
24+
25+ <!-- ================= PAGE (GRID BACKGROUND) ================= -->
26+ < main class ="page-wrapper ">
27+
28+ <!-- ================= DRAW CARD ================= -->
29+ < div class ="card ">
30+
31+ < div class ="card-header ">
32+ < h2 > 💠 GitHub Pattern → pattern.json</ h2 >
33+
34+ < a class ="star-btn " href ="https://github.com/aurafarmerone " target ="_blank ">
35+ ⭐ Star on GitHub
36+ </ a >
37+ </ div >
38+
39+ < p class ="hint ">
40+ < strong > ✍🏻 How to Draw:</ strong > < br >
41+ < b > → 🖱️ Left Click → Add</ b > < br >
42+ < b > → 🖱️ Right Click → Remove</ b >
43+ </ p >
44+
45+ <!-- Month labels -->
46+ < div class ="months ">
47+ < span > Jan</ span > < span > Feb</ span > < span > Mar</ span > < span > Apr</ span >
48+ < span > May</ span > < span > Jun</ span > < span > Jul</ span > < span > Aug</ span >
49+ < span > Sep</ span > < span > Oct</ span > < span > Nov</ span > < span > Dec</ span >
50+ </ div >
51+
52+ < div class ="grid-wrapper ">
53+ < div class ="days ">
54+ < span > Mon</ span > < span > Tue</ span > < span > Wed</ span >
55+ < span > Thu</ span > < span > Fri</ span > < span > Sat</ span > < span > Sun</ span >
56+ </ div >
57+
58+ < div id ="grid "> </ div >
59+ </ div >
60+
61+ <!-- Buttons -->
62+ < div class ="actions ">
63+ < button id ="download "> Download pattern.json</ button >
64+ < button id ="reset " class ="reset "> Reset</ button >
65+ </ div >
66+
4767 </ div >
48- < p id ="load "> Firebase SDK Loading…</ p >
49-
50- < script >
51- document . addEventListener ( 'DOMContentLoaded' , function ( ) {
52- const loadEl = document . querySelector ( '#load' ) ;
53- // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
54- // // The Firebase SDK is initialized and available here!
55- //
56- // firebase.auth().onAuthStateChanged(user => { });
57- // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
58- // firebase.firestore().doc('/foo/bar').get().then(() => { });
59- // firebase.functions().httpsCallable('yourFunction')().then(() => { });
60- // firebase.messaging().requestPermission().then(() => { });
61- // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
62- // firebase.analytics(); // call to activate
63- // firebase.analytics().logEvent('tutorial_completed');
64- // firebase.performance(); // call to activate
65- //
66- // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
67-
68- try {
69- let app = firebase . app ( ) ;
70- let features = [
71- 'auth' ,
72- 'database' ,
73- 'firestore' ,
74- 'functions' ,
75- 'messaging' ,
76- 'storage' ,
77- 'analytics' ,
78- 'remoteConfig' ,
79- 'performance' ,
80- ] . filter ( feature => typeof app [ feature ] === 'function' ) ;
81- loadEl . textContent = `Firebase SDK loaded with ${ features . join ( ', ' ) } ` ;
82- } catch ( e ) {
83- console . error ( e ) ;
84- loadEl . textContent = 'Error loading the Firebase SDK, check the console.' ;
85- }
86- } ) ;
87- </ script >
88- </ body >
89- </ html >
68+
69+ </ main >
70+
71+ <!-- ================= FOOTER ================= -->
72+ < footer class ="footer ">
73+ < p style ="margin-bottom: 10px; font-weight: bold; ">
74+ </ p >
75+ < div class ="socials ">
76+ < a href ="https://github.com/aurafarmerone " target ="_blank "> < i class ="fab fa-github "> </ i > </ a >
77+ < a href ="https://linkedin.com/in/aurafarmerone " target ="_blank "> < i class ="fab fa-linkedin "> </ i > </ a >
78+ < a href ="https://leetcode.com/u/aurafarmerone " target ="_blank "> < i class ="fas fa-code "> </ i > </ a >
79+ </ div >
80+ < p style ="margin-top: 20px; "> Made with ❤️ by < strong > Aura Farmer</ strong > </ p >
81+ </ footer >
82+
83+ < script src ="script.js "> </ script >
84+ </ body >
85+
86+ </ html >
0 commit comments