commit 80490a56f933df2a563897972005c8b343e04b14 · veryroundbird.house/fixao3

+60 -56

src/app/generator/page.js

···

       80
       80
        
                 <input type="text" name="url" id="url" onChange={e => setUrl(e.target.value)} />

     

       81
       81
        
               </div>

     

       82
       82
        
               <details><summary>Style Settings</summary>

     

       83
       83
       -
                 <div className="input-field">

     

       84
       84
       -
                   <label htmlFor="theme">Theme</label>

     

       85
       85
       -
                   <select name="theme" id="theme" defaultValue={props.theme} onChange={e => updateProp("theme", e.target.value)}>

     

       86
       86
       -
                     {Object.entries(themes).map((th, i) => {

     

       87
       87
       -
                       return (

     

       88
       88
       -
                         <option key={i} value={th[0]}>{th[1].name}</option>

     

       89
       89
       -
                       )

     

       90
       90
       -
                     })}

     

       91
       91
       -
                   </select>

     

       92
       92
       -
                 </div>

     

       93
       93
       -
                 <div className="input-field">

     

       94
       94
       -
                   <label htmlFor="baseFont">Base Font</label>

     

       95
       95
       -
                   <select name="baseFont" id="baseFont" defaultValue={props.baseFont} onChange={e => updateProp("baseFont", e.target.value)}>

     

       96
       96
       -
                     {Object.entries(baseFonts).sort().map((bf, i) => {

     

       83
       83
       +
                 <div className="cols">

     

       84
       84
       +
                   <div className="col">

     

       85
       85
       +
                     <div className="input-field">

     

       86
       86
       +
                       <label htmlFor="theme">Theme</label>

     

       87
       87
       +
                       <select name="theme" id="theme" defaultValue={props.theme} onChange={e => updateProp("theme", e.target.value)}>

     

       88
       88
       +
                         {Object.entries(themes).map((th, i) => {

     

       89
       89
       +
                           return (

     

       90
       90
       +
                             <option key={i} value={th[0]}>{th[1].name}</option>

     

       91
       91
       +
                           )

     

       92
       92
       +
                         })}

     

       93
       93
       +
                       </select>

     

       94
       94
       +
                     </div>

     

       95
       95
       +
                     <div className="input-field">

     

       96
       96
       +
                       <label htmlFor="baseFont">Base Font</label>

     

       97
       97
       +
                       <select name="baseFont" id="baseFont" defaultValue={props.baseFont} onChange={e => updateProp("baseFont", e.target.value)}>

     

       98
       98
       +
                         {Object.entries(baseFonts).sort().map((bf, i) => {

     

       97
       99
        
                       

     

       98
       98
       -
                       return (

     

       99
       99
       -
                         <option key={i} value={bf[0]}>{bf[1].displayName}</option>

     

       100
       100
       -
                       )

     

       101
       101
       -
                     })}

     

       102
       102
       -
                   </select>

     

       103
       103
       -
                 </div>

     

       104
       104
       -
                 <div className="input-field">

     

       105
       105
       -
                   <label htmlFor="titleFont">Title Font</label>

     

       106
       106
       -
                   <select name="titleFont" id="titleFont" defaultValue={props.titleFont} onChange={e => updateProp("titleFont", e.target.value)}>

     

       107
       107
       -
                     {Object.entries({...titleFonts, ...baseFonts}).sort().map((tf, i) => {

     

       108
       108
       -
                       return (

     

       109
       109
       -
                         <option key={i} value={tf[0]}>{tf[1].displayName}</option>

     

       110
       110
       -
                       )

     

       111
       111
       -
                     })}

     

       112
       112
       -
                   </select>

     

       113
       113
       -
                 </div>

     

       114
       114
       -
                 <div className="input-field">

     

       115
       115
       -
                   <label htmlFor="features">Features:</label>

     

       116
       116
       -
                   <ul>

     

       117
       117
       -
                     <li><label><input type="checkbox" name="features[]" value="category" defaultChecked={props.category} onChange={e => updateProp(e.target.value, e.target.checked)} /> Category</label></li>

     

       118
       118
       -
                     <li><label><input type="checkbox" name="features[]" value="rating" defaultChecked={props.rating} onChange={e => updateProp(e.target.value, e.target.checked)} /> Rating</label></li>

     

       119
       119
       -
                     <li><label><input type="checkbox" name="features[]" value="warnings" defaultChecked={props.warnings} onChange={e => updateProp(e.target.value, e.target.checked)} /> Archive Warnings</label></li>

     

       120
       120
       -
                     <li><label><input type="checkbox" name="features[]" value="charTags"  defaultChecked={props.charTags} onChange={e => updateProp(e.target.value, e.target.checked)} /> Character Tags</label></li>

     

       121
       121
       -
                     <li><label><input type="checkbox" name="features[]" value="relTags" defaultChecked={props.relTags} onChange={e => updateProp(e.target.value, e.target.checked)} /> Relationship Tags</label></li>

     

       122
       122
       -
                     <li><label><input type="checkbox" name="features[]" value="freetags" defaultChecked={props.freeTags} onChange={e => updateProp(e.target.value, e.target.checked)} /> Free Tags</label></li>

     

       123
       123
       -
                     <li><label><input type="checkbox" name="features[]" value="summary" defaultChecked={props.summary} onChange={e => updateProp(e.target.value, e.target.checked)} /> Summary</label></li>

     

       124
       124
       -
                     <li><label><input type="checkbox" name="features[]" value="wordcount" defaultChecked={props.wordcount} onChange={e => updateProp(e.target.value, e.target.checked)} /> Wordcount</label></li>

     

       125
       125
       -
                     <li><label><input type="checkbox" name="features[]" value="chapters" defaultChecked={props.chapters} onChange={e => updateProp(e.target.value, e.target.checked)} /> Chapters</label></li>

     

       126
       126
       -
                   </ul>

     

       127
       127
       -
                 </div>

     

       128
       128
       -
                 <div className="input-field">

     

       129
       129
       -
                   <label htmlFor="summaryOptions">Summary Type</label>

     

       130
       130
       -
                   <ul>

     

       131
       131
       -
                     <li><label><input type="radio" name="summaryType" value="basic" defaultChecked={props.summaryType === 'basic'} onChange={e => updateProp(e.target.name, e.target.value)} /> Story Summary</label></li>

     

       132
       132
       -
                     <li><label><input type="radio" name="summaryType" defaultChecked={props.summaryType === 'chapter'} value="chapter" onChange={e => updateProp(e.target.name, e.target.value)} /> Chapter Summary (if available)</label></li>

     

       133
       133
       -
                     <li><label><input type="radio" name="summaryType" defaultChecked={props.summaryType === 'custom'} value="custom" onChange={e => updateProp(e.target.name, e.target.value)} /> Custom Summary</label></li>

     

       134
       134
       -
                   </ul>

     

       135
       135
       -
                 </div>

     

       136
       136
       -
                 {props.summaryType === 'custom' && (

     

       100
       100
       +
                           return (

     

       101
       101
       +
                             <option key={i} value={bf[0]}>{bf[1].displayName}</option>

     

       102
       102
       +
                           )

     

       103
       103
       +
                         })}

     

       104
       104
       +
                       </select>

     

       105
       105
       +
                     </div>

     

       106
       106
       +
                     <div className="input-field">

     

       107
       107
       +
                       <label htmlFor="titleFont">Title Font</label>

     

       108
       108
       +
                       <select name="titleFont" id="titleFont" defaultValue={props.titleFont} onChange={e => updateProp("titleFont", e.target.value)}>

     

       109
       109
       +
                         {Object.entries({...titleFonts, ...baseFonts}).sort().map((tf, i) => {

     

       110
       110
       +
                           return (

     

       111
       111
       +
                             <option key={i} value={tf[0]}>{tf[1].displayName}</option>

     

       112
       112
       +
                           )

     

       113
       113
       +
                         })}

     

       114
       114
       +
                       </select>

     

       115
       115
       +
                     </div>

     

       116
       116
       +
                   </div>

     

       137
       117
        
                   <div className="input-field">

     

       138
       138
       -
                     <label htmlFor="customSummary">Custom Summary</label>

     

       139
       139
       -
                     <textarea name="customSummary" id="customSummary" onChange={e => updateProp(e.target.name, e.target.value)}></textarea>

     

       118
       118
       +
                     <label htmlFor="features">Features:</label>

     

       119
       119
       +
                     <ul>

     

       120
       120
       +
                       <li><label><input type="checkbox" name="features[]" value="category" defaultChecked={props.category} onChange={e => updateProp(e.target.value, e.target.checked)} /> Category</label></li>

     

       121
       121
       +
                       <li><label><input type="checkbox" name="features[]" value="rating" defaultChecked={props.rating} onChange={e => updateProp(e.target.value, e.target.checked)} /> Rating</label></li>

     

       122
       122
       +
                       <li><label><input type="checkbox" name="features[]" value="warnings" defaultChecked={props.warnings} onChange={e => updateProp(e.target.value, e.target.checked)} /> Archive Warnings</label></li>

     

       123
       123
       +
                       <li><label><input type="checkbox" name="features[]" value="charTags"  defaultChecked={props.charTags} onChange={e => updateProp(e.target.value, e.target.checked)} /> Character Tags</label></li>

     

       124
       124
       +
                       <li><label><input type="checkbox" name="features[]" value="relTags" defaultChecked={props.relTags} onChange={e => updateProp(e.target.value, e.target.checked)} /> Relationship Tags</label></li>

     

       125
       125
       +
                       <li><label><input type="checkbox" name="features[]" value="freetags" defaultChecked={props.freeTags} onChange={e => updateProp(e.target.value, e.target.checked)} /> Free Tags</label></li>

     

       126
       126
       +
                       <li><label><input type="checkbox" name="features[]" value="summary" defaultChecked={props.summary} onChange={e => updateProp(e.target.value, e.target.checked)} /> Summary</label></li>

     

       127
       127
       +
                       <li><label><input type="checkbox" name="features[]" value="wordcount" defaultChecked={props.wordcount} onChange={e => updateProp(e.target.value, e.target.checked)} /> Wordcount</label></li>

     

       128
       128
       +
                       <li><label><input type="checkbox" name="features[]" value="chapters" defaultChecked={props.chapters} onChange={e => updateProp(e.target.value, e.target.checked)} /> Chapters</label></li>

     

       129
       129
       +
                     </ul>

     

       130
       130
       +
                   </div>

     

       131
       131
       +
                   <div className="input-field">

     

       132
       132
       +
                     <label htmlFor="summaryOptions">Summary Type</label>

     

       133
       133
       +
                     <ul>

     

       134
       134
       +
                       <li><label><input type="radio" name="summaryType" value="basic" defaultChecked={props.summaryType === 'basic'} onChange={e => updateProp(e.target.name, e.target.value)} /> Story Summary</label></li>

     

       135
       135
       +
                       <li><label><input type="radio" name="summaryType" defaultChecked={props.summaryType === 'chapter'} value="chapter" onChange={e => updateProp(e.target.name, e.target.value)} /> Chapter Summary (if available)</label></li>

     

       136
       136
       +
                       <li><label><input type="radio" name="summaryType" defaultChecked={props.summaryType === 'custom'} value="custom" onChange={e => updateProp(e.target.name, e.target.value)} /> Custom Summary</label></li>

     

       137
       137
       +
                     </ul>

     

       138
       138
       +
                     {props.summaryType === 'custom' && (

     

       139
       139
       +
                       <div className="input-field">

     

       140
       140
       +
                         <label htmlFor="customSummary">Custom Summary</label>

     

       141
       141
       +
                         <textarea name="customSummary" id="customSummary" onChange={e => updateProp(e.target.name, e.target.value)}></textarea>

     

       142
       142
       +
                       </div>

     

       143
       143
       +
                     )}

     

       140
       144
        
                   </div>

     

       141
       141
       -
                 )}

     

       145
       145
       +
                 </div>

     

       142
       146
        
               </details>

     

       143
       147
        
             </form>

     

       144
       148
        
             {imgData && imgData !== '' && (

src/app/globals.css

···

       75
       75
        
         margin-bottom: 1em;

     

       76
       76
        
       }

     

       77
       77
        
       

     

       78
       78
       +
       details .cols {

     

       79
       79
       +
         margin-top: 1em;

     

       80
       80
       +
         display: grid;

     

       81
       81
       +
         grid-template-columns: repeat(3, 1fr);

     

       82
       82
       +
         gap: 20px;

     

       83
       83
       +
       }

     

       84
       84
       +
       

     

       85
       85
       +
       

     

       86
       86
       +
       

     

       78
       87
        
       #output {

     

       79
       88
        
         border: 1px white dashed;

     

       80
       89
        
       }