{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "from app_starter_gui.css import generate_css\n",
    "from app_starter_gui.core import Button, load_buttons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "yaml_file = \"buttons.yaml\"\n",
    "buttons = load_buttons(yaml_file)\n",
    "css = generate_css(buttons)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "\n",
      "        #btn1 { \n",
      "            height: 230px;  /* Total height of button */\n",
      "            width: 200px;\n",
      "            border-radius: 15px;\n",
      "            display: flex;\n",
      "            flex-direction: column;\n",
      "            padding: 0;\n",
      "            margin: 0;\n",
      "            overflow: hidden;\n",
      "            transition: transform 0.2s, box-shadow 0.2s;\n",
      "            background: none;\n",
      "        }\n",
      "        \n",
      "        #btn1::before {\n",
      "            content: '';\n",
      "            height: 180px;  /* Image height */\n",
      "            width: 100%;\n",
      "            background-size: cover;\n",
      "            background-position: center center;\n",
      "            background-repeat: no-repeat;\n",
      "            background-image: url('https://github.com/danielmiessler/fabric/blob/main/images/fabric-logo-gif.gif?raw=true');\n",
      "            transition: transform 0.2s;\n",
      "            margin: 0;\n",
      "            padding: 0;\n",
      "            display: block;\n",
      "            flex-shrink: 0;\n",
      "            position: relative;\n",
      "            top: 0;\n",
      "            border-radius: 15px 15px 0 0;  /* Round top corners only */\n",
      "        }\n",
      "        \n",
      "        #btn1:hover {\n",
      "            transform: translateY(-5px);\n",
      "            box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n",
      "        }\n",
      "\n",
      "        #btn1 > div {\n",
      "            height: 50px;\n",
      "            display: flex;\n",
      "            align-items: center;\n",
      "            justify-content: center;\n",
      "        }\n",
      "\n",
      "        #btn1:hover::before {\n",
      "            transform: scale(1.05);\n",
      "        }\n",
      "    \n",
      "\n",
      "        #btn2 { \n",
      "            height: 230px;  /* Total height of button */\n",
      "            width: 200px;\n",
      "            border-radius: 15px;\n",
      "            display: flex;\n",
      "            flex-direction: column;\n",
      "            padding: 0;\n",
      "            margin: 0;\n",
      "            overflow: hidden;\n",
      "            transition: transform 0.2s, box-shadow 0.2s;\n",
      "            background: none;\n",
      "        }\n",
      "        \n",
      "        #btn2::before {\n",
      "            content: '';\n",
      "            height: 180px;  /* Image height */\n",
      "            width: 100%;\n",
      "            background-size: cover;\n",
      "            background-position: center center;\n",
      "            background-repeat: no-repeat;\n",
      "            background-image: url('https://static1.srcdn.com/wordpress/wp-content/uploads/2020/06/Gloomhaven-Jaws-of-the-Lion-Hatchet.jpg');\n",
      "            transition: transform 0.2s;\n",
      "            margin: 0;\n",
      "            padding: 0;\n",
      "            display: block;\n",
      "            flex-shrink: 0;\n",
      "            position: relative;\n",
      "            top: 0;\n",
      "            border-radius: 15px 15px 0 0;  /* Round top corners only */\n",
      "        }\n",
      "        \n",
      "        #btn2:hover {\n",
      "            transform: translateY(-5px);\n",
      "            box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n",
      "        }\n",
      "\n",
      "        #btn2 > div {\n",
      "            height: 50px;\n",
      "            display: flex;\n",
      "            align-items: center;\n",
      "            justify-content: center;\n",
      "        }\n",
      "\n",
      "        #btn2:hover::before {\n",
      "            transform: scale(1.05);\n",
      "        }\n",
      "    \n"
     ]
    }
   ],
   "source": [
    "print(css)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".venv",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.0rc1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}