initial commit

static/css/main.css

@@ -0,0 +1,293 @@
+:root {
+  /* Colors */
+  --primary-color: #9B4819;     /* Warm terracotta */
+  --secondary-color: #D68C45;   /* Muted orange */
+  --success-color: #8C9B4C;     /* Olive green */
+  --danger-color: #C23B22;      /* Warm red */
+  --background-color: #FDF6EC;  /* Warm off-white */
+  --text-color: #2C1810;        /* Deep brown */
+
+  /* Recipe Card */
+  --recipe-card-bg: #ffffff;
+  --recipe-card-border: #E8D5C4;  /* Light warm beige */
+  --recipe-card-shadow: rgba(155, 72, 25, 0.1);
+  --recipe-card-title-color: #9B4819;  /* Same as primary */
+  --recipe-card-text-color: #594D46;   /* Muted brown */
+
+  /* Sidebar */
+  --sidebar-bg: #9B4819;          /* Primary color */
+  --sidebar-border: #B25F2C;      /* Lighter terracotta */
+  --sidebar-brand-color: #ffffff;
+  --sidebar-link-color: rgba(255, 255, 255, 0.9);
+  --sidebar-link-hover-color: #ffffff;
+  --sidebar-link-hover-bg: rgba(214, 140, 69, 0.2);  /* Secondary color with opacity */
+  --sidebar-mobile-height: 60px;
+
+  /* Spacing */
+  --spacing-unit: 1rem;
+  --container-max-width: 1200px;
+
+  /* Typography */
+  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-size-base: 1rem;
+  --line-height-base: 1.5;
+
+  /* Border Radius */
+  --border-radius: 0.25rem;
+  --border-radius-lg: 0.5rem;
+
+  /* Transitions */
+  --transition-base: all 0.2s ease-in-out;
+}
+
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+/* Layout */
+.layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Sidebar */
+.sidebar {
+  background-color: var(--sidebar-bg);
+  border-bottom: 1px solid var(--sidebar-border);
+  z-index: 1000;
+}
+
+.sidebar .sidebar-content {
+  padding: var(--spacing-unit);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar .brand a {
+  color: var(--sidebar-brand-color);
+  text-decoration: none;
+  font-size: 1.5rem;
+  font-weight: bold;
+  display: block;
+  padding: var(--spacing-unit) 0;
+}
+
+.sidebar .nav-links {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-unit);
+}
+
+.sidebar .nav-link {
+  color: var(--sidebar-link-color);
+  text-decoration: none;
+  padding: calc(var(--spacing-unit) * 0.5);
+  border-radius: var(--border-radius);
+  transition: var(--transition-base);
+}
+
+.sidebar .nav-link:hover {
+  color: var(--sidebar-link-hover-color);
+  background-color: var(--sidebar-link-hover-bg);
+}
+
+/* Main content */
+.main-content {
+  flex: 1;
+  padding: var(--spacing-unit);
+}
+
+/* Recipe Cards */
+.recipe-card {
+  background-color: var(--recipe-card-bg);
+  border: 1px solid var(--recipe-card-border);
+  border-radius: var(--border-radius-lg);
+  padding: calc(var(--spacing-unit) * 1.5);
+  margin-bottom: var(--spacing-unit);
+  box-shadow: 0 4px 6px var(--recipe-card-shadow);
+  transition: var(--transition-base);
+  position: relative;
+  overflow: hidden;
+}
+
+.recipe-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.recipe-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 12px var(--recipe-card-shadow);
+}
+
+.recipe-card:hover::before {
+  opacity: 1;
+}
+
+.recipe-card .card-title {
+  color: var(--recipe-card-title-color);
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-unit);
+  border-bottom: 1px solid rgba(44, 80, 44, 0.3);
+  padding-bottom: calc(var(--spacing-unit) * 0.5);
+}
+
+.recipe-card .card-text {
+  color: var(--recipe-card-text-color);
+  margin-bottom: calc(var(--spacing-unit) * 1.5);
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+/* Buttons */
+.btn {
+  padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
+  border-radius: var(--border-radius);
+  border: none;
+  cursor: pointer;
+  transition: var(--transition-base);
+  text-decoration: none;
+  display: inline-block;
+  margin-right: calc(var(--spacing-unit) * 0.5);
+}
+
+.btn:last-child {
+  margin-right: 0;
+}
+
+.btn-primary {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: color-mix(in srgb, var(--primary-color) 85%, white);
+}
+
+.btn-danger {
+  background-color: color-mix(in srgb, var(--danger-color) 70%, transparent);
+  color: white;
+  backdrop-filter: blur(4px);
+}
+
+.btn-danger:hover {
+  background-color: var(--danger-color);
+}
+
+/* Recipe grid layout */
+#recipe-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: calc(var(--spacing-unit) * 1.5);
+  padding: var(--spacing-unit) 0;
+}
+
+#recipe-list .col-12 {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: calc(var(--spacing-unit) * 2);
+}
+
+/* Forms */
+.form-control {
+  width: 100%;
+  padding: calc(var(--spacing-unit) * 0.5);
+  border: 1px solid var(--primary-color);
+  border-radius: var(--border-radius);
+  background-color: color-mix(in srgb, var(--background-color) 90%, black);
+  color: var(--text-color);
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--secondary-color);
+}
+
+/* Alerts */
+.alert {
+  padding: var(--spacing-unit);
+  border-radius: var(--border-radius);
+  margin-bottom: var(--spacing-unit);
+}
+
+.alert-info {
+  background-color: color-mix(in srgb, var(--secondary-color) 20%, transparent);
+  border: 1px solid var(--secondary-color);
+}
+
+/* HTMX specific styles */
+.htmx-indicator {
+  opacity: 0;
+  transition: opacity 200ms ease-in;
+}
+
+.htmx-request .htmx-indicator {
+  opacity: 1;
+}
+
+.htmx-request.htmx-indicator {
+  opacity: 1;
+}
+
+/* Media Queries */
+@media (min-width: 768px) {
+  .layout {
+    flex-direction: row;
+  }
+
+  .sidebar {
+    width: var(--sidebar-width);
+    border-right: 1px solid var(--sidebar-border);
+    border-bottom: none;
+    height: 100vh;
+    left: 0;
+    top: 0;
+  }
+
+  .sidebar .sidebar-content {
+    flex-direction: column;
+    align-items: flex-start;
+    height: 100%;
+  }
+
+  .sidebar .brand a {
+    margin-bottom: calc(var(--spacing-unit) * 2);
+  }
+
+  .sidebar .nav-links {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .sidebar .nav-link {
+    width: 100%;
+    padding: var(--spacing-unit);
+  }
+
+  .main-content {
+    margin-left: var(--sidebar-width);
+    padding: calc(var(--spacing-unit) * 2);
+  }
+}

static/js/htmx.min.js

@@ -0,0 +1 @@
+(function(e,t){if(typeof define==="function"&&define.amd){define([],t)}else if(typeof module==="object"&&module.exports){module.exports=t()}else{e.htmx=e.htmx||t()}})(typeof self!=="undefined"?self:this,function(){return function(){"use strict";var Q={onLoad:F,process:zt,on:de,off:ge,trigger:ce,ajax:Nr,find:C,findAll:f,closest:v,values:function(e,t){var r=dr(e,t||"post");return r.values},remove:_,addClass:z,removeClass:n,toggleClass:$,takeClass:W,defineExtension:Ur,removeExtension:Br,logAll:V,logNone:j,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,allowScriptTags:true,inlineScriptNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",wsBinaryType:"blob",disableSelector:"[hx-disable], [data-hx-disable]",useTemplateFragments:false,scrollBehavior:"smooth",defaultFocusScroll:false,getCacheBusterParam:false,globalViewTransitions:false,methodsThatUseUrlParams:["get"],selfRequestsOnly:false,ignoreTitle:false,scrollIntoViewOnBoost:true,triggerSpecsCache:null},parseInterval:d,_:t,createEventSource:function(e){return new EventSource(e,{withCredentials:true})},createWebSocket:function(e){var t=new WebSocket(e,[]);t.binaryType=Q.config.wsBinaryType;return t},version:"1.9.12"};var r={addTriggerHandler:Lt,bodyContains:se,canAccessLocalStorage:U,findThisElement:xe,filterValues:yr,hasAttribute:o,getAttributeValue:te,getClosestAttributeValue:ne,getClosestMatch:c,getExpressionVars:Hr,getHeaders:xr,getInputValues:dr,getInternalData:ae,getSwapSpecification:wr,getTriggerSpecs:it,getTarget:ye,makeFragment:l,mergeObjects:le,makeSettleInfo:T,oobSwap:Ee,querySelectorExt:ue,selectAndSwap:je,settleImmediately:nr,shouldCancel:ut,triggerEvent:ce,triggerErrorEvent:fe,withExtensions:R};var w=["get","post","put","delete","patch"];var i=w.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");var S=e("head"),q=e("title"),H=e("svg",true);function e(e,t){return new RegExp("<"+e+"(\\s[^>]*>|>)([\\s\\S]*?)<\\/"+e+">",!!t?"gim":"im")}function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e.getAttribute&&e.getAttribute(t)}function o(e,t){return e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function u(e){return e.parentElement}function re(){return document}function c(e,t){while(e&&!t(e)){e=u(e)}return e?e:null}function L(e,t,r){var n=te(t,r);var i=te(t,"hx-disinherit");if(e!==t&&i&&(i==="*"||i.split(" ").indexOf(r)>=0)){return"unset"}else{return n}}function ne(t,r){var n=null;c(t,function(e){return n=L(t,e,r)});if(n!=="unset"){return n}}function h(e,t){var r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;return r&&r.call(e,t)}function A(e){var t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;var r=t.exec(e);if(r){return r[1].toLowerCase()}else{return""}}function s(e,t){var r=new DOMParser;var n=r.parseFromString(e,"text/html");var i=n.body;while(t>0){t--;i=i.firstChild}if(i==null){i=re().createDocumentFragment()}return i}function N(e){return/<body/.test(e)}function l(e){var t=!N(e);var r=A(e);var n=e;if(r==="head"){n=n.replace(S,"")}if(Q.config.useTemplateFragments&&t){var i=s("<body><template>"+n+"</template></body>",0);var a=i.querySelector("template").content;if(Q.config.allowScriptTags){oe(a.querySelectorAll("script"),function(e){if(Q.config.inlineScriptNonce){e.nonce=Q.config.inlineScriptNonce}e.htmxExecuted=navigator.userAgent.indexOf("Firefox")===-1})}else{oe(a.querySelectorAll("script"),function(e){_(e)})}return a}switch(r){case"thead":case"tbody":case"tfoot":case"colgroup":case"caption":return s("<table>"+n+"</table>",1);case"col":return s("<table><colgroup>"+n+"</colgroup></table>",2);case"tr":return s("<table><tbody>"+n+"</tbody></table>",2);case"td":case"th":return s("<table><tbody><tr>"+n+"</tr></tbody></table>",3);case"script":case"style":return s("<div>"+n+"</div>",1);default:return s(n,0)}}function ie(e){if(e){e()}}function I(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function k(e){return I(e,"Function")}function P(e){return I(e,"Object")}function ae(e){var t="htmx-internal-data";var r=e[t];if(!r){r=e[t]={}}return r}function M(e){var t=[];if(e){for(var r=0;r<e.length;r++){t.push(e[r])}}return t}function oe(e,t){if(e){for(var r=0;r<e.length;r++){t(e[r])}}}function X(e){var t=e.getBoundingClientRect();var r=t.top;var n=t.bottom;return r<window.innerHeight&&n>=0}function se(e){ifLine truncated