build_tools.syllable_walk.web_assets ==================================== .. py:module:: build_tools.syllable_walk.web_assets .. autoapi-nested-parse:: Static web assets for the syllable walker web interface. This module contains HTML and CSS templates embedded as Python strings. Assets are embedded rather than served as separate files to maintain simplicity and avoid requiring additional file distribution when the package is installed. The embedded assets provide: - HTML_TEMPLATE: Complete single-page application interface - CSS_CONTENT: Full stylesheet for the web interface Attributes ---------- .. autoapisummary:: build_tools.syllable_walk.web_assets.HTML_TEMPLATE build_tools.syllable_walk.web_assets.CSS_CONTENT Module Contents --------------- .. py:data:: HTML_TEMPLATE :value: Multiline-String .. raw:: html
Show Value .. code-block:: python """ Syllable Walker - Interactive Explorer

Syllable Walker

Explore phonetic feature space through cost-based random walks

-
Total Syllables
0
Walks Generated
-
Current Profile

Walk Parameters

Leave empty for a random starting point
Moderate exploration, neutral frequency bias
For reproducible walks

Click "Generate Walk" to begin exploring

""" .. raw:: html
.. py:data:: CSS_CONTENT :value: Multiline-String .. raw:: html
Show Value .. code-block:: python """/* ======================================== RESET ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ======================================== BASE ======================================== */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #0f1218 0%, #151a23 100%); color: #d6d9e0; min-height: 100vh; padding: 20px; } /* ======================================== CONTAINER ======================================== */ .container { max-width: 1200px; margin: 0 auto; background: #1b1f2a; border-radius: 12px; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6); overflow: hidden; border: 1px solid #262b38; } /* ======================================== HEADER ======================================== */ .header { background: linear-gradient(135deg, #232a3a 0%, #1b2130 100%); color: #eef0f4; padding: 30px; text-align: center; border-bottom: 1px solid #2b3142; } .header h1 { font-size: 2.4em; margin-bottom: 10px; font-weight: 600; letter-spacing: 0.02em; } .header p { font-size: 1.05em; color: #b8bcc6; } /* ======================================== STATS BAR ======================================== */ .stats { display: flex; justify-content: space-around; background: #161a23; padding: 20px; border-bottom: 1px solid #262b38; } .stat { text-align: center; } .stat-value { font-size: 2em; font-weight: 600; color: #9aa4ff; } .stat-label { color: #8c92a3; font-size: 0.85em; margin-top: 5px; letter-spacing: 0.04em; text-transform: uppercase; } /* ======================================== MAIN CONTENT GRID ======================================== */ .content { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; padding: 30px; } /* ======================================== CONTROLS PANEL ======================================== */ .controls { background: #161a23; padding: 25px; border-radius: 8px; border: 1px solid #262b38; height: fit-content; } .control-group { margin-bottom: 20px; } .control-group label { display: block; font-weight: 600; margin-bottom: 8px; color: #cfd3dc; font-size: 0.9em; } .control-group input, .control-group select { width: 100%; padding: 10px; background: #0f1218; border: 1px solid #2b3142; border-radius: 6px; font-size: 1em; color: #e6e8ee; transition: border-color 0.2s, background 0.2s; } .control-group input:focus, .control-group select:focus { outline: none; border-color: #9aa4ff; background: #121623; } .control-group .help-text { font-size: 0.8em; color: #8c92a3; margin-top: 6px; line-height: 1.4; } .profile-info { background: #1f2534; padding: 15px; border-radius: 6px; margin-top: 10px; font-size: 0.85em; color: #cfd3dc; border-left: 3px solid #9aa4ff; } /* ======================================== PRIMARY BUTTON ======================================== */ .btn { width: 100%; padding: 15px; background: linear-gradient(135deg, #4f5bd5 0%, #6a74ff 100%); color: #ffffff; border: none; border-radius: 6px; font-size: 1.05em; font-weight: 600; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(106, 116, 255, 0.35); } .btn:active { transform: translateY(0); box-shadow: none; } .btn:disabled { background: #3a3f52; color: #8c92a3; cursor: not-allowed; box-shadow: none; } /* ======================================== RESULTS ======================================== */ .results { background: transparent; } /* ======================================== WALK DISPLAY ======================================== */ .walk-display { background: #161a23; padding: 25px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #262b38; } .walk-path { font-size: 1.4em; font-weight: 600; color: #eef0f4; line-height: 1.8; word-wrap: break-word; } /* ======================================== SYLLABLE DETAILS ======================================== */ .walk-details { margin-top: 20px; } .syllable-card { background: #1b1f2a; padding: 15px; margin: 10px 0; border-radius: 6px; border-left: 3px solid #6a74ff; display: flex; justify-content: space-between; align-items: center; transition: transform 0.15s, background 0.15s; } .syllable-card:hover { transform: translateX(4px); background: #20263a; } .syllable-text { font-size: 1.25em; font-weight: 600; color: #eef0f4; } .syllable-freq { background: #6a74ff; color: #ffffff; padding: 5px 14px; border-radius: 20px; font-size: 0.85em; font-weight: 600; } /* ======================================== LOADING & SPINNER ======================================== */ .loading { text-align: center; padding: 40px; color: #8c92a3; } .spinner { border: 4px solid #2b3142; border-top: 4px solid #6a74ff; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ======================================== ERROR STATE ======================================== */ .error { background: #2a1b1d; color: #f2b8bd; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 3px solid #d9534f; } /* ======================================== RESPONSIVE ======================================== */ @media (max-width: 768px) { .content { grid-template-columns: 1fr; } .stats { flex-direction: column; gap: 15px; } } """ .. raw:: html