wad-lab 1.0.4 → 1.0.6

package/templates/html-css-js/style.css

@@ -1,22 +1,463 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
 body {
-    font-family: sans-serif;
-    margin: 20px;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #f4f6f9;
+    color: #333333;
+    line-height: 1.6;
 }
 
-input:focus {
-    outline: 2px solid black;
+.app-header {
+    background-color: #2c3e50;
+    color: #ffffff;
+    padding: 20px;
+    text-align: center;
 }
 
-input:invalid {
-    border: 1px solid gray;
+.app-header h1 {
+    margin-bottom: 10px;
+    font-size: 24px;
 }
 
-p::before {
-    content: "• ";
+.nav-bar {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    flex-wrap: wrap;
 }
 
-table, th, td {
-    border: 1px solid black;
+.nav-bar a {
+    color: #ecf0f1;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 6px 12px;
+    border-radius: 4px;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.nav-bar a:hover {
+    background-color: #34495e;
+    transform: translateY(-2px);
+}
+
+.container {
+    max-width: 1000px;
+    margin: 25px auto;
+    padding: 0 15px;
+}
+
+.card {
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 25px;
+    margin-bottom: 25px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
+    position: relative;
+}
+
+.card h2 {
+    color: #2c3e50;
+    border-bottom: 2px solid #3498db;
+    padding-bottom: 8px;
+    margin-bottom: 20px;
+}
+
+fieldset {
+    border: 1px solid #bdc3c7;
+    border-radius: 6px;
+    padding: 20px;
+}
+
+legend {
+    padding: 0 10px;
+    font-weight: bold;
+    color: #2c3e50;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 15px;
+    margin-top: 10px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-group.full-width {
+    grid-column: 1 / -1;
+}
+
+label {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    color: #34495e;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="number"],
+input[type="date"],
+input[type="time"],
+input[type="month"],
+input[type="color"],
+input[type="file"],
+select,
+textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+input::placeholder,
+textarea::placeholder {
+    color: #95a5a6;
+    font-style: italic;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    outline: none;
+    border-color: #3498db;
+    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
+}
+
+input:invalid:not(:placeholder-shown):not(:focus) {
+    border-color: #e74c3c;
+}
+
+input:valid:not(:placeholder-shown):not([type="color"]):not([type="range"]) {
+    border-color: #2ecc71;
+}
+
+.radio-group,
+.checkbox-group {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-top: 5px;
+}
+
+.radio-group label,
+.checkbox-group label {
+    font-weight: normal;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+
+input[type="range"] {
+    width: 100%;
+    cursor: pointer;
+}
+
+.button-group {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.1s ease;
+}
+
+.btn:active {
+    transform: scale(0.98);
+}
+
+.btn-primary {
+    background-color: #3498db;
+    color: #ffffff;
+}
+
+.btn-primary:hover {
+    background-color: #2980b9;
+}
+
+.btn-secondary {
+    background-color: #95a5a6;
+    color: #ffffff;
+}
+
+.btn-secondary:hover {
+    background-color: #7f8c8d;
+}
+
+.btn-danger {
+    background-color: #e74c3c;
+    color: #ffffff;
+    padding: 5px 10px;
+    font-size: 12px;
+}
+
+.btn-danger:hover {
+    background-color: #c0392b;
+}
+
+.btn-sm {
+    padding: 6px 12px;
+    background-color: #34495e;
+    color: #ffffff;
+    font-size: 12px;
+}
+
+.btn-sm:hover {
+    background-color: #2c3e50;
+}
+
+.alert-box {
+    margin-top: 15px;
+    padding: 12px;
+    border-radius: 4px;
+    display: none;
+}
+
+.alert-box.success {
+    display: block;
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+.alert-box.error {
+    display: block;
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+.table-container {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
     border-collapse: collapse;
-    padding: 4px 8px;
+    margin-top: 10px;
+}
+
+caption {
+    font-weight: bold;
+    margin-bottom: 8px;
+    text-align: left;
+}
+
+table, th, td {
+    border: 1px solid #dddddd;
+}
+
+th, td {
+    padding: 10px;
+    text-align: left;
+    font-size: 14px;
+}
+
+th {
+    background-color: #2c3e50;
+    color: #ffffff;
+}
+
+tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+tbody tr:hover {
+    background-color: #f1f1f1;
+}
+
+tfoot {
+    font-weight: bold;
+    background-color: #ecf0f1;
+}
+
+.dom-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.dom-box {
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 15px;
+    background-color: #fafafa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 10px;
+}
+
+.dom-box h3 {
+    font-size: 16px;
+    color: #2c3e50;
+}
+
+.dom-box img {
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
+
+.dom-box img:hover {
+    transform: scale(1.1);
+}
+
+.counter-display {
+    font-size: 36px;
+    font-weight: bold;
+    color: #e74c3c;
+    min-height: 50px;
+}
+
+.btn-cluster {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+ol#orderList {
+    text-align: left;
+    width: 100%;
+    padding-left: 20px;
+}
+
+ol#orderList li {
+    padding: 6px;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+}
+
+ol#orderList li:hover {
+    background-color: #e8f4fd;
+}
+
+.collapse-panel {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #eaf2f8;
+    border: 1px dashed #3498db;
+    border-radius: 4px;
+}
+
+.styled-list {
+    list-style-type: none;
+    width: 100%;
+    text-align: left;
+}
+
+.styled-list li {
+    padding: 8px;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+    position: relative;
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.styled-list li::before {
+    content: "➔ ";
+    color: #3498db;
+}
+
+.styled-list li:hover {
+    color: #2980b9;
+    transform: translateX(5px);
+}
+
+.console-box {
+    background-color: #2c3e50;
+    color: #2ecc71;
+    padding: 15px;
+    border-radius: 6px;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 13px;
+    white-space: pre-wrap;
+    max-height: 350px;
+    overflow-y: auto;
+    margin-top: 15px;
+}
+
+.fixed-badge {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #e67e22;
+    color: #ffffff;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: bold;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+}
+
+.animated-badge {
+    animation-name: badgePulse;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes badgePulse {
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(1.08);
+    }
+}
+
+.mouse-trail-particle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: #e74c3c;
+    border-radius: 50%;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    animation: fadeParticle 0.8s forwards;
+    z-index: 9999;
+}
+
+@keyframes fadeParticle {
+    0% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(2.5);
+    }
+}
+
+.app-footer {
+    text-align: center;
+    padding: 15px;
+    color: #7f8c8d;
+    font-size: 13px;
 }

package/templates/vue-cart-router-pinia/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue Shopping Cart</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/templates/vue-cart-router-pinia/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "vue-cart-router-pinia",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^4.1.0",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}

package/templates/vue-cart-router-pinia/src/App.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { useCartStore } from './stores/cartStore'
+
+const cartStore = useCartStore()
+</script>
+
+<template>
+  <div class="store-app">
+    <header class="store-header">
+      <h1>Vue Pinia Shopping Cart</h1>
+      <nav class="nav">
+        <router-link to="/" class="nav-link">Products</router-link>
+        <span class="divider">|</span>
+        <router-link to="/cart" class="nav-link cart-link">
+          Cart ({{ cartStore.cartCount }})
+        </router-link>
+      </nav>
+    </header>
+
+    <main class="store-main">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.store-app {
+  max-width: 650px;
+  margin: 30px auto;
+  font-family: Arial, sans-serif;
+  padding: 0 15px;
+}
+
+.store-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #333;
+  padding-bottom: 15px;
+  margin-bottom: 20px;
+}
+
+.store-header h1 {
+  font-size: 20px;
+  margin: 0;
+}
+
+.nav {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.nav-link {
+  text-decoration: none;
+  color: #2980b9;
+  font-weight: bold;
+}
+
+.nav-link.router-link-exact-active {
+  color: #27ae60;
+  text-decoration: underline;
+}
+
+.cart-link {
+  background-color: #f1f2f6;
+  padding: 6px 12px;
+  border-radius: 20px;
+}
+
+.divider {
+  color: #ccc;
+}
+
+.store-main {
+  padding: 10px 0;
+}
+</style>

package/templates/vue-cart-router-pinia/src/main.js

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')

package/templates/vue-cart-router-pinia/src/router/index.js

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import ProductCatalogView from '../views/ProductCatalogView.vue'
+import CartView from '../views/CartView.vue'
+import CheckoutView from '../views/CheckoutView.vue'
+
+const routes = [
+  { path: '/', name: 'Catalog', component: ProductCatalogView },
+  { path: '/cart', name: 'Cart', component: CartView },
+  { path: '/checkout', name: 'Checkout', component: CheckoutView }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

package/templates/vue-cart-router-pinia/src/stores/cartStore.js

@@ -0,0 +1,58 @@
+import { defineStore } from 'pinia'
+
+export const useCartStore = defineStore('cart', {
+  state: () => ({
+    products: [
+      { id: 1, name: 'Wireless Laptop', price: 999, category: 'Electronics' },
+      { id: 2, name: 'Noise-Canceling Headphones', price: 149, category: 'Audio' },
+      { id: 3, name: 'Mechanical Keyboard', price: 79, category: 'Accessories' },
+      { id: 4, name: 'Optical Gaming Mouse', price: 39, category: 'Accessories' },
+      { id: 5, name: 'USB-C Docking Hub', price: 49, category: 'Electronics' }
+    ],
+    items: []
+  }),
+  getters: {
+    cartCount: (state) => {
+      return state.items.reduce((total, item) => total + item.quantity, 0)
+    },
+    cartTotal: (state) => {
+      return state.items.reduce((total, item) => total + item.price * item.quantity, 0)
+    }
+  },
+  actions: {
+    addToCart(product) {
+      const existing = this.items.find((item) => item.id === product.id)
+      if (existing) {
+        existing.quantity++
+      } else {
+        this.items.push({
+          id: product.id,
+          name: product.name,
+          price: product.price,
+          quantity: 1
+        })
+      }
+    },
+    incrementQuantity(id) {
+      const item = this.items.find((i) => i.id === id)
+      if (item) {
+        item.quantity++
+      }
+    },
+    decrementQuantity(id) {
+      const item = this.items.find((i) => i.id === id)
+      if (item) {
+        item.quantity--
+        if (item.quantity <= 0) {
+          this.removeFromCart(id)
+        }
+      }
+    },
+    removeFromCart(id) {
+      this.items = this.items.filter((item) => item.id !== id)
+    },
+    clearCart() {
+      this.items = []
+    }
+  }
+})