create-aziz-app 2.0.3 → 2.0.5

package/template/styles/globals.css

@@ -0,0 +1,190 @@
+/* ============================================================
+   GLOBAL STYLES
+   Base styles that work with all CSS frameworks
+   ============================================================ */
+
+/* Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Body */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: #f5f5f5;
+    color: #333;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Code */
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+/* ============================================================
+   CUSTOM CSS FRAMEWORK STYLES (when not using Bootstrap/Tailwind)
+   ============================================================ */
+
+/* Navbar */
+nav {
+    background-color: #282c34;
+    padding: 16px 32px;
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+nav .brand {
+    color: #61dafb;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+nav a {
+    color: #ffffffcc;
+    text-decoration: none;
+    font-size: 15px;
+    transition: color 0.2s;
+}
+
+nav a:hover,
+nav a.active {
+    color: #61dafb;
+}
+
+/* Page wrapper */
+#root {
+    flex: 1;
+    padding: 40px 32px;
+    max-width: 900px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+/* Footer */
+footer {
+    background-color: #282c34;
+    color: #888;
+    text-align: center;
+    padding: 16px;
+    font-size: 13px;
+}
+
+/* Typography */
+h1 {
+    margin-bottom: 16px;
+    color: #282c34;
+}
+
+h2 {
+    margin-bottom: 12px;
+}
+
+p {
+    line-height: 1.6;
+    margin-bottom: 12px;
+    color: #555;
+}
+
+/* Card */
+.card {
+    background: white;
+    border-radius: 10px;
+    padding: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    margin-bottom: 20px;
+}
+
+/* Buttons */
+.btn {
+    display: inline-block;
+    padding: 10px 22px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 15px;
+    transition: opacity 0.2s;
+}
+
+.btn:hover {
+    opacity: 0.85;
+}
+
+.btn-primary {
+    background-color: #61dafb;
+    color: #282c34;
+    font-weight: bold;
+}
+
+.btn-danger {
+    background-color: #ff6b6b;
+    color: white;
+}
+
+.btn-grey {
+    background-color: #ccc;
+    color: #333;
+}
+
+/* Counter */
+.count-display {
+    font-size: 64px;
+    font-weight: bold;
+    color: #282c34;
+    margin: 16px 0;
+    text-align: center;
+}
+
+.counter-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    margin-top: 8px;
+}
+
+/* Forms */
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+input,
+textarea {
+    padding: 10px 14px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    font-size: 15px;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+input:focus,
+textarea:focus {
+    border-color: #61dafb;
+}
+
+textarea {
+    resize: vertical;
+    min-height: 100px;
+}
+
+/* 404 */
+.not-found {
+    text-align: center;
+    padding: 60px 0;
+}
+
+.not-found h1 {
+    font-size: 80px;
+    color: #61dafb;
+}

package/template/styles/tailwind.css

@@ -0,0 +1,122 @@
+/* ============================================================
+   TAILWIND CSS STYLES
+   Custom styles when using Tailwind CSS
+   ============================================================ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Reset */
+@layer base {
+    * {
+        @apply m-0 p-0 box-border;
+    }
+
+    body {
+        @apply min-h-screen flex flex-col bg-gray-50 text-gray-900;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+            'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+            sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    code {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+    }
+}
+
+/* Custom Components */
+@layer components {
+    /* Page wrapper */
+    #root {
+        @apply flex-1 py-10 px-8 max-w-4xl w-full mx-auto;
+    }
+
+    /* Card */
+    .card {
+        @apply bg-white rounded-lg p-6 shadow-md mb-5;
+    }
+
+    /* Buttons */
+    .btn {
+        @apply inline-block py-2.5 px-6 border-0 rounded-lg cursor-pointer text-base transition-opacity;
+    }
+
+    .btn:hover {
+        @apply opacity-85;
+    }
+
+    .btn-primary {
+        @apply bg-primary text-dark font-bold;
+    }
+
+    .btn-danger {
+        @apply bg-red-500 text-white;
+    }
+
+    .btn-grey {
+        @apply bg-gray-300 text-gray-800;
+    }
+
+    /* Counter */
+    .count-display {
+        @apply text-6xl font-bold text-gray-800 my-4 text-center;
+    }
+
+    .counter-actions {
+        @apply flex gap-3 justify-center mt-2;
+    }
+
+    /* Forms */
+    form {
+        @apply flex flex-col gap-3;
+    }
+
+    input,
+    textarea {
+        @apply py-2.5 px-3.5 border border-gray-300 rounded-lg text-base outline-none transition-colors;
+    }
+
+    input:focus,
+    textarea:focus {
+        @apply border-primary ring-2 ring-primary ring-opacity-50;
+    }
+
+    textarea {
+        @apply resize-y min-h-[100px];
+    }
+
+    /* 404 */
+    .not-found {
+        @apply text-center py-16;
+    }
+
+    .not-found h1 {
+        @apply text-8xl text-primary;
+    }
+}
+
+/* Custom Utilities */
+@layer utilities {
+    .text-primary {
+        color: #61dafb;
+    }
+
+    .bg-primary {
+        background-color: #61dafb;
+    }
+
+    .text-dark {
+        color: #282c34;
+    }
+
+    .bg-dark {
+        background-color: #282c34;
+    }
+
+    .border-primary {
+        border-color: #61dafb;
+    }
+}