Spaces:

d3f14nt
/

sf-1f8

Running

App Files Files Community

Rebel Artimus commited on Nov 29, 2023

Commit

6aacd12

1 Parent(s): 3265146

Add 3 files

Browse files

Files changed (3) hide show

index.html +1 -19
main.js +90 -0
style.css +70 -26

index.html CHANGED Viewed

@@ -1,19 +1 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>


1	+ <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Page Builder</title></head><body></body></html>

main.js ADDED Viewed

	@@ -0,0 +1,90 @@

+/**
+ * Grab and store references to frequently used elements.
+ * These are used throughout the app.
+ */
+ const swapTemplate = document.querySelector('template');
+      const draggableItems = document.querySelectorAll('[data-draggable]');
+      const draggableItemsStore = [];
+      const toolbarBtns = document.querySelectorAll('.toolbar-btn');
+      const widgetsBtns = document.querySelectorAll('.widgets .btn');
+      const widgetHolder = document.querySelector('.widgets');
+      const widgetsCounter = document.querySelector('.widgets-counter');
+      const popupContainer = document.querySelector('.popup-container');
+      const popup = document.querySelector('.popup');
+      /**
+       * Event listeners
+       */
+      // Draggable items
+      draggableItems.forEach((item) => {
+        new Drag(item);
+      });
+      // Toolbar buttons
+      toolbarBtns.forEach((btn) => {
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          toggleEditMode();
+        });
+      });
+      // Widget buttons
+      widgetsBtns.forEach((btn) => {
+        btn.addEventListener('click', (e) => {
+          e.preventDefault();
+          addWidget(btn.dataset.widget);
+        });
+      });
+      // Click event to close popup
+      document.addEventListener('click', (e) => {
+        const target = e.target;
+        if (e.target.classList.contains('icon-remove')) {
+          const popup = target.closest('.popup');
+          popup.classList.remove('show');
+        }
+      });
+      // Add widget to widgetHolder
+      const addWidget = (widget) => {
+        const el = swapTemplate.content.cloneNode(true);
+        el.querySelector('h2').textContent = widget.name;
+        el.querySelector('p').innerHTML = widget.description;
+        widgetHolder.appendChild(el);
+        draggableItemsStore.push(new Drag(el));
+        updateWidgetsCounter();
+      };
+      // Update widgets counter
+      const updateWidgetsCounter = () => {
+        const counter = widgetsCounter.querySelector('span');
+        counter.textContent = `${widgetHolder.children.length || ''} Widgets`;
+      };
+      // Toggle Edit Mode
+      const toggleEditMode = () => {
+        popupContainer.classList.toggle('show');
+        document.body.classList.toggle('edit');
+      };
+      /**
+       * Init
+       */
+      const init = () => {
+        // Add widgets from array
+        const widgets = [
+          {
+            name: 'Text widget',
+            description: 'This is a text widget',
+            icon: 'fa-pencil-alt',
+          },
+          {
+            name: 'Photo widget',
+            description: 'This is a photo widget',
+            icon: 'fa-images',
+          },
+          {
+            name: 'Chart widget',
+            description: 'This is a chart widget',
+            icon: 'fa-chart-pie',
+          },
+        ];
+        // Call addWidget() for each widget
+        widgets.forEach((widget) => addWidget(widget));
+      };
+      init();
+</script>

style.css CHANGED Viewed

@@ -1,28 +1,72 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900&display=swap');
+/** GLOBAL CSS **/
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
 body {
+ padding: 2rem;
+ max-width: 500px;
+ margin: 0 auto;
+ text-align: center;
+ font-family: 'Roboto', sans-serif;
+ background-color: #f5f5f5;
+}
+.main-container {
+ background-color: #fff;
+ padding: 2rem;
+ border-radius: 12px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
+}
+/** POPUP CSS **/
+.popup-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.3);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 10;
+}
+.popup {
+ width: 500px;
+ padding: 2rem;
+ border-radius: 12px;
+ background-color: #fff;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
+}
+.popup-btn-close {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+}
+/** DRAGGABLE CSS **/
+.widget {
+ padding: 1rem;
+ border: 1px solid #ccc;
+ border-radius: 12px;
+ background-color: #fff;
+ cursor: move;
+}
+/** TOOLBAR CSS **/
+.toolbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.toolbar-btn {
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 12px;
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+}
+.toolbar-btn-active {
+ background-color: #aee4f0;
 }
+/** FONT AWESOME Icons **/
+@import "https://kit.fontawesome.com/72adea038a.js";