Create style.css

style.css

@@ -0,0 +1,578 @@
+:root {
+    --primary-color: #7c4dff;
+    --primary-light: rgba(124, 77, 255, 0.2);
+    --primary-dark: #5e35b1;
+    --text-color: #333;
+    --background-color: #f9f9f9;
+    --card-background: rgba(255, 255, 255, 0.95);
+}
+
+[data-theme="dark"] {
+    --text-color: #e0e0e0;
+    --background-color: #1a1a1a;
+    --card-background: rgba(30, 30, 30, 0.95);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Nunito', sans-serif;
+    color: var(--text-color);
+    background: var(--background-color);
+    line-height: 1.6;
+    overflow-x: hidden;
+    padding-top: 60px;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    transition: background-image 1s ease-in-out;
+    position: relative;
+}
+
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    z-index: -1;
+}
+
+#top-buttons {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    gap: 10px;
+    z-index: 1000;
+}
+
+.top-btn {
+    padding: 8px 12px;
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+.top-btn:hover {
+    background: var(--primary-dark);
+}
+
+#main-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+@media (max-width: 768px) {
+    #main-container {
+        padding: 10px;
+    }
+}
+
+#header {
+    text-align: center;
+    padding: 20px 0;
+    background: var(--card-background);
+    border-radius: 10px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+#header h1 {
+    font-family: 'Kiwi Maru', serif;
+    font-size: 2rem;
+    color: var(--primary-color);
+}
+
+@media (max-width: 768px) {
+    #header h1 {
+        font-size: 1.5rem;
+    }
+}
+
+#platform-nav {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+    #platform-nav {
+        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
+        gap: 5px;
+    }
+}
+
+.platform-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    padding: 10px;
+    background: var(--card-background);
+    border-radius: 10px;
+    transition: transform 0.2s;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.platform-btn:hover {
+    transform: scale(1.05);
+}
+
+.platform-btn img {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+}
+
+.platform-btn span {
+    font-size: 0.8rem;
+    margin-top: 5px;
+    color: var(--text-color);
+}
+
+@media (max-width: 768px) {
+    .platform-btn img {
+        width: 30px;
+        height: 30px;
+    }
+    .platform-btn span {
+        font-size: 0.7rem;
+    }
+}
+
+#parser-container {
+    background: var(--card-background);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+
+#input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+#input-container input {
+    flex: 1;
+    padding: 10px;
+    font-size: 1rem;
+    border: 2px solid var(--primary-color);
+    border-radius: 25px;
+    outline: none;
+    background: rgba(255, 255, 255, 0.9);
+}
+
+#input-container button {
+    margin-left: 10px;
+    padding: 10px;
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+#input-container button:hover {
+    background: var(--primary-dark);
+}
+
+@media (max-width: 768px) {
+    #input-container input {
+        font-size: 0.9rem;
+        padding: 8px;
+    }
+    #input-container button {
+        padding: 8px;
+    }
+}
+
+.btn {
+    padding: 12px 25px;
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: background 0.3s, opacity 0.3s;
+    font-size: 1rem;
+    margin-top: 10px;
+}
+
+.btn:hover {
+    background: var(--primary-dark);
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+    .btn {
+        padding: 10px 20px;
+        font-size: 0.9rem;
+    }
+}
+
+#random-quote {
+    margin-top: 10px;
+    font-style: italic;
+    color: #ff6f61;
+    text-align: center;
+}
+
+#contentBox {
+    background: var(--card-background);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    display: none;
+}
+
+.media-card {
+    padding: 15px;
+}
+
+.media-card h2 {
+    margin-bottom: 15px;
+    font-size: 1.5rem;
+}
+
+.media-card video {
+    width: 100%;
+    border-radius: 15px;
+}
+
+.gallery-item {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.gallery-item img {
+    transition: transform 0.3s;
+}
+
+.gallery-item:hover img {
+    transform: scale(1.05);
+}
+
+.image-index {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 10px;
+    font-size: 0.8rem;
+}
+
+.download-all-btn, .download-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+}
+
+#share-container {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+.share-btn {
+    padding: 10px 20px;
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+.share-btn:hover {
+    background: var(--primary-dark);
+}
+
+#tutorial-section, #history-section, #faq-section {
+    background: var(--card-background);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+
+.section-title {
+    font-size: 1.2rem;
+    color: var(--primary-color);
+    margin-bottom: 15px;
+}
+
+.tutorial-item {
+    margin-bottom: 15px;
+}
+
+.tutorial-step {
+    font-weight: 600;
+    color: var(--primary-color);
+    margin-bottom: 5px;
+}
+
+.tutorial-item p {
+    font-size: 0.9rem;
+    color: var(--text-color);
+}
+
+.history-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+[data-theme="dark"] .history-item {
+    background: rgba(50, 50, 50, 0.8);
+}
+
+.history-thumb {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 5px;
+    margin-right: 10px;
+}
+
+.history-info {
+    flex: 1;
+}
+
+.history-title {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.history-url {
+    font-size: 0.8rem;
+    color: #666;
+    word-break: break-all;
+}
+
+.history-actions button {
+    padding: 5px 10px;
+    margin-left: 10px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    background: var(--primary-color);
+    color: white;
+    transition: background 0.3s;
+}
+
+.history-actions button:hover {
+    background: var(--primary-dark);
+}
+
+.faq-item {
+    margin-bottom: 15px;
+}
+
+.faq-question {
+    font-weight: 600;
+    color: var(--primary-color);
+    margin-bottom: 5px;
+}
+
+.faq-answer {
+    font-size: 0.9rem;
+    color: var(--text-color);
+}
+
+.faq-answer a {
+    color: var(--primary-color);
+    text-decoration: underline;
+}
+
+.faq-answer a:hover {
+    color: var(--primary-dark);
+}
+
+footer {
+    text-align: center;
+    padding: 20px;
+    background: var(--card-background);
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    margin-top: 20px;
+}
+
+footer a {
+    color: var(--primary-color);
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+footer a:hover {
+    color: var(--primary-dark);
+}
+
+.copyright {
+    margin-top: 10px;
+    font-size: 0.8rem;
+    color: #666;
+}
+
+#loading {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    z-index: 2000;
+    display: none;
+}
+
+#loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 10px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+#progress-container {
+    width: 100%;
+    background: #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+    margin-top: 10px;
+}
+
+#progress-bar {
+    width: 0;
+    height: 10px;
+    background: var(--primary-color);
+    transition: width 0.3s;
+}
+
+#progress-info {
+    margin-top: 5px;
+    font-size: 0.8rem;
+    color: #fff;
+}
+
+#feedback-modal, #image-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+#feedback-content, #image-modal img {
+    background: var(--card-background);
+    padding: 20px;
+    border-radius: 10px;
+    max-width: 500px;
+    width: 90%;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#feedback-content textarea {
+    width: 100%;
+    min-height: 100px;
+    margin: 10px 0;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+#close-modal {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    color: #ff4444;
+}
+
+#currentTime, #weatherWidget {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+
+#weatherWidget i {
+    font-size: 1.2rem;
+}
+
+#debugInfo {
+    min-height: 1.2rem;
+}
+
+.alert {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--card-background);
+    padding: 10px 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    color: var(--primary-color);
+    z-index: 1000;
+    font-size: 0.9rem;
+}
+
+#fish-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+}
+
+.sakura {
+    position: fixed;
+    pointer-events: none;
+    z-index: 5;
+}