scriptorium 0.0.3 → 0.6.1
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/back-icon.png +0 -0
- data/assets/icons/facebook.svg +1 -0
- data/assets/icons/github.svg +1 -0
- data/assets/icons/instagram.svg +1 -0
- data/assets/icons/reddit.svg +1 -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/icons/x.svg +1 -0
- data/assets/icons/youtube.svg +1 -0
- data/assets/samples/placeholder.svg +9 -0
- data/assets/themes/standard/favicon.svg +6 -0
- data/bin/scriptorium +1511 -0
- data/doc/README.txt +6 -0
- data/doc/anti-amnesia/20250727-054000-scriptorium-overview.md +95 -0
- data/doc/anti-amnesia/20250727-060000-api-design-tui-planning.md +34 -0
- data/doc/anti-amnesia/20250727-061000-runeblog-tui-analysis.md +50 -0
- data/doc/anti-amnesia/20250727-123000-anti-amnesia-conventions.md +31 -0
- data/doc/anti-amnesia/20250727-154000-livetext-plugin-file-stats.md +73 -0
- data/doc/anti-amnesia/20250727-172600-cursor-rbenv-ruby-version-mystery.md +64 -0
- data/doc/anti-amnesia/20250727-172600-unified-minitest-framework.md +70 -0
- data/doc/anti-amnesia/20250727-172900-ai-cognitive-assessment-capabilities.md +40 -0
- data/doc/anti-amnesia/20250727-173000-widget-testing-achievement.md +110 -0
- data/doc/anti-amnesia/20250727-180000-post-id-num-refactoring.md +73 -0
- data/doc/anti-amnesia/20250728-124243-aaa-syntax-clarification.md +46 -0
- data/doc/anti-amnesia/20250728-124421-conversation-summary-concise.md +124 -0
- data/doc/anti-amnesia/20250729-190000-scriptorium-tui-testing-complete.md +46 -0
- data/doc/anti-amnesia/20250729-200000-scriptorium-tui-testing-edit-file-workflow.md +97 -0
- data/doc/anti-amnesia/20250729-210000-reddit-autopost-integration-complete.md +158 -0
- data/doc/anti-amnesia/20250729-211500-dependency-management-system.md +211 -0
- data/doc/anti-amnesia/20250729-213000-python-virtual-environment-setup.md +141 -0
- data/doc/anti-amnesia/20250729-214500-theme-management-commands.md +211 -0
- data/doc/anti-amnesia/20250729-215000-version-update-to-0.6.0.md +134 -0
- data/doc/anti-amnesia/20250729-220000-user-guide-complete.md +41 -0
- data/doc/anti-amnesia/20250804-190500-cognitive-loop-bug.md +45 -0
- data/doc/anti-amnesia/20250804-190700-anti-amnesia-timestamping-fix.md +30 -0
- data/doc/anti-amnesia/20250804-213700-publishing-test-fix.md +49 -0
- data/doc/anti-amnesia/20250804-214400-additional-test-fixes.md +46 -0
- data/doc/anti-amnesia/20250804-220000-asset-function-logic-clarification.md +41 -0
- data/doc/anti-amnesia/20250806-202032-asset-function-logic-clarification.md +41 -0
- data/doc/anti-amnesia/20250807-213025.md +116 -0
- data/doc/anti-amnesia/20250813-082428-syntax-highlighting-and-navigation-improvements.md +256 -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/reddit_credentials_template.json +8 -0
- data/doc/reddit_integration.md +207 -0
- data/doc/user.lt3 +38 -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/doc/userdoc-toc.txt +88 -0
- data/lib/rouge/lexers/livetext.rb +74 -0
- data/lib/scriptorium/api.rb +640 -0
- data/lib/scriptorium/banner_svg.rb +742 -0
- data/lib/scriptorium/contract.rb +33 -0
- data/lib/scriptorium/exceptions.rb +170 -1
- data/lib/scriptorium/helpers.rb +475 -0
- data/lib/scriptorium/post.rb +195 -0
- data/lib/scriptorium/reddit.rb +83 -0
- data/lib/scriptorium/repo.rb +624 -0
- data/lib/scriptorium/standard_files.rb +515 -0
- data/lib/scriptorium/syntax_highlighter.rb +234 -0
- data/lib/scriptorium/theme.rb +179 -0
- data/lib/scriptorium/version.rb +2 -2
- data/lib/scriptorium/view.rb +976 -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 +21 -40
- data/lib/skeleton.rb +8 -2
- data/scriptorium.gemspec +15 -4
- data/test/README.md +69 -0
- data/test/all +43 -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 +768 -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/livetext_plugin_test.rb +229 -0
- data/test/manual/asset_mgmt.rb +67 -0
- data/test/manual/banner-tests/config.txt +3 -0
- data/test/manual/banner-tests/index.html +45 -0
- data/test/manual/banner-tests/test01.html +58 -0
- data/test/manual/banner-tests/test02.html +58 -0
- data/test/manual/banner-tests/test03.html +58 -0
- data/test/manual/banner-tests/test04.html +65 -0
- data/test/manual/banner-tests/test05.html +65 -0
- data/test/manual/banner-tests/test06.html +65 -0
- data/test/manual/banner-tests/test07.html +65 -0
- data/test/manual/banner-tests/test08.html +59 -0
- data/test/manual/banner-tests/test09.html +59 -0
- data/test/manual/banner-tests/test10.html +59 -0
- data/test/manual/banner-tests/test11.html +59 -0
- data/test/manual/banner-tests/test12.html +59 -0
- data/test/manual/banner-tests/test13.html +59 -0
- data/test/manual/banner-tests/test14.html +59 -0
- data/test/manual/banner-tests/test15.html +58 -0
- data/test/manual/banner-tests/test16.html +58 -0
- data/test/manual/banner-tests/test17.html +58 -0
- data/test/manual/banner-tests/test18.html +68 -0
- data/test/manual/banner-tests/test19.html +68 -0
- data/test/manual/banner-tests/test20.html +68 -0
- data/test/manual/banner-tests/test21.html +68 -0
- data/test/manual/banner-tests/test22.html +68 -0
- data/test/manual/banner-tests/test23.html +68 -0
- data/test/manual/banner-tests/test24.html +68 -0
- data/test/manual/banner-tests/test25.html +67 -0
- data/test/manual/banner_environment.rb +192 -0
- data/test/manual/deploy_symlink_demo.rb +142 -0
- data/test/manual/environment.rb +67 -0
- data/test/manual/make_banner.rb +153 -0
- data/test/manual/sample_banner_config.txt +12 -0
- data/test/manual/symlink_demo.rb +117 -0
- data/test/manual/test1.rb +47 -0
- data/test/manual/test2.rb +12 -0
- data/test/manual/test3.rb +38 -0
- data/test/manual/test4.rb +40 -0
- data/test/manual/test5.rb +24 -0
- data/test/manual/test6.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_from_file.rb +150 -0
- data/test/manual/test_banner_in_header.rb +35 -0
- data/test/manual/test_code_highlighting.rb +68 -0
- data/test/manual/test_complex_header.rb +74 -0
- data/test/manual/test_empty_header.rb +32 -0
- data/test/manual/test_radial_custom.rb +58 -0
- data/test/manual/test_radial_large_radius.rb +52 -0
- data/test/manual/test_svg_debug.rb +47 -0
- data/test/manual/test_syntax_highlighting.rb +147 -0
- data/test/pages-demo/config/currentview.txt +1 -0
- data/test/pages-demo/views/demo/config/bootstrap_css.txt +5 -0
- data/test/pages-demo/views/demo/config/bootstrap_js.txt +4 -0
- data/test/pages-demo/views/demo/config/common.js +57 -0
- data/test/pages-demo/views/demo/config/footer.txt +1 -0
- data/test/pages-demo/views/demo/config/global-head.txt +8 -0
- data/test/pages-demo/views/demo/config/header.txt +1 -0
- data/test/pages-demo/views/demo/config/layout.txt +1 -0
- data/test/pages-demo/views/demo/config/left.txt +1 -0
- data/test/pages-demo/views/demo/config/main.txt +1 -0
- data/test/pages-demo/views/demo/config/right.txt +1 -0
- data/test/pages-demo/views/demo/config.txt +3 -0
- data/test/pages-demo/views/demo/output/panes/footer.html +1 -0
- data/test/pages-demo/views/demo/output/panes/header.html +1 -0
- data/test/pages-demo/views/demo/output/panes/left.html +1 -0
- data/test/pages-demo/views/demo/output/panes/main.html +1 -0
- data/test/pages-demo/views/demo/output/panes/right.html +1 -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/scriptorium-TEST-1754622690-146/config/bootstrap_css.txt +5 -0
- data/test/scriptorium-TEST-1754622690-146/config/bootstrap_js.txt +4 -0
- data/test/scriptorium-TEST-1754622690-146/config/common.js +57 -0
- data/test/scriptorium-TEST-1754622690-146/config/currentview.txt +1 -0
- data/test/scriptorium-TEST-1754622690-146/config/global-head.txt +9 -0
- data/test/scriptorium-TEST-1754622690-146/config/last_post_num.txt +1 -0
- data/test/scriptorium-TEST-1754622690-146/config/os_helpers.rb +4 -0
- data/test/scriptorium-TEST-1754622690-146/config/widgets.txt +3 -0
- data/test/scriptorium-TEST-1754622690-146/posts/0001/meta.txt +8 -0
- data/test/scriptorium-TEST-1754622690-146/posts/0001/source.lt3 +6 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/README.txt +1 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/config.txt +1 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/initial/post.lt3 +12 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/layout/config/footer.txt +2 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/layout/config/header.txt +4 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/layout/config/left.txt +3 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/layout/config/main.txt +5 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/layout/config/right.txt +3 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/layout/gen/text.css +1 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/layout/layout.txt +5 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/templates/index.lt3 +1 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/templates/index_entry.lt3 +14 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/templates/post.lt3 +13 -0
- data/test/scriptorium-TEST-1754622690-146/themes/standard/templates/widget.lt3 +1 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/bootstrap_css.txt +5 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/bootstrap_js.txt +4 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/common.js +57 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/deploy.txt +5 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/footer.txt +2 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/global-head.txt +9 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/header.txt +4 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/layout.txt +5 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/left.txt +3 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/main.txt +5 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/reddit.txt +10 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/right.txt +3 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/social.txt +7 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config/status.txt +7 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/config.txt +3 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/layout/footer.html +3 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/layout/header.html +3 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/layout/left.html +3 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/layout/main.html +3 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/layout/right.html +3 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/output/panes/footer.html +1 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/output/panes/header.html +1 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/output/panes/left.html +1 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/output/panes/main.html +1 -0
- data/test/scriptorium-TEST-1754622690-146/views/sample/output/panes/right.html +1 -0
- data/test/staging/.DS_Store +0 -0
- data/test/syntax_highlighting_test.lt3 +124 -0
- data/test/test_helpers.rb +230 -0
- data/test/tui_editor_integration_test.rb +296 -0
- data/test/tui_integration_test.rb +637 -0
- data/test/unit/api.rb +1056 -0
- data/test/unit/asset_management.rb +245 -0
- data/test/unit/clipboard_test.rb +60 -0
- data/test/unit/contract_test.rb +91 -0
- data/test/unit/core.rb +857 -0
- data/test/unit/deploy_test.rb +187 -0
- data/test/unit/gem_asset_management.rb +189 -0
- data/test/unit/livetext_basic.rb +69 -0
- data/test/unit/livetext_compatibility.rb +89 -0
- data/test/unit/post.rb +244 -0
- data/test/unit/read_commented_file_test.rb +276 -0
- data/test/unit/reddit_test.rb +235 -0
- data/test/unit/repo.rb +548 -0
- data/test/unit/social_test.rb +369 -0
- data/test/unit/symlink_test.rb +213 -0
- data/test/unit/view.rb +431 -0
- data/test/unit/widgets.rb +669 -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 +1420 -0
- data/ui/tui/test/tui_test.rb +23 -0
- data/ui/web/app/app.rb +1378 -0
- data/ui/web/app/error_helpers.rb +150 -0
- data/ui/web/app/views/advanced_config.erb +190 -0
- data/ui/web/app/views/asset_management.erb +589 -0
- data/ui/web/app/views/banner_config.erb +200 -0
- data/ui/web/app/views/configure_view.erb +401 -0
- data/ui/web/app/views/dashboard.erb +162 -0
- data/ui/web/app/views/deploy_config.erb +146 -0
- data/ui/web/app/views/edit_pages.erb +195 -0
- data/ui/web/app/views/edit_post.erb +54 -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/view_dashboard.erb +138 -0
- data/ui/web/bin/scriptorium-web +153 -0
- data/ui/web/test/web_basic_test.rb +38 -0
- data/ui/web/test_navbar.txt +7 -0
- data/ui/web/tmp/web_server.log +5 -0
- data/ui/web/tmp/web_server.pid +1 -0
- metadata +359 -7
- data/lib/scriptorium/engine.rb +0 -22
- data/test/engine/unit.rb +0 -44
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Right Position</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">
|
|
31
|
+
<svg xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
width='100%' height='100'
|
|
33
|
+
viewBox='0 0 800 100'
|
|
34
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
35
|
+
<rect x='0' y='0' width='100%' height='100%' fill='#fff' />
|
|
36
|
+
<text x='95%'
|
|
37
|
+
y='52%'
|
|
38
|
+
text-anchor='end'
|
|
39
|
+
style='font-family: Verdana; font-size: 48px; font-weight: normal; font-style: normal'
|
|
40
|
+
fill='#374151'>Right Position</text>
|
|
41
|
+
|
|
42
|
+
<text x='95%'
|
|
43
|
+
y='82%'
|
|
44
|
+
text-anchor='end'
|
|
45
|
+
style='font-family: Verdana; font-size: 24px; font-weight: normal; font-style: normal'
|
|
46
|
+
fill='#374151'>Position test</text>
|
|
47
|
+
|
|
48
|
+
</svg>
|
|
49
|
+
|
|
50
|
+
</div>
|
|
51
|
+
<div class="content">
|
|
52
|
+
<div class="description">Right Positioned Text</div>
|
|
53
|
+
<div class="config">text.align right</div>
|
|
54
|
+
|
|
55
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test16.html">Previous</a> <a href="test18.html">Next</a></div>
|
|
56
|
+
</div>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Perfect Image Background</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">
|
|
31
|
+
<svg xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
width='100%' height='100'
|
|
33
|
+
viewBox='0 0 800 100'
|
|
34
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
35
|
+
<defs>
|
|
36
|
+
<pattern id="bg-pattern" x="0" y="0" width="100%" height="100%" patternUnits="objectBoundingBox">
|
|
37
|
+
<image href="perfect.png" x="0" y="0" width="100%" height="100%"
|
|
38
|
+
preserveAspectRatio="xMidYMid slice" />
|
|
39
|
+
</pattern>
|
|
40
|
+
</defs>
|
|
41
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#bg-pattern)' />
|
|
42
|
+
|
|
43
|
+
<text x='5%'
|
|
44
|
+
y='52%'
|
|
45
|
+
text-anchor='start'
|
|
46
|
+
style='font-family: Verdana; font-size: 48px; font-weight: normal; font-style: normal'
|
|
47
|
+
fill='#374151'>Perfect Image Background</text>
|
|
48
|
+
|
|
49
|
+
<text x='5%'
|
|
50
|
+
y='82%'
|
|
51
|
+
text-anchor='start'
|
|
52
|
+
style='font-family: Verdana; font-size: 24px; font-weight: normal; font-style: normal'
|
|
53
|
+
fill='#374151'>Image test (8:1 aspect)</text>
|
|
54
|
+
|
|
55
|
+
</svg>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
<div class="content">
|
|
59
|
+
<div class="description">Perfect match: 8:1 aspect ratio image fits banner exactly - no cropping or scaling needed</div>
|
|
60
|
+
<div class="config">back.image ../../assets/images/perfect.png</div>
|
|
61
|
+
<div class='original-image'>
|
|
62
|
+
<h3>Original Image (for comparison):</h3>
|
|
63
|
+
<img src='perfect.png' alt='Original image'>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test17.html">Previous</a> <a href="test19.html">Next</a></div>
|
|
66
|
+
</div>
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Wide Image Background</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">
|
|
31
|
+
<svg xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
width='100%' height='100'
|
|
33
|
+
viewBox='0 0 800 100'
|
|
34
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
35
|
+
<defs>
|
|
36
|
+
<pattern id="bg-pattern" x="0" y="0" width="100%" height="100%" patternUnits="objectBoundingBox">
|
|
37
|
+
<image href="wide.png" x="0" y="0" width="100%" height="100%"
|
|
38
|
+
preserveAspectRatio="xMidYMid slice" />
|
|
39
|
+
</pattern>
|
|
40
|
+
</defs>
|
|
41
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#bg-pattern)' />
|
|
42
|
+
|
|
43
|
+
<text x='5%'
|
|
44
|
+
y='52%'
|
|
45
|
+
text-anchor='start'
|
|
46
|
+
style='font-family: Verdana; font-size: 48px; font-weight: normal; font-style: normal'
|
|
47
|
+
fill='#374151'>Wide Image Background</text>
|
|
48
|
+
|
|
49
|
+
<text x='5%'
|
|
50
|
+
y='82%'
|
|
51
|
+
text-anchor='start'
|
|
52
|
+
style='font-family: Verdana; font-size: 24px; font-weight: normal; font-style: normal'
|
|
53
|
+
fill='#374151'>Image test (16:1 aspect)</text>
|
|
54
|
+
|
|
55
|
+
</svg>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
<div class="content">
|
|
59
|
+
<div class="description">Wide image (16:1) cropped to fit 8:1 banner - left/right edges removed, center preserved</div>
|
|
60
|
+
<div class="config">back.image ../../assets/images/wide.png</div>
|
|
61
|
+
<div class='original-image'>
|
|
62
|
+
<h3>Original Image (for comparison):</h3>
|
|
63
|
+
<img src='wide.png' alt='Original image'>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test18.html">Previous</a> <a href="test20.html">Next</a></div>
|
|
66
|
+
</div>
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Tall Image Background</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">
|
|
31
|
+
<svg xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
width='100%' height='100'
|
|
33
|
+
viewBox='0 0 800 100'
|
|
34
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
35
|
+
<defs>
|
|
36
|
+
<pattern id="bg-pattern" x="0" y="0" width="100%" height="100%" patternUnits="objectBoundingBox">
|
|
37
|
+
<image href="tall.png" x="0" y="0" width="100%" height="100%"
|
|
38
|
+
preserveAspectRatio="xMidYMid slice" />
|
|
39
|
+
</pattern>
|
|
40
|
+
</defs>
|
|
41
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#bg-pattern)' />
|
|
42
|
+
|
|
43
|
+
<text x='5%'
|
|
44
|
+
y='52%'
|
|
45
|
+
text-anchor='start'
|
|
46
|
+
style='font-family: Verdana; font-size: 48px; font-weight: normal; font-style: normal'
|
|
47
|
+
fill='#374151'>Tall Image Background</text>
|
|
48
|
+
|
|
49
|
+
<text x='5%'
|
|
50
|
+
y='82%'
|
|
51
|
+
text-anchor='start'
|
|
52
|
+
style='font-family: Verdana; font-size: 24px; font-weight: normal; font-style: normal'
|
|
53
|
+
fill='#374151'>Image test (1:1 aspect)</text>
|
|
54
|
+
|
|
55
|
+
</svg>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
<div class="content">
|
|
59
|
+
<div class="description">Square image (1:1) cropped to fit 8:1 banner - top/bottom removed, center strip visible</div>
|
|
60
|
+
<div class="config">back.image ../../assets/images/tall.png</div>
|
|
61
|
+
<div class='original-image'>
|
|
62
|
+
<h3>Original Image (for comparison):</h3>
|
|
63
|
+
<img src='tall.png' alt='Original image'>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test19.html">Previous</a> <a href="test21.html">Next</a></div>
|
|
66
|
+
</div>
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Very Tall Image Background</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">
|
|
31
|
+
<svg xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
width='100%' height='100'
|
|
33
|
+
viewBox='0 0 800 100'
|
|
34
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
35
|
+
<defs>
|
|
36
|
+
<pattern id="bg-pattern" x="0" y="0" width="100%" height="100%" patternUnits="objectBoundingBox">
|
|
37
|
+
<image href="very_tall.png" x="0" y="0" width="100%" height="100%"
|
|
38
|
+
preserveAspectRatio="xMidYMid slice" />
|
|
39
|
+
</pattern>
|
|
40
|
+
</defs>
|
|
41
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#bg-pattern)' />
|
|
42
|
+
|
|
43
|
+
<text x='5%'
|
|
44
|
+
y='52%'
|
|
45
|
+
text-anchor='start'
|
|
46
|
+
style='font-family: Verdana; font-size: 48px; font-weight: normal; font-style: normal'
|
|
47
|
+
fill='#374151'>Very Tall Image Background</text>
|
|
48
|
+
|
|
49
|
+
<text x='5%'
|
|
50
|
+
y='82%'
|
|
51
|
+
text-anchor='start'
|
|
52
|
+
style='font-family: Verdana; font-size: 24px; font-weight: normal; font-style: normal'
|
|
53
|
+
fill='#374151'>Image test (1:4 aspect)</text>
|
|
54
|
+
|
|
55
|
+
</svg>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
<div class="content">
|
|
59
|
+
<div class="description">Very tall image (1:4) heavily cropped - only narrow center strip visible, most content lost</div>
|
|
60
|
+
<div class="config">back.image ../../assets/images/very_tall.png</div>
|
|
61
|
+
<div class='original-image'>
|
|
62
|
+
<h3>Original Image (for comparison):</h3>
|
|
63
|
+
<img src='very_tall.png' alt='Original image'>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test20.html">Previous</a> <a href="test22.html">Next</a></div>
|
|
66
|
+
</div>
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Very Wide Image Background</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">
|
|
31
|
+
<svg xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
width='100%' height='100'
|
|
33
|
+
viewBox='0 0 800 100'
|
|
34
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
35
|
+
<defs>
|
|
36
|
+
<pattern id="bg-pattern" x="0" y="0" width="100%" height="100%" patternUnits="objectBoundingBox">
|
|
37
|
+
<image href="very_wide.png" x="0" y="0" width="100%" height="100%"
|
|
38
|
+
preserveAspectRatio="xMidYMid slice" />
|
|
39
|
+
</pattern>
|
|
40
|
+
</defs>
|
|
41
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#bg-pattern)' />
|
|
42
|
+
|
|
43
|
+
<text x='5%'
|
|
44
|
+
y='52%'
|
|
45
|
+
text-anchor='start'
|
|
46
|
+
style='font-family: Verdana; font-size: 48px; font-weight: normal; font-style: normal'
|
|
47
|
+
fill='#374151'>Very Wide Image Background</text>
|
|
48
|
+
|
|
49
|
+
<text x='5%'
|
|
50
|
+
y='82%'
|
|
51
|
+
text-anchor='start'
|
|
52
|
+
style='font-family: Verdana; font-size: 24px; font-weight: normal; font-style: normal'
|
|
53
|
+
fill='#374151'>Image test (16:1 aspect)</text>
|
|
54
|
+
|
|
55
|
+
</svg>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
<div class="content">
|
|
59
|
+
<div class="description">Very wide image (16:1) heavily cropped - only narrow center strip visible, sides removed</div>
|
|
60
|
+
<div class="config">back.image ../../assets/images/very_wide.png</div>
|
|
61
|
+
<div class='original-image'>
|
|
62
|
+
<h3>Original Image (for comparison):</h3>
|
|
63
|
+
<img src='very_wide.png' alt='Original image'>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test21.html">Previous</a> <a href="test23.html">Next</a></div>
|
|
66
|
+
</div>
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Small Image Background</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">
|
|
31
|
+
<svg xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
width='100%' height='100'
|
|
33
|
+
viewBox='0 0 800 100'
|
|
34
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
35
|
+
<defs>
|
|
36
|
+
<pattern id="bg-pattern" x="0" y="0" width="100%" height="100%" patternUnits="objectBoundingBox">
|
|
37
|
+
<image href="small.png" x="0" y="0" width="100%" height="100%"
|
|
38
|
+
preserveAspectRatio="xMidYMid slice" />
|
|
39
|
+
</pattern>
|
|
40
|
+
</defs>
|
|
41
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#bg-pattern)' />
|
|
42
|
+
|
|
43
|
+
<text x='5%'
|
|
44
|
+
y='52%'
|
|
45
|
+
text-anchor='start'
|
|
46
|
+
style='font-family: Verdana; font-size: 48px; font-weight: normal; font-style: normal'
|
|
47
|
+
fill='#374151'>Small Image Background</text>
|
|
48
|
+
|
|
49
|
+
<text x='5%'
|
|
50
|
+
y='82%'
|
|
51
|
+
text-anchor='start'
|
|
52
|
+
style='font-family: Verdana; font-size: 24px; font-weight: normal; font-style: normal'
|
|
53
|
+
fill='#374151'>Image test (low res, 8:1 aspect)</text>
|
|
54
|
+
|
|
55
|
+
</svg>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
<div class="content">
|
|
59
|
+
<div class="description">Small low-res image scaled up to fill banner - may appear pixelated but maintains aspect</div>
|
|
60
|
+
<div class="config">back.image ../../assets/images/small.png</div>
|
|
61
|
+
<div class='original-image'>
|
|
62
|
+
<h3>Original Image (for comparison):</h3>
|
|
63
|
+
<img src='small.png' alt='Original image'>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test22.html">Previous</a> <a href="test24.html">Next</a></div>
|
|
66
|
+
</div>
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Odd Aspect Image Background</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">
|
|
31
|
+
<svg xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
width='100%' height='100'
|
|
33
|
+
viewBox='0 0 800 100'
|
|
34
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
35
|
+
<defs>
|
|
36
|
+
<pattern id="bg-pattern" x="0" y="0" width="100%" height="100%" patternUnits="objectBoundingBox">
|
|
37
|
+
<image href="odd_aspect.png" x="0" y="0" width="100%" height="100%"
|
|
38
|
+
preserveAspectRatio="xMidYMid slice" />
|
|
39
|
+
</pattern>
|
|
40
|
+
</defs>
|
|
41
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#bg-pattern)' />
|
|
42
|
+
|
|
43
|
+
<text x='5%'
|
|
44
|
+
y='52%'
|
|
45
|
+
text-anchor='start'
|
|
46
|
+
style='font-family: Verdana; font-size: 48px; font-weight: normal; font-style: normal'
|
|
47
|
+
fill='#374151'>Odd Aspect Image Background</text>
|
|
48
|
+
|
|
49
|
+
<text x='5%'
|
|
50
|
+
y='82%'
|
|
51
|
+
text-anchor='start'
|
|
52
|
+
style='font-family: Verdana; font-size: 24px; font-weight: normal; font-style: normal'
|
|
53
|
+
fill='#374151'>Image test (~4:1 aspect)</text>
|
|
54
|
+
|
|
55
|
+
</svg>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
<div class="content">
|
|
59
|
+
<div class="description">Non-standard aspect ratio (~4:1) cropped to fit 8:1 banner - moderate cropping applied</div>
|
|
60
|
+
<div class="config">back.image ../../assets/images/odd_aspect.png</div>
|
|
61
|
+
<div class='original-image'>
|
|
62
|
+
<h3>Original Image (for comparison):</h3>
|
|
63
|
+
<img src='odd_aspect.png' alt='Original image'>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test23.html">Previous</a> <a href="test25.html">Next</a></div>
|
|
66
|
+
</div>
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Another gradient test</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">
|
|
31
|
+
<svg xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
width='100%' height='100'
|
|
33
|
+
viewBox='0 0 800 100'
|
|
34
|
+
preserveAspectRatio='xMidYMid meet'>
|
|
35
|
+
<defs>
|
|
36
|
+
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
37
|
+
<stop offset="0%" style="stop-color:#0000ff;stop-opacity:1" />
|
|
38
|
+
<stop offset="100%" style="stop-color:#000033;stop-opacity:1" />
|
|
39
|
+
</linearGradient>
|
|
40
|
+
</defs>
|
|
41
|
+
<rect x='0' y='0' width='100%' height='100%' fill='url(#grad1)' />
|
|
42
|
+
|
|
43
|
+
<text x='5%'
|
|
44
|
+
y='52%'
|
|
45
|
+
text-anchor='start'
|
|
46
|
+
style='font-family: Verdana; font-size: 48px; font-weight: normal; font-style: normal'
|
|
47
|
+
fill='#fff'>Another gradient test</text>
|
|
48
|
+
|
|
49
|
+
<text x='5%'
|
|
50
|
+
y='82%'
|
|
51
|
+
text-anchor='start'
|
|
52
|
+
style='font-family: Verdana; font-size: 24px; font-weight: normal; font-style: normal'
|
|
53
|
+
fill='#fff'>Just one more, I swear</text>
|
|
54
|
+
|
|
55
|
+
</svg>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
<div class="content">
|
|
59
|
+
<div class="description">Linear Gradient (Left to Right)</div>
|
|
60
|
+
<div class="config">back.linear #0000ff #000033 lr
|
|
61
|
+
title.color #fff
|
|
62
|
+
subtitle.color #fff</div>
|
|
63
|
+
|
|
64
|
+
<div class="navigation"><a href="index.html">Back to Index</a> <a href="test24.html">Previous</a></div>
|
|
65
|
+
</div>
|
|
66
|
+
</body>
|
|
67
|
+
</html>
|