Brwnds · dudaa28 · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024
diff --git a/app/app/settings.py b/app/app/settings.py
@@ -121,6 +121,7 @@
 
 STATIC_URL = '/static/'
 STATICFILES_DIRS = [BASE_DIR / "static"]
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
 
 
 # Default primary key field type

diff --git a/app/loja/templates/base.html b/app/loja/templates/base.html
@@ -12,24 +12,25 @@
 <body>
         <!-- Sticky header -->
 <header class="header-outer">
-	<div class="header-inner responsive-wrapper">
-		<div class="header-logo">
-			<img src="https://assets.codepen.io/285131/acme-2.svg" />
-		</div>
-		<nav class="header-navigation">
-			<a href="{% url 'home' %}">Home</a>
-			<a href="{% url 'login' %}">Login</a>
-			<a href="#">Blog</a>
-			<a href="#">Contact Us</a>
-			<button>Menu</button>
-		</nav>
-	</div>
+    <div class="header-inner responsive-wrapper">
+        <div class="header-logo">
+            <img src="https://assets.codepen.io/285131/acme-2.svg" />
+        </div>
+        <nav class="header-navigation">
+            <a href="{% url 'home' %}">Home</a>
+            <a href="{% url 'login' %}">Login</a>
+            <a href="#">Blog</a>
+            <a href="#">Contact Us</a>
+            <button>Menu</button>
+        </nav>
+    </div>
 </header>
 
     <main>
         {% block content %}
         <!-- O conteúdo específico de cada página será inserido aqui -->
         {% endblock %}
     </main>
+    {% block extra_js %}{% endblock %}
 </body>
 </html>
diff --git a/app/loja/templates/home.html b/app/loja/templates/home.html
@@ -7,16 +7,53 @@
 {% endblock %}
 
 {% block content %}
-<main class="main">
-	<div class="main-content responsive-wrapper">
-		<article class="widget">
-			<h2>How does it work without JS? 🤯</h2>
-			<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
-			<p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
-			<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
-			<p></p>
-		</article>
-	</div>
-</main>
+<div class="content">
+    <h1>La Pâtisserie Belle</h1>
+    <p>
+      Welcome to La Pâtisserie Belle, where every bite is a journey into the
+      exquisite world of finely crafted pastries. Our patisserie is
+      dedicated to bringing you the most delicious and beautifully designed
+      pastries that will delight your senses and elevate your taste
+      experience. Nestled in the heart of the city, our patisserie is a
+      haven for those who appreciate the finer things in life.
+    </p>
+    <button class="btn">Explore More</button>
+  </div>
+
+  <div class="stack">
+    <div class="card">
+      <img
+        src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/a36d2695-58f8-4644-9e19-71988334e345"
+        alt="" />
+    </div>
+    <div class="card">
+      <img
+        src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9f9148ad-74c2-4ebc-a769-bb90fec7b9a5"
+        alt="" />
+    </div>
+    <div class="card">
+      <img
+        src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/ff35104e-3a7e-458f-8077-7ea2780706fa"
+        alt="" />
+    </div>
+    <div class="card">
+      <img
+        src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/060546fb-1cbb-428e-b48d-eae2711a0c83"
+        alt="" />
+    </div>
+    <div class="card">
+      <img
+        src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/7feb903b-33f7-4326-90eb-a4f54c86c68e"
+        alt="" />
+    </div>
+    <div class="card">
+      <img
+        src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/417d1d6b-4100-4419-9e01-37561a354b80"
+        alt="" />
+    </div>
+  </div>
 {% endblock %}
 
+{% block extra_js %}
+    <script src="{% static 'js/home.js' %}"></script>
+{% endblock %}
diff --git a/app/static/css/home.css b/app/static/css/home.css
@@ -1,46 +1,199 @@
+@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&family=Quicksand:[email protected]&display=swap");
 
-.responsive-wrapper {
-	width: 90%;
-	max-width: 1280px;
-	margin-left: auto;
-	margin-right: auto;
+*,
+*:before,
+*:after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Quicksand", sans-serif;
 }
 
+body {
+  background-color: #0d0a0b;
+  background: linear-gradient(145deg, #55566a 0%, #131318 76%);
+}
+
+main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  place-items: center;
+  min-height: 100vh;
+}
+
+/* Content */
+
+.content {
+  padding-left: 120px;
+  color: #c7c7c7c9;
+}
+
+.content h1 {
+  font-family: "Dancing Script", cursive;
+  font-size: clamp(2.5rem, 4vw, 6rem);
+  font-weight: 700;
+  background: -webkit-linear-gradient(0deg, #f76591, #ffc16f);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  line-height: 1.1;
+  margin-bottom: 36px;
+  padding-left: 10px;
+}
+
+.content p {
+  font-size: clamp(0.9rem, 4vw, 1.2rem);
+  line-height: 1.6;
+  padding-right: 100px;
+}
+
+.btn {
+  background-color: #f76591;
+  background-image: linear-gradient(-180deg, #ffc16f, #f76591);
+  font-size: clamp(0.8rem, 8vw, 0.9rem);
+  font-weight: 600;
+  color: #fff;
+  width: max-content;
+  outline: 0;
+  border: 0;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 10px 20px;
+  margin-top: 26px;
+  text-align: center;
+  transform: scale(1);
+  transition: all 0.2s ease-in;
+  cursor: pointer;
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: auto;
+}
+
+.btn:hover {
+  box-shadow: 0 4px 10px rgba(247, 101, 145, 0.5);
+  transform: scale(0.98);
+}
+
+/* Stacked Cards */
+
+.stack {
+  position: relative;
+}
+
+.card {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  width: 350px;
+  height: 500px;
+  border-radius: 2rem;
+  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25),
+    0 15px 20px 0 rgba(0, 0, 0, 0.125);
+  transition: transform 0.6s;
+  user-select: none;
+}
 
-.main {
-	margin-top: 3rem;
+.card img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
 }
 
-.widget {
-	width: 100%;
-	max-width: 600px;
-	border-radius: 8px;
-	box-shadow: 0 15px 30px 0 rgba(0,0,0, 0.1);
-	background-color: #fff;
-	padding: 2.5rem;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 2rem;
-	font-size: 1.125rem;
+.card:nth-last-child(n + 5) {
+  --x: calc(-50% + 90px);
+  transform: translate(var(--x), -50%) scale(0.85);
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.01);
 }
 
-.widget > * + * {
-	margin-top: 1.25em;
+.card:nth-last-child(4) {
+  --x: calc(-50% + 60px);
+  transform: translate(var(--x), -50%) scale(0.9);
 }
 
-.widget h2 {
-	font-size: 1.5rem;
-	font-weight: 700;
-	line-height: 1.25;
+.card:nth-last-child(3) {
+  --x: calc(-50% + 30px);
+  transform: translate(var(--x), -50%) scale(0.95);
 }
 
-.widget code {
-	display: inline-block;
-	padding: 0.125em 0.25em;
-	border-radius: 2px;
-	background-color: #bee5d3;
+.card:nth-last-child(2) {
+  --x: calc(-50%);
+  transform: translate(var(--x), -50%) scale(1);
 }
 
-.widget strong {
-	font-weight: 700;
+.card:nth-last-child(1) {
+  --x: calc(-50% - 30px);
+  transform: translate(var(--x), -50%) scale(1.05);
+}
+
+.card:nth-last-child(1) img {
+  box-shadow: 0 1px 5px 5px rgba(255, 193, 111, 0.5);
+}
+
+.swap {
+  animation: swap 1.3s ease-out forwards;
+}
+
+@keyframes swap {
+  30% {
+    transform: translate(calc(var(--x) - 250px), -50%) scale(0.85) rotate(-5deg)
+      rotateY(65deg);
+  }
+  100% {
+    transform: translate(calc(var(--x) - 30px), -50%) scale(0.5);
+    z-index: -1;
+  }
+}
+
+/* Media queries for keyframes */
+
+@media (max-width: 1200px) {
+  @keyframes swap {
+    30% {
+      transform: translate(calc(var(--x) - 200px), -50%) scale(0.85)
+        rotate(-5deg) rotateY(65deg);
+    }
+
+    100% {
+      transform: translate(calc(var(--x) - 30px), -50%) scale(0.5);
+      z-index: -1;
+    }
+  }
+}
+
+@media (max-width: 1050px) {
+  @keyframes swap {
+    30% {
+      transform: translate(calc(var(--x) - 150px), -50%) scale(0.85)
+        rotate(-5deg) rotateY(65deg);
+    }
+
+    100% {
+      transform: translate(calc(var(--x) - 30px), -50%) scale(0.5);
+      z-index: -1;
+    }
+  }
+}
+
+/* Media queries for other classes */
+
+@media (max-width: 800px) {
+  .content {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .btn {
+    width: 100%;
+    font-size: 0.8rem;
+  }
+
+  .card {
+    width: 200px;
+    height: 300px;
+  }
 }
diff --git a/app/static/js/home.js b/app/static/js/home.js
@@ -0,0 +1,32 @@
+const stack = document.querySelector(".stack");
+const cards = Array.from(stack.children)
+  .reverse()
+  .filter((child) => child.classList.contains("card"));
+
+cards.forEach((card) => stack.appendChild(card));
+
+function moveCard() {
+  const lastCard = stack.lastElementChild;
+  if (lastCard.classList.contains("card")) {
+    lastCard.classList.add("swap");
+
+    setTimeout(() => {
+      lastCard.classList.remove("swap");
+      stack.insertBefore(lastCard, stack.firstElementChild);
+    }, 1200);
+  }
+}
+
+let autoplayInterval = setInterval(moveCard, 4000);
+
+stack.addEventListener("click", function (e) {
+  const card = e.target.closest(".card");
+  if (card && card === stack.lastElementChild) {
+    card.classList.add("swap");
+
+    setTimeout(() => {
+      card.classList.remove("swap");
+      stack.insertBefore(card, stack.firstElementChild);
+    }, 1200);
+  }
+});