scriptorium 0.0.3 → 0.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.lt3 +324 -0
- data/README.md +3155 -1
- data/assets/.DS_Store +0 -0
- data/assets/README.md +44 -0
- data/assets/icons/social/reddit.png +0 -0
- data/assets/icons/social/x-logo.png +0 -0
- data/assets/icons/ui/.DS_Store +0 -0
- data/assets/icons/ui/back.png +0 -0
- data/assets/icons/ui/copy.png +0 -0
- data/assets/icons/ui/down.png +0 -0
- data/assets/icons/ui/end.png +0 -0
- data/assets/icons/ui/exit.png +0 -0
- data/assets/icons/ui/foo +10 -0
- data/assets/icons/ui/home.png +0 -0
- data/assets/icons/ui/left.png +0 -0
- data/assets/icons/ui/next.png +0 -0
- data/assets/icons/ui/right.png +0 -0
- data/assets/icons/ui/start.png +0 -0
- data/assets/icons/ui/up.png +0 -0
- data/assets/imagenotfound.jpg +0 -0
- data/assets/samples/placeholder.svg +9 -0
- data/assets/themes/standard/favicon.svg +6 -0
- data/bin/sblog +84 -5
- data/bin/scriptorium +1 -0
- data/doc/README.txt +6 -0
- data/doc/anti-amnesia/20250727-054000-scriptorium-overview.md +94 -0
- data/doc/anti-amnesia/20250727-123000-anti-amnesia-conventions.md +2 -0
- data/doc/anti-amnesia/20250727-172600-cursor-rbenv-ruby-version-mystery.md +45 -0
- data/doc/anti-amnesia/20250727-172900-ai-cognitive-assessment-capabilities.md +40 -0
- data/doc/anti-amnesia/20250728-124243-aaa-syntax-clarification.md +46 -0
- data/doc/anti-amnesia/20250729-210000-reddit-autopost-integration-complete.md +158 -0
- data/doc/anti-amnesia/20250804-190500-cognitive-loop-bug.md +35 -0
- data/doc/anti-amnesia/20250804-190700-anti-amnesia-timestamping-fix.md +27 -0
- data/doc/anti-amnesia/20250807-213025.md +116 -0
- data/doc/anti-amnesia/20250901-211714-codemirror-integration-and-web-tests.md +172 -0
- data/doc/anti-amnesia/20250902-002402-backup-restore-system.md +126 -0
- data/doc/anti-amnesia/20250907-203339-backup-metadata-implementation.md +66 -0
- data/doc/banner_svg_config.md +114 -0
- data/doc/contrib.lt3 +8 -0
- data/doc/dependencies.md +281 -0
- data/doc/hacker.lt3 +5 -0
- data/doc/imported/0001-elixir-conf-2014/metadata.txt +7 -0
- data/doc/imported/0001-elixir-conf-2014/post.html +37 -0
- data/doc/imported/0001-elixir-conf-2014/source.lt3 +22 -0
- data/doc/imported/0002-programmers-and-word-processing/metadata.txt +7 -0
- data/doc/imported/0002-programmers-and-word-processing/post.html +192 -0
- data/doc/imported/0002-programmers-and-word-processing/source.lt3 +146 -0
- data/doc/imported/0003-how-to-turn-your-brain-sideways/metadata.txt +7 -0
- data/doc/imported/0003-how-to-turn-your-brain-sideways/post.html +60 -0
- data/doc/imported/0003-how-to-turn-your-brain-sideways/source.lt3 +40 -0
- data/doc/imported/0004-upcoming-lone-star-ruby-conference/metadata.txt +7 -0
- data/doc/imported/0004-upcoming-lone-star-ruby-conference/post.html +42 -0
- data/doc/imported/0004-upcoming-lone-star-ruby-conference/source.lt3 +24 -0
- data/doc/imported/0005-elixir-conf-2015-announced/metadata.txt +7 -0
- data/doc/imported/0005-elixir-conf-2015-announced/post.html +30 -0
- data/doc/imported/0005-elixir-conf-2015-announced/source.lt3 +16 -0
- data/doc/imported/0006-ruby-for-dinosaurs/metadata.txt +7 -0
- data/doc/imported/0006-ruby-for-dinosaurs/post.html +43 -0
- data/doc/imported/0006-ruby-for-dinosaurs/source.lt3 +27 -0
- data/doc/imported/0007-phoenix-isnt-rails/metadata.txt +7 -0
- data/doc/imported/0007-phoenix-isnt-rails/post.html +116 -0
- data/doc/imported/0007-phoenix-isnt-rails/source.lt3 +87 -0
- data/doc/imported/0008-concerning-the-term-monkeypatching/metadata.txt +7 -0
- data/doc/imported/0008-concerning-the-term-monkeypatching/post.html +129 -0
- data/doc/imported/0008-concerning-the-term-monkeypatching/source.lt3 +92 -0
- data/doc/imported/0009-announcement-coming-soon/metadata.txt +7 -0
- data/doc/imported/0009-announcement-coming-soon/post.html +33 -0
- data/doc/imported/0009-announcement-coming-soon/source.lt3 +19 -0
- data/doc/imported/0010-immutable-data-ditching-the-wax-tablet/metadata.txt +7 -0
- data/doc/imported/0010-immutable-data-ditching-the-wax-tablet/post.html +175 -0
- data/doc/imported/0010-immutable-data-ditching-the-wax-tablet/source.lt3 +139 -0
- data/doc/imported/0011-computer-science-as-a-lost-art/metadata.txt +7 -0
- data/doc/imported/0011-computer-science-as-a-lost-art/post.html +139 -0
- data/doc/imported/0011-computer-science-as-a-lost-art/source.lt3 +104 -0
- data/doc/imported/0012-ruby-day-in-turin-italy/metadata.txt +7 -0
- data/doc/imported/0012-ruby-day-in-turin-italy/post.html +42 -0
- data/doc/imported/0012-ruby-day-in-turin-italy/source.lt3 +24 -0
- data/doc/imported/0013-rubyday-was-a-success/metadata.txt +7 -0
- data/doc/imported/0013-rubyday-was-a-success/post.html +44 -0
- data/doc/imported/0013-rubyday-was-a-success/source.lt3 +27 -0
- data/doc/imported/0014-working-on-the-blogging-software/metadata.txt +7 -0
- data/doc/imported/0014-working-on-the-blogging-software/post.html +63 -0
- data/doc/imported/0014-working-on-the-blogging-software/source.lt3 +41 -0
- data/doc/imported/0015-ok-its-not-really-a-lost-art/metadata.txt +7 -0
- data/doc/imported/0015-ok-its-not-really-a-lost-art/post.html +172 -0
- data/doc/imported/0015-ok-its-not-really-a-lost-art/source.lt3 +134 -0
- data/doc/imported/0016-an-in-operator-for-ruby/metadata.txt +7 -0
- data/doc/imported/0016-an-in-operator-for-ruby/post.html +155 -0
- data/doc/imported/0016-an-in-operator-for-ruby/source.lt3 +106 -0
- data/doc/imported/0017-the-forgotten-mathematician/metadata.txt +7 -0
- data/doc/imported/0017-the-forgotten-mathematician/post.html +161 -0
- data/doc/imported/0017-the-forgotten-mathematician/source.lt3 +119 -0
- data/doc/imported/0018-ruby-puns/metadata.txt +7 -0
- data/doc/imported/0018-ruby-puns/post.html +46 -0
- data/doc/imported/0018-ruby-puns/source.lt3 +28 -0
- data/doc/imported/0019-custom-exceptions-via-metaprogramming/metadata.txt +7 -0
- data/doc/imported/0019-custom-exceptions-via-metaprogramming/post.html +138 -0
- data/doc/imported/0019-custom-exceptions-via-metaprogramming/source.lt3 +101 -0
- data/doc/imported/0020-fffff/metadata.txt +7 -0
- data/doc/imported/0020-fffff/post.html +24 -0
- data/doc/imported/0020-fffff/source.lt3 +12 -0
- data/doc/imported/0021-trying-ror-yet-again/metadata.txt +7 -0
- data/doc/imported/0021-trying-ror-yet-again/post.html +26 -0
- data/doc/imported/0021-trying-ror-yet-again/source.lt3 +12 -0
- data/doc/imported/0023-doctor-sleep/metadata.txt +7 -0
- data/doc/imported/0023-doctor-sleep/post.html +63 -0
- data/doc/imported/0023-doctor-sleep/source.lt3 +44 -0
- data/doc/imported/0024-just-a-test/metadata.txt +7 -0
- data/doc/imported/0024-just-a-test/post.html +24 -0
- data/doc/imported/0024-just-a-test/source.lt3 +12 -0
- data/doc/imported/import_summary.txt +98 -0
- data/doc/livetext-informal-spec.txt +65 -0
- data/doc/myuserdoc/ch-0.lt3 +31 -0
- data/doc/myuserdoc/ch-1.lt3 +37 -0
- data/doc/myuserdoc/ch-10.lt3 +22 -0
- data/doc/myuserdoc/ch-2.lt3 +37 -0
- data/doc/myuserdoc/ch-3.lt3 +19 -0
- data/doc/myuserdoc/ch-4.lt3 +43 -0
- data/doc/myuserdoc/ch-5.lt3 +22 -0
- data/doc/myuserdoc/ch-6.lt3 +19 -0
- data/doc/myuserdoc/ch-7.lt3 +16 -0
- data/doc/myuserdoc/ch-8.lt3 +13 -0
- data/doc/myuserdoc/ch-9.lt3 +19 -0
- data/doc/myuserdoc/tweak.rb +18 -0
- data/doc/myuserdoc/userdoc-toc.txt +88 -0
- data/doc/old-posts/0001-elixir-conf-2014.lt3 +24 -0
- data/doc/old-posts/0002-programmers-and-word-processing.lt3 +150 -0
- data/doc/old-posts/0003-how-to-turn-your-brain-sideways.lt3 +43 -0
- data/doc/old-posts/0004-upcoming-lone-star-ruby-conference.lt3 +26 -0
- data/doc/old-posts/0005-elixir-conf-2015-announced.lt3 +17 -0
- data/doc/old-posts/0006-ruby-for-dinosaurs.lt3 +30 -0
- data/doc/old-posts/0007-phoenix-isnt-rails.lt3 +90 -0
- data/doc/old-posts/0008-concerning-the-term-monkeypatching.lt3 +105 -0
- data/doc/old-posts/0009-announcement-coming-soon.lt3 +20 -0
- data/doc/old-posts/0010-immutable-data-ditching-the-wax-tablet.lt3 +142 -0
- data/doc/old-posts/0011-computer-science-as-a-lost-art.lt3 +117 -0
- data/doc/old-posts/0012-ruby-day-in-turin-italy.lt3 +26 -0
- data/doc/old-posts/0013-rubyday-was-a-success.lt3 +28 -0
- data/doc/old-posts/0014-working-on-the-blogging-software.lt3 +42 -0
- data/doc/old-posts/0015-ok-its-not-really-a-lost-art.lt3 +137 -0
- data/doc/old-posts/0016-an-in-operator-for-ruby.lt3 +142 -0
- data/doc/old-posts/0017-the-forgotten-mathematician.lt3 +129 -0
- data/doc/old-posts/0018-ruby-puns.lt3 +31 -0
- data/doc/old-posts/0019-custom-exceptions-via-metaprogramming.lt3 +116 -0
- data/doc/old-posts/0021-trying-ror-yet-again.lt3 +35 -0
- data/doc/old-posts/0023-doctor-sleep.lt3 +43 -0
- data/doc/old-posts/0024-just-a-test.lt3 +12 -0
- data/doc/old-posts/0025-trying-another-post.lt3 +12 -0
- data/doc/old-repo +1 -0
- data/doc/reddit_credentials_template.json +8 -0
- data/doc/reddit_integration.md +207 -0
- data/doc/user.lt3 +35 -0
- data/doc/user_guide_section_1.md +137 -0
- data/doc/user_guide_section_10.md +515 -0
- data/doc/user_guide_section_11.md +708 -0
- data/doc/user_guide_section_2.md +233 -0
- data/doc/user_guide_section_3.md +5 -0
- data/doc/user_guide_section_4.md +221 -0
- data/doc/user_guide_section_5.md +243 -0
- data/doc/user_guide_section_6.md +147 -0
- data/doc/user_guide_section_7.md +311 -0
- data/doc/user_guide_section_8.md +224 -0
- data/doc/user_guide_section_9.md +375 -0
- data/lib/rouge/lexers/livetext.rb +74 -0
- data/lib/scriptorium/api.rb +2373 -0
- data/lib/scriptorium/banner_svg.rb +729 -0
- data/lib/scriptorium/contract.rb +34 -0
- data/lib/scriptorium/exceptions.rb +201 -1
- data/lib/scriptorium/helpers.rb +675 -0
- data/lib/scriptorium/post.rb +259 -0
- data/lib/scriptorium/reddit.rb +83 -0
- data/lib/scriptorium/repo.rb +938 -0
- data/lib/scriptorium/standard_files.rb +149 -0
- data/lib/scriptorium/support/bootstrap/css.txt +5 -0
- data/lib/scriptorium/support/bootstrap/js.txt +4 -0
- data/lib/scriptorium/support/common_js/clipboard.js +35 -0
- data/lib/scriptorium/support/common_js/content-loader.js +187 -0
- data/lib/scriptorium/support/common_js/navigation.js +52 -0
- data/lib/scriptorium/support/common_js/syntax-highlighting.js +27 -0
- data/lib/scriptorium/support/config/reddit.txt +10 -0
- data/lib/scriptorium/support/config/reddit_template.txt +17 -0
- data/lib/scriptorium/support/config/social.txt +8 -0
- data/lib/scriptorium/support/highlight/css.txt +2 -0
- data/lib/scriptorium/support/highlight/custom.css +119 -0
- data/lib/scriptorium/support/highlight/js.txt +1 -0
- data/lib/scriptorium/support/post_index/config.txt +15 -0
- data/lib/scriptorium/support/post_index/style.css +55 -0
- data/lib/scriptorium/support/templates/index_entry.lt3 +16 -0
- data/lib/scriptorium/support/templates/initial_post.lt3 +12 -0
- data/lib/scriptorium/support/templates/layout.txt +5 -0
- data/lib/scriptorium/support/templates/post.lt3 +104 -0
- data/lib/scriptorium/support/theme/footer.lt3 +2 -0
- data/lib/scriptorium/support/theme/header.lt3 +4 -0
- data/lib/scriptorium/support/theme/left.lt3 +3 -0
- data/lib/scriptorium/support/theme/main.lt3 +5 -0
- data/lib/scriptorium/support/theme/right.lt3 +3 -0
- data/lib/scriptorium/theme.rb +192 -0
- data/lib/scriptorium/version.rb +1 -1
- data/lib/scriptorium/view.rb +1021 -0
- data/lib/scriptorium/widgets/featured_posts.rb +149 -0
- data/lib/scriptorium/widgets/links.rb +112 -0
- data/lib/scriptorium/widgets/pages.rb +133 -0
- data/lib/scriptorium/widgets/widget.rb +133 -0
- data/lib/scriptorium.rb +38 -34
- data/lib/skeleton.rb +10 -1
- data/scriptorium.gemspec +17 -5
- data/test/README.md +69 -0
- data/test/WEB_INTEGRATION_README.md +196 -0
- data/test/all +83 -0
- data/test/api_demo.rb +99 -0
- data/test/assets/imagenotfound.jpg +0 -0
- data/test/assets/images/.DS_Store +0 -0
- data/test/assets/images/README.md +27 -0
- data/test/assets/images/odd_aspect.png +0 -0
- data/test/assets/images/perfect.png +0 -0
- data/test/assets/images/small.png +0 -0
- data/test/assets/images/tall.png +0 -0
- data/test/assets/images/very_tall.png +0 -0
- data/test/assets/images/very_wide.png +0 -0
- data/test/assets/images/wide.png +0 -0
- data/test/assets/testbanner.jpg +0 -0
- data/test/banner_svg/simple_helpers.rb +13 -0
- data/test/banner_svg/unit.rb +1000 -0
- data/test/config/deployment.txt +5 -0
- data/test/ed_test.rb +204 -0
- data/test/integration/cursor_banner_combinations.rb +193 -0
- data/test/integration/cursor_banner_features.rb +374 -0
- data/test/integration/integration_test.rb +326 -0
- data/test/integration/preview_flow_test.rb +94 -0
- data/test/livetext_plugin_test.rb +500 -0
- data/test/manual/asset_mgmt.rb +67 -0
- data/test/manual/banner-tests/index.html +45 -0
- data/test/manual/banner-tests/svg.txt +3 -0
- data/test/manual/banner-tests/test01.html +122 -0
- data/test/manual/banner-tests/test02.html +122 -0
- data/test/manual/banner-tests/test03.html +122 -0
- data/test/manual/banner-tests/test04.html +129 -0
- data/test/manual/banner-tests/test05.html +129 -0
- data/test/manual/banner-tests/test06.html +129 -0
- data/test/manual/banner-tests/test07.html +129 -0
- data/test/manual/banner-tests/test08.html +123 -0
- data/test/manual/banner-tests/test09.html +123 -0
- data/test/manual/banner-tests/test10.html +123 -0
- data/test/manual/banner-tests/test11.html +123 -0
- data/test/manual/banner-tests/test12.html +123 -0
- data/test/manual/banner-tests/test13.html +123 -0
- data/test/manual/banner-tests/test14.html +123 -0
- data/test/manual/banner-tests/test15.html +122 -0
- data/test/manual/banner-tests/test16.html +122 -0
- data/test/manual/banner-tests/test17.html +122 -0
- data/test/manual/banner-tests/test18.html +132 -0
- data/test/manual/banner-tests/test19.html +132 -0
- data/test/manual/banner-tests/test20.html +132 -0
- data/test/manual/banner-tests/test21.html +132 -0
- data/test/manual/banner-tests/test22.html +132 -0
- data/test/manual/banner-tests/test23.html +132 -0
- data/test/manual/banner-tests/test24.html +132 -0
- data/test/manual/banner-tests/test25.html +131 -0
- data/test/manual/banner_environment.rb +205 -0
- data/test/manual/codemirror_demo.html +773 -0
- data/test/manual/create_posts_for_web.rb +114 -0
- data/test/manual/environment.rb +67 -0
- data/test/manual/make_banner.rb +153 -0
- data/test/manual/preview_manual_test.rb +129 -0
- data/test/manual/sample_banner_config.txt +12 -0
- data/test/manual/test_advanced_widgets.rb +73 -0
- data/test/manual/test_banner_combinations.rb +120 -0
- data/test/manual/test_banner_features.rb +306 -0
- data/test/manual/test_banner_integration.rb +115 -0
- data/test/manual/test_banner_radial.rb +87 -0
- data/test/manual/test_basic_posts.rb +47 -0
- data/test/manual/test_layout_widgets.rb +40 -0
- data/test/manual/test_pagination.rb +24 -0
- data/test/manual/test_random_posts.rb +38 -0
- data/test/manual/test_syntax_highlighting.rb +167 -0
- data/test/rubytext/rubytext_comprehensive_test.rb +307 -0
- data/test/rubytext/rubytext_demo_test.rb +42 -0
- data/test/rubytext/rubytext_testing_guide.md +277 -0
- data/test/run_automated_tests.rb +45 -0
- data/test/staging/.DS_Store +0 -0
- data/test/support/preview_utils.rb +88 -0
- data/test/syntax_highlighting_test.lt3 +124 -0
- data/test/test_gem_assets.rb +48 -0
- data/test/test_helpers.rb +240 -0
- data/test/tui_editor_integration_test.rb +296 -0
- data/test/tui_integration_test.rb +883 -0
- data/test/unit/api.rb +1776 -0
- data/test/unit/asset_management.rb +219 -0
- data/test/unit/backup_test.rb +451 -0
- data/test/unit/clipboard_test.rb +60 -0
- data/test/unit/contract_test.rb +69 -0
- data/test/unit/core.rb +1211 -0
- data/test/unit/deploy_config_test.rb +248 -0
- data/test/unit/deploy_test.rb +478 -0
- data/test/unit/edit_post_test.rb +168 -0
- data/test/unit/gem_asset_management.rb +183 -0
- data/test/unit/livetext_basic.rb +57 -0
- data/test/unit/livetext_compatibility.rb +82 -0
- data/test/unit/parse_cmd_test.rb +260 -0
- data/test/unit/permalink_copy_test.rb +211 -0
- data/test/unit/post.rb +309 -0
- data/test/unit/post_index_config_test.rb +258 -0
- data/test/unit/post_state_helpers_test.rb +137 -0
- data/test/unit/read_commented_file_test.rb +278 -0
- data/test/unit/reddit_test.rb +235 -0
- data/test/unit/repo.rb +569 -0
- data/test/unit/social_test.rb +366 -0
- data/test/unit/syntax_highlighting.rb +70 -0
- data/test/unit/theme_management_test.rb +91 -0
- data/test/unit/view.rb +498 -0
- data/test/unit/widgets.rb +669 -0
- data/test/web_integration_test.rb +231 -0
- data/test/web_test_helper.rb +218 -0
- data/test/web_workflow_test.rb +527 -0
- data/test/wizard_test.rb +123 -0
- data/ui/README.md +67 -0
- data/ui/common/lib/ui_common.rb +8 -0
- data/ui/rubytext/README.md +191 -0
- data/ui/rubytext/bin/scriptorium-rubytext +402 -0
- data/ui/rubytext/lib/rubytext_ui.rb +300 -0
- data/ui/tui/bin/scriptorium +1890 -0
- data/ui/tui/test/tui_test.rb +23 -0
- data/ui/web/app/app.rb +2600 -0
- data/ui/web/app/assets/livetext_mode.js +244 -0
- data/ui/web/app/error_helpers.rb +150 -0
- data/ui/web/app/views/advanced_config.erb +196 -0
- data/ui/web/app/views/asset_management.erb +645 -0
- data/ui/web/app/views/backup_management.erb +238 -0
- data/ui/web/app/views/banner_config.erb +200 -0
- data/ui/web/app/views/config_widget.erb +232 -0
- data/ui/web/app/views/configure_view.erb +401 -0
- data/ui/web/app/views/dashboard.erb +154 -0
- data/ui/web/app/views/deploy_config.erb +149 -0
- data/ui/web/app/views/edit_pages.erb +363 -0
- data/ui/web/app/views/edit_post.erb +175 -0
- data/ui/web/app/views/edit_theme.erb +73 -0
- data/ui/web/app/views/edit_theme_file.erb +74 -0
- data/ui/web/app/views/error_page.erb +29 -0
- data/ui/web/app/views/header_config.erb +155 -0
- data/ui/web/app/views/layout_config.erb +147 -0
- data/ui/web/app/views/navbar_config.erb +411 -0
- data/ui/web/app/views/theme_management.erb +130 -0
- data/ui/web/app/views/view_dashboard.erb +779 -0
- data/ui/web/app/views/widgets.erb +249 -0
- data/ui/web/bin/scriptorium-web +164 -0
- data/ui/web/test/web_basic_test.rb +38 -0
- data/ui/web/test_navbar.txt +7 -0
- data/ui/web/tmp/timing.log +17 -0
- data/ui/web/tmp/web_server.log +0 -0
- metadata +434 -8
- data/lib/scriptorium/engine.rb +0 -22
- data/test/engine/unit.rb +0 -44
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Green to Yellow Gradient</title>
|
|
5
|
+
<style>
|
|
6
|
+
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
|
|
7
|
+
.banner { width: 100%; margin: 0; padding: 0; border: 3px solid #007cba; border-radius: 8px; }
|
|
8
|
+
.content { padding: 20px; padding-bottom: 80px; }
|
|
9
|
+
.description { margin: 10px 0; font-weight: bold; }
|
|
10
|
+
.config { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; font-size: 12px; }
|
|
11
|
+
.navigation {
|
|
12
|
+
position: fixed;
|
|
13
|
+
bottom: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
background: #e0e0e0;
|
|
17
|
+
padding: 15px;
|
|
18
|
+
text-align: center;
|
|
19
|
+
border-top: 2px solid #007cba;
|
|
20
|
+
z-index: 1000;
|
|
21
|
+
}
|
|
22
|
+
.navigation a { margin: 0 10px; padding: 8px 15px; background: #007cba; color: white; text-decoration: none; border-radius: 3px; }
|
|
23
|
+
.navigation a:hover { background: #005a87; }
|
|
24
|
+
.original-image { margin: 20px 0; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
25
|
+
.original-image h3 { margin: 0 0 10px 0; color: #333; }
|
|
26
|
+
.original-image img { max-width: 100%; height: auto; border: 1px solid #ddd; }
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<div class="banner" id="header">
|
|
31
|
+
<script>
|
|
32
|
+
function insert_svg_header(container) {
|
|
33
|
+
const svg_text = ` <svg xmlns='http://www.w3.org/2000/svg'
|
|
34
|
+
width='100%' height='100'
|
|
35
|
+
viewBox='0 0 800 100'
|
|
36
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
37
|
+
<defs>
|
|
38
|
+
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
39
|
+
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
|
|
40
|
+
<stop offset="100%" style="stop-color:yellow;stop-opacity:1" />
|
|
41
|
+
</linearGradient>
|
|
42
|
+
</defs>
|
|
43
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#grad1)' />
|
|
44
|
+
|
|
45
|
+
<text x='5%'
|
|
46
|
+
y='52%'
|
|
47
|
+
text-anchor='start'
|
|
48
|
+
style='font-family: Verdana; font-size: 48.0px; font-weight: normal; font-style: normal'
|
|
49
|
+
fill='#374151'>Green to Yellow Gradient</text>
|
|
50
|
+
|
|
51
|
+
<text x='5%'
|
|
52
|
+
y='82%'
|
|
53
|
+
text-anchor='start'
|
|
54
|
+
style='font-family: Verdana; font-size: 24.0px; font-weight: normal; font-style: normal'
|
|
55
|
+
fill='#374151'>Linear gradient test</text>
|
|
56
|
+
|
|
57
|
+
</svg>`;
|
|
58
|
+
const svgElement = document.createElement('div');
|
|
59
|
+
svgElement.innerHTML = svg_text;
|
|
60
|
+
const svg = svgElement.firstElementChild;
|
|
61
|
+
|
|
62
|
+
const svgWidth = window.innerWidth;
|
|
63
|
+
const aspectRatio = 8.0;
|
|
64
|
+
const svgHeight = svgWidth / aspectRatio;
|
|
65
|
+
|
|
66
|
+
svg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
|
|
67
|
+
svg.setAttribute('width', svgWidth);
|
|
68
|
+
svg.setAttribute('height', svgHeight);
|
|
69
|
+
|
|
70
|
+
const titleFontSize = 0.8 * 60;
|
|
71
|
+
const subtitleFontSize = 0.4 * 60;
|
|
72
|
+
|
|
73
|
+
const te1 = svg.querySelector('text:nth-of-type(1)')
|
|
74
|
+
const te2 = svg.querySelector('text:nth-of-type(2)')
|
|
75
|
+
|
|
76
|
+
// Don't override the styles - they're already set correctly in the SVG
|
|
77
|
+
// Just update the positioning and text-anchor
|
|
78
|
+
|
|
79
|
+
const titleXpct = "5%";
|
|
80
|
+
const titleYpct = "52%";
|
|
81
|
+
const subtitleXpct = "5%";
|
|
82
|
+
const subtitleYpct = "82%";
|
|
83
|
+
|
|
84
|
+
const tX = svgWidth * (parseFloat(titleXpct) / 100);
|
|
85
|
+
const tY = svgHeight * (parseFloat(titleYpct) / 100);
|
|
86
|
+
const sX = svgWidth * (parseFloat(subtitleXpct) / 100);
|
|
87
|
+
const sY = svgHeight * (parseFloat(subtitleYpct) / 100);
|
|
88
|
+
|
|
89
|
+
te1.setAttribute('x', tX);
|
|
90
|
+
te1.setAttribute('y', tY);
|
|
91
|
+
te2.setAttribute('x', sX);
|
|
92
|
+
te2.setAttribute('y', sY);
|
|
93
|
+
|
|
94
|
+
// Set text-anchor for proper positioning (use individual anchors if set)
|
|
95
|
+
te1.setAttribute('text-anchor', 'start');
|
|
96
|
+
te2.setAttribute('text-anchor', 'start');
|
|
97
|
+
|
|
98
|
+
// Apply calculated font sizes
|
|
99
|
+
te1.setAttribute('font-size', titleFontSize + 'px');
|
|
100
|
+
te2.setAttribute('font-size', subtitleFontSize + 'px');
|
|
101
|
+
|
|
102
|
+
const containerElement = document.getElementById(container);
|
|
103
|
+
if (containerElement) {
|
|
104
|
+
console.log('Container found, inserting SVG...');
|
|
105
|
+
containerElement.innerHTML = svg.outerHTML;
|
|
106
|
+
console.log('SVG inserted successfully');
|
|
107
|
+
} else {
|
|
108
|
+
console.error('Container not found:', container);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
console.log('SVG script loaded');
|
|
113
|
+
|
|
114
|
+
// Use DOMContentLoaded to avoid conflicts with main window.onload
|
|
115
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
116
|
+
console.log('DOM ready, trying SVG insertion...');
|
|
117
|
+
insert_svg_header('header');
|
|
118
|
+
});
|
|
119
|
+
</script>
|
|
120
|
+
|
|
121
|
+
</div>
|
|
122
|
+
<div class="content">
|
|
123
|
+
<div class="description">Linear Gradient (Top to Bottom)</div>
|
|
124
|
+
<div class="config">back.linear green yellow tb</div>
|
|
125
|
+
|
|
126
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test04.html">Previous</a> <a href="test06.html">Next</a></div>
|
|
127
|
+
</div>
|
|
128
|
+
</body>
|
|
129
|
+
</html>
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Red to Blue Radial</title>
|
|
5
|
+
<style>
|
|
6
|
+
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
|
|
7
|
+
.banner { width: 100%; margin: 0; padding: 0; border: 3px solid #007cba; border-radius: 8px; }
|
|
8
|
+
.content { padding: 20px; padding-bottom: 80px; }
|
|
9
|
+
.description { margin: 10px 0; font-weight: bold; }
|
|
10
|
+
.config { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; font-size: 12px; }
|
|
11
|
+
.navigation {
|
|
12
|
+
position: fixed;
|
|
13
|
+
bottom: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
background: #e0e0e0;
|
|
17
|
+
padding: 15px;
|
|
18
|
+
text-align: center;
|
|
19
|
+
border-top: 2px solid #007cba;
|
|
20
|
+
z-index: 1000;
|
|
21
|
+
}
|
|
22
|
+
.navigation a { margin: 0 10px; padding: 8px 15px; background: #007cba; color: white; text-decoration: none; border-radius: 3px; }
|
|
23
|
+
.navigation a:hover { background: #005a87; }
|
|
24
|
+
.original-image { margin: 20px 0; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
25
|
+
.original-image h3 { margin: 0 0 10px 0; color: #333; }
|
|
26
|
+
.original-image img { max-width: 100%; height: auto; border: 1px solid #ddd; }
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<div class="banner" id="header">
|
|
31
|
+
<script>
|
|
32
|
+
function insert_svg_header(container) {
|
|
33
|
+
const svg_text = ` <svg xmlns='http://www.w3.org/2000/svg'
|
|
34
|
+
width='100%' height='100'
|
|
35
|
+
viewBox='0 0 800 100'
|
|
36
|
+
preserveAspectRatio='xMidYMid slice'>
|
|
37
|
+
<defs>
|
|
38
|
+
<radialGradient id="radial1" cx="400.0%" cy="50%" r="50%" gradientTransform="scale(0.125,1)">
|
|
39
|
+
<stop offset="0%" style="stop-color:red;stop-opacity:1" />
|
|
40
|
+
<stop offset="100%" style="stop-color:blue;stop-opacity:1" />
|
|
41
|
+
</radialGradient>
|
|
42
|
+
</defs>
|
|
43
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#radial1)' />
|
|
44
|
+
|
|
45
|
+
<text x='5%'
|
|
46
|
+
y='52%'
|
|
47
|
+
text-anchor='start'
|
|
48
|
+
style='font-family: Verdana; font-size: 48.0px; font-weight: normal; font-style: normal'
|
|
49
|
+
fill='#374151'>Red to Blue Radial</text>
|
|
50
|
+
|
|
51
|
+
<text x='5%'
|
|
52
|
+
y='82%'
|
|
53
|
+
text-anchor='start'
|
|
54
|
+
style='font-family: Verdana; font-size: 24.0px; font-weight: normal; font-style: normal'
|
|
55
|
+
fill='#374151'>Radial gradient test</text>
|
|
56
|
+
|
|
57
|
+
</svg>`;
|
|
58
|
+
const svgElement = document.createElement('div');
|
|
59
|
+
svgElement.innerHTML = svg_text;
|
|
60
|
+
const svg = svgElement.firstElementChild;
|
|
61
|
+
|
|
62
|
+
const svgWidth = window.innerWidth;
|
|
63
|
+
const aspectRatio = 8.0;
|
|
64
|
+
const svgHeight = svgWidth / aspectRatio;
|
|
65
|
+
|
|
66
|
+
svg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
|
|
67
|
+
svg.setAttribute('width', svgWidth);
|
|
68
|
+
svg.setAttribute('height', svgHeight);
|
|
69
|
+
|
|
70
|
+
const titleFontSize = 0.8 * 60;
|
|
71
|
+
const subtitleFontSize = 0.4 * 60;
|
|
72
|
+
|
|
73
|
+
const te1 = svg.querySelector('text:nth-of-type(1)')
|
|
74
|
+
const te2 = svg.querySelector('text:nth-of-type(2)')
|
|
75
|
+
|
|
76
|
+
// Don't override the styles - they're already set correctly in the SVG
|
|
77
|
+
// Just update the positioning and text-anchor
|
|
78
|
+
|
|
79
|
+
const titleXpct = "5%";
|
|
80
|
+
const titleYpct = "52%";
|
|
81
|
+
const subtitleXpct = "5%";
|
|
82
|
+
const subtitleYpct = "82%";
|
|
83
|
+
|
|
84
|
+
const tX = svgWidth * (parseFloat(titleXpct) / 100);
|
|
85
|
+
const tY = svgHeight * (parseFloat(titleYpct) / 100);
|
|
86
|
+
const sX = svgWidth * (parseFloat(subtitleXpct) / 100);
|
|
87
|
+
const sY = svgHeight * (parseFloat(subtitleYpct) / 100);
|
|
88
|
+
|
|
89
|
+
te1.setAttribute('x', tX);
|
|
90
|
+
te1.setAttribute('y', tY);
|
|
91
|
+
te2.setAttribute('x', sX);
|
|
92
|
+
te2.setAttribute('y', sY);
|
|
93
|
+
|
|
94
|
+
// Set text-anchor for proper positioning (use individual anchors if set)
|
|
95
|
+
te1.setAttribute('text-anchor', 'start');
|
|
96
|
+
te2.setAttribute('text-anchor', 'start');
|
|
97
|
+
|
|
98
|
+
// Apply calculated font sizes
|
|
99
|
+
te1.setAttribute('font-size', titleFontSize + 'px');
|
|
100
|
+
te2.setAttribute('font-size', subtitleFontSize + 'px');
|
|
101
|
+
|
|
102
|
+
const containerElement = document.getElementById(container);
|
|
103
|
+
if (containerElement) {
|
|
104
|
+
console.log('Container found, inserting SVG...');
|
|
105
|
+
containerElement.innerHTML = svg.outerHTML;
|
|
106
|
+
console.log('SVG inserted successfully');
|
|
107
|
+
} else {
|
|
108
|
+
console.error('Container not found:', container);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
console.log('SVG script loaded');
|
|
113
|
+
|
|
114
|
+
// Use DOMContentLoaded to avoid conflicts with main window.onload
|
|
115
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
116
|
+
console.log('DOM ready, trying SVG insertion...');
|
|
117
|
+
insert_svg_header('header');
|
|
118
|
+
});
|
|
119
|
+
</script>
|
|
120
|
+
|
|
121
|
+
</div>
|
|
122
|
+
<div class="content">
|
|
123
|
+
<div class="description">Radial Gradient</div>
|
|
124
|
+
<div class="config">back.radial red blue</div>
|
|
125
|
+
|
|
126
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test05.html">Previous</a> <a href="test07.html">Next</a></div>
|
|
127
|
+
</div>
|
|
128
|
+
</body>
|
|
129
|
+
</html>
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Green to Yellow Radial</title>
|
|
5
|
+
<style>
|
|
6
|
+
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
|
|
7
|
+
.banner { width: 100%; margin: 0; padding: 0; border: 3px solid #007cba; border-radius: 8px; }
|
|
8
|
+
.content { padding: 20px; padding-bottom: 80px; }
|
|
9
|
+
.description { margin: 10px 0; font-weight: bold; }
|
|
10
|
+
.config { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; font-size: 12px; }
|
|
11
|
+
.navigation {
|
|
12
|
+
position: fixed;
|
|
13
|
+
bottom: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
background: #e0e0e0;
|
|
17
|
+
padding: 15px;
|
|
18
|
+
text-align: center;
|
|
19
|
+
border-top: 2px solid #007cba;
|
|
20
|
+
z-index: 1000;
|
|
21
|
+
}
|
|
22
|
+
.navigation a { margin: 0 10px; padding: 8px 15px; background: #007cba; color: white; text-decoration: none; border-radius: 3px; }
|
|
23
|
+
.navigation a:hover { background: #005a87; }
|
|
24
|
+
.original-image { margin: 20px 0; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
25
|
+
.original-image h3 { margin: 0 0 10px 0; color: #333; }
|
|
26
|
+
.original-image img { max-width: 100%; height: auto; border: 1px solid #ddd; }
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<div class="banner" id="header">
|
|
31
|
+
<script>
|
|
32
|
+
function insert_svg_header(container) {
|
|
33
|
+
const svg_text = ` <svg xmlns='http://www.w3.org/2000/svg'
|
|
34
|
+
width='100%' height='100'
|
|
35
|
+
viewBox='0 0 800 100'
|
|
36
|
+
preserveAspectRatio='xMidYMid slice'>
|
|
37
|
+
<defs>
|
|
38
|
+
<radialGradient id="radial1" cx="400.0%" cy="50%" r="50%" gradientTransform="scale(0.125,1)">
|
|
39
|
+
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
|
|
40
|
+
<stop offset="100%" style="stop-color:yellow;stop-opacity:1" />
|
|
41
|
+
</radialGradient>
|
|
42
|
+
</defs>
|
|
43
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#radial1)' />
|
|
44
|
+
|
|
45
|
+
<text x='5%'
|
|
46
|
+
y='52%'
|
|
47
|
+
text-anchor='start'
|
|
48
|
+
style='font-family: Verdana; font-size: 48.0px; font-weight: normal; font-style: normal'
|
|
49
|
+
fill='#374151'>Green to Yellow Radial</text>
|
|
50
|
+
|
|
51
|
+
<text x='5%'
|
|
52
|
+
y='82%'
|
|
53
|
+
text-anchor='start'
|
|
54
|
+
style='font-family: Verdana; font-size: 24.0px; font-weight: normal; font-style: normal'
|
|
55
|
+
fill='#374151'>Radial gradient test</text>
|
|
56
|
+
|
|
57
|
+
</svg>`;
|
|
58
|
+
const svgElement = document.createElement('div');
|
|
59
|
+
svgElement.innerHTML = svg_text;
|
|
60
|
+
const svg = svgElement.firstElementChild;
|
|
61
|
+
|
|
62
|
+
const svgWidth = window.innerWidth;
|
|
63
|
+
const aspectRatio = 8.0;
|
|
64
|
+
const svgHeight = svgWidth / aspectRatio;
|
|
65
|
+
|
|
66
|
+
svg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
|
|
67
|
+
svg.setAttribute('width', svgWidth);
|
|
68
|
+
svg.setAttribute('height', svgHeight);
|
|
69
|
+
|
|
70
|
+
const titleFontSize = 0.8 * 60;
|
|
71
|
+
const subtitleFontSize = 0.4 * 60;
|
|
72
|
+
|
|
73
|
+
const te1 = svg.querySelector('text:nth-of-type(1)')
|
|
74
|
+
const te2 = svg.querySelector('text:nth-of-type(2)')
|
|
75
|
+
|
|
76
|
+
// Don't override the styles - they're already set correctly in the SVG
|
|
77
|
+
// Just update the positioning and text-anchor
|
|
78
|
+
|
|
79
|
+
const titleXpct = "5%";
|
|
80
|
+
const titleYpct = "52%";
|
|
81
|
+
const subtitleXpct = "5%";
|
|
82
|
+
const subtitleYpct = "82%";
|
|
83
|
+
|
|
84
|
+
const tX = svgWidth * (parseFloat(titleXpct) / 100);
|
|
85
|
+
const tY = svgHeight * (parseFloat(titleYpct) / 100);
|
|
86
|
+
const sX = svgWidth * (parseFloat(subtitleXpct) / 100);
|
|
87
|
+
const sY = svgHeight * (parseFloat(subtitleYpct) / 100);
|
|
88
|
+
|
|
89
|
+
te1.setAttribute('x', tX);
|
|
90
|
+
te1.setAttribute('y', tY);
|
|
91
|
+
te2.setAttribute('x', sX);
|
|
92
|
+
te2.setAttribute('y', sY);
|
|
93
|
+
|
|
94
|
+
// Set text-anchor for proper positioning (use individual anchors if set)
|
|
95
|
+
te1.setAttribute('text-anchor', 'start');
|
|
96
|
+
te2.setAttribute('text-anchor', 'start');
|
|
97
|
+
|
|
98
|
+
// Apply calculated font sizes
|
|
99
|
+
te1.setAttribute('font-size', titleFontSize + 'px');
|
|
100
|
+
te2.setAttribute('font-size', subtitleFontSize + 'px');
|
|
101
|
+
|
|
102
|
+
const containerElement = document.getElementById(container);
|
|
103
|
+
if (containerElement) {
|
|
104
|
+
console.log('Container found, inserting SVG...');
|
|
105
|
+
containerElement.innerHTML = svg.outerHTML;
|
|
106
|
+
console.log('SVG inserted successfully');
|
|
107
|
+
} else {
|
|
108
|
+
console.error('Container not found:', container);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
console.log('SVG script loaded');
|
|
113
|
+
|
|
114
|
+
// Use DOMContentLoaded to avoid conflicts with main window.onload
|
|
115
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
116
|
+
console.log('DOM ready, trying SVG insertion...');
|
|
117
|
+
insert_svg_header('header');
|
|
118
|
+
});
|
|
119
|
+
</script>
|
|
120
|
+
|
|
121
|
+
</div>
|
|
122
|
+
<div class="content">
|
|
123
|
+
<div class="description">Radial Gradient</div>
|
|
124
|
+
<div class="config">back.radial green yellow</div>
|
|
125
|
+
|
|
126
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test06.html">Previous</a> <a href="test08.html">Next</a></div>
|
|
127
|
+
</div>
|
|
128
|
+
</body>
|
|
129
|
+
</html>
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Small Text</title>
|
|
5
|
+
<style>
|
|
6
|
+
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
|
|
7
|
+
.banner { width: 100%; margin: 0; padding: 0; border: 3px solid #007cba; border-radius: 8px; }
|
|
8
|
+
.content { padding: 20px; padding-bottom: 80px; }
|
|
9
|
+
.description { margin: 10px 0; font-weight: bold; }
|
|
10
|
+
.config { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; font-size: 12px; }
|
|
11
|
+
.navigation {
|
|
12
|
+
position: fixed;
|
|
13
|
+
bottom: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
background: #e0e0e0;
|
|
17
|
+
padding: 15px;
|
|
18
|
+
text-align: center;
|
|
19
|
+
border-top: 2px solid #007cba;
|
|
20
|
+
z-index: 1000;
|
|
21
|
+
}
|
|
22
|
+
.navigation a { margin: 0 10px; padding: 8px 15px; background: #007cba; color: white; text-decoration: none; border-radius: 3px; }
|
|
23
|
+
.navigation a:hover { background: #005a87; }
|
|
24
|
+
.original-image { margin: 20px 0; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
25
|
+
.original-image h3 { margin: 0 0 10px 0; color: #333; }
|
|
26
|
+
.original-image img { max-width: 100%; height: auto; border: 1px solid #ddd; }
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<div class="banner" id="header">
|
|
31
|
+
<script>
|
|
32
|
+
function insert_svg_header(container) {
|
|
33
|
+
const svg_text = ` <svg xmlns='http://www.w3.org/2000/svg'
|
|
34
|
+
width='100%' height='100'
|
|
35
|
+
viewBox='0 0 800 100'
|
|
36
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
37
|
+
<rect x='0' y='0' width='100%' height='100%' fill='#fff' />
|
|
38
|
+
<text x='5%'
|
|
39
|
+
y='52%'
|
|
40
|
+
text-anchor='start'
|
|
41
|
+
style='font-family: Verdana; font-size: 30.0px; font-weight: normal; font-style: normal'
|
|
42
|
+
fill='#374151'>Small Text</text>
|
|
43
|
+
|
|
44
|
+
<text x='5%'
|
|
45
|
+
y='82%'
|
|
46
|
+
text-anchor='start'
|
|
47
|
+
style='font-family: Verdana; font-size: 18.0px; font-weight: normal; font-style: normal'
|
|
48
|
+
fill='#374151'>Size test</text>
|
|
49
|
+
|
|
50
|
+
</svg>`;
|
|
51
|
+
const svgElement = document.createElement('div');
|
|
52
|
+
svgElement.innerHTML = svg_text;
|
|
53
|
+
const svg = svgElement.firstElementChild;
|
|
54
|
+
|
|
55
|
+
const svgWidth = window.innerWidth;
|
|
56
|
+
const aspectRatio = 8.0;
|
|
57
|
+
const svgHeight = svgWidth / aspectRatio;
|
|
58
|
+
|
|
59
|
+
svg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
|
|
60
|
+
svg.setAttribute('width', svgWidth);
|
|
61
|
+
svg.setAttribute('height', svgHeight);
|
|
62
|
+
|
|
63
|
+
const titleFontSize = 0.5 * 60;
|
|
64
|
+
const subtitleFontSize = 0.3 * 60;
|
|
65
|
+
|
|
66
|
+
const te1 = svg.querySelector('text:nth-of-type(1)')
|
|
67
|
+
const te2 = svg.querySelector('text:nth-of-type(2)')
|
|
68
|
+
|
|
69
|
+
// Don't override the styles - they're already set correctly in the SVG
|
|
70
|
+
// Just update the positioning and text-anchor
|
|
71
|
+
|
|
72
|
+
const titleXpct = "5%";
|
|
73
|
+
const titleYpct = "52%";
|
|
74
|
+
const subtitleXpct = "5%";
|
|
75
|
+
const subtitleYpct = "82%";
|
|
76
|
+
|
|
77
|
+
const tX = svgWidth * (parseFloat(titleXpct) / 100);
|
|
78
|
+
const tY = svgHeight * (parseFloat(titleYpct) / 100);
|
|
79
|
+
const sX = svgWidth * (parseFloat(subtitleXpct) / 100);
|
|
80
|
+
const sY = svgHeight * (parseFloat(subtitleYpct) / 100);
|
|
81
|
+
|
|
82
|
+
te1.setAttribute('x', tX);
|
|
83
|
+
te1.setAttribute('y', tY);
|
|
84
|
+
te2.setAttribute('x', sX);
|
|
85
|
+
te2.setAttribute('y', sY);
|
|
86
|
+
|
|
87
|
+
// Set text-anchor for proper positioning (use individual anchors if set)
|
|
88
|
+
te1.setAttribute('text-anchor', 'start');
|
|
89
|
+
te2.setAttribute('text-anchor', 'start');
|
|
90
|
+
|
|
91
|
+
// Apply calculated font sizes
|
|
92
|
+
te1.setAttribute('font-size', titleFontSize + 'px');
|
|
93
|
+
te2.setAttribute('font-size', subtitleFontSize + 'px');
|
|
94
|
+
|
|
95
|
+
const containerElement = document.getElementById(container);
|
|
96
|
+
if (containerElement) {
|
|
97
|
+
console.log('Container found, inserting SVG...');
|
|
98
|
+
containerElement.innerHTML = svg.outerHTML;
|
|
99
|
+
console.log('SVG inserted successfully');
|
|
100
|
+
} else {
|
|
101
|
+
console.error('Container not found:', container);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
console.log('SVG script loaded');
|
|
106
|
+
|
|
107
|
+
// Use DOMContentLoaded to avoid conflicts with main window.onload
|
|
108
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
109
|
+
console.log('DOM ready, trying SVG insertion...');
|
|
110
|
+
insert_svg_header('header');
|
|
111
|
+
});
|
|
112
|
+
</script>
|
|
113
|
+
|
|
114
|
+
</div>
|
|
115
|
+
<div class="content">
|
|
116
|
+
<div class="description">Small Text (0.5x, 0.3x)</div>
|
|
117
|
+
<div class="config">title.scale 0.5
|
|
118
|
+
subtitle.scale 0.3</div>
|
|
119
|
+
|
|
120
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test07.html">Previous</a> <a href="test09.html">Next</a></div>
|
|
121
|
+
</div>
|
|
122
|
+
</body>
|
|
123
|
+
</html>
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Large Text</title>
|
|
5
|
+
<style>
|
|
6
|
+
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
|
|
7
|
+
.banner { width: 100%; margin: 0; padding: 0; border: 3px solid #007cba; border-radius: 8px; }
|
|
8
|
+
.content { padding: 20px; padding-bottom: 80px; }
|
|
9
|
+
.description { margin: 10px 0; font-weight: bold; }
|
|
10
|
+
.config { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; font-size: 12px; }
|
|
11
|
+
.navigation {
|
|
12
|
+
position: fixed;
|
|
13
|
+
bottom: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
background: #e0e0e0;
|
|
17
|
+
padding: 15px;
|
|
18
|
+
text-align: center;
|
|
19
|
+
border-top: 2px solid #007cba;
|
|
20
|
+
z-index: 1000;
|
|
21
|
+
}
|
|
22
|
+
.navigation a { margin: 0 10px; padding: 8px 15px; background: #007cba; color: white; text-decoration: none; border-radius: 3px; }
|
|
23
|
+
.navigation a:hover { background: #005a87; }
|
|
24
|
+
.original-image { margin: 20px 0; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
25
|
+
.original-image h3 { margin: 0 0 10px 0; color: #333; }
|
|
26
|
+
.original-image img { max-width: 100%; height: auto; border: 1px solid #ddd; }
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<div class="banner" id="header">
|
|
31
|
+
<script>
|
|
32
|
+
function insert_svg_header(container) {
|
|
33
|
+
const svg_text = ` <svg xmlns='http://www.w3.org/2000/svg'
|
|
34
|
+
width='100%' height='100'
|
|
35
|
+
viewBox='0 0 800 100'
|
|
36
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
37
|
+
<rect x='0' y='0' width='100%' height='100%' fill='#fff' />
|
|
38
|
+
<text x='5%'
|
|
39
|
+
y='52%'
|
|
40
|
+
text-anchor='start'
|
|
41
|
+
style='font-family: Verdana; font-size: 90.0px; font-weight: normal; font-style: normal'
|
|
42
|
+
fill='#374151'>Large Text</text>
|
|
43
|
+
|
|
44
|
+
<text x='5%'
|
|
45
|
+
y='82%'
|
|
46
|
+
text-anchor='start'
|
|
47
|
+
style='font-family: Verdana; font-size: 60.0px; font-weight: normal; font-style: normal'
|
|
48
|
+
fill='#374151'>Size test</text>
|
|
49
|
+
|
|
50
|
+
</svg>`;
|
|
51
|
+
const svgElement = document.createElement('div');
|
|
52
|
+
svgElement.innerHTML = svg_text;
|
|
53
|
+
const svg = svgElement.firstElementChild;
|
|
54
|
+
|
|
55
|
+
const svgWidth = window.innerWidth;
|
|
56
|
+
const aspectRatio = 8.0;
|
|
57
|
+
const svgHeight = svgWidth / aspectRatio;
|
|
58
|
+
|
|
59
|
+
svg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
|
|
60
|
+
svg.setAttribute('width', svgWidth);
|
|
61
|
+
svg.setAttribute('height', svgHeight);
|
|
62
|
+
|
|
63
|
+
const titleFontSize = 1.5 * 60;
|
|
64
|
+
const subtitleFontSize = 1.0 * 60;
|
|
65
|
+
|
|
66
|
+
const te1 = svg.querySelector('text:nth-of-type(1)')
|
|
67
|
+
const te2 = svg.querySelector('text:nth-of-type(2)')
|
|
68
|
+
|
|
69
|
+
// Don't override the styles - they're already set correctly in the SVG
|
|
70
|
+
// Just update the positioning and text-anchor
|
|
71
|
+
|
|
72
|
+
const titleXpct = "5%";
|
|
73
|
+
const titleYpct = "52%";
|
|
74
|
+
const subtitleXpct = "5%";
|
|
75
|
+
const subtitleYpct = "82%";
|
|
76
|
+
|
|
77
|
+
const tX = svgWidth * (parseFloat(titleXpct) / 100);
|
|
78
|
+
const tY = svgHeight * (parseFloat(titleYpct) / 100);
|
|
79
|
+
const sX = svgWidth * (parseFloat(subtitleXpct) / 100);
|
|
80
|
+
const sY = svgHeight * (parseFloat(subtitleYpct) / 100);
|
|
81
|
+
|
|
82
|
+
te1.setAttribute('x', tX);
|
|
83
|
+
te1.setAttribute('y', tY);
|
|
84
|
+
te2.setAttribute('x', sX);
|
|
85
|
+
te2.setAttribute('y', sY);
|
|
86
|
+
|
|
87
|
+
// Set text-anchor for proper positioning (use individual anchors if set)
|
|
88
|
+
te1.setAttribute('text-anchor', 'start');
|
|
89
|
+
te2.setAttribute('text-anchor', 'start');
|
|
90
|
+
|
|
91
|
+
// Apply calculated font sizes
|
|
92
|
+
te1.setAttribute('font-size', titleFontSize + 'px');
|
|
93
|
+
te2.setAttribute('font-size', subtitleFontSize + 'px');
|
|
94
|
+
|
|
95
|
+
const containerElement = document.getElementById(container);
|
|
96
|
+
if (containerElement) {
|
|
97
|
+
console.log('Container found, inserting SVG...');
|
|
98
|
+
containerElement.innerHTML = svg.outerHTML;
|
|
99
|
+
console.log('SVG inserted successfully');
|
|
100
|
+
} else {
|
|
101
|
+
console.error('Container not found:', container);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
console.log('SVG script loaded');
|
|
106
|
+
|
|
107
|
+
// Use DOMContentLoaded to avoid conflicts with main window.onload
|
|
108
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
109
|
+
console.log('DOM ready, trying SVG insertion...');
|
|
110
|
+
insert_svg_header('header');
|
|
111
|
+
});
|
|
112
|
+
</script>
|
|
113
|
+
|
|
114
|
+
</div>
|
|
115
|
+
<div class="content">
|
|
116
|
+
<div class="description">Large Text (1.5x, 1.0x)</div>
|
|
117
|
+
<div class="config">title.scale 1.5
|
|
118
|
+
subtitle.scale 1.0</div>
|
|
119
|
+
|
|
120
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test08.html">Previous</a> <a href="test10.html">Next</a></div>
|
|
121
|
+
</div>
|
|
122
|
+
</body>
|
|
123
|
+
</html>
|