homepage at a certain point

theanam · theanam · commit fb97608c6c70 · 2019-10-11T19:25:31.000+06:00
diff --git a/homepage-assets/homepage.js b/homepage-assets/homepage.js
@@ -1,6 +1,5 @@
 var baseURL = "https://raw.githubusercontent.com/theanam/css-only-loaders/master/spinners/";
-
-
+var base_css = "";
 function getDefination(cssClass,callback){
 	$.get(`${baseURL}/${cssClass}/${cssClass}.css`)
 		.then(data=>{
@@ -11,11 +10,35 @@ function getDefination(cssClass,callback){
 		});
 }
 
+function prepareSourceCode(data){
+	console.log(data);
+	$(".sourceholder").css("display","flex");
+	$(".actual-code").text(base_css + "\n\n" + data);
+}
+
 $(".spinner,.ripple").on("click",function(e){
 	var classes = $(this).attr("class");
 	var defName = classes.split(" ")[1];
 	if(!defName) return console.log("Defination class missing");
 	getDefination(defName,function(data){
-		console.log(data);
+		prepareSourceCode(data);
 	});
+});
+
+$(".source").on("click",function(e){
+	e.stopPropagation();
+});
+
+$(".sourceholder").on("click",function(){
+	$(this).css("display","none");
+});
+
+$(function(){
+	$.get(`${baseURL}/vars.css`)
+		.then(data=>{
+			base_css = data;
+		})
+		.catch(e=>{
+			console.log("Failed to load base CSS");
+		})
 })
diff --git a/homepage-assets/style.css b/homepage-assets/style.css
@@ -1,4 +1,35 @@
 .spinner,.ripple{
 	display: inline-block;
 	margin: 100px;
+	cursor: pointer;
+	background: #fff;
+}
+
+.sourceholder{
+	width:100%;
+	height:100%;
+	left:0px;
+	top:0px;
+	position: fixed;
+	background: rgba(0,0,0,0.2);
+	display: none;
+	z-index: 10000;
+	align-items: center;
+	justify-content: center;
+}	
+.source{
+	width:70vw;
+	height:70vh;
+	background: #222;
+	padding:20px;
+	z-index: 30000;
+	border-radius:4px;
+	overflow:scroll;
+}
+.actual-code{
+	z-index:800000000;
+	font-size: 12px;
+	color: #fff;
+	display: block;
+	overflow: scroll;
 }
diff --git a/index.html b/index.html
@@ -6,7 +6,6 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>CSS Only Loaders</title>
     <link rel="stylesheet" href="homepage-assets/style.css">
-    <link rel="stylesheet" href="homepage-assets/prism.css">
     <!-- spinners -->
     <link rel="stylesheet" href="spinners/vars.css">
     <link rel="stylesheet" href="spinners/circle/circle.css">
@@ -17,7 +16,10 @@
     <link rel="stylesheet" href="spinners/color-pulse-ball/color-pulse-ball.css">
 </head>
 <body>
-    <h1>This is just a sample page, Homepage is under construction</h1>
+    <h1>Click on the Spinners to see CSS Styles</h1>
+    <p>
+        Homepage Under construction
+    </p>
     <div class="spinner circle"></div>
     <div class="spinner blasting-circle"></div>
     <div class="spinner rotating-plane"></div>
@@ -32,8 +34,12 @@ <h1>This is just a sample page, Homepage is under construction</h1>
         All the attributes are in the <code>/spinners/values.css</code> file. you need to include that file before the spinner CSS file.
         see the source code to this file <code>/index.html</code> for example usage.
     </p>
+    <div class="sourceholder">
+        <pre class="source">
+            <code class="actual-code"></code>
+        </pre>
+    </div>
     <script src="homepage-assets/jquery-3.4.1.min.js"></script>
-    <script src="homepage-assets/prism.js"></script>
     <script src="homepage-assets/homepage.js"></script>
 </body>
 </html>
